[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # FCB VIP Intern2Days App *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/wog5961-7200s-projects/v0-fcb-vip-intern2-days-app) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/xLuHKNdX7IZ) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/wog5961-7200s-projects/v0-fcb-vip-intern2-days-app](https://vercel.com/wog5961-7200s-projects/v0-fcb-vip-intern2-days-app)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/xLuHKNdX7IZ](https://v0.dev/chat/projects/xLuHKNdX7IZ)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/accounting-records/page.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Home, FileText, Trophy, TrendingUp, User, ArrowUpRight, ArrowDownLeft, Calculator, ArrowUp, ArrowDown, } from "lucide-react" import { Button } from "@/components/ui/button" import Link from "next/link" export default function AccountingRecordsPage() { const transactions = [ { id: 1, type: "deposit", amount: "KES 5,400", description: "J2 Package Investment", date: "2025-01-19", status: "completed", }, { id: 2, type: "earning", amount: "KES 180", description: "Daily Task Completion", date: "2025-01-19", status: "completed", }, { id: 3, type: "referral", amount: "KES 594", description: "Level 1 Referral Bonus", date: "2025-01-18", status: "completed", }, { id: 4, type: "withdrawal", amount: "KES 300", description: "M-Pesa Withdrawal", date: "2025-01-17", status: "pending", }, { id: 5, type: "earning", amount: "KES 180", description: "Daily Task Completion", date: "2025-01-17", status: "completed", }, ] const getTransactionIcon = (type: string) => { switch (type) { case "deposit": return case "withdrawal": return case "earning": return case "referral": return default: return } } const getStatusColor = (status: string) => { switch (status) { case "completed": return "bg-green-100 text-green-800" case "pending": return "bg-orange-100 text-orange-800" case "failed": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } const totalDeposits = transactions .filter((t) => t.type === "deposit") .reduce((sum, t) => sum + Number.parseInt(t.amount.replace("KES ", "").replace(",", "")), 0) const totalEarnings = transactions .filter((t) => t.type === "earning" || t.type === "referral") .reduce((sum, t) => sum + Number.parseInt(t.amount.replace("KES ", "").replace(",", "")), 0) const totalWithdrawals = transactions .filter((t) => t.type === "withdrawal") .reduce((sum, t) => sum + Number.parseInt(t.amount.replace("KES ", "").replace(",", "")), 0) return (
{/* Header */}
Accounting Records

{/* Summary Stats */}
KES {totalDeposits.toLocaleString()}
Total Deposits
KES {totalEarnings.toLocaleString()}
Total Earnings
KES {totalWithdrawals.toLocaleString()}
Withdrawals
{/* Transaction History */} Transaction History
{transactions.map((transaction) => (
{getTransactionIcon(transaction.type)}
{transaction.description}
{transaction.date}
{transaction.type === "withdrawal" ? "-" : "+"} {transaction.amount}
{transaction.status}
))}
{/* Bottom Navigation */}
Home Task VIP Profits Withdraw Deposit My
) } [V0_FILE]typescriptreact:file="app/admin/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/company-profile/page.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, Home, FileText, Trophy, TrendingUp, User, Building } from "lucide-react" import Link from "next/link" export default function CompanyProfilePage() { return (
{/* Header */}
Company Profile

FCB VIP Intern2Days
About Us

FCB VIP Intern2Days is a leading investment and affiliate marketing platform that provides opportunities for users to earn daily profits through task completion and referral programs.
Our Mission

To provide sustainable earning opportunities for our members through innovative investment packages and rewarding task-based activities.
Contact Information

Admin: George Wiswa
Phone: 0782192086
Customer Care: t.me/Carefbc
{/* Bottom Navigation */}
Home Task VIP Profits My
) } [V0_FILE]typescriptreact:file="app/daily-statement/page.tsx" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, Home, FileText, Trophy, TrendingUp, User, ArrowUpRight, ArrowDownLeft, Calendar, } from "lucide-react" import { Button } from "@/components/ui/button" import Link from "next/link" export default function DailyStatementPage() { const dailyData = [ { date: "2025-01-19", tasks: 2, earnings: "KES 20", referrals: "KES 0", total: "KES 20" }, { date: "2025-01-18", tasks: 3, earnings: "KES 30", referrals: "KES 15", total: "KES 45" }, { date: "2025-01-17", tasks: 1, earnings: "KES 10", referrals: "KES 0", total: "KES 10" }, { date: "2025-01-16", tasks: 2, earnings: "KES 20", referrals: "KES 25", total: "KES 45" }, { date: "2025-01-15", tasks: 4, earnings: "KES 40", referrals: "KES 10", total: "KES 50" }, ] const totalEarnings = dailyData.reduce((sum, day) => sum + Number.parseInt(day.total.replace("KES ", "")), 0) return (
{/* Header */}
Daily Statement

{/* Summary Card */} Weekly Summary
KES {totalEarnings}
Total Earnings This Week
{/* Daily Breakdown */} Daily Breakdown
{dailyData.map((day, index) => (
{day.date}
{day.total}
{day.tasks}
Tasks
{day.earnings}
Task Earnings
{day.referrals}
Referrals
))}
{/* Bottom Navigation */}
Home Task VIP Profits Withdraw Deposit My
) } [V0_FILE]typescriptreact:file="app/debug/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { DatabaseService } from "@/lib/database" import { supabase } from "@/lib/supabase-client" export default function DebugPage() { const [results, setResults] = useState("") const [testPhone, setTestPhone] = useState("+254712345678") const [testPassword, setTestPassword] = useState("password123") const addResult = (message: string) => { setResults((prev) => prev + "\n" + new Date().toLocaleTimeString() + ": " + message) } const testDatabaseConnection = async () => { addResult("=== Testing Database Connection ===") try { const { data, error } = await supabase.from("users").select("count", { count: "exact", head: true }) if (error) { addResult(`Database connection failed: ${error.message}`) } else { addResult(`Database connection successful. Users count: ${data}`) } } catch (error) { addResult(`Database connection error: ${error}`) } } const listAllUsers = async () => { addResult("=== Listing All Users ===") try { const users = await DatabaseService.getAllUsers() addResult(`Found ${users.length} users:`) users.forEach((user) => { addResult(`- ID: ${user.id}, Phone: ${user.phone}, Name: ${user.name || "N/A"}, Active: ${user.is_active}`) }) } catch (error) { addResult(`Error listing users: ${error}`) } } const testUserLookup = async () => { addResult("=== Testing User Lookup ===") try { const user = await DatabaseService.getUserByPhone(testPhone) if (user) { addResult(`User found: ID=${user.id}, Phone=${user.phone}, Active=${user.is_active}`) } else { addResult(`No user found with phone: ${testPhone}`) } } catch (error) { addResult(`User lookup error: ${error}`) } } const testAuthentication = async () => { addResult("=== Testing Authentication ===") try { const user = await DatabaseService.authenticateUser(testPhone, testPassword) if (user) { addResult(`Authentication successful: ID=${user.id}, Phone=${user.phone}`) } else { addResult(`Authentication failed for phone: ${testPhone}`) } } catch (error) { addResult(`Authentication error: ${error}`) } } const createTestUser = async () => { addResult("=== Creating Test User ===") try { const referralCode = await DatabaseService.generateUniqueReferralCode() const user = await DatabaseService.createUser({ phone: testPhone, name: "Test User", password: testPassword, referral_code: referralCode, }) if (user) { addResult(`Test user created: ID=${user.id}, Phone=${user.phone}, Code=${user.referral_code}`) } else { addResult("Failed to create test user") } } catch (error) { addResult(`Create user error: ${error}`) } } return (
FCB VIP App Debug Console
Test Phone Number setTestPhone(e.target.value)} placeholder="+254712345678" />
Test Password setTestPassword(e.target.value)} placeholder="password123" />
Debug Results:
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/download/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  ArrowLeft,
  Download,
  Smartphone,
  Globe,
  Star,
  Shield,
  Zap,
  Users,
  CheckCircle,
  Info,
  ExternalLink,
} from "lucide-react"
import Link from "next/link"

export default function DownloadPage() {
  const [downloadStarted, setDownloadStarted] = useState(false)

  const handleDownload = (platform) => {
    setDownloadStarted(true)

    // Simulate download process
    setTimeout(() => {
      if (platform === "android") {
        // In a real app, this would trigger the actual APK download
        alert("Android APK download will start shortly. Please enable 'Install from Unknown Sources' in your settings.")
      } else if (platform === "web") {
        // Add to home screen functionality
        alert("To install the web app: Tap the share button in your browser and select 'Add to Home Screen'")
      }
      setDownloadStarted(false)
    }, 2000)
  }

  const features = [
    { icon: Zap, title: "Fast & Secure", description: "Lightning-fast transactions with bank-level security" },
    { icon: Users, title: "Referral System", description: "Earn money by inviting friends to join FCB" },
    { icon: Star, title: "VIP Packages", description: "Multiple investment packages with daily returns" },
    { icon: Shield, title: "Secure Payments", description: "M-Pesa integration with admin verification" },
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div className="flex items-center space-x-2">
            <img src="/fcb-logo.jpg" alt="FCB Logo" className="h-8 w-8 rounded" />
            <div>
              <h1 className="text-xl font-bold">Download FCB App</h1>
              <p className="text-sm opacity-90">Get the mobile app for better experience</p>
            </div>
          </div>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* App Info */}
        <Card className="bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
          <CardContent className="p-6 text-center">
            <div className="mb-4">
              <img src="/fcb-logo.jpg" alt="FCB Logo" className="h-16 w-16 rounded-lg mx-auto mb-3" />
              <h2 className="text-2xl font-bold text-gray-800">FCB VIP App</h2>
              <p className="text-gray-600">Your gateway to financial freedom</p>
            </div>
            <div className="flex justify-center space-x-4 text-sm">
              <Badge className="bg-green-100 text-green-800">
                <Star className="h-3 w-3 mr-1" />
                4.8 Rating
              </Badge>
              <Badge className="bg-blue-100 text-blue-800">
                <Download className="h-3 w-3 mr-1" />
                10K+ Downloads
              </Badge>
              <Badge className="bg-purple-100 text-purple-800">
                <Shield className="h-3 w-3 mr-1" />
                Secure
              </Badge>
            </div>
          </CardContent>
        </Card>

        {/* Download Options */}
        <div className="space-y-4">
          <h3 className="text-lg font-bold text-gray-800">Choose Your Platform</h3>

          {/* Android Download */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="bg-green-100 p-2 rounded-lg">
                    <Smartphone className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <div className="font-bold">Android App</div>
                    <div className="text-sm text-gray-600">Download APK file (Latest Version 2.1.0)</div>
                  </div>
                </div>
                <Button
                  onClick={() => handleDownload("android")}
                  disabled={downloadStarted}
                  className="bg-green-600 hover:bg-green-700"
                >
                  {downloadStarted ? "Downloading..." : "Download APK"}
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Web App */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="bg-blue-100 p-2 rounded-lg">
                    <Globe className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <div className="font-bold">Web App</div>
                    <div className="text-sm text-gray-600">Install as Progressive Web App (PWA)</div>
                  </div>
                </div>
                <Button
                  onClick={() => handleDownload("web")}
                  disabled={downloadStarted}
                  variant="outline"
                  className="border-blue-600 text-blue-600 hover:bg-blue-50"
                >
                  Add to Home
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Installation Instructions */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Info className="h-5 w-5 mr-2" />
              Installation Guide
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="bg-orange-50 p-4 rounded-lg">
              <h4 className="font-medium mb-2 text-orange-800">For Android APK:</h4>
              <ol className="list-decimal list-inside space-y-1 text-sm text-orange-700">
                <li>Download the APK file</li>
                <li>Go to Settings → Security → Enable "Unknown Sources"</li>
                <li>Open the downloaded APK file</li>
                <li>Tap "Install" and wait for completion</li>
                <li>Open the FCB app and log in</li>
              </ol>
            </div>

            <div className="bg-blue-50 p-4 rounded-lg">
              <h4 className="font-medium mb-2 text-blue-800">For Web App (PWA):</h4>
              <ol className="list-decimal list-inside space-y-1 text-sm text-blue-700">
                <li>Open FCB website in your browser</li>
                <li>Tap the share/menu button</li>
                <li>Select "Add to Home Screen"</li>
                <li>Confirm installation</li>
                <li>Access FCB from your home screen</li>
              </ol>
            </div>
          </CardContent>
        </Card>

        {/* App Features */}
        <Card>
          <CardHeader>
            <CardTitle>Why Download FCB App?</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {features.map((feature, index) => (
                <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
                  <div className="bg-blue-100 p-2 rounded-lg">
                    <feature.icon className="h-5 w-5 text-blue-600" />
                  </div>
                  <div>
                    <div className="font-medium">{feature.title}</div>
                    <div className="text-sm text-gray-600">{feature.description}</div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* System Requirements */}
        <Card>
          <CardHeader>
            <CardTitle>System Requirements</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex justify-between items-center p-2 bg-gray-50 rounded">
              <span className="text-sm font-medium">Android Version:</span>
              <span className="text-sm">5.0 or higher</span>
            </div>
            <div className="flex justify-between items-center p-2 bg-gray-50 rounded">
              <span className="text-sm font-medium">Storage Space:</span>
              <span className="text-sm">25 MB</span>
            </div>
            <div className="flex justify-between items-center p-2 bg-gray-50 rounded">
              <span className="text-sm font-medium">Internet:</span>
              <span className="text-sm">Required</span>
            </div>
            <div className="flex justify-between items-center p-2 bg-gray-50 rounded">
              <span className="text-sm font-medium">Permissions:</span>
              <span className="text-sm">Camera, Storage, Phone</span>
            </div>
          </CardContent>
        </Card>

        {/* Support */}
        <Card className="bg-green-50 border-green-200">
          <CardContent className="p-4">
            <div className="flex items-center space-x-3">
              <CheckCircle className="h-5 w-5 text-green-600" />
              <div>
                <div className="font-medium text-green-800">Need Help?</div>
                <div className="text-sm text-green-600">
                  Contact our support team at{" "}
                  <a
                    href="https://t.me/Carefbc"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="font-medium hover:underline"
                  >
                    t.me/Carefbc
                  </a>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Alternative Access */}
        <Alert>
          <ExternalLink className="h-4 w-4" />
          <AlertDescription>
            <strong>Already using the web version?</strong> You can continue using FCB directly in your browser without
            downloading the app.
          </AlertDescription>
        </Alert>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
[V0_FILE]typescriptreact:file="app/helpbook/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import {
  ArrowLeft,
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  ArrowUpRight,
  ArrowDownLeft,
  HelpCircle,
  MessageCircle,
  Phone,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function HelpbookPage() {
  const faqItems = [
    {
      question: "How do I start earning?",
      answer:
        "Register, choose an investment package (J1-J7), complete daily tasks, and earn daily profits plus referral bonuses.",
    },
    {
      question: "What are the withdrawal requirements?",
      answer:
        "Minimum withdrawal is KES 120. You must complete a recharge before withdrawing. Withdrawals are processed Monday-Saturday, 9:30 AM to 5:00 PM.",
    },
    {
      question: "How does the referral system work?",
      answer:
        "Earn 11% from Level 1 referrals, 3% from Level 2, and 1% from Level 3. Share your referral code to invite friends.",
    },
    {
      question: "How do I make a deposit?",
      answer:
        "Send M-Pesa payment to 0782192086 (George Wiswa), then paste the confirmation message in the app for verification.",
    },
    {
      question: "What are the investment packages?",
      answer:
        "J1 (KES 2,100), J2 (KES 5,400), J3 (KES 10,500), J4 (KES 18,000), J5 (KES 39,000), J6 (KES 96,000), J7 (KES 150,000).",
    },
    {
      question: "How often can I complete tasks?",
      answer:
        "Task frequency depends on your package level. Intern: 2 times daily, J1: 4 times, J2: 6 times, J3: 8 times, etc.",
    },
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h1 className="text-xl font-bold">Helpbook</h1>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Contact Support */}
        <Card className="bg-gradient-to-r from-green-50 to-blue-50">
          <CardHeader>
            <CardTitle className="flex items-center text-green-800">
              <MessageCircle className="h-5 w-5 mr-2" />
              Need Immediate Help?
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <a href="https://t.me/Carefbc" target="_blank" rel="noopener noreferrer" className="block">
              <Button className="w-full bg-blue-600 hover:bg-blue-700">
                <MessageCircle className="h-4 w-4 mr-2" />
                Contact Customer Care
              </Button>
            </a>
            <div className="text-center text-sm text-gray-600">
              <div className="flex items-center justify-center space-x-2">
                <Phone className="h-4 w-4" />
                <span>Admin: George Wiswa - 0782192086</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* FAQ Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <HelpCircle className="h-5 w-5 mr-2" />
              Frequently Asked Questions
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {faqItems.map((item, index) => (
                <div key={index} className="border rounded-lg p-4">
                  <div className="font-semibold text-blue-800 mb-2">{item.question}</div>
                  <div className="text-sm text-gray-700 leading-relaxed">{item.answer}</div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Quick Links */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <Link href="/recharge">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <ArrowUpRight className="h-4 w-4 mr-2" />
                Make a Deposit
              </Button>
            </Link>
            <Link href="/withdraw">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <ArrowDownLeft className="h-4 w-4 mr-2" />
                Request Withdrawal
              </Button>
            </Link>
            <Link href="/invite-friends">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <User className="h-4 w-4 mr-2" />
                Invite Friends
              </Button>
            </Link>
            <Link href="/vip">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <Trophy className="h-4 w-4 mr-2" />
                View Packages
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/invite-friends/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  ArrowLeft,
  Share2,
  Copy,
  Users,
  Gift,
  MessageCircle,
  Send,
  Twitter,
  Facebook,
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  ArrowUpRight,
  ArrowDownLeft,
  Lock,
  Unlock,
  CheckCircle,
  AlertTriangle,
} from "lucide-react"
import Link from "next/link"

export default function InviteFriendsPage() {
  const [userReferralCode, setUserReferralCode] = useState("FCB123456")
  const [referralLink, setReferralLink] = useState("")
  const [invitedUsers, setInvitedUsers] = useState([])
  const [referralEarnings, setReferralEarnings] = useState(0)
  const [hasClaimedBonus, setHasClaimedBonus] = useState(false)
  const [showClaimDialog, setShowClaimDialog] = useState(false)
  const [referralCodeInput, setReferralCodeInput] = useState("")
  const [copySuccess, setCopySuccess] = useState(false)
  const [userVipInvestment, setUserVipInvestment] = useState(0)
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)

    // Generate referral link with current domain
    const currentDomain = window.location.origin
    const link = `${currentDomain}/register?ref=${userReferralCode}`
    setReferralLink(link)

    // Load data from localStorage
    const savedReferralCode = localStorage.getItem("userReferralCode")
    const savedInvitedUsers = localStorage.getItem("invitedUsers")
    const savedReferralEarnings = localStorage.getItem("referralEarnings")
    const savedHasClaimedBonus = localStorage.getItem("hasClaimedReferralBonus")
    const savedVipInvestment = localStorage.getItem("userVipInvestment")

    if (savedReferralCode) {
      setUserReferralCode(savedReferralCode)
      const newLink = `${currentDomain}/register?ref=${savedReferralCode}`
      setReferralLink(newLink)
    }
    if (savedInvitedUsers) {
      const users = JSON.parse(savedInvitedUsers)
      setInvitedUsers(users.filter((user) => user.referrerCode === (savedReferralCode || userReferralCode)))
    }
    if (savedReferralEarnings) {
      setReferralEarnings(Number.parseFloat(savedReferralEarnings))
    }
    if (savedHasClaimedBonus) {
      setHasClaimedBonus(JSON.parse(savedHasClaimedBonus))
    }
    if (savedVipInvestment) {
      setUserVipInvestment(Number.parseFloat(savedVipInvestment))
    }
  }, [userReferralCode])

  const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text)
      setCopySuccess(true)
      setTimeout(() => setCopySuccess(false), 2000)
    } catch (err) {
      // Fallback for older browsers
      const textArea = document.createElement("textarea")
      textArea.value = text
      document.body.appendChild(textArea)
      textArea.select()
      document.execCommand("copy")
      document.body.removeChild(textArea)
      setCopySuccess(true)
      setTimeout(() => setCopySuccess(false), 2000)
    }
  }

  const shareViaWhatsApp = () => {
    const message = `🚀 Join FCB VIP Intern2Days and start earning money online!

💰 Multi-level referral bonuses:
• Level 1: 11% of investment
• Level 2: 3% of investment  
• Level 3: 1% of investment

📱 Use my referral code: ${userReferralCode}

Join now: ${referralLink}

#MakeMoneyOnline #FCBIntern #EarnDaily`

    const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(message)}`
    window.open(whatsappUrl, "_blank")
  }

  const shareViaTelegram = () => {
    const message = `🚀 Join FCB VIP Intern2Days and start earning!

💰 Multi-level referral bonuses:
• Level 1: 11% of investment
• Level 2: 3% of investment  
• Level 3: 1% of investment

🎁 Use my code: ${userReferralCode}

${referralLink}`

    const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(referralLink)}&text=${encodeURIComponent(message)}`
    window.open(telegramUrl, "_blank")
  }

  const shareViaTwitter = () => {
    const message = `🚀 Join FCB VIP Intern2Days and start earning money online! 💰 Multi-level referral bonuses! Use my referral code: ${userReferralCode}`
    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(message)}&url=${encodeURIComponent(referralLink)}`
    window.open(twitterUrl, "_blank")
  }

  const shareViaFacebook = () => {
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(referralLink)}`
    window.open(facebookUrl, "_blank")
  }

  const claimReferralBonus = () => {
    if (referralCodeInput !== userReferralCode) {
      alert("Invalid referral code! Please enter your own referral code.")
      return
    }

    if (invitedUsers.length === 0) {
      alert("You haven't invited anyone yet!")
      return
    }

    if (hasClaimedBonus) {
      alert("You have already claimed your referral bonus!")
      return
    }

    // Calculate bonus (11% of VIP investment for Level 1)
    const bonusAmount = userVipInvestment * 0.11
    const currentBalance = Number.parseFloat(localStorage.getItem("userBalance") || "0")
    const newBalance = currentBalance + bonusAmount
    const newReferralEarnings = referralEarnings + bonusAmount

    // Update localStorage
    localStorage.setItem("userBalance", newBalance.toString())
    localStorage.setItem("referralEarnings", newReferralEarnings.toString())
    localStorage.setItem("hasClaimedReferralBonus", "true")

    // Update state
    setReferralEarnings(newReferralEarnings)
    setHasClaimedBonus(true)
    setShowClaimDialog(false)
    setReferralCodeInput("")

    alert(`🎉 Congratulations! You earned KES ${bonusAmount.toFixed(2)} from ${invitedUsers.length} referral(s)!`)
  }

  const canClaimBonus = invitedUsers.length > 0 && !hasClaimedBonus
  const potentialEarnings = userVipInvestment * 0.11

  // Don't render until client-side hydration is complete
  if (!isClient) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <Link href="/dashboard">
              <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <h1 className="text-xl font-bold">Invite Friends</h1>
          </div>
          <div className="text-right">
            <div className="text-sm opacity-90">Referral Earnings</div>
            <div className="text-lg font-bold">KES {referralEarnings.toFixed(2)}</div>
          </div>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Referral Stats */}
        <div className="grid grid-cols-2 gap-4">
          <Card className="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
            <CardContent className="p-4 text-center">
              <Users className="h-8 w-8 mx-auto mb-2" />
              <div className="text-2xl font-bold">{invitedUsers.length}</div>
              <div className="text-sm opacity-90">Friends Invited</div>
            </CardContent>
          </Card>
          <Card className="bg-gradient-to-r from-green-500 to-blue-500 text-white">
            <CardContent className="p-4 text-center">
              <Gift className="h-8 w-8 mx-auto mb-2" />
              <div className="text-2xl font-bold">KES {potentialEarnings.toFixed(0)}</div>
              <div className="text-sm opacity-90">Level 1 Bonus (11%)</div>
            </CardContent>
          </Card>
        </div>

        {/* Multi-Level Bonus Info */}
        <Card className="bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
          <CardHeader>
            <CardTitle className="text-orange-800 flex items-center">
              <Trophy className="h-5 w-5 mr-2" />
              Multi-Level Referral Bonuses
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="grid grid-cols-3 gap-3">
              <div className="text-center p-3 bg-white rounded-lg border">
                <div className="text-2xl font-bold text-green-600">11%</div>
                <div className="text-sm text-gray-600">Level 1</div>
                <div className="text-xs text-gray-500">Direct Referrals</div>
              </div>
              <div className="text-center p-3 bg-white rounded-lg border">
                <div className="text-2xl font-bold text-blue-600">3%</div>
                <div className="text-sm text-gray-600">Level 2</div>
                <div className="text-xs text-gray-500">2nd Generation</div>
              </div>
              <div className="text-center p-3 bg-white rounded-lg border">
                <div className="text-2xl font-bold text-purple-600">1%</div>
                <div className="text-sm text-gray-600">Level 3</div>
                <div className="text-xs text-gray-500">3rd Generation</div>
              </div>
            </div>
            <Alert className="border-orange-200 bg-orange-50">
              <AlertTriangle className="h-4 w-4 text-orange-600" />
              <AlertDescription className="text-orange-800 text-sm">
                Earn bonuses from multiple levels! When your referrals invite others, you earn from their investments
                too.
              </AlertDescription>
            </Alert>
          </CardContent>
        </Card>

        {/* Referral Code */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Share2 className="h-5 w-5 mr-2" />
              Your Referral Code
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>Referral Code</Label>
              <div className="flex space-x-2">
                <Input value={userReferralCode} readOnly className="font-mono text-lg" />
                <Button
                  variant="outline"
                  onClick={() => copyToClipboard(userReferralCode)}
                  className={copySuccess ? "bg-green-100 text-green-700" : ""}
                >
                  {copySuccess ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
            </div>

            <div className="space-y-2">
              <Label>Referral Link</Label>
              <div className="flex space-x-2">
                <Input value={referralLink} readOnly className="text-sm" />
                <Button
                  variant="outline"
                  onClick={() => copyToClipboard(referralLink)}
                  className={copySuccess ? "bg-green-100 text-green-700" : ""}
                >
                  {copySuccess ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
            </div>

            {copySuccess && (
              <Alert className="border-green-200 bg-green-50">
                <CheckCircle className="h-4 w-4 text-green-600" />
                <AlertDescription className="text-green-800">
                  Copied to clipboard! Share it with your friends.
                </AlertDescription>
              </Alert>
            )}
          </CardContent>
        </Card>

        {/* Share Options */}
        <Card>
          <CardHeader>
            <CardTitle>Share with Friends</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-3">
              <Button onClick={shareViaWhatsApp} className="bg-green-600 hover:bg-green-700">
                <MessageCircle className="h-4 w-4 mr-2" />
                WhatsApp
              </Button>
              <Button onClick={shareViaTelegram} className="bg-blue-500 hover:bg-blue-600">
                <Send className="h-4 w-4 mr-2" />
                Telegram
              </Button>
              <Button onClick={shareViaTwitter} className="bg-sky-500 hover:bg-sky-600">
                <Twitter className="h-4 w-4 mr-2" />
                Twitter
              </Button>
              <Button onClick={shareViaFacebook} className="bg-blue-700 hover:bg-blue-800">
                <Facebook className="h-4 w-4 mr-2" />
                Facebook
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Referral Bonus */}
        <Card
          className={`${canClaimBonus ? "bg-green-50 border-green-200" : hasClaimedBonus ? "bg-gray-50 border-gray-200" : "bg-orange-50 border-orange-200"}`}
        >
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span className="flex items-center">
                <Gift className="h-5 w-5 mr-2" />
                Level 1 Referral Bonus
              </span>
              {canClaimBonus ? (
                <Unlock className="h-5 w-5 text-green-600" />
              ) : (
                <Lock className="h-5 w-5 text-gray-500" />
              )}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <div className="text-center">
                <div className="text-2xl font-bold text-green-600">KES {potentialEarnings.toFixed(2)}</div>
                <div className="text-sm text-gray-600">11% of your VIP investment</div>
              </div>

              {hasClaimedBonus ? (
                <Alert className="border-gray-200 bg-gray-50">
                  <CheckCircle className="h-4 w-4 text-gray-600" />
                  <AlertDescription className="text-gray-700">
                    You have already claimed your Level 1 referral bonus of KES {referralEarnings.toFixed(2)}
                  </AlertDescription>
                </Alert>
              ) : invitedUsers.length === 0 ? (
                <Alert className="border-orange-200 bg-orange-50">
                  <AlertTriangle className="h-4 w-4 text-orange-600" />
                  <AlertDescription className="text-orange-800">
                    Invite friends using your referral link to unlock bonus earnings!
                  </AlertDescription>
                </Alert>
              ) : (
                <Alert className="border-green-200 bg-green-50">
                  <CheckCircle className="h-4 w-4 text-green-600" />
                  <AlertDescription className="text-green-800">
                    Great! You can now claim your Level 1 referral bonus. Enter your referral code to unlock.
                  </AlertDescription>
                </Alert>
              )}

              <Dialog open={showClaimDialog} onOpenChange={setShowClaimDialog}>
                <DialogTrigger asChild>
                  <Button className="w-full" disabled={!canClaimBonus} variant={canClaimBonus ? "default" : "outline"}>
                    {hasClaimedBonus
                      ? "Bonus Already Claimed"
                      : canClaimBonus
                        ? "Claim Level 1 Bonus"
                        : "No Referrals Yet"}
                  </Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle className="flex items-center">
                      <Gift className="h-5 w-5 mr-2 text-green-600" />
                      Claim Level 1 Referral Bonus
                    </DialogTitle>
                    <DialogDescription>
                      Enter your referral code to claim KES {potentialEarnings.toFixed(2)} bonus (11% of your VIP
                      investment)
                    </DialogDescription>
                  </DialogHeader>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="claimCode">Your Referral Code</Label>
                      <Input
                        id="claimCode"
                        value={referralCodeInput}
                        onChange={(e) => setReferralCodeInput(e.target.value)}
                        placeholder="Enter your referral code"
                        className="font-mono"
                      />
                    </div>
                    <Alert className="border-blue-200 bg-blue-50">
                      <AlertTriangle className="h-4 w-4 text-blue-600" />
                      <AlertDescription className="text-blue-800">
                        This Level 1 bonus can only be claimed once. Level 2 and 3 bonuses are automatic when your
                        referrals invite others.
                      </AlertDescription>
                    </Alert>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setShowClaimDialog(false)}>
                      Cancel
                    </Button>
                    <Button onClick={claimReferralBonus} className="bg-green-600 hover:bg-green-700">
                      Claim KES {potentialEarnings.toFixed(2)}
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </CardContent>
        </Card>

        {/* Invited Friends List */}
        {invitedUsers.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Your Level 1 Referrals ({invitedUsers.length})</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {invitedUsers.map((user, index) => (
                  <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center space-x-3">
                      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <User className="h-4 w-4 text-blue-600" />
                      </div>
                      <div>
                        <div className="font-medium">{user.phone}</div>
                        <div className="text-xs text-gray-500">Joined: {user.joinDate}</div>
                      </div>
                    </div>
                    <Badge className="bg-green-100 text-green-800">Level 1</Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        )}

        {/* How it Works */}
        <Card className="bg-blue-50 border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-800">How Multi-Level Referrals Work</CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-blue-700 space-y-2">
            <div className="flex items-start space-x-2">
              <div className="w-6 h-6 bg-blue-200 rounded-full flex items-center justify-center text-xs font-bold">
                1
              </div>
              <div>Share your referral link or code with friends</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-6 h-6 bg-green-200 rounded-full flex items-center justify-center text-xs font-bold">
                2
              </div>
              <div>When they register and invest, you earn 11% Level 1 bonus</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-6 h-6 bg-yellow-200 rounded-full flex items-center justify-center text-xs font-bold">
                3
              </div>
              <div>When your referrals invite others, you earn 3% Level 2 bonus</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-6 h-6 bg-purple-200 rounded-full flex items-center justify-center text-xs font-bold">
                4
              </div>
              <div>From 3rd generation referrals, you earn 1% Level 3 bonus</div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">Profile</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { FloatingCustomerCare } from "@/components/floating-customer-care"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "FCB VIP Intern2Days",
  description: "Investment & Affiliate Platform",
    generator: 'v0.dev'
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <FloatingCustomerCare />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/profits/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Home, FileText, Trophy, TrendingUp, User, ArrowUpRight, ArrowDownLeft } from "lucide-react"
import Link from "next/link"

export default function ProfitsPage() {
  const referralBonusData = [
    { level: "J1 - Starter", deposit: "2,100", level1: "231", level2: "63", level3: "21" },
    { level: "J2 - Bronze", deposit: "5,400", level1: "594", level2: "162", level3: "54" },
    { level: "J3 - Silver", deposit: "10,500", level1: "1,155", level2: "315", level3: "105" },
    { level: "J4 - Gold", deposit: "18,000", level1: "1,980", level2: "540", level3: "180" },
    { level: "J5 - Platinum", deposit: "39,000", level1: "4,290", level2: "1,170", level3: "390" },
    { level: "J6 - Diamond", deposit: "96,000", level1: "10,560", level2: "2,880", level3: "960" },
    { level: "J7 - Crown Elite", deposit: "150,000", level1: "16,500", level2: "4,500", level3: "1,500" },
  ]

  const taskRebateData = [
    { level: "J1", daily: "70", l1: "2.10", l2: "1.40", l3: "0.70" },
    { level: "J2", daily: "180", l1: "5.40", l2: "3.60", l3: "1.80" },
    { level: "J3", daily: "350", l1: "10.50", l2: "7.00", l3: "3.50" },
    { level: "J4", daily: "600", l1: "18.00", l2: "12.00", l3: "6.00" },
    { level: "J5", daily: "1,300", l1: "39.00", l2: "26.00", l3: "13.00" },
    { level: "J6", daily: "3,200", l1: "96.00", l2: "64.00", l3: "32.00" },
    { level: "J7", daily: "5,000", l1: "150.00", l2: "100.00", l3: "50.00" },
  ]

  const investmentEarningsData = [
    { level: "J1 - Starter", deposit: "2,100", daily: "70", monthly: "2,100", yearly: "25,550" },
    { level: "J2 - Bronze", deposit: "5,400", daily: "180", monthly: "5,400", yearly: "65,700" },
    { level: "J3 - Silver", deposit: "10,500", daily: "350", monthly: "10,500", yearly: "127,750" },
    { level: "J4 - Gold", deposit: "18,000", daily: "600", monthly: "18,000", yearly: "219,000" },
    { level: "J5 - Platinum", deposit: "39,000", daily: "1,300", monthly: "39,000", yearly: "474,500" },
    { level: "J6 - Diamond", deposit: "96,000", daily: "3,200", monthly: "96,000", yearly: "1,168,000" },
    { level: "J7 - Crown Elite", deposit: "150,000", daily: "5,000", monthly: "150,000", yearly: "1,825,000" },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-100 via-blue-50 to-purple-100">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 text-white p-6">
        <h1 className="text-2xl font-bold text-center mb-4">Profit Information</h1>
        <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
          <p className="text-sm leading-relaxed">
            Comprehensive profit breakdown showing referral bonuses, task rebates, and investment earnings across all
            job levels.
          </p>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Referral Bonus Table */}
        <Card>
          <CardHeader className="bg-gradient-to-r from-blue-400 to-cyan-400 text-white">
            <CardTitle className="text-center text-lg">Referral Bonus Table (Levels 1, 2, 3)</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-blue-500 text-white">
                  <tr>
                    <th className="p-3 text-left font-semibold">Job Level</th>
                    <th className="p-3 text-left font-semibold">Deposit (KSh)</th>
                    <th className="p-3 text-left font-semibold">Level 1 (11%)</th>
                    <th className="p-3 text-left font-semibold">Level 2 (3%)</th>
                    <th className="p-3 text-left font-semibold">Level 3 (1%)</th>
                  </tr>
                </thead>
                <tbody>
                  {referralBonusData.map((row, index) => (
                    <tr key={index} className={index % 2 === 0 ? "bg-blue-50" : "bg-white"}>
                      <td className="p-3 font-medium">{row.level}</td>
                      <td className="p-3">{row.deposit}</td>
                      <td className="p-3 text-green-600 font-semibold">{row.level1}</td>
                      <td className="p-3 text-blue-600 font-semibold">{row.level2}</td>
                      <td className="p-3 text-purple-600 font-semibold">{row.level3}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

        {/* Task Rebate Table */}
        <Card>
          <CardHeader className="bg-gradient-to-r from-gray-800 to-black text-white">
            <CardTitle className="text-center text-lg flex items-center justify-center">
              <span className="text-yellow-400 mr-2">⭐</span>
              Task Rebate Table (Daily Earnings)
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 bg-gray-900">
            <div className="overflow-x-auto">
              <table className="w-full text-sm text-white">
                <thead className="bg-gray-800">
                  <tr>
                    <th className="p-3 text-left font-semibold">Lvl</th>
                    <th className="p-3 text-left font-semibold">💰Daily</th>
                    <th className="p-3 text-left font-semibold">🟡3% (L1)</th>
                    <th className="p-3 text-left font-semibold">🟠2% (L2)</th>
                    <th className="p-3 text-left font-semibold">🔵1% (L3)</th>
                  </tr>
                </thead>
                <tbody>
                  {taskRebateData.map((row, index) => (
                    <tr key={index} className="border-b border-gray-700">
                      <td className="p-3 font-bold text-yellow-400">{row.level}</td>
                      <td className="p-3 font-semibold">{row.daily}</td>
                      <td className="p-3 text-yellow-400 font-semibold">{row.l1}</td>
                      <td className="p-3 text-orange-400 font-semibold">{row.l2}</td>
                      <td className="p-3 text-blue-400 font-semibold">{row.l3}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

        {/* Investment Earnings Table */}
        <Card>
          <CardHeader className="bg-gradient-to-r from-green-400 to-emerald-400 text-white">
            <CardTitle className="text-center text-lg">
              Job Level Investment Earnings (Daily, Monthly, Yearly)
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 bg-green-50">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="bg-green-500 text-white">
                  <tr>
                    <th className="p-3 text-left font-semibold">Job Level</th>
                    <th className="p-3 text-left font-semibold">Deposit (KSh)</th>
                    <th className="p-3 text-left font-semibold">Daily</th>
                    <th className="p-3 text-left font-semibold">30 Days</th>
                    <th className="p-3 text-left font-semibold">365 Days</th>
                  </tr>
                </thead>
                <tbody>
                  {investmentEarningsData.map((row, index) => (
                    <tr key={index} className={index % 2 === 0 ? "bg-green-100" : "bg-white"}>
                      <td className="p-3 font-medium">{row.level}</td>
                      <td className="p-3 font-semibold">{row.deposit}</td>
                      <td className="p-3 text-green-700 font-semibold">{row.daily}</td>
                      <td className="p-3 text-green-600 font-semibold">{row.monthly}</td>
                      <td className="p-3 text-green-800 font-semibold">{row.yearly}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-blue-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/recharge/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/recharge/page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Copy, CheckCircle } from "lucide-react"
import Link from "next/link"

export default function RechargePage() {
  const [selectedPackage, setSelectedPackage] = useState("")
  const [mpesaMessage, setMpesaMessage] = useState("")
  const [copied, setCopied] = useState(false)

  const adminPhone = "0782192086"
  const adminName = "George Wiswa"

  const packages = [
    { id: "j1", name: "J1", amount: 2100, daily: 70 },
    { id: "j2", name: "J2", amount: 5400, daily: 180 },
    { id: "j3", name: "J3", amount: 10500, daily: 350 },
    { id: "j4", name: "J4", amount: 18000, daily: 600 },
    { id: "j5", name: "J5", amount: 39000, daily: 1300 },
    { id: "j6", name: "J6", amount: 96000, daily: 3200 },
  ]

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const handleSubmitDeposit = () => {
    if (!selectedPackage || !mpesaMessage.trim()) {
      alert("Please select a package and paste your M-Pesa message")
      return
    }

    // Store the pending package and message for admin approval
    const depositRequest = {
      id: Date.now().toString(),
      package: selectedPackage,
      packageName: packages.find((p) => p.id === selectedPackage)?.name,
      amount: packages.find((p) => p.id === selectedPackage)?.amount,
      mpesaMessage: mpesaMessage,
      status: "Pending Admin Confirmation",
      date: new Date().toISOString(),
      adminPhone: adminPhone,
      adminName: adminName,
    }

    // Save to localStorage for admin review
    const existingRequests = JSON.parse(localStorage.getItem("depositRequests") || "[]")
    existingRequests.push(depositRequest)
    localStorage.setItem("depositRequests", JSON.stringify(existingRequests))
    localStorage.setItem("awaitingAdminConfirmation", "true")

    console.log("Submitting deposit:", { selectedPackage, mpesaMessage })
    alert("Deposit request submitted! Admin will verify and approve shortly.")

    // Reset form
    setSelectedPackage("")
    setMpesaMessage("")
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-green-600 to-blue-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div className="flex items-center space-x-2">
            <img src="/fcb-logo.jpg" alt="FCB Logo" className="h-8 w-8 rounded" />
            <h1 className="text-xl font-bold">Recharge</h1>
          </div>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Admin Payment Info */}
        <Card className="border-green-200 bg-green-50">
          <CardHeader>
            <CardTitle className="text-green-800">Payment Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="flex items-center justify-between p-3 bg-white rounded-lg">
              <div>
                <div className="font-medium">Admin Name</div>
                <div className="text-lg font-bold text-green-600">{adminName}</div>
              </div>
            </div>
            <div className="flex items-center justify-between p-3 bg-white rounded-lg">
              <div>
                <div className="font-medium">M-Pesa Number</div>
                <div className="text-lg font-bold text-green-600">{adminPhone}</div>
              </div>
              <Button size="sm" variant="outline" onClick={() => copyToClipboard(adminPhone)}>
                {copied ? <CheckCircle className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Package Selection */}
        <Card>
          <CardHeader>
            <CardTitle>Select Investment Package</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-3">
              {packages.map((pkg) => (
                <div
                  key={pkg.id}
                  className={`p-3 border-2 rounded-lg cursor-pointer transition-colors ${
                    selectedPackage === pkg.id ? "border-blue-500 bg-blue-50" : "border-gray-200 hover:border-gray-300"
                  }`}
                  onClick={() => setSelectedPackage(pkg.id)}
                >
                  <div className="text-center">
                    <Badge className="mb-2">{pkg.name}</Badge>
                    <div className="font-bold text-lg">KES {pkg.amount.toLocaleString()}</div>
                    <div className="text-sm text-gray-600">Daily: KES {pkg.daily}</div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Instructions */}
        <Card>
          <CardHeader>
            <CardTitle>Payment Instructions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="bg-blue-50 p-4 rounded-lg">
              <h4 className="font-medium mb-2">Step 1: Send M-Pesa Payment</h4>
              <ol className="list-decimal list-inside space-y-1 text-sm">
                <li>Go to M-Pesa on your phone</li>
                <li>Select "Send Money"</li>
                <li>
                  Enter: <strong>{adminPhone}</strong>
                </li>
                <li>Enter the amount for your selected package</li>
                <li>Complete the transaction</li>
              </ol>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <h4 className="font-medium mb-2">Step 2: Submit Confirmation</h4>
              <p className="text-sm">After sending money, paste the M-Pesa confirmation message below and submit.</p>
            </div>
          </CardContent>
        </Card>

        {/* M-Pesa Message Input */}
        <Card>
          <CardHeader>
            <CardTitle>M-Pesa Confirmation</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="mpesa-message">Paste M-Pesa Message</Label>
              <Textarea
                id="mpesa-message"
                placeholder="Paste your complete M-Pesa confirmation message here...

Example: 'QGH7K8L9M0 Confirmed. You have sent KES5,400.00 to GEORGE WISWA 0782192086 on 19/1/25 at 2:30 PM. New M-Pesa balance is KES15,600.00. Transaction cost KES0.00. Amount you can transact within the day is 299,600.00.'"
                value={mpesaMessage}
                onChange={(e) => setMpesaMessage(e.target.value)}
                rows={8}
                className="min-h-[150px] font-mono text-sm"
              />
              <div className="grid grid-cols-1 gap-2 text-xs text-gray-600">
                <div className="bg-green-50 p-2 rounded">
                  <strong>✓ Include:</strong> Transaction code, amount, recipient name, date, time
                </div>
                <div className="bg-blue-50 p-2 rounded">
                  <strong>📱 How to find:</strong> Check your SMS messages after sending M-Pesa
                </div>
                <div className="bg-orange-50 p-2 rounded">
                  <strong>⚠️ Important:</strong> Message must match the selected package amount
                </div>
              </div>
            </div>

            <Button
              className="w-full bg-green-600 hover:bg-green-700"
              onClick={handleSubmitDeposit}
              disabled={!selectedPackage || !mpesaMessage.trim()}
            >
              Submit Deposit Request
            </Button>
          </CardContent>
        </Card>

        {/* Contact Info */}
        <Card>
          <CardHeader>
            <CardTitle>Need Help?</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2 text-sm">
              <div>
                <span className="font-medium">Customer Care:</span>
                <a
                  href="https://t.me/Carefbc"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-blue-600 hover:underline ml-2"
                >
                  t.me/Carefbc
                </a>
              </div>
              <div>
                <span className="font-medium">Admin Contact:</span>
                <span className="ml-2">
                  {adminName} - {adminPhone}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/loading.tsx"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/reset-password/page.tsx"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { DatabaseService } from "@/lib/database"
import { AuthService } from "@/lib/auth"
import { Phone, Lock, Eye, EyeOff, KeyRound, CheckCircle, ArrowLeft, Shield } from "lucide-react"
import Image from "next/image"

type ResetStep = "phone" | "verification" | "newPassword" | "success"

export default function ResetPasswordPage() {
  const [currentStep, setCurrentStep] = useState<ResetStep>("phone")
  const [formData, setFormData] = useState({
    phone: "",
    verificationCode: "",
    newPassword: "",
    confirmPassword: "",
  })
  const [showNewPassword, setShowNewPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [generatedCode, setGeneratedCode] = useState("")
  const [resetToken, setResetToken] = useState("")
  const [userFound, setUserFound] = useState<any>(null)
  const [passwordStrength, setPasswordStrength] = useState<{ isValid: boolean; message?: string }>({ isValid: false })
  const router = useRouter()

  const formatPhoneNumber = (phoneNumber: string): string => {
    const cleaned = phoneNumber.replace(/\D/g, "")
    if (cleaned.startsWith("254")) {
      return `+${cleaned}`
    } else if (cleaned.startsWith("0")) {
      return `+254${cleaned.substring(1)}`
    } else if (cleaned.length === 9) {
      return `+254${cleaned}`
    }
    return phoneNumber
  }

  const validatePhoneNumber = (phone: string): boolean => {
    const formatted = formatPhoneNumber(phone)
    const phoneRegex = /^\+254[17]\d{8}$/
    return phoneRegex.test(formatted)
  }

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))

    // Check password strength in real-time
    if (field === "newPassword" && value) {
      const strength = AuthService.validatePassword(value)
      setPasswordStrength(strength)
    } else if (field === "newPassword" && !value) {
      setPasswordStrength({ isValid: false })
    }
  }

  const handlePhoneSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!formData.phone.trim()) {
      setError("Please enter your phone number")
      return
    }

    if (!validatePhoneNumber(formData.phone)) {
      setError("Please enter a valid Kenyan phone number")
      return
    }

    setIsLoading(true)
    setError("")

    try {
      const formattedPhone = formatPhoneNumber(formData.phone)
      const user = await DatabaseService.getUserByPhone(formattedPhone)

      if (!user) {
        setError("No account found with this phone number. Please check and try again.")
        setIsLoading(false)
        return
      }

      // Generate verification code and reset token
      const code = AuthService.generateVerificationCode()
      const token = AuthService.generateResetToken()
      const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString() // 24 hours

      setGeneratedCode(code)
      setResetToken(token)
      setUserFound(user)

      // Store password reset request in database
      await DatabaseService.createPasswordResetRequest({
        user_id: user.id,
        phone: formattedPhone,
        verification_code: code,
        reset_token: token,
        expires_at: expiresAt,
      })

      // In a real app, you would send SMS here
      console.log(`Verification code for ${formattedPhone}: ${code}`)

      setSuccess(`Verification code sent to ${formattedPhone}. For demo purposes, the code is: ${code}`)
      setCurrentStep("verification")
    } catch (error) {
      console.error("Phone verification error:", error)
      setError("An error occurred. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

  const handleVerificationSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!formData.verificationCode.trim()) {
      setError("Please enter the verification code")
      return
    }

    if (formData.verificationCode !== generatedCode) {
      setError("Invalid verification code. Please try again.")
      return
    }

    setError("")
    setSuccess("Code verified successfully!")
    setTimeout(() => {
      setCurrentStep("newPassword")
      setSuccess("")
    }, 1000)
  }

  const handlePasswordSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!formData.newPassword.trim()) {
      setError("Please enter a new password")
      return
    }

    const passwordValidation = AuthService.validatePassword(formData.newPassword)
    if (!passwordValidation.isValid) {
      setError(passwordValidation.message || "Invalid password")
      return
    }

    if (formData.newPassword !== formData.confirmPassword) {
      setError("Passwords do not match")
      return
    }

    setIsLoading(true)
    setError("")

    try {
      // Update user password (will be hashed automatically in DatabaseService.updateUser)
      const updated = await DatabaseService.updateUser(userFound.id, {
        password: formData.newPassword,
        updated_at: new Date().toISOString(),
      })

      if (!updated) {
        setError("Failed to update password. Please try again.")
        setIsLoading(false)
        return
      }

      // Create password reset transaction record
      await DatabaseService.createTransaction({
        user_id: userFound.id,
        type: "password_reset" as any,
        amount: 0,
        description: "Password reset completed successfully",
        status: "completed",
      })

      setCurrentStep("success")
    } catch (error) {
      console.error("Password update error:", error)
      setError("An error occurred while updating your password. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

  const renderPhoneStep = () => (
    <form onSubmit={handlePhoneSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="phone" className="text-sm font-medium text-gray-700">
          Phone Number
        </Label>
        <div className="relative">
          <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
          <Input
            id="phone"
            type="tel"
            placeholder="0712345678 or +254712345678"
            value={formData.phone}
            onChange={(e) => handleInputChange("phone", e.target.value)}
            className="pl-10 h-12 border-gray-200 focus:border-orange-500 focus:ring-orange-500"
            disabled={isLoading}
            required
          />
        </div>
        <p className="text-xs text-gray-500">Enter the phone number associated with your account</p>
      </div>

      <Button
        type="submit"
        className="w-full h-12 bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-semibold rounded-lg"
        disabled={isLoading}
      >
        {isLoading ? (
          <div className="flex items-center gap-2">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
            Sending Code...
          </div>
        ) : (
          <div className="flex items-center gap-2">
            <Shield className="h-4 w-4" />
            Send Verification Code
          </div>
        )}
      </Button>
    </form>
  )

  const renderVerificationStep = () => (
    <form onSubmit={handleVerificationSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="verificationCode" className="text-sm font-medium text-gray-700">
          Verification Code
        </Label>
        <div className="relative">
          <KeyRound className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
          <Input
            id="verificationCode"
            type="text"
            placeholder="Enter 6-digit code"
            value={formData.verificationCode}
            onChange={(e) => handleInputChange("verificationCode", e.target.value.replace(/\D/g, "").slice(0, 6))}
            className="pl-10 h-12 border-gray-200 focus:border-orange-500 focus:ring-orange-500 text-center text-lg tracking-widest"
            disabled={isLoading}
            maxLength={6}
            required
          />
        </div>
        <p className="text-xs text-gray-500">Enter the 6-digit code sent to your phone</p>
      </div>

      <Button
        type="submit"
        className="w-full h-12 bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-semibold rounded-lg"
        disabled={isLoading || formData.verificationCode.length !== 6}
      >
        <div className="flex items-center gap-2">
          <CheckCircle className="h-4 w-4" />
          Verify Code
        </div>
      </Button>

      <Button type="button" variant="outline" className="w-full bg-transparent" onClick={() => setCurrentStep("phone")}>
        <ArrowLeft className="h-4 w-4 mr-2" />
        Back to Phone Number
      </Button>
    </form>
  )

  const renderPasswordStep = () => (
    <form onSubmit={handlePasswordSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="newPassword" className="text-sm font-medium text-gray-700">
          New Password
        </Label>
        <div className="relative">
          <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
          <Input
            id="newPassword"
            type={showNewPassword ? "text" : "password"}
            placeholder="Enter new secure password"
            value={formData.newPassword}
            onChange={(e) => handleInputChange("newPassword", e.target.value)}
            className="pl-10 pr-10 h-12 border-gray-200 focus:border-orange-500 focus:ring-orange-500"
            disabled={isLoading}
            required
          />
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
            onClick={() => setShowNewPassword(!showNewPassword)}
          >
            {showNewPassword ? <EyeOff className="h-4 w-4 text-gray-400" /> : <Eye className="h-4 w-4 text-gray-400" />}
          </Button>
        </div>
        {formData.newPassword && (
          <div className={`text-xs ${passwordStrength.isValid ? "text-green-600" : "text-red-600"}`}>
            <div className="flex items-center gap-1">
              <Shield className="h-3 w-3" />
              {passwordStrength.isValid ? "Strong password ✓" : passwordStrength.message}
            </div>
          </div>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="confirmPassword" className="text-sm font-medium text-gray-700">
          Confirm New Password
        </Label>
        <div className="relative">
          <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
          <Input
            id="confirmPassword"
            type={showConfirmPassword ? "text" : "password"}
            placeholder="Confirm your new password"
            value={formData.confirmPassword}
            onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
            className="pl-10 pr-10 h-12 border-gray-200 focus:border-orange-500 focus:ring-orange-500"
            disabled={isLoading}
            required
          />
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
          >
            {showConfirmPassword ? (
              <EyeOff className="h-4 w-4 text-gray-400" />
            ) : (
              <Eye className="h-4 w-4 text-gray-400" />
            )}
          </Button>
        </div>
      </div>

      <Button
        type="submit"
        className="w-full h-12 bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-semibold rounded-lg"
        disabled={isLoading || !passwordStrength.isValid}
      >
        {isLoading ? (
          <div className="flex items-center gap-2">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
            Updating Password...
          </div>
        ) : (
          <div className="flex items-center gap-2">
            <Lock className="h-4 w-4" />
            Update Password
          </div>
        )}
      </Button>

      <Button
        type="button"
        variant="outline"
        className="w-full bg-transparent"
        onClick={() => setCurrentStep("verification")}
      >
        <ArrowLeft className="h-4 w-4 mr-2" />
        Back to Verification
      </Button>
    </form>
  )

  const renderSuccessStep = () => (
    <div className="text-center space-y-4">
      <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
        <CheckCircle className="h-8 w-8 text-green-600" />
      </div>
      <h3 className="text-xl font-semibold text-gray-900">Password Updated Successfully!</h3>
      <p className="text-gray-600">
        Your password has been securely updated. You can now sign in with your new password.
      </p>

      <Button
        onClick={() => router.push("/")}
        className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold rounded-lg"
      >
        <div className="flex items-center gap-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Sign In
        </div>
      </Button>
    </div>
  )

  const getStepTitle = () => {
    switch (currentStep) {
      case "phone":
        return "Reset Password"
      case "verification":
        return "Verify Your Phone"
      case "newPassword":
        return "Create New Password"
      case "success":
        return "Password Reset Complete"
      default:
        return "Reset Password"
    }
  }

  const getStepDescription = () => {
    switch (currentStep) {
      case "phone":
        return "Enter your phone number to receive a verification code"
      case "verification":
        return "Enter the verification code sent to your phone"
      case "newPassword":
        return "Create a new secure password for your account"
      case "success":
        return "Your password has been successfully updated"
      default:
        return ""
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-red-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Logo Section */}
        <div className="text-center mb-8">
          <div className="mx-auto w-20 h-20 bg-gradient-to-r from-orange-600 to-red-600 rounded-2xl flex items-center justify-center mb-4">
            <Image src="/fcb-logo.jpg" alt="FCB VIP" width={60} height={60} className="rounded-xl" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">{getStepTitle()}</h1>
          <p className="text-gray-600">{getStepDescription()}</p>
        </div>

        {/* Reset Form */}
        <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
          <CardHeader className="space-y-1 pb-4">
            <CardTitle className="text-2xl font-bold text-center flex items-center justify-center gap-2">
              <KeyRound className="h-6 w-6 text-orange-600" />
              {getStepTitle()}
            </CardTitle>
            <CardDescription className="text-center">{getStepDescription()}</CardDescription>

            {/* Progress Indicator */}
            {currentStep !== "success" && (
              <div className="flex justify-center mt-4">
                <div className="flex space-x-2">
                  <div
                    className={`w-2 h-2 rounded-full ${currentStep === "phone" ? "bg-orange-600" : "bg-gray-300"}`}
                  />
                  <div
                    className={`w-2 h-2 rounded-full ${currentStep === "verification" ? "bg-orange-600" : "bg-gray-300"}`}
                  />
                  <div
                    className={`w-2 h-2 rounded-full ${currentStep === "newPassword" ? "bg-orange-600" : "bg-gray-300"}`}
                  />
                </div>
              </div>
            )}
          </CardHeader>
          <CardContent>
            {error && (
              <Alert variant="destructive" className="mb-4">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {success && (
              <Alert className="border-green-200 bg-green-50 text-green-800 mb-4">
                <CheckCircle className="h-4 w-4" />
                <AlertDescription>{success}</AlertDescription>
              </Alert>
            )}

            {currentStep === "phone" && renderPhoneStep()}
            {currentStep === "verification" && renderVerificationStep()}
            {currentStep === "newPassword" && renderPasswordStep()}
            {currentStep === "success" && renderSuccessStep()}

            {/* Back to Login Link */}
            {currentStep === "phone" && (
              <div className="mt-6 text-center">
                <Button
                  variant="link"
                  onClick={() => router.push("/")}
                  className="p-0 h-auto text-sm text-orange-600 hover:text-orange-700"
                >
                  <ArrowLeft className="h-4 w-4 mr-1" />
                  Back to Sign In
                </Button>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Footer */}
        <div className="text-center mt-6">
          <p className="text-xs text-gray-500">Need help? Contact our support team for assistance</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/task-records/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  ArrowLeft,
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  ArrowUpRight,
  ArrowDownLeft,
  CheckCircle,
  Clock,
  XCircle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function TaskRecordsPage() {
  const taskHistory = [
    { id: 1, task: "Watch Product Video", reward: "KES 10", status: "completed", date: "2025-01-19", time: "14:30" },
    { id: 2, task: "BOSE Headphones Review", reward: "KES 10", status: "completed", date: "2025-01-19", time: "13:15" },
    { id: 3, task: "Tech Product Analysis", reward: "KES 10", status: "pending", date: "2025-01-19", time: "12:00" },
    { id: 4, task: "Cartier Watch Review", reward: "KES 10", status: "failed", date: "2025-01-18", time: "16:45" },
    { id: 5, task: "ASUS Zenbook Review", reward: "KES 10", status: "completed", date: "2025-01-18", time: "15:20" },
  ]

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "pending":
        return <Clock className="h-4 w-4 text-orange-500" />
      case "failed":
        return <XCircle className="h-4 w-4 text-red-500" />
      default:
        return <Clock className="h-4 w-4 text-gray-500" />
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-orange-100 text-orange-800"
      case "failed":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h1 className="text-xl font-bold">Task Records</h1>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Summary Stats */}
        <div className="grid grid-cols-3 gap-3">
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-2xl font-bold text-green-600">
                {taskHistory.filter((t) => t.status === "completed").length}
              </div>
              <div className="text-xs text-gray-600">Completed</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-2xl font-bold text-orange-600">
                {taskHistory.filter((t) => t.status === "pending").length}
              </div>
              <div className="text-xs text-gray-600">Pending</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-2xl font-bold text-red-600">
                {taskHistory.filter((t) => t.status === "failed").length}
              </div>
              <div className="text-xs text-gray-600">Failed</div>
            </CardContent>
          </Card>
        </div>

        {/* Task History */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Tasks</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {taskHistory.map((task) => (
                <div key={task.id} className="border rounded-lg p-3">
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center space-x-2">
                      {getStatusIcon(task.status)}
                      <span className="font-medium">{task.task}</span>
                    </div>
                    <Badge className={getStatusColor(task.status)}>{task.status}</Badge>
                  </div>
                  <div className="flex items-center justify-between text-sm text-gray-600">
                    <span>
                      {task.date} at {task.time}
                    </span>
                    <span className="font-semibold text-green-600">{task.reward}</span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/team-reports/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ArrowLeft, Home, FileText, Trophy, TrendingUp, User, ArrowUpRight, ArrowDownLeft, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function TeamReportsPage() {
  const teamMembers = [
    {
      id: 1,
      name: "Alice Johnson",
      phone: "07*****123",
      level: "J2",
      earnings: "KES 1,240",
      status: "active",
      joinDate: "2025-01-10",
    },
    {
      id: 2,
      name: "Bob Smith",
      phone: "07*****456",
      level: "J1",
      earnings: "KES 340",
      status: "active",
      joinDate: "2025-01-12",
    },
    {
      id: 3,
      name: "Carol Wilson",
      phone: "07*****789",
      level: "J3",
      earnings: "KES 2,450",
      status: "active",
      joinDate: "2025-01-08",
    },
    {
      id: 4,
      name: "David Brown",
      phone: "07*****012",
      level: "J1",
      earnings: "KES 180",
      status: "inactive",
      joinDate: "2025-01-15",
    },
  ]

  const teamStats = {
    totalMembers: teamMembers.length,
    activeMembers: teamMembers.filter((m) => m.status === "active").length,
    totalEarnings: "KES 4,210",
    monthlyCommission: "KES 421",
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h1 className="text-xl font-bold">Team Reports</h1>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Team Stats */}
        <div className="grid grid-cols-2 gap-3">
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-2xl font-bold text-blue-600">{teamStats.totalMembers}</div>
              <div className="text-xs text-gray-600">Total Members</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-2xl font-bold text-green-600">{teamStats.activeMembers}</div>
              <div className="text-xs text-gray-600">Active Members</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-lg font-bold text-purple-600">{teamStats.totalEarnings}</div>
              <div className="text-xs text-gray-600">Team Earnings</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 text-center">
              <div className="text-lg font-bold text-orange-600">{teamStats.monthlyCommission}</div>
              <div className="text-xs text-gray-600">My Commission</div>
            </CardContent>
          </Card>
        </div>

        {/* Team Members */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Users className="h-5 w-5 mr-2" />
              Team Members
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {teamMembers.map((member) => (
                <div key={member.id} className="border rounded-lg p-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10">
                        <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{member.name}</div>
                        <div className="text-sm text-gray-600">{member.phone}</div>
                        <div className="text-xs text-gray-500">Joined: {member.joinDate}</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-bold text-green-600">{member.earnings}</div>
                      <div className="flex items-center space-x-1 mt-1">
                        <Badge variant="outline">{member.level}</Badge>
                        <Badge
                          className={
                            member.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                          }
                        >
                          {member.status}
                        </Badge>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/turntable/page.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Home, FileText, Trophy, TrendingUp, User } from "lucide-react"
import Link from "next/link"

export default function TurntablePage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-4">
        <div className="flex items-center space-x-3">
          <Link href="/dashboard">
            <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h1 className="text-xl font-bold">Turntable of Luck</h1>
        </div>
      </div>

      <div className="p-4">
        <Card>
          <CardHeader>
            <CardTitle>Coming Soon</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-600">The Turntable of Luck feature is coming soon!</p>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/withdraw/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ArrowLeft,
  Wallet,
  Smartphone,
  Building,
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  ArrowUpRight,
  ArrowDownLeft,
  CheckCircle,
  Clock,
  AlertTriangle,
} from "lucide-react"
import Link from "next/link"

export default function WithdrawPage() {
  const [userBalance, setUserBalance] = useState(0)
  const [withdrawAmount, setWithdrawAmount] = useState("")
  const [withdrawMethod, setWithdrawMethod] = useState("")
  const [accountDetails, setAccountDetails] = useState("")
  const [isProcessing, setIsProcessing] = useState(false)
  const [withdrawHistory, setWithdrawHistory] = useState([])
  const [isClient, setIsClient] = useState(false)
  const [isWithdrawalAllowed, setIsWithdrawalAllowed] = useState(true)

  // Quick withdrawal amounts
  const quickAmounts = [120, 500, 1000, 2000, 5000, 100000, 200000, 500000]

  // Check if current time is within withdrawal hours (Monday-Saturday, 9AM-6PM)
  const checkWithdrawalTime = () => {
    const now = new Date()
    const day = now.getDay() // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
    const hour = now.getHours()

    // Monday (1) to Saturday (6), 9AM (9) to 6PM (18)
    const isValidDay = day >= 1 && day <= 6
    const isValidTime = hour >= 9 && hour < 18

    return isValidDay && isValidTime
  }

  const getWithdrawalTimeMessage = () => {
    const now = new Date()
    const day = now.getDay()
    const hour = now.getHours()

    if (day === 0) {
      return "Withdrawals are not available on Sundays. Please try again on Monday between 9:00 AM - 6:00 PM."
    }

    if (hour < 9) {
      return "Withdrawals are available from 9:00 AM - 6:00 PM, Monday to Saturday."
    }

    if (hour >= 18) {
      return "Withdrawal hours have ended for today. Available tomorrow from 9:00 AM - 6:00 PM."
    }

    return "Withdrawals are currently available until 6:00 PM today."
  }

  useEffect(() => {
    setIsClient(true)
    setIsWithdrawalAllowed(checkWithdrawalTime())

    // Load user balance and withdrawal history from localStorage
    const savedBalance = localStorage.getItem("userBalance")
    const savedHistory = localStorage.getItem("withdrawHistory")

    if (savedBalance) {
      setUserBalance(Number.parseFloat(savedBalance))
    }

    if (savedHistory) {
      setWithdrawHistory(JSON.parse(savedHistory))
    } else {
      // Demo withdrawal history
      const demoHistory = [
        {
          id: "1",
          amount: 1000,
          method: "M-Pesa",
          account: "254712345678",
          status: "completed",
          date: "2025-01-20",
          time: "14:30",
        },
        {
          id: "2",
          amount: 500,
          method: "Bank Transfer",
          account: "****1234",
          status: "pending",
          date: "2025-01-22",
          time: "09:15",
        },
        {
          id: "3",
          amount: 2000,
          method: "M-Pesa",
          account: "254798765432",
          status: "completed",
          date: "2025-01-18",
          time: "16:45",
        },
      ]
      setWithdrawHistory(demoHistory.slice(0, 5)) // Show only last 5 transactions
    }
  }, [])

  const handleQuickAmount = (amount) => {
    setWithdrawAmount(amount.toString())
  }

  const handleWithdraw = async () => {
    if (!isWithdrawalAllowed) {
      alert("Withdrawals are only available Monday to Saturday, 9:00 AM - 6:00 PM")
      return
    }

    const amount = Number.parseFloat(withdrawAmount)

    if (!amount || amount <= 0) {
      alert("Please enter a valid withdrawal amount")
      return
    }

    if (amount > userBalance) {
      alert("Insufficient balance")
      return
    }

    if (!withdrawMethod) {
      alert("Please select a withdrawal method")
      return
    }

    if (!accountDetails) {
      alert("Please enter your account details")
      return
    }

    if (amount < 120) {
      alert("Minimum withdrawal amount is KES 120")
      return
    }

    setIsProcessing(true)

    // Simulate processing delay
    setTimeout(() => {
      // Create new withdrawal record
      const newWithdrawal = {
        id: Date.now().toString(),
        amount: amount,
        method: withdrawMethod,
        account: accountDetails,
        status: "pending",
        date: new Date().toISOString().split("T")[0],
        time: new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" }),
      }

      // Update balance
      const newBalance = userBalance - amount
      setUserBalance(newBalance)
      localStorage.setItem("userBalance", newBalance.toString())

      // Update withdrawal history
      const updatedHistory = [newWithdrawal, ...withdrawHistory].slice(0, 5)
      setWithdrawHistory(updatedHistory)
      localStorage.setItem("withdrawHistory", JSON.stringify(updatedHistory))

      // Reset form
      setWithdrawAmount("")
      setWithdrawMethod("")
      setAccountDetails("")
      setIsProcessing(false)

      alert(
        `Withdrawal request submitted successfully! KES ${amount.toLocaleString()} will be processed within 24 hours.`,
      )
    }, 2000)
  }

  const getStatusIcon = (status) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "pending":
        return <Clock className="h-4 w-4 text-yellow-600" />
      case "failed":
        return <AlertTriangle className="h-4 w-4 text-red-600" />
      default:
        return <Clock className="h-4 w-4 text-gray-600" />
    }
  }

  const getStatusColor = (status) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "pending":
        return "bg-yellow-100 text-yellow-800"
      case "failed":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  // Don't render until client-side hydration is complete
  if (!isClient) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-green-600 to-blue-600 text-white p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <Link href="/dashboard">
              <Button variant="ghost" size="sm" className="text-white hover:bg-white/20">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <h1 className="text-xl font-bold">Withdraw Funds</h1>
          </div>
          <div className="text-right">
            <div className="text-sm opacity-90">Available Balance</div>
            <div className="text-lg font-bold">KES {userBalance.toLocaleString()}</div>
          </div>
        </div>
      </div>

      <div className="p-4 space-y-4">
        {/* Withdrawal Time Notice */}
        {!isWithdrawalAllowed && (
          <Alert className="border-red-200 bg-red-50">
            <Clock className="h-4 w-4 text-red-600" />
            <AlertDescription className="text-red-800">
              <strong>Withdrawal Hours:</strong> {getWithdrawalTimeMessage()}
            </AlertDescription>
          </Alert>
        )}

        {isWithdrawalAllowed && (
          <Alert className="border-green-200 bg-green-50">
            <CheckCircle className="h-4 w-4 text-green-600" />
            <AlertDescription className="text-green-800">
              <strong>Withdrawals Available:</strong> Monday to Saturday, 9:00 AM - 6:00 PM
            </AlertDescription>
          </Alert>
        )}

        {/* Balance Card */}
        <Card className="bg-gradient-to-r from-green-500 to-blue-500 text-white">
          <CardContent className="p-4 text-center">
            <Wallet className="h-8 w-8 mx-auto mb-2" />
            <div className="text-2xl font-bold">KES {userBalance.toLocaleString()}</div>
            <div className="text-sm opacity-90">Available for Withdrawal</div>
          </CardContent>
        </Card>

        {/* Quick Amount Selection */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Quick Amounts</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-3">
              {quickAmounts.map((amount) => (
                <Button
                  key={amount}
                  variant="outline"
                  onClick={() => handleQuickAmount(amount)}
                  className={`${withdrawAmount === amount.toString() ? "bg-blue-50 border-blue-300" : ""}`}
                  disabled={!isWithdrawalAllowed}
                >
                  KES {amount.toLocaleString()}
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Withdrawal Form */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Withdrawal Details</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="amount">Amount (KES)</Label>
              <Input
                id="amount"
                type="number"
                placeholder="Enter amount"
                value={withdrawAmount}
                onChange={(e) => setWithdrawAmount(e.target.value)}
                min="120"
                max={userBalance}
                disabled={!isWithdrawalAllowed}
              />
              <div className="text-xs text-gray-500">
                Minimum: KES 120 • Maximum: KES {userBalance.toLocaleString()}
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="method">Withdrawal Method</Label>
              <Select value={withdrawMethod} onValueChange={setWithdrawMethod} disabled={!isWithdrawalAllowed}>
                <SelectTrigger>
                  <SelectValue placeholder="Select withdrawal method" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="mpesa">
                    <div className="flex items-center">
                      <Smartphone className="h-4 w-4 mr-2" />
                      M-Pesa
                    </div>
                  </SelectItem>
                  <SelectItem value="bank">
                    <div className="flex items-center">
                      <Building className="h-4 w-4 mr-2" />
                      Bank Transfer
                    </div>
                  </SelectItem>
                  <SelectItem value="airtel">
                    <div className="flex items-center">
                      <Smartphone className="h-4 w-4 mr-2" />
                      Airtel Money
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="account">
                {withdrawMethod === "mpesa" || withdrawMethod === "airtel"
                  ? "Phone Number"
                  : withdrawMethod === "bank"
                    ? "Account Number"
                    : "Account Details"}
              </Label>
              <Input
                id="account"
                placeholder={
                  withdrawMethod === "mpesa" || withdrawMethod === "airtel"
                    ? "254712345678"
                    : withdrawMethod === "bank"
                      ? "Account number"
                      : "Enter account details"
                }
                value={accountDetails}
                onChange={(e) => setAccountDetails(e.target.value)}
                disabled={!isWithdrawalAllowed}
              />
            </div>

            {withdrawAmount && Number.parseFloat(withdrawAmount) > 0 && isWithdrawalAllowed && (
              <Alert className="border-blue-200 bg-blue-50">
                <AlertTriangle className="h-4 w-4 text-blue-600" />
                <AlertDescription className="text-blue-800">
                  You will receive KES {Number.parseFloat(withdrawAmount).toLocaleString()} in your{" "}
                  {withdrawMethod === "mpesa" ? "M-Pesa" : withdrawMethod === "airtel" ? "Airtel Money" : "bank"}{" "}
                  account within 24 hours.
                </AlertDescription>
              </Alert>
            )}

            <Button
              onClick={handleWithdraw}
              disabled={isProcessing || !withdrawAmount || !withdrawMethod || !accountDetails || !isWithdrawalAllowed}
              className="w-full bg-green-600 hover:bg-green-700"
            >
              {isProcessing ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  Processing...
                </>
              ) : (
                <>
                  <ArrowDownLeft className="h-4 w-4 mr-2" />
                  Withdraw KES {withdrawAmount ? Number.parseFloat(withdrawAmount).toLocaleString() : "0"}
                </>
              )}
            </Button>
          </CardContent>
        </Card>

        {/* Withdrawal History */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Recent Withdrawals</CardTitle>
          </CardHeader>
          <CardContent>
            {withdrawHistory.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                <Wallet className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>No withdrawal history</p>
                <p className="text-sm">Your withdrawals will appear here</p>
              </div>
            ) : (
              <div className="space-y-3">
                {withdrawHistory.map((withdrawal) => (
                  <div key={withdrawal.id} className="flex items-center justify-between p-3 border rounded-lg">
                    <div className="flex items-center space-x-3">
                      {getStatusIcon(withdrawal.status)}
                      <div>
                        <div className="font-medium">KES {withdrawal.amount.toLocaleString()}</div>
                        <div className="text-sm text-gray-600">
                          {withdrawal.method} • {withdrawal.account}
                        </div>
                        <div className="text-xs text-gray-500">
                          {withdrawal.date} at {withdrawal.time}
                        </div>
                      </div>
                    </div>
                    <Badge className={getStatusColor(withdrawal.status)}>{withdrawal.status}</Badge>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Important Notes */}
        <Card className="bg-yellow-50 border-yellow-200">
          <CardHeader>
            <CardTitle className="text-yellow-800 text-base">Important Notes</CardTitle>
          </CardHeader>
          <CardContent className="text-sm text-yellow-700 space-y-2">
            <div className="flex items-start space-x-2">
              <div className="w-4 h-4 bg-yellow-200 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
                1
              </div>
              <div>Withdrawals available Monday to Saturday, 9:00 AM - 6:00 PM</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-4 h-4 bg-yellow-200 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
                2
              </div>
              <div>Minimum withdrawal amount is KES 120</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-4 h-4 bg-yellow-200 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
                3
              </div>
              <div>Withdrawals are processed within 24 hours</div>
            </div>
            <div className="flex items-start space-x-2">
              <div className="w-4 h-4 bg-yellow-200 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
                4
              </div>
              <div>Ensure your account details are correct to avoid delays</div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/withdraw" className="flex flex-col items-center p-2 text-blue-600">
            <ArrowDownLeft className="h-4 w-4" />
            <span className="text-xs mt-1">Withdraw</span>
          </Link>
          <Link href="/recharge" className="flex flex-col items-center p-2 text-gray-600">
            <ArrowUpRight className="h-4 w-4" />
            <span className="text-xs mt-1">Deposit</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">Profile</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/floating-customer-care.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { MessageCircle, X, User, Users } from "lucide-react"

export function FloatingCustomerCare() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      {/* Floating Action Button */}
      <button
        onClick={() => setIsOpen(true)}
        className="fixed bottom-20 right-4 z-50 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-all duration-200 hover:scale-110"
      >
        <MessageCircle className="h-6 w-6" />
      </button>

      {/* Modal */}
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          {/* Backdrop */}
          <div className="absolute inset-0 bg-black/50" onClick={() => setIsOpen(false)} />

          {/* Modal Content */}
          <Card className="relative w-80 mx-4 bg-white">
            <CardHeader className="text-center pb-4">
              <div className="flex items-center justify-between">
                <div className="flex-1" />
                <CardTitle className="text-lg font-bold">FCB Customer Care</CardTitle>
                <button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-gray-600">
                  <X className="h-5 w-5" />
                </button>
              </div>
              <p className="text-sm text-gray-500 mt-1">@Carefbc</p>
            </CardHeader>
            <CardContent className="space-y-3">
              <a href="https://t.me/Carefbc" target="_blank" rel="noopener noreferrer" className="block">
                <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                  <User className="h-4 w-4 mr-2" />
                  Private Chat
                </Button>
              </a>

              <a href="https://t.me/+jCB1_MhuUZk1ZjBk" target="_blank" rel="noopener noreferrer" className="block">
                <Button className="w-full bg-green-600 hover:bg-green-700 text-white">
                  <Users className="h-4 w-4 mr-2" />
                  Group Chat
                </Button>
              </a>

              <Button variant="outline" className="w-full bg-transparent" onClick={() => setIsOpen(false)}>
                Cancel
              </Button>
            </CardContent>
          </Card>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/accordion.tsx"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn("border-b", className)}
    {...props}
  />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

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,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx"
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 }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx"
"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 }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
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 }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx"
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 }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

  return context
}

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,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

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.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.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,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx"
"use client"

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(
      "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("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
"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,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx"
"use client"

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",
      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 min-w-[8rem] overflow-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",
        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,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"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,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
"use client"

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,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      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",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.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 transition-colors 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">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.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 transition-colors 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">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

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,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx"
"use client"

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",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx"
"use client"

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 }
[V0_FILE]typescriptreact:file="components/ui/input.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.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" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.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}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.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">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.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">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 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",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full 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">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.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}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.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-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

  return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

    // This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

        // This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

    // Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

    // Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

      window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

    // We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

    const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

    return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

    if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

    if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

    return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

  return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

    const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

    if (!tooltip) {
      return button
    }

    if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

    return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

  return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
))
Table.displayName = "Table"

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
))
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
      className
    )}
    {...props}
  />
))
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
))
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
      className
    )}
    {...props}
  />
))
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
    {...props}
  />
))
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
))
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

  return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

  return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

    case "DISMISS_TOAST": {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

  dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}
[V0_FILE]typescript:file="hooks/use-toast.ts"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

  toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

    case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

    case "DISMISS_TOAST": {
      const { toastId } = action

      // ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

  const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

  dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

  return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

  React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

  return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/auth.ts"
// Simplified auth service without bcrypt for now
export class AuthService {
  /**
   * Simple password validation
   */
  static validatePassword(password: string): { isValid: boolean; errors: string[] } {
    const errors: string[] = []

    if (!password) {
      errors.push("Password is required")
      return { isValid: false, errors }
    }

    if (password.length < 4) {
      errors.push("Password must be at least 4 characters long")
    }

    if (password.length > 50) {
      errors.push("Password must be less than 50 characters")
    }

    return {
      isValid: errors.length === 0,
      errors,
    }
  }

  /**
   * Generate a secure random token for password resets
   */
  static generateSecureToken(): string {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
    let result = ""
    for (let i = 0; i < 32; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return result
  }

  /**
   * Generate a 6-digit verification code
   */
  static generateVerificationCode(): string {
    return Math.floor(100000 + Math.random() * 900000).toString()
  }
}
[V0_FILE]typescript:file="lib/earnings-tracker.ts"
import { DatabaseService } from "./database"

export interface EarningsData {
  totalBalance: number
  taskEarnings: number
  referralEarnings: number
  vipEarnings: number
  todayEarnings: number
  weeklyEarnings: number
  monthlyEarnings: number
}

export class EarningsTracker {
  static async getUserEarnings(userId: string): Promise<EarningsData> {
    try {
      const user = await DatabaseService.getUserById(userId)
      if (!user) {
        return this.getEmptyEarnings()
      }

      const transactions = await DatabaseService.getUserTransactions(userId)
      const today = new Date()
      const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
      const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)

      // Calculate earnings by type
      const taskEarnings = transactions
        .filter((t) => t.type === "task_reward" && t.amount > 0)
        .reduce((sum, t) => sum + t.amount, 0)

      const referralEarnings = transactions
        .filter((t) => t.type === "referral_bonus" && t.amount > 0)
        .reduce((sum, t) => sum + t.amount, 0)

      const vipEarnings = transactions
        .filter((t) => t.type === "vip_income" && t.amount > 0)
        .reduce((sum, t) => sum + t.amount, 0)

      // Calculate time-based earnings
      const todayEarnings = transactions
        .filter((t) => {
          const transactionDate = new Date(t.created_at)
          return (
            transactionDate.toDateString() === today.toDateString() &&
            t.amount > 0 &&
            ["task_reward", "referral_bonus", "vip_income"].includes(t.type)
          )
        })
        .reduce((sum, t) => sum + t.amount, 0)

      const weeklyEarnings = transactions
        .filter((t) => {
          const transactionDate = new Date(t.created_at)
          return (
            transactionDate >= weekAgo &&
            t.amount > 0 &&
            ["task_reward", "referral_bonus", "vip_income"].includes(t.type)
          )
        })
        .reduce((sum, t) => sum + t.amount, 0)

      const monthlyEarnings = transactions
        .filter((t) => {
          const transactionDate = new Date(t.created_at)
          return (
            transactionDate >= monthAgo &&
            t.amount > 0 &&
            ["task_reward", "referral_bonus", "vip_income"].includes(t.type)
          )
        })
        .reduce((sum, t) => sum + t.amount, 0)

      return {
        totalBalance: user.balance,
        taskEarnings,
        referralEarnings,
        vipEarnings,
        todayEarnings,
        weeklyEarnings,
        monthlyEarnings,
      }
    } catch (error) {
      console.error("Error calculating user earnings:", error)
      return this.getEmptyEarnings()
    }
  }

  static async recordTaskEarning(userId: string, taskId: string, amount: number): Promise<boolean> {
    try {
      // Create task completion record
      const completion = await DatabaseService.createTaskCompletion({
        user_id: userId,
        task_id: taskId,
        reward_earned: amount,
      })

      if (!completion) {
        return false
      }

      // Update user balance and task earnings
      const user = await DatabaseService.getUserById(userId)
      if (!user) {
        return false
      }

      const updatedUser = await DatabaseService.updateUser(userId, {
        balance: user.balance + amount,
        task_earnings: user.task_earnings + amount,
      })

      if (!updatedUser) {
        return false
      }

      // Create transaction record
      await DatabaseService.createTransaction({
        user_id: userId,
        type: "task_reward",
        amount: amount,
        description: `Task completion reward`,
        status: "completed",
        reference_id: taskId,
      })

      return true
    } catch (error) {
      console.error("Error recording task earning:", error)
      return false
    }
  }

  static async recordVipEarning(userId: string, subscriptionId: string, amount: number): Promise<boolean> {
    try {
      // Update user balance
      const user = await DatabaseService.getUserById(userId)
      if (!user) {
        return false
      }

      const updatedUser = await DatabaseService.updateUser(userId, {
        balance: user.balance + amount,
      })

      if (!updatedUser) {
        return false
      }

      // Create transaction record
      await DatabaseService.createTransaction({
        user_id: userId,
        type: "vip_income",
        amount: amount,
        description: `Daily VIP income`,
        status: "completed",
        reference_id: subscriptionId,
      })

      return true
    } catch (error) {
      console.error("Error recording VIP earning:", error)
      return false
    }
  }

  private static getEmptyEarnings(): EarningsData {
    return {
      totalBalance: 0,
      taskEarnings: 0,
      referralEarnings: 0,
      vipEarnings: 0,
      todayEarnings: 0,
      weeklyEarnings: 0,
      monthlyEarnings: 0,
    }
  }

  static formatCurrency(amount: number): string {
    return `KES ${amount.toLocaleString()}`
  }

  static calculateDailyVipIncome(subscriptions: any[]): number {
    return subscriptions.filter((sub) => sub.is_active).reduce((total, sub) => total + sub.daily_income, 0)
  }

  static calculateTotalVipInvestment(subscriptions: any[]): number {
    return subscriptions.reduce((total, sub) => total + sub.investment_amount, 0)
  }
}
[V0_FILE]typescript:file="lib/referral-system.ts"
import { DatabaseService } from "./database"

// Multi-level referral bonuses as percentages of investment amount
export const REFERRAL_BONUSES = {
  LEVEL_1: 0.11, // 11% of invested amount
  LEVEL_2: 0.03, // 3% of invested amount
  LEVEL_3: 0.01, // 1% of invested amount
}

export interface ReferralData {
  referrerId: string
  referredId: string
  referralCode: string
  bonusAmount: number
  level: number
}

export class ReferralSystem {
  static async processReferral(referralCode: string, newUserId: string): Promise<boolean> {
    try {
      // Find the referrer by referral code
      const referrer = await DatabaseService.getUserByReferralCode(referralCode)
      if (!referrer) {
        console.log("Referral code not found:", referralCode)
        return false
      }

      // Don't allow self-referral
      if (referrer.id === newUserId) {
        console.log("Self-referral not allowed")
        return false
      }

      // Create referral record
      const referral = await DatabaseService.createReferral({
        referrer_id: referrer.id,
        referred_id: newUserId,
        referrer_code: referralCode,
        bonus_amount: 0, // Will be calculated when user invests
      })

      if (!referral) {
        console.error("Failed to create referral record")
        return false
      }

      console.log(`Referral relationship created between ${referrer.id} and ${newUserId}`)
      return true
    } catch (error) {
      console.error("Error processing referral:", error)
      return false
    }
  }

  static async processInvestmentReferralBonuses(userId: string, investmentAmount: number): Promise<boolean> {
    try {
      const user = await DatabaseService.getUserById(userId)
      if (!user || !user.referred_by) {
        return true // No referrer, nothing to process
      }

      // Get referral chain (up to 3 levels)
      const referralChain = await this.getReferralChain(userId, 3)

      for (let i = 0; i < referralChain.length; i++) {
        const referrer = referralChain[i]
        const level = i + 1
        let bonusPercentage = 0

        // Determine bonus percentage based on level
        switch (level) {
          case 1:
            bonusPercentage = REFERRAL_BONUSES.LEVEL_1
            break
          case 2:
            bonusPercentage = REFERRAL_BONUSES.LEVEL_2
            break
          case 3:
            bonusPercentage = REFERRAL_BONUSES.LEVEL_3
            break
          default:
            continue
        }

        const bonusAmount = investmentAmount * bonusPercentage

        // Update referrer's balance and referral earnings
        const updatedReferrer = await DatabaseService.updateUser(referrer.id, {
          balance: referrer.balance + bonusAmount,
          referral_earnings: referrer.referral_earnings + bonusAmount,
        })

        if (updatedReferrer) {
          // Create transaction record for referral bonus
          await DatabaseService.createTransaction({
            user_id: referrer.id,
            type: "referral_bonus",
            amount: bonusAmount,
            description: `Level ${level} referral bonus (${(bonusPercentage * 100).toFixed(0)}% of KES ${investmentAmount.toLocaleString()})`,
            status: "completed",
            reference_id: userId,
          })

          console.log(`Level ${level} referral bonus of KES ${bonusAmount.toFixed(2)} awarded to user ${referrer.id}`)
        }
      }

      return true
    } catch (error) {
      console.error("Error processing investment referral bonuses:", error)
      return false
    }
  }

  static async getReferralChain(userId: string, maxLevels = 3): Promise<any[]> {
    try {
      const chain = []
      let currentUserId = userId

      for (let level = 0; level < maxLevels; level++) {
        const user = await DatabaseService.getUserById(currentUserId)
        if (!user || !user.referred_by) {
          break
        }

        const referrer = await DatabaseService.getUserByReferralCode(user.referred_by)
        if (!referrer) {
          break
        }

        chain.push(referrer)
        currentUserId = referrer.id
      }

      return chain
    } catch (error) {
      console.error("Error getting referral chain:", error)
      return []
    }
  }

  static async getReferralStats(userId: string) {
    try {
      const referrals = await DatabaseService.getReferralsByReferrer(userId)
      const totalReferrals = referrals.length
      const totalEarnings = referrals.reduce((sum, ref) => sum + ref.bonus_amount, 0)
      const unclaimedReferrals = referrals.filter((ref) => !ref.is_claimed)

      // Get referral earnings from transactions for more accurate calculation
      const transactions = await DatabaseService.getUserTransactions(userId)
      const referralEarnings = transactions
        .filter((t) => t.type === "referral_bonus" && t.status === "completed")
        .reduce((sum, t) => sum + t.amount, 0)

      return {
        totalReferrals,
        totalEarnings: referralEarnings,
        unclaimedCount: unclaimedReferrals.length,
        unclaimedAmount: unclaimedReferrals.reduce((sum, ref) => sum + ref.bonus_amount, 0),
        referrals,
      }
    } catch (error) {
      console.error("Error getting referral stats:", error)
      return {
        totalReferrals: 0,
        totalEarnings: 0,
        unclaimedCount: 0,
        unclaimedAmount: 0,
        referrals: [],
      }
    }
  }

  static generateShareMessage(referralCode: string): string {
    return `🎉 Join FCB VIP and start earning daily income! 

💰 Multi-level referral bonuses:
• Level 1: 11% of investment
• Level 2: 3% of investment  
• Level 3: 1% of investment

📱 Register with my code: ${referralCode}
🔗 https://fcb-vip.vercel.app/register?ref=${referralCode}

✨ Features:
• Daily VIP income
• Multi-level referral system
• Secure investments
• 24/7 support

Start earning today! 🚀`
  }

  static generateReferralLink(referralCode: string): string {
    return `https://fcb-vip.vercel.app/register?ref=${referralCode}`
  }

  static calculateReferralBonus(investmentAmount: number, level: number): number {
    switch (level) {
      case 1:
        return investmentAmount * REFERRAL_BONUSES.LEVEL_1
      case 2:
        return investmentAmount * REFERRAL_BONUSES.LEVEL_2
      case 3:
        return investmentAmount * REFERRAL_BONUSES.LEVEL_3
      default:
        return 0
    }
  }
}
[V0_FILE]typescript:file="lib/supabase.ts"
export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]

export type Database = {
  public: {
    Tables: {
      referrals: {
        Row: {
          bonus_amount: number
          created_at: string
          id: string
          is_claimed: boolean
          referred_id: string
          referrer_code: string
          referrer_id: string
        }
        Insert: {
          bonus_amount?: number
          created_at?: string
          id?: string
          is_claimed?: boolean
          referred_id: string
          referrer_code: string
          referrer_id: string
        }
        Update: {
          bonus_amount?: number
          created_at?: string
          id?: string
          is_claimed?: boolean
          referred_id?: string
          referrer_code?: string
          referrer_id?: string
        }
        Relationships: [
          {
            foreignKeyName: "referrals_referred_id_fkey"
            columns: ["referred_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
          {
            foreignKeyName: "referrals_referrer_id_fkey"
            columns: ["referrer_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
        ]
      }
      task_completions: {
        Row: {
          completed_at: string
          id: string
          reward_earned: number
          task_id: string
          user_id: string
        }
        Insert: {
          completed_at?: string
          id?: string
          reward_earned: number
          task_id: string
          user_id: string
        }
        Update: {
          completed_at?: string
          id?: string
          reward_earned?: number
          task_id?: string
          user_id?: string
        }
        Relationships: [
          {
            foreignKeyName: "task_completions_task_id_fkey"
            columns: ["task_id"]
            isOneToOne: false
            referencedRelation: "tasks"
            referencedColumns: ["id"]
          },
          {
            foreignKeyName: "task_completions_user_id_fkey"
            columns: ["user_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
        ]
      }
      tasks: {
        Row: {
          created_at: string
          description: string | null
          id: string
          is_active: boolean
          requirements: Json | null
          reward_amount: number
          task_type: string
          title: string
        }
        Insert: {
          created_at?: string
          description?: string | null
          id?: string
          is_active?: boolean
          requirements?: Json | null
          reward_amount: number
          task_type: string
          title: string
        }
        Update: {
          created_at?: string
          description?: string | null
          id?: string
          is_active?: boolean
          requirements?: Json | null
          reward_amount?: number
          task_type?: string
          title?: string
        }
        Relationships: []
      }
      transactions: {
        Row: {
          amount: number
          created_at: string
          description: string | null
          id: string
          reference_id: string | null
          status: string
          type: string
          user_id: string
        }
        Insert: {
          amount: number
          created_at?: string
          description?: string | null
          id?: string
          reference_id?: string | null
          status?: string
          type: string
          user_id: string
        }
        Update: {
          amount?: number
          created_at?: string
          description?: string | null
          id?: string
          reference_id?: string | null
          status?: string
          type?: string
          user_id?: string
        }
        Relationships: [
          {
            foreignKeyName: "transactions_user_id_fkey"
            columns: ["user_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
        ]
      }
      user_vip_subscriptions: {
        Row: {
          created_at: string
          daily_income: number
          end_date: string
          id: string
          investment_amount: number
          is_active: boolean
          start_date: string
          total_earned: number
          user_id: string
          vip_package_id: string
        }
        Insert: {
          created_at?: string
          daily_income: number
          end_date: string
          id?: string
          investment_amount: number
          is_active?: boolean
          start_date?: string
          total_earned?: number
          user_id: string
          vip_package_id: string
        }
        Update: {
          created_at?: string
          daily_income?: number
          end_date?: string
          id?: string
          investment_amount?: number
          is_active?: boolean
          start_date?: string
          total_earned?: number
          user_id?: string
          vip_package_id?: string
        }
        Relationships: [
          {
            foreignKeyName: "user_vip_subscriptions_user_id_fkey"
            columns: ["user_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
          {
            foreignKeyName: "user_vip_subscriptions_vip_package_id_fkey"
            columns: ["vip_package_id"]
            isOneToOne: false
            referencedRelation: "vip_packages"
            referencedColumns: ["id"]
          },
        ]
      }
      users: {
        Row: {
          balance: number
          created_at: string
          email: string | null
          id: string
          is_active: boolean
          name: string | null
          password: string
          phone: string
          referral_code: string
          referral_earnings: number
          referred_by: string | null
          task_earnings: number
          updated_at: string
          vip_level: number
        }
        Insert: {
          balance?: number
          created_at?: string
          email?: string | null
          id?: string
          is_active?: boolean
          name?: string | null
          password: string
          phone: string
          referral_code: string
          referral_earnings?: number
          referred_by?: string | null
          task_earnings?: number
          updated_at?: string
          vip_level?: number
        }
        Update: {
          balance?: number
          created_at?: string
          email?: string | null
          id?: string
          is_active?: boolean
          name?: string | null
          password?: string
          phone?: string
          referral_code?: string
          referral_earnings?: number
          referred_by?: string | null
          task_earnings?: number
          updated_at?: string
          vip_level?: number
        }
        Relationships: []
      }
      vip_packages: {
        Row: {
          created_at: string
          daily_income: number
          duration_days: number
          id: string
          investment_amount: number
          is_active: boolean
          name: string
          total_income: number
        }
        Insert: {
          created_at?: string
          daily_income: number
          duration_days: number
          id?: string
          investment_amount: number
          is_active?: boolean
          name: string
          total_income: number
        }
        Update: {
          created_at?: string
          daily_income?: number
          duration_days?: number
          id?: string
          investment_amount?: number
          is_active?: boolean
          name?: string
          total_income?: number
        }
        Relationships: []
      }
      withdrawal_requests: {
        Row: {
          admin_notes: string | null
          amount: number
          bank_details: Json | null
          id: string
          method: string
          phone_number: string | null
          processed_at: string | null
          requested_at: string
          status: string
          user_id: string
        }
        Insert: {
          admin_notes?: string | null
          amount: number
          bank_details?: Json | null
          id?: string
          method: string
          phone_number?: string | null
          processed_at?: string | null
          requested_at?: string
          status?: string
          user_id: string
        }
        Update: {
          admin_notes?: string | null
          amount?: number
          bank_details?: Json | null
          id?: string
          method?: string
          phone_number?: string | null
          processed_at?: string | null
          requested_at?: string
          status?: string
          user_id?: string
        }
        Relationships: [
          {
            foreignKeyName: "withdrawal_requests_user_id_fkey"
            columns: ["user_id"]
            isOneToOne: false
            referencedRelation: "users"
            referencedColumns: ["id"]
          },
        ]
      }
    }
    Views: {
      [_ in never]: never
    }
    Functions: {
      [_ in never]: never
    }
    Enums: {
      [_ in never]: never
    }
    CompositeTypes: {
      [_ in never]: never
    }
  }
}

export type Tables<
  PublicTableNameOrOptions extends
    | keyof (Database["public"]["Tables"] & Database["public"]["Views"])
    | { schema: keyof Database },
  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
        Database[PublicTableNameOrOptions["schema"]]["Views"])
    : never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
      Row: infer R
    }
    ? R
    : never
  : PublicTableNameOrOptions extends keyof (Database["public"]["Tables"] & Database["public"]["Views"])
    ? (Database["public"]["Tables"] & Database["public"]["Views"])[PublicTableNameOrOptions] extends {
        Row: infer R
      }
      ? R
      : never
    : never

export type TablesInsert<
  PublicTableNameOrOptions extends keyof Database["public"]["Tables"] | { schema: keyof Database },
  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
    : never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
      Insert: infer I
    }
    ? I
    : never
  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
    ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
        Insert: infer I
      }
      ? I
      : never
    : never

export type TablesUpdate<
  PublicTableNameOrOptions extends keyof Database["public"]["Tables"] | { schema: keyof Database },
  TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
    : never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
      Update: infer U
    }
    ? U
    : never
  : PublicTableNameOrOptions extends keyof Database["public"]["Tables"]
    ? Database["public"]["Tables"][PublicTableNameOrOptions] extends {
        Update: infer U
      }
      ? U
      : never
    : never

export type Enums<
  PublicEnumNameOrOptions extends keyof Database["public"]["Enums"] | { schema: keyof Database },
  EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
    : never = never,
> = PublicEnumNameOrOptions extends { schema: keyof Database }
  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
  : PublicEnumNameOrOptions extends keyof Database["public"]["Enums"]
    ? Database["public"]["Enums"][PublicEnumNameOrOptions]
    : never

export type CompositeTypes<
  PublicCompositeTypeNameOrOptions extends keyof Database["public"]["CompositeTypes"] | { schema: keyof Database },
  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
    schema: keyof Database
  }
    ? keyof Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
    : never = never,
> = PublicCompositeTypeNameOrOptions extends { schema: keyof Database }
  ? Database[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
  : PublicCompositeTypeNameOrOptions extends keyof Database["public"]["CompositeTypes"]
    ? Database["public"]["CompositeTypes"][PublicCompositeTypeNameOrOptions]
    : never

export type User = Database["public"]["Tables"]["users"]["Row"]
export type UserInsert = Database["public"]["Tables"]["users"]["Insert"]
export type UserUpdate = Database["public"]["Tables"]["users"]["Update"]

export type Referral = Database["public"]["Tables"]["referrals"]["Row"]
export type ReferralInsert = Database["public"]["Tables"]["referrals"]["Insert"]
export type ReferralUpdate = Database["public"]["Tables"]["referrals"]["Update"]

export type VipPackage = Database["public"]["Tables"]["vip_packages"]["Row"]
export type VipPackageInsert = Database["public"]["Tables"]["vip_packages"]["Insert"]
export type VipPackageUpdate = Database["public"]["Tables"]["vip_packages"]["Update"]

export type UserVipSubscription = Database["public"]["Tables"]["user_vip_subscriptions"]["Row"]
export type UserVipSubscriptionInsert = Database["public"]["Tables"]["user_vip_subscriptions"]["Insert"]
export type UserVipSubscriptionUpdate = Database["public"]["Tables"]["user_vip_subscriptions"]["Update"]

export type Task = Database["public"]["Tables"]["tasks"]["Row"]
export type TaskInsert = Database["public"]["Tables"]["tasks"]["Insert"]
export type TaskUpdate = Database["public"]["Tables"]["tasks"]["Update"]

export type TaskCompletion = Database["public"]["Tables"]["task_completions"]["Row"]
export type TaskCompletionInsert = Database["public"]["Tables"]["task_completions"]["Insert"]
export type TaskCompletionUpdate = Database["public"]["Tables"]["task_completions"]["Update"]

export type Transaction = Database["public"]["Tables"]["transactions"]["Row"]
export type TransactionInsert = Database["public"]["Tables"]["transactions"]["Insert"]
export type TransactionUpdate = Database["public"]["Tables"]["transactions"]["Update"]

export type WithdrawalRequest = Database["public"]["Tables"]["withdrawal_requests"]["Row"]
export type WithdrawalRequestInsert = Database["public"]["Tables"]["withdrawal_requests"]["Insert"]
export type WithdrawalRequestUpdate = Database["public"]["Tables"]["withdrawal_requests"]["Update"]
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]javascript:file="postcss.config.mjs"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]sql:file="scripts/01-create-tables.sql"
-- Enable UUID extension
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

-- Users table
CREATE TABLE IF NOT EXISTS users (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    phone VARCHAR(20) UNIQUE NOT NULL,
    name VARCHAR(100),
    email VARCHAR(100),
    password VARCHAR(255) NOT NULL,
    referral_code VARCHAR(20) UNIQUE NOT NULL,
    referred_by VARCHAR(20),
    balance DECIMAL(10,2) DEFAULT 0.00,
    referral_earnings DECIMAL(10,2) DEFAULT 0.00,
    task_earnings DECIMAL(10,2) DEFAULT 0.00,
    vip_level INTEGER DEFAULT 0,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Password reset requests table
CREATE TABLE IF NOT EXISTS password_reset_requests (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    phone VARCHAR(20) NOT NULL,
    verification_code VARCHAR(10) NOT NULL,
    is_verified BOOLEAN DEFAULT false,
    expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- VIP packages table
CREATE TABLE IF NOT EXISTS vip_packages (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    name VARCHAR(50) NOT NULL,
    investment_amount DECIMAL(10,2) NOT NULL,
    daily_income DECIMAL(10,2) NOT NULL,
    total_income DECIMAL(10,2) NOT NULL,
    duration_days INTEGER NOT NULL,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- User VIP subscriptions table
CREATE TABLE IF NOT EXISTS user_vip_subscriptions (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    vip_package_id UUID NOT NULL REFERENCES vip_packages(id),
    investment_amount DECIMAL(10,2) NOT NULL,
    daily_income DECIMAL(10,2) NOT NULL,
    total_earned DECIMAL(10,2) DEFAULT 0.00,
    start_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    end_date TIMESTAMP WITH TIME ZONE NOT NULL,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Referrals table
CREATE TABLE IF NOT EXISTS referrals (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    referrer_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    referred_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    referrer_code VARCHAR(20) NOT NULL,
    bonus_amount DECIMAL(10,2) DEFAULT 50.00,
    is_claimed BOOLEAN DEFAULT false,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Tasks table
CREATE TABLE IF NOT EXISTS tasks (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    title VARCHAR(200) NOT NULL,
    description TEXT,
    reward_amount DECIMAL(10,2) NOT NULL,
    task_type VARCHAR(50) NOT NULL,
    requirements JSONB,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Task completions table
CREATE TABLE IF NOT EXISTS task_completions (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    task_id UUID NOT NULL REFERENCES tasks(id) ON DELETE CASCADE,
    reward_earned DECIMAL(10,2) NOT NULL,
    completed_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    UNIQUE(user_id, task_id)
);

-- Transactions table
CREATE TABLE IF NOT EXISTS transactions (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    type VARCHAR(50) NOT NULL,
    amount DECIMAL(10,2) NOT NULL,
    description TEXT,
    status VARCHAR(20) DEFAULT 'completed',
    reference_id VARCHAR(100),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Withdrawal requests table
CREATE TABLE IF NOT EXISTS withdrawal_requests (
    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    amount DECIMAL(10,2) NOT NULL,
    method VARCHAR(50) NOT NULL,
    phone_number VARCHAR(20),
    bank_details JSONB,
    status VARCHAR(20) DEFAULT 'pending',
    admin_notes TEXT,
    requested_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    processed_at TIMESTAMP WITH TIME ZONE
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_users_phone ON users(phone);
CREATE INDEX IF NOT EXISTS idx_users_referral_code ON users(referral_code);
CREATE INDEX IF NOT EXISTS idx_users_referred_by ON users(referred_by);
CREATE INDEX IF NOT EXISTS idx_password_reset_phone ON password_reset_requests(phone);
CREATE INDEX IF NOT EXISTS idx_password_reset_code ON password_reset_requests(verification_code);
CREATE INDEX IF NOT EXISTS idx_referrals_referrer ON referrals(referrer_id);
CREATE INDEX IF NOT EXISTS idx_referrals_referred ON referrals(referred_id);
CREATE INDEX IF NOT EXISTS idx_transactions_user ON transactions(user_id);
CREATE INDEX IF NOT EXISTS idx_transactions_type ON transactions(type);
CREATE INDEX IF NOT EXISTS idx_user_vip_subscriptions_user ON user_vip_subscriptions(user_id);
CREATE INDEX IF NOT EXISTS idx_task_completions_user ON task_completions(user_id);
CREATE INDEX IF NOT EXISTS idx_withdrawal_requests_user ON withdrawal_requests(user_id);

-- Create triggers for updating timestamps
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
    FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
[V0_FILE]sql:file="scripts/02-seed-data.sql"
-- Insert VIP packages
INSERT INTO vip_packages (name, investment_amount, daily_income, total_income, duration_days) VALUES
('VIP 1', 100.00, 5.00, 150.00, 30),
('VIP 2', 500.00, 30.00, 900.00, 30),
('VIP 3', 1000.00, 65.00, 1950.00, 30),
('VIP 4', 2000.00, 140.00, 4200.00, 30),
('VIP 5', 5000.00, 375.00, 11250.00, 30),
('VIP 6', 10000.00, 800.00, 24000.00, 30),
('VIP 7', 20000.00, 1700.00, 51000.00, 30),
('VIP 8', 50000.00, 4500.00, 135000.00, 30)
ON CONFLICT DO NOTHING;

-- Insert sample tasks
INSERT INTO tasks (title, description, reward_amount, task_type, requirements) VALUES
('Daily Check-in', 'Check in daily to earn rewards', 2.00, 'daily_checkin', '{"frequency": "daily"}'),
('Share on Social Media', 'Share FCB VIP on your social media', 5.00, 'social_share', '{"platforms": ["facebook", "twitter", "whatsapp"]}'),
('Invite 3 Friends', 'Invite 3 friends to join FCB VIP', 15.00, 'referral', '{"required_referrals": 3}'),
('Complete Profile', 'Complete your profile information', 10.00, 'profile_completion', '{"required_fields": ["name", "email"]}'),
('First VIP Investment', 'Make your first VIP package investment', 25.00, 'first_investment', '{"min_amount": 100}'),
('Weekly Login Streak', 'Login for 7 consecutive days', 20.00, 'login_streak', '{"required_days": 7}'),
('Rate Our App', 'Rate FCB VIP app on Play Store', 8.00, 'app_rating', '{"min_rating": 4}'),
('Join Telegram Group', 'Join our official Telegram community', 12.00, 'telegram_join', '{"group_link": "https://t.me/fcbvip"}}')
ON CONFLICT DO NOTHING;

-- Insert sample admin user (for testing)
INSERT INTO users (phone, name, email, password, referral_code, balance, is_active) VALUES
('+254700000000', 'FCB Admin', 'admin@fcbvip.com', 'admin123', 'FCBADMIN', 10000.00, true)
ON CONFLICT (phone) DO NOTHING;

-- Insert sample regular users (for testing)
INSERT INTO users (phone, name, email, password, referral_code, referred_by, balance, is_active) VALUES
('+254712345678', 'John Doe', 'john@example.com', 'password123', 'FCBJOHN1', NULL, 150.00, true),
('+254723456789', 'Jane Smith', 'jane@example.com', 'password123', 'FCBJANE2', 'FCBJOHN1', 75.00, true),
('+254734567890', 'Mike Johnson', 'mike@example.com', 'password123', 'FCBMIKE3', 'FCBJANE2', 25.00, true)
ON CONFLICT (phone) DO NOTHING;

-- Insert sample referral relationships
INSERT INTO referrals (referrer_id, referred_id, referrer_code, bonus_amount, is_claimed) 
SELECT 
    u1.id as referrer_id,
    u2.id as referred_id,
    u1.referral_code as referrer_code,
    50.00 as bonus_amount,
    true as is_claimed
FROM users u1, users u2 
WHERE u1.referral_code = 'FCBJOHN1' AND u2.phone = '+254723456789'
ON CONFLICT DO NOTHING;

INSERT INTO referrals (referrer_id, referred_id, referrer_code, bonus_amount, is_claimed) 
SELECT 
    u1.id as referrer_id,
    u2.id as referred_id,
    u1.referral_code as referrer_code,
    50.00 as bonus_amount,
    true as is_claimed
FROM users u1, users u2 
WHERE u1.referral_code = 'FCBJANE2' AND u2.phone = '+254734567890'
ON CONFLICT DO NOTHING;

-- Insert sample transactions
INSERT INTO transactions (user_id, type, amount, description, status)
SELECT 
    u.id,
    'referral_bonus',
    50.00,
    'Referral bonus for inviting new user',
    'completed'
FROM users u 
WHERE u.phone = '+254712345678'
ON CONFLICT DO NOTHING;

INSERT INTO transactions (user_id, type, amount, description, status)
SELECT 
    u.id,
    'task_reward',
    10.00,
    'Reward for completing profile',
    'completed'
FROM users u 
WHERE u.phone IN ('+254712345678', '+254723456789', '+254734567890')
ON CONFLICT DO NOTHING;

-- Insert sample VIP subscriptions
INSERT INTO user_vip_subscriptions (user_id, vip_package_id, investment_amount, daily_income, end_date)
SELECT 
    u.id,
    vp.id,
    vp.investment_amount,
    vp.daily_income,
    NOW() + INTERVAL '30 days'
FROM users u, vip_packages vp 
WHERE u.phone = '+254712345678' AND vp.name = 'VIP 1'
ON CONFLICT DO NOTHING;

-- Update user balances and earnings based on transactions and referrals
UPDATE users SET 
    referral_earnings = (
        SELECT COALESCE(SUM(amount), 0) 
        FROM transactions 
        WHERE user_id = users.id AND type = 'referral_bonus'
    ),
    task_earnings = (
        SELECT COALESCE(SUM(amount), 0) 
        FROM transactions 
        WHERE user_id = users.id AND type = 'task_reward'
    );

-- Clean up expired password reset requests (older than 24 hours)
DELETE FROM password_reset_requests WHERE expires_at < NOW() - INTERVAL '24 hours';
[V0_FILE]sql:file="scripts/03-add-password-column.sql"
-- 03-add-password-column.sql
-- ------------------------------------------------------------------
-- Adds a `password` column to the `users` table if it doesn't exist.
-- Run this after the original table-creation script.
-- ------------------------------------------------------------------

ALTER TABLE users
ADD COLUMN IF NOT EXISTS password VARCHAR(255) NOT NULL DEFAULT '';

/*
  Why:

  • IF NOT EXISTS keeps the migration idempotent, so running it twice
    (e.g. on staging and production) will not break.
  • VARCHAR(255) is long enough for most hashed passwords.
  • DEFAULT '' ensures existing rows remain valid.
  • Remember to HASH passwords before inserting them in production!
*/
[V0_FILE]sql:file="scripts/04-add-password-reset-table.sql"
-- 04-add-password-reset-table.sql
-- ------------------------------------------------------------------
-- Creates a password_reset_requests table for secure password resets
-- ------------------------------------------------------------------

CREATE TABLE IF NOT EXISTS password_reset_requests (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    phone TEXT NOT NULL,
    verification_code TEXT NOT NULL,
    is_verified BOOLEAN DEFAULT FALSE,
    expires_at TIMESTAMP WITH TIME ZONE NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_password_reset_phone_code ON password_reset_requests(phone, verification_code);
CREATE INDEX IF NOT EXISTS idx_password_reset_expires ON password_reset_requests(expires_at);

-- Add cleanup function to remove expired reset requests
CREATE OR REPLACE FUNCTION cleanup_expired_password_resets()
RETURNS void AS $$
BEGIN
    DELETE FROM password_reset_requests 
    WHERE expires_at < NOW() - INTERVAL '1 day';
END;
$$ LANGUAGE plpgsql;

-- Create a scheduled job to run cleanup (optional - depends on your Postgres setup)
-- SELECT cron.schedule('cleanup-password-resets', '0 2 * * *', 'SELECT cleanup_expired_password_resets();');

-- Add RLS policies
ALTER TABLE password_reset_requests ENABLE ROW LEVEL SECURITY;

-- Policy to allow users to create reset requests
CREATE POLICY "Users can create password reset requests" ON password_reset_requests
    FOR INSERT WITH CHECK (true);

-- Policy to allow users to read their own reset requests
CREATE POLICY "Users can read their own password reset requests" ON password_reset_requests
    FOR SELECT USING (phone = auth.jwt() ->> 'phone' OR user_id = auth.uid());

-- Policy to allow users to update their own reset requests
CREATE POLICY "Users can update their own password reset requests" ON password_reset_requests
    FOR UPDATE USING (phone = auth.jwt() ->> 'phone' OR user_id = auth.uid());

/*
  Security Features:
  
  • verification_code: SMS verification code
  • is_verified: Tracks if the verification code was used
  • expires_at: Automatic expiration after 24 hours
  • Indexes for fast lookups and performance
  • Automatic cleanup of expired requests
  • Row Level Security policies to restrict access
*/
[V0_FILE]sql:file="scripts/05-simple-users-table.sql"
-- Drop existing users table and recreate with simple structure
DROP TABLE IF EXISTS users CASCADE;

-- Create users table with simple structure
CREATE TABLE users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  phone VARCHAR(20) UNIQUE NOT NULL,
  name VARCHAR(100),
  email VARCHAR(255),
  password VARCHAR(255), -- Simple text password for now
  referral_code VARCHAR(20) UNIQUE NOT NULL,
  referred_by VARCHAR(20),
  balance DECIMAL(10,2) DEFAULT 0,
  referral_earnings DECIMAL(10,2) DEFAULT 0,
  task_earnings DECIMAL(10,2) DEFAULT 0,
  vip_level INTEGER DEFAULT 0,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create referrals table
CREATE TABLE IF NOT EXISTS referrals (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  referrer_id UUID REFERENCES users(id) ON DELETE CASCADE,
  referred_id UUID REFERENCES users(id) ON DELETE CASCADE,
  referrer_code VARCHAR(20) NOT NULL,
  bonus_amount DECIMAL(10,2) DEFAULT 50,
  is_claimed BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create VIP packages table
CREATE TABLE IF NOT EXISTS vip_packages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name VARCHAR(50) NOT NULL,
  investment_amount DECIMAL(10,2) NOT NULL,
  daily_income DECIMAL(10,2) NOT NULL,
  total_income DECIMAL(10,2) NOT NULL,
  duration_days INTEGER NOT NULL,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Insert sample VIP packages
INSERT INTO vip_packages (name, investment_amount, daily_income, total_income, duration_days) VALUES
('J1', 1000, 50, 1500, 30),
('J2', 5000, 300, 9000, 30),
('J3', 10000, 650, 19500, 30)
ON CONFLICT DO NOTHING;

-- Create user VIP subscriptions table
CREATE TABLE IF NOT EXISTS user_vip_subscriptions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  vip_package_id UUID REFERENCES vip_packages(id) ON DELETE CASCADE,
  investment_amount DECIMAL(10,2) NOT NULL,
  daily_income DECIMAL(10,2) NOT NULL,
  total_earned DECIMAL(10,2) DEFAULT 0,
  start_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  end_date TIMESTAMP WITH TIME ZONE NOT NULL,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create transactions table
CREATE TABLE IF NOT EXISTS transactions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  type VARCHAR(20) NOT NULL CHECK (type IN ('deposit', 'withdrawal', 'task_reward', 'referral_bonus', 'vip_income')),
  amount DECIMAL(10,2) NOT NULL,
  description TEXT,
  status VARCHAR(20) DEFAULT 'completed' CHECK (status IN ('pending', 'completed', 'failed', 'cancelled')),
  reference_id VARCHAR(100),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_users_phone ON users(phone);
CREATE INDEX IF NOT EXISTS idx_users_referral_code ON users(referral_code);
CREATE INDEX IF NOT EXISTS idx_referrals_referrer ON referrals(referrer_id);
CREATE INDEX IF NOT EXISTS idx_transactions_user ON transactions(user_id);
[V0_FILE]sql:file="scripts/06-add-password-column-fix.sql"
-- Add password column to users table if it doesn't exist
DO $$ 
BEGIN
    IF NOT EXISTS (SELECT 1 FROM information_schema.columns 
                   WHERE table_name = 'users' AND column_name = 'password') THEN
        ALTER TABLE users ADD COLUMN password VARCHAR(255) NOT NULL DEFAULT '';
    END IF;
END $$;

-- Update the users table to ensure all required columns exist
ALTER TABLE users 
ALTER COLUMN password SET NOT NULL;

-- Create index for password lookups (optional, for performance)
CREATE INDEX IF NOT EXISTS idx_users_password ON users(password);
[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts"
import type { Config } from "tailwindcss";

// all in fixtures is set to tailwind v3 as interims solutions

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			}
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]jpg:file="public/fcb-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/frVtxWj_x6gb_biDwh-gqD/public/fcb-logo.jpg"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_ruD546NVt8vmnW06k3WIBadwp6xH/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[V0_FILE]typescript:file="lib/supabase-client.ts"
import { createClient, type SupabaseClient } from "@supabase/supabase-js"

/**
 * Supabase client configuration for Netlify deployment
 */

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "https://bnckrgznnmouoftwxdlb.supabase.co"
const supabaseKey =
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ||
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJuY2tyZ3pubm1vdW9mdHd4ZGxiIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mzc2MzI0NzEsImV4cCI6MjA1MzIwODQ3MX0.VQoJhJGJQJQJQJQJQJQJQJQJQJQJQJQJQJQJQJQJQJQ"

/**
 * Export a singleton Supabase client
 */
export const supabase: SupabaseClient = createClient(supabaseUrl, supabaseKey, {
  auth: {
    persistSession: true,
    autoRefreshToken: true,
    detectSessionInUrl: false,
  },
  global: {
    headers: {
      "X-Client-Info": "fcb-vip-app",
    },
  },
})

/**
 * Helper function to check if Supabase is properly configured
 */
export const isSupabaseConfigured = (): boolean => {
  return supabaseUrl.includes("supabase.co") && supabaseKey.length > 20
}

/**
 * Helper function to test database connection
 */
export const testDatabaseConnection = async (): Promise<boolean> => {
  try {
    const { data, error } = await supabase.from("users").select("count").limit(1)
    return !error
  } catch (error) {
    console.error("Database connection test failed:", error)
    return false
  }
}

/**
 * Helper getter for lazy access
 */
export function getSupabaseClient() {
  return supabase
}
[V0_FILE]typescript:file="lib/database.ts"
import { supabase } from "./supabase-client"

export interface User {
  id: string
  phone: string
  name?: string
  email?: string
  password: string
  referral_code: string
  referred_by?: string
  balance: number
  referral_earnings: number
  task_earnings: number
  vip_level: number
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface Referral {
  id: string
  referrer_id: string
  referred_id: string
  referrer_code: string
  bonus_amount: number
  is_claimed: boolean
  created_at: string
}

export interface Transaction {
  id: string
  user_id: string
  type: "deposit" | "withdrawal" | "task_reward" | "referral_bonus" | "vip_income"
  amount: number
  description?: string
  status: "pending" | "completed" | "failed" | "cancelled"
  reference_id?: string
  created_at: string
}

export class DatabaseService {
  // Helper function to check if ID is UUID format
  static isValidUUID(id: string): boolean {
    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
    return uuidRegex.test(id)
  }

  // Helper function to check if ID is old format
  static isOldFormatId(id: string): boolean {
    return id.startsWith("user_") && !this.isValidUUID(id)
  }

  // User operations
  static async createUser(userData: {
    phone: string
    name?: string
    email?: string
    password: string
    referral_code: string
    referred_by?: string
  }): Promise<User | null> {
    try {
      console.log("Creating user with phone:", userData.phone)

      const insertData = {
        phone: userData.phone,
        name: userData.name || null,
        email: userData.email || null,
        password: userData.password,
        referral_code: userData.referral_code,
        referred_by: userData.referred_by || null,
        balance: 0,
        referral_earnings: 0,
        task_earnings: 0,
        vip_level: 0,
        is_active: true,
      }

      const { data, error } = await supabase.from("users").insert(insertData).select().single()

      if (error) {
        console.error("Database error creating user:", error)

        // Handle specific database errors
        if (error.code === "23505") {
          throw new Error("User with this phone number already exists")
        }

        throw new Error("Failed to create user account")
      }

      console.log("User created successfully:", data.id)
      return data as User
    } catch (error) {
      console.error("Error creating user:", error)
      throw error
    }
  }

  static async authenticateUser(phone: string, password: string): Promise<User | null> {
    try {
      console.log("Authenticating user:", phone)

      const { data, error } = await supabase
        .from("users")
        .select("*")
        .eq("phone", phone)
        .eq("password", password)
        .eq("is_active", true)
        .single()

      if (error) {
        if (error.code === "PGRST116") {
          console.log("No user found with matching credentials")
          return null
        }
        console.error("Authentication error:", error)
        throw new Error("Authentication failed")
      }

      console.log("Authentication successful for user:", data.id)
      return data as User
    } catch (error) {
      console.error("Authentication error:", error)
      return null
    }
  }

  static async getUserByPhone(phone: string): Promise<User | null> {
    try {
      const { data, error } = await supabase.from("users").select("*").eq("phone", phone).single()

      if (error) {
        if (error.code === "PGRST116") {
          return null
        }
        console.error("Error getting user by phone:", error)
        return null
      }

      return data as User
    } catch (error) {
      console.error("Error getting user by phone:", error)
      return null
    }
  }

  static async getUserByReferralCode(referralCode: string): Promise<User | null> {
    try {
      const { data, error } = await supabase.from("users").select("*").eq("referral_code", referralCode).single()

      if (error) {
        if (error.code === "PGRST116") {
          return null
        }
        console.error("Error getting user by referral code:", error)
        return null
      }

      return data as User
    } catch (error) {
      console.error("Error getting user by referral code:", error)
      return null
    }
  }

  static async getUserById(userId: string): Promise<User | null> {
    try {
      if (this.isOldFormatId(userId) || !this.isValidUUID(userId)) {
        console.log("Invalid user ID format:", userId)
        return null
      }

      const { data, error } = await supabase.from("users").select("*").eq("id", userId).single()

      if (error) {
        if (error.code === "PGRST116") {
          return null
        }
        console.error("Error getting user by ID:", error)
        return null
      }

      return data as User
    } catch (error) {
      console.error("Error getting user by ID:", error)
      return null
    }
  }

  static async updateUser(userId: string, updates: Partial<User>): Promise<User | null> {
    try {
      if (this.isOldFormatId(userId) || !this.isValidUUID(userId)) {
        console.log("Cannot update user with invalid ID format:", userId)
        return null
      }

      const { data, error } = await supabase
        .from("users")
        .update({ ...updates, updated_at: new Date().toISOString() })
        .eq("id", userId)
        .select()
        .single()

      if (error) {
        console.error("Error updating user:", error)
        return null
      }

      return data as User
    } catch (error) {
      console.error("Error updating user:", error)
      return null
    }
  }

  // Referral operations
  static async createReferral(referralData: {
    referrer_id: string
    referred_id: string
    referrer_code: string
    bonus_amount?: number
  }): Promise<Referral | null> {
    try {
      if (!this.isValidUUID(referralData.referrer_id) || !this.isValidUUID(referralData.referred_id)) {
        console.log("Cannot create referral with invalid ID format")
        return null
      }

      const { data, error } = await supabase
        .from("referrals")
        .insert({
          ...referralData,
          bonus_amount: referralData.bonus_amount || 50,
          is_claimed: false,
        })
        .select()
        .single()

      if (error) {
        console.error("Error creating referral:", error)
        return null
      }

      return data as Referral
    } catch (error) {
      console.error("Error creating referral:", error)
      return null
    }
  }

  // Transaction operations
  static async createTransaction(transactionData: {
    user_id: string
    type: "deposit" | "withdrawal" | "task_reward" | "referral_bonus" | "vip_income"
    amount: number
    description?: string
    status?: "pending" | "completed" | "failed" | "cancelled"
    reference_id?: string
  }): Promise<Transaction | null> {
    try {
      if (!this.isValidUUID(transactionData.user_id)) {
        console.log("Cannot create transaction with invalid user ID format:", transactionData.user_id)
        return null
      }

      const { data, error } = await supabase
        .from("transactions")
        .insert({
          ...transactionData,
          status: transactionData.status || "completed",
        })
        .select()
        .single()

      if (error) {
        console.error("Error creating transaction:", error)
        return null
      }

      return data as Transaction
    } catch (error) {
      console.error("Error creating transaction:", error)
      return null
    }
  }

  // Utility functions
  static generateReferralCode(): string {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let result = "FCB"
    for (let i = 0; i < 6; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return result
  }

  static async isReferralCodeUnique(code: string): Promise<boolean> {
    try {
      const { data, error } = await supabase.from("users").select("id").eq("referral_code", code).single()

      if (error && error.code === "PGRST116") {
        return true // No rows returned, code is unique
      }

      return false
    } catch (error) {
      console.error("Error checking referral code uniqueness:", error)
      return false
    }
  }

  static async generateUniqueReferralCode(): Promise<string> {
    let attempts = 0
    const maxAttempts = 10

    while (attempts < maxAttempts) {
      const code = this.generateReferralCode()
      const isUnique = await this.isReferralCodeUnique(code)

      if (isUnique) {
        return code
      }

      attempts++
    }

    // Fallback: add timestamp to ensure uniqueness
    const timestamp = Date.now().toString().slice(-4)
    return `FCB${timestamp}${Math.random().toString(36).substring(2, 4).toUpperCase()}`
  }
}
[V0_FILE]sql:file="scripts/create-test-user.sql"
-- Create a test user for immediate login testing
INSERT INTO users (
  phone, 
  name, 
  email, 
  password, 
  referral_code, 
  balance, 
  referral_earnings, 
  task_earnings, 
  vip_level, 
  is_active
) VALUES (
  '+254700000000',
  'Test User',
  'test@fcbventure.top',
  'password123',
  'FCB123456',
  1000,
  500,
  300,
  1,
  true
) ON CONFLICT (phone) DO UPDATE SET
  name = EXCLUDED.name,
  email = EXCLUDED.email,
  password = EXCLUDED.password,
  referral_code = EXCLUDED.referral_code,
  balance = EXCLUDED.balance,
  referral_earnings = EXCLUDED.referral_earnings,
  task_earnings = EXCLUDED.task_earnings,
  vip_level = EXCLUDED.vip_level,
  is_active = EXCLUDED.is_active;
[V0_FILE]typescript:file="lib/local-storage-auth.ts"
import { nanoid } from "nanoid"

export interface LocalUser {
  id: string
  phone: string
  name?: string
  email?: string
  password: string
  referral_code: string
  referred_by?: string
  balance: number
  referral_earnings: number
  task_earnings: number
  vip_level: number
  is_active: boolean
  created_at: string
  updated_at: string
}

export interface AuthUser {
  id: string
  phone: string
  name?: string
  email?: string
  balance: number
  referral_code: string
  referral_earnings: number
  task_earnings: number
  vip_level: number
  is_active: boolean
  created_at: string
}

export interface AuthResult {
  success: boolean
  message: string
  user?: AuthUser
}

export class LocalStorageAuth {
  private static readonly USERS_KEY = "fcb_users"
  private static readonly SESSION_KEY = "fcb_user_session"
  private static readonly SYNC_QUEUE_KEY = "fcb_sync_queue"

  /**
   * Get all users from localStorage
   */
  private static getUsers(): LocalUser[] {
    if (typeof window === "undefined") return []

    try {
      const users = localStorage.getItem(this.USERS_KEY)
      return users ? JSON.parse(users) : []
    } catch (error) {
      console.error("Error getting users from localStorage:", error)
      return []
    }
  }

  /**
   * Save users to localStorage
   */
  private static saveUsers(users: LocalUser[]): void {
    if (typeof window === "undefined") return

    try {
      localStorage.setItem(this.USERS_KEY, JSON.stringify(users))
    } catch (error) {
      console.error("Error saving users to localStorage:", error)
    }
  }

  /**
   * Update user in localStorage
   */
  static updateUser(userId: string, updates: Partial<LocalUser>): LocalUser | null {
    try {
      const users = this.getUsers()
      const userIndex = users.findIndex((user) => user.id === userId)

      if (userIndex === -1) return null

      users[userIndex] = {
        ...users[userIndex],
        ...updates,
        updated_at: new Date().toISOString(),
      }

      this.saveUsers(users)

      // Update session if it's the current user
      const currentUser = this.getCurrentUser()
      if (currentUser && currentUser.id === userId) {
        const updatedAuthUser: AuthUser = {
          id: users[userIndex].id,
          phone: users[userIndex].phone,
          name: users[userIndex].name,
          email: users[userIndex].email,
          balance: users[userIndex].balance,
          referral_code: users[userIndex].referral_code,
          referral_earnings: users[userIndex].referral_earnings,
          task_earnings: users[userIndex].task_earnings,
          vip_level: users[userIndex].vip_level,
          is_active: users[userIndex].is_active,
          created_at: users[userIndex].created_at,
        }
        this.setCurrentUser(updatedAuthUser)
      }

      return users[userIndex]
    } catch (error) {
      console.error("Error updating user:", error)
      return null
    }
  }

  /**
   * Add operation to sync queue for when database comes back online
   */
  private static addToSyncQueue(operation: any): void {
    if (typeof window === "undefined") return

    try {
      const queue = localStorage.getItem(this.SYNC_QUEUE_KEY)
      const syncQueue = queue ? JSON.parse(queue) : []
      syncQueue.push({
        ...operation,
        timestamp: new Date().toISOString(),
      })
      localStorage.setItem(this.SYNC_QUEUE_KEY, JSON.stringify(syncQueue))
    } catch (error) {
      console.error("Error adding to sync queue:", error)
    }
  }

  /**
   * Format phone number to Kenyan standard
   */
  static formatPhoneNumber(phoneNumber: string): string {
    const cleaned = phoneNumber.replace(/\D/g, "")

    if (cleaned.startsWith("254")) {
      return `+${cleaned}`
    } else if (cleaned.startsWith("0")) {
      return `+254${cleaned.substring(1)}`
    } else if (cleaned.length === 9) {
      return `+254${cleaned}`
    }

    return phoneNumber
  }

  /**
   * Validate phone number format
   */
  static validatePhoneNumber(phone: string): boolean {
    const formatted = this.formatPhoneNumber(phone)
    const phoneRegex = /^\+254[17]\d{8}$/
    return phoneRegex.test(formatted)
  }

  /**
   * Generate referral code
   */
  static generateReferralCode(): string {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    let result = "FCB"
    for (let i = 0; i < 6; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return result
  }

  /**
   * Check if referral code is unique
   */
  static isReferralCodeUnique(code: string): boolean {
    const users = this.getUsers()
    return !users.some((user) => user.referral_code === code)
  }

  /**
   * Generate unique referral code
   */
  static generateUniqueReferralCode(): string {
    let attempts = 0
    const maxAttempts = 10

    while (attempts < maxAttempts) {
      const code = this.generateReferralCode()
      if (this.isReferralCodeUnique(code)) {
        return code
      }
      attempts++
    }

    // Fallback: add timestamp to ensure uniqueness
    const timestamp = Date.now().toString().slice(-4)
    return `FCB${timestamp}${Math.random().toString(36).substring(2, 4).toUpperCase()}`
  }

  /**
   * Register a new user locally
   */
  static register(userData: {
    phone: string
    name?: string
    email?: string
    password: string
    referralCode?: string
  }): AuthResult {
    try {
      console.log("Local registration attempt for:", userData.phone)

      const formattedPhone = this.formatPhoneNumber(userData.phone)

      // Validate phone number
      if (!this.validatePhoneNumber(formattedPhone)) {
        return {
          success: false,
          message: "Please enter a valid Kenyan phone number (07xxxxxxxx or +254xxxxxxxx)",
        }
      }

      const users = this.getUsers()

      // Check if user already exists
      const existingUser = users.find((user) => user.phone === formattedPhone)
      if (existingUser) {
        return {
          success: false,
          message: "An account with this phone number already exists. Please login instead.",
        }
      }

      // Validate referral code if provided
      let referrer = null
      if (userData.referralCode?.trim()) {
        referrer = users.find((user) => user.referral_code === userData.referralCode!.trim().toUpperCase())
        if (!referrer) {
          return {
            success: false,
            message: "Invalid referral code. Please check and try again.",
          }
        }
      }

      // Generate unique referral code for new user
      const referralCode = this.generateUniqueReferralCode()
      const userId = nanoid()
      const now = new Date().toISOString()

      // Create new user
      const newUser: LocalUser = {
        id: userId,
        phone: formattedPhone,
        name: userData.name?.trim(),
        email: userData.email?.trim(),
        password: userData.password,
        referral_code: referralCode,
        referred_by: referrer?.id,
        balance: 0,
        referral_earnings: 0,
        task_earnings: 0,
        vip_level: 0,
        is_active: true,
        created_at: now,
        updated_at: now,
      }

      // Handle referral bonus if user was referred
      if (referrer) {
        referrer.referral_earnings += 50
        referrer.balance += 50
        referrer.updated_at = now

        // Add referral creation to sync queue
        this.addToSyncQueue({
          type: "create_referral",
          data: {
            referrer_id: referrer.id,
            referred_id: userId,
            referrer_code: userData.referralCode!.trim().toUpperCase(),
            bonus_amount: 50,
          },
        })

        // Add transaction to sync queue
        this.addToSyncQueue({
          type: "create_transaction",
          data: {
            user_id: referrer.id,
            type: "referral_bonus",
            amount: 50,
            description: "New user referral bonus",
            status: "completed",
          },
        })
      }

      // Add new user to users array
      users.push(newUser)
      this.saveUsers(users)

      // Add user creation to sync queue
      this.addToSyncQueue({
        type: "create_user",
        data: newUser,
      })

      const authUser: AuthUser = {
        id: newUser.id,
        phone: newUser.phone,
        name: newUser.name,
        email: newUser.email,
        balance: newUser.balance,
        referral_code: newUser.referral_code,
        referral_earnings: newUser.referral_earnings,
        task_earnings: newUser.task_earnings,
        vip_level: newUser.vip_level,
        is_active: newUser.is_active,
        created_at: newUser.created_at,
      }

      // Store user session
      this.setCurrentUser(authUser)

      return {
        success: true,
        message: "Account created successfully!",
        user: authUser,
      }
    } catch (error) {
      console.error("Local registration error:", error)
      return {
        success: false,
        message: "Registration failed. Please try again.",
      }
    }
  }

  /**
   * Login user locally
   */
  static login(phone: string, password: string): AuthResult {
    try {
      console.log("Local login attempt for:", phone)

      if (!phone?.trim() || !password?.trim()) {
        return {
          success: false,
          message: "Please enter both phone number and password",
        }
      }

      const formattedPhone = this.formatPhoneNumber(phone)

      // Validate phone number format
      if (!this.validatePhoneNumber(formattedPhone)) {
        return {
          success: false,
          message: "Please enter a valid Kenyan phone number (07xxxxxxxx or +254xxxxxxxx)",
        }
      }

      const users = this.getUsers()
      const user = users.find((u) => u.phone === formattedPhone && u.password === password)

      if (!user) {
        return {
          success: false,
          message: "Invalid phone number or password. Please check your credentials and try again.",
        }
      }

      if (!user.is_active) {
        return {
          success: false,
          message: "Your account has been deactivated. Please contact support.",
        }
      }

      const authUser: AuthUser = {
        id: user.id,
        phone: user.phone,
        name: user.name,
        email: user.email,
        balance: user.balance,
        referral_code: user.referral_code,
        referral_earnings: user.referral_earnings,
        task_earnings: user.task_earnings,
        vip_level: user.vip_level,
        is_active: user.is_active,
        created_at: user.created_at,
      }

      // Store user session
      this.setCurrentUser(authUser)

      return {
        success: true,
        message: "Login successful!",
        user: authUser,
      }
    } catch (error) {
      console.error("Local login error:", error)
      return {
        success: false,
        message: "Login failed. Please try again.",
      }
    }
  }

  /**
   * Get current logged-in user
   */
  static getCurrentUser(): AuthUser | null {
    if (typeof window === "undefined") return null

    try {
      const userData = localStorage.getItem(this.SESSION_KEY)
      return userData ? JSON.parse(userData) : null
    } catch (error) {
      console.error("Error getting current user:", error)
      this.logout() // Clear corrupted session
      return null
    }
  }

  /**
   * Set current user
   */
  static setCurrentUser(user: AuthUser): void {
    if (typeof window === "undefined") return

    try {
      localStorage.setItem(this.SESSION_KEY, JSON.stringify(user))
    } catch (error) {
      console.error("Error setting current user:", error)
    }
  }

  /**
   * Logout user
   */
  static logout(): void {
    if (typeof window === "undefined") return

    try {
      localStorage.removeItem(this.SESSION_KEY)
    } catch (error) {
      console.error("Error during logout:", error)
    }
  }

  /**
   * Check if user is authenticated
   */
  static isAuthenticated(): boolean {
    return this.getCurrentUser() !== null
  }

  /**
   * Get sync queue for database synchronization
   */
  static getSyncQueue(): any[] {
    if (typeof window === "undefined") return []

    try {
      const queue = localStorage.getItem(this.SYNC_QUEUE_KEY)
      return queue ? JSON.parse(queue) : []
    } catch (error) {
      console.error("Error getting sync queue:", error)
      return []
    }
  }

  /**
   * Clear sync queue after successful synchronization
   */
  static clearSyncQueue(): void {
    if (typeof window === "undefined") return

    try {
      localStorage.removeItem(this.SYNC_QUEUE_KEY)
    } catch (error) {
      console.error("Error clearing sync queue:", error)
    }
  }
}
[V0_FILE]typescript:file="lib/hybrid-auth.ts"
import { LocalStorageAuth, type AuthResult, type AuthUser } from "./local-storage-auth"
import { DatabaseService } from "./database"

export class HybridAuthService {
  /**
   * Check if database is available
   */
  private static async isDatabaseAvailable(): Promise<boolean> {
    try {
      // Try a simple database operation
      await DatabaseService.getUserByPhone("+254000000000") // Non-existent phone
      return true
    } catch (error) {
      console.log("Database unavailable, using local storage")
      return false
    }
  }

  /**
   * Sync local data to database when it becomes available
   */
  static async syncToDatabase(): Promise<void> {
    try {
      const isDbAvailable = await this.isDatabaseAvailable()
      if (!isDbAvailable) return

      const syncQueue = LocalStorageAuth.getSyncQueue()
      console.log("Syncing", syncQueue.length, "operations to database")

      for (const operation of syncQueue) {
        try {
          switch (operation.type) {
            case "create_user":
              await DatabaseService.createUser(operation.data)
              break
            case "create_referral":
              await DatabaseService.createReferral(operation.data)
              break
            case "create_transaction":
              await DatabaseService.createTransaction(operation.data)
              break
            default:
              console.log("Unknown sync operation:", operation.type)
          }
        } catch (error) {
          console.error("Error syncing operation:", operation, error)
        }
      }

      // Clear sync queue after successful sync
      LocalStorageAuth.clearSyncQueue()
      console.log("Sync completed successfully")
    } catch (error) {
      console.error("Error during sync:", error)
    }
  }

  /**
   * Register user (try database first, fallback to local storage)
   */
  static async register(userData: {
    phone: string
    name?: string
    email?: string
    password: string
    referralCode?: string
  }): Promise<AuthResult> {
    try {
      const isDbAvailable = await this.isDatabaseAvailable()

      if (isDbAvailable) {
        console.log("Database available, using database registration")

        const formattedPhone = LocalStorageAuth.formatPhoneNumber(userData.phone)

        // Validate phone number
        if (!LocalStorageAuth.validatePhoneNumber(formattedPhone)) {
          return {
            success: false,
            message: "Please enter a valid Kenyan phone number (07xxxxxxxx or +254xxxxxxxx)",
          }
        }

        // Check if user already exists
        const existingUser = await DatabaseService.getUserByPhone(formattedPhone)
        if (existingUser) {
          return {
            success: false,
            message: "An account with this phone number already exists. Please login instead.",
          }
        }

        // Validate referral code if provided
        let referrer = null
        if (userData.referralCode?.trim()) {
          referrer = await DatabaseService.getUserByReferralCode(userData.referralCode.trim().toUpperCase())
          if (!referrer) {
            return {
              success: false,
              message: "Invalid referral code. Please check and try again.",
            }
          }
        }

        // Generate unique referral code for new user
        const referralCode = await DatabaseService.generateUniqueReferralCode()

        // Create user
        const newUser = await DatabaseService.createUser({
          phone: formattedPhone,
          name: userData.name?.trim(),
          email: userData.email?.trim(),
          password: userData.password,
          referral_code: referralCode,
          referred_by: referrer?.id,
        })

        if (!newUser) {
          throw new Error("Failed to create user in database")
        }

        // Handle referral bonus if user was referred
        if (referrer) {
          try {
            await DatabaseService.createReferral({
              referrer_id: referrer.id,
              referred_id: newUser.id,
              referrer_code: userData.referralCode!.trim().toUpperCase(),
              bonus_amount: 50,
            })

            // Update referrer's earnings
            await DatabaseService.updateUser(referrer.id, {
              referral_earnings: referrer.referral_earnings + 50,
              balance: referrer.balance + 50,
            })

            // Create transaction record
            await DatabaseService.createTransaction({
              user_id: referrer.id,
              type: "referral_bonus",
              amount: 50,
              description: "New user referral bonus",
              status: "completed",
            })
          } catch (error) {
            console.error("Error processing referral bonus:", error)
            // Don't fail registration if referral bonus fails
          }
        }

        const authUser: AuthUser = {
          id: newUser.id,
          phone: newUser.phone,
          name: newUser.name,
          email: newUser.email,
          balance: newUser.balance,
          referral_code: newUser.referral_code,
          referral_earnings: newUser.referral_earnings,
          task_earnings: newUser.task_earnings,
          vip_level: newUser.vip_level,
          is_active: newUser.is_active,
          created_at: newUser.created_at,
        }

        // Store user session
        LocalStorageAuth.setCurrentUser(authUser)

        return {
          success: true,
          message: "Account created successfully!",
          user: authUser,
        }
      } else {
        console.log("Database unavailable, using local storage registration")
        return LocalStorageAuth.register(userData)
      }
    } catch (error) {
      console.error("Database registration failed, falling back to local storage:", error)
      return LocalStorageAuth.register(userData)
    }
  }

  /**
   * Login user (try database first, fallback to local storage)
   */
  static async login(phone: string, password: string): Promise<AuthResult> {
    try {
      const isDbAvailable = await this.isDatabaseAvailable()

      if (isDbAvailable) {
        console.log("Database available, using database login")

        if (!phone?.trim() || !password?.trim()) {
          return {
            success: false,
            message: "Please enter both phone number and password",
          }
        }

        const formattedPhone = LocalStorageAuth.formatPhoneNumber(phone)

        // Validate phone number format
        if (!LocalStorageAuth.validatePhoneNumber(formattedPhone)) {
          return {
            success: false,
            message: "Please enter a valid Kenyan phone number (07xxxxxxxx or +254xxxxxxxx)",
          }
        }

        const user = await DatabaseService.authenticateUser(formattedPhone, password)

        if (!user) {
          return {
            success: false,
            message: "Invalid phone number or password. Please check your credentials and try again.",
          }
        }

        if (!user.is_active) {
          return {
            success: false,
            message: "Your account has been deactivated. Please contact support.",
          }
        }

        const authUser: AuthUser = {
          id: user.id,
          phone: user.phone,
          name: user.name,
          email: user.email,
          balance: user.balance,
          referral_code: user.referral_code,
          referral_earnings: user.referral_earnings,
          task_earnings: user.task_earnings,
          vip_level: user.vip_level,
          is_active: user.is_active,
          created_at: user.created_at,
        }

        // Store user session
        LocalStorageAuth.setCurrentUser(authUser)

        return {
          success: true,
          message: "Login successful!",
          user: authUser,
        }
      } else {
        console.log("Database unavailable, using local storage login")
        return LocalStorageAuth.login(phone, password)
      }
    } catch (error) {
      console.error("Database login failed, falling back to local storage:", error)
      return LocalStorageAuth.login(phone, password)
    }
  }

  /**
   * Update user data
   */
  static async updateUser(userId: string, updates: any): Promise<AuthUser | null> {
    try {
      const isDbAvailable = await this.isDatabaseAvailable()

      if (isDbAvailable) {
        // Try database first
        const updatedUser = await DatabaseService.updateUser(userId, updates)
        if (updatedUser) {
          const authUser: AuthUser = {
            id: updatedUser.id,
            phone: updatedUser.phone,
            name: updatedUser.name,
            email: updatedUser.email,
            balance: updatedUser.balance,
            referral_code: updatedUser.referral_code,
            referral_earnings: updatedUser.referral_earnings,
            task_earnings: updatedUser.task_earnings,
            vip_level: updatedUser.vip_level,
            is_active: updatedUser.is_active,
            created_at: updatedUser.created_at,
          }
          LocalStorageAuth.setCurrentUser(authUser)
          return authUser
        }
      }

      // Fallback to local storage
      const localUser = LocalStorageAuth.updateUser(userId, updates)
      if (localUser) {
        return {
          id: localUser.id,
          phone: localUser.phone,
          name: localUser.name,
          email: localUser.email,
          balance: localUser.balance,
          referral_code: localUser.referral_code,
          referral_earnings: localUser.referral_earnings,
          task_earnings: localUser.task_earnings,
          vip_level: localUser.vip_level,
          is_active: localUser.is_active,
          created_at: localUser.created_at,
        }
      }

      return null
    } catch (error) {
      console.error("Error updating user:", error)
      return null
    }
  }

  /**
   * Get current logged-in user
   */
  static getCurrentUser(): AuthUser | null {
    return LocalStorageAuth.getCurrentUser()
  }

  /**
   * Logout user
   */
  static logout(): void {
    LocalStorageAuth.logout()
  }

  /**
   * Check if user is authenticated
   */
  static isAuthenticated(): boolean {
    return LocalStorageAuth.isAuthenticated()
  }

  /**
   * Initialize the auth system
   */
  static initialize(): void {
    // Try to sync with database in the background
    this.syncToDatabase().catch((error) => {
      console.log("Background sync failed:", error)
    })
  }
}
[V0_FILE]typescript:file="lib/simple-auth.ts"
import { HybridAuthService } from "./hybrid-auth"

export interface AuthUser {
  id: string
  phone: string
  name?: string
  email?: string
  balance: number
  referral_code: string
  referral_earnings: number
  task_earnings: number
  vip_level: number
  is_active: boolean
  created_at: string
}

export interface AuthResult {
  success: boolean
  message: string
  user?: AuthUser
}

export class SimpleAuthService {
  /**
   * Register a new user
   */
  static async register(userData: {
    phone: string
    name?: string
    email?: string
    password: string
    referralCode?: string
  }): Promise<AuthResult> {
    return HybridAuthService.register(userData)
  }

  /**
   * Login user
   */
  static async login(phone: string, password: string): Promise<AuthResult> {
    return HybridAuthService.login(phone, password)
  }

  /**
   * Update user data
   */
  static async updateUser(userId: string, updates: any): Promise<AuthUser | null> {
    return HybridAuthService.updateUser(userId, updates)
  }

  /**
   * Get current logged-in user
   */
  static getCurrentUser(): AuthUser | null {
    return HybridAuthService.getCurrentUser()
  }

  /**
   * Logout user
   */
  static logout(): void {
    HybridAuthService.logout()
  }

  /**
   * Check if user is authenticated
   */
  static isAuthenticated(): boolean {
    return HybridAuthService.isAuthenticated()
  }

  /**
   * Initialize the auth system
   */
  static initialize(): void {
    HybridAuthService.initialize()
  }

  /**
   * Sync local data to database
   */
  static async syncToDatabase(): Promise<void> {
    return HybridAuthService.syncToDatabase()
  }
}

// Session management helpers for backward compatibility
export const saveUserSession = (user: AuthUser): void => {
  HybridAuthService.getCurrentUser()
}

export const getUserSession = (): AuthUser | null => {
  return HybridAuthService.getCurrentUser()
}

export const clearUserSession = (): void => {
  HybridAuthService.logout()
}

export const isAuthenticated = (): boolean => {
  return HybridAuthService.isAuthenticated()
}
[V0_FILE]typescriptreact:file="app/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { LogIn, Eye, EyeOff, Phone, Lock, Loader2, Wifi, WifiOff } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"

import { SimpleAuthService, getUserSession } from "@/lib/simple-auth"

export default function LoginPage() {
  const [form, setForm] = useState({ phone: "", password: "" })
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [isOnline, setIsOnline] = useState(true)
  const [authMode, setAuthMode] = useState<"database" | "local">("local")
  const router = useRouter()

  // Check online status and existing session
  useEffect(() => {
    // Initialize auth system
    SimpleAuthService.initialize()

    // Check if user is already logged in
    const existingUser = getUserSession()
    if (existingUser) {
      router.push("/dashboard")
      return
    }

    // Monitor online status
    const handleOnline = () => {
      setIsOnline(true)
      setAuthMode("database")
      // Try to sync when coming back online
      SimpleAuthService.syncToDatabase().catch(console.error)
    }

    const handleOffline = () => {
      setIsOnline(false)
      setAuthMode("local")
    }

    // Set initial online status
    setIsOnline(navigator.onLine)
    setAuthMode(navigator.onLine ? "database" : "local")

    window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)

    return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
  }, [router])

  const handleChange = (field: "phone" | "password", value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }))
    // Clear error when user starts typing
    if (error) setError("")
  }

  const formatPhoneNumber = (value: string) => {
    // Remove all non-digit characters
    const digits = value.replace(/\D/g, "")

    // Format as Kenyan phone number
    if (digits.startsWith("254")) {
      return "+" + digits.slice(0, 12)
    } else if (digits.startsWith("0")) {
      return "+254" + digits.slice(1, 10)
    } else {
      return "+254" + digits.slice(0, 9)
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setLoading(true)

    try {
      const result = await SimpleAuthService.login(form.phone, form.password)

      if (result.success && result.user) {
        console.log("Login successful, redirecting to dashboard")
        router.push("/dashboard")
      } else {
        setError(result.message)
      }
    } catch (error) {
      console.error("Login error:", error)
      setError("Login failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-green-50 p-4">
      <div className="w-full max-w-md space-y-6">
        {/* Connection Status */}
        <div className="text-center">
          <Badge variant={isOnline ? "default" : "secondary"} className="mb-4">
            {isOnline ? (
              <>
                <Wifi className="w-3 h-3 mr-1" />
                Online - Database Mode
              </>
            ) : (
              <>
                <WifiOff className="w-3 h-3 mr-1" />
                Offline - Local Mode
              </>
            )}
          </Badge>
        </div>

        <Card className="w-full shadow-xl border-0 bg-white/80 backdrop-blur">
          <CardHeader className="space-y-1 pb-4 text-center">
            <div className="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-r from-blue-600 to-green-600 flex items-center justify-center mb-4">
              <Image src="/fcb-logo.jpg" alt="FCB VIP" width={60} height={60} className="rounded-xl" />
            </div>
            <CardTitle className="text-2xl font-bold flex items-center justify-center gap-2">
              <LogIn className="h-6 w-6 text-blue-600" />
              Welcome Back
            </CardTitle>
            <CardDescription>
              Sign in to your FCB VIP account
              {!isOnline && (
                <div className="mt-2 text-xs text-amber-600">
                  Working offline - your data will sync when connection is restored
                </div>
              )}
            </CardDescription>
          </CardHeader>

          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="phone">Phone Number</Label>
                <div className="relative">
                  <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+254700000000"
                    value={form.phone}
                    onChange={(e) => handleChange("phone", formatPhoneNumber(e.target.value))}
                    className="pl-10 h-12"
                    disabled={loading}
                    required
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Enter your password"
                    value={form.password}
                    onChange={(e) => handleChange("password", e.target.value)}
                    className="pl-10 pr-10 h-12"
                    disabled={loading}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword((s) => !s)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-4 w-4 text-gray-400" />
                    ) : (
                      <Eye className="h-4 w-4 text-gray-400" />
                    )}
                  </Button>
                </div>
              </div>

              {error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <Button
                type="submit"
                className="w-full h-12 bg-gradient-to-r from-blue-600 to-green-600 text-white font-semibold"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Signing in...
                  </>
                ) : (
                  "Sign In"
                )}
              </Button>
            </form>

            <div className="mt-6 text-center space-y-2">
              <Link href="/reset-password" className="text-sm text-blue-600 hover:text-blue-700">
                Forgot password?
              </Link>
              <p className="text-sm text-gray-600">
                Don't have an account?{" "}
                <Link href="/register" className="font-semibold text-green-600 hover:text-green-700">
                  Create one
                </Link>
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Status Info */}
        <Card className="bg-gray-50">
          <CardContent className="pt-6">
            <div className="text-xs text-gray-600 space-y-1">
              <div>Mode: {authMode === "database" ? "🌐 Database" : "💾 Local Storage"}</div>
              <div>Status: {isOnline ? "✅ Online" : "📱 Offline"}</div>
              <div>Works offline: ✅ Yes</div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { UserPlus, Eye, EyeOff, Phone, Lock, User, Mail, Gift, ArrowLeft, Loader2, Wifi, WifiOff } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"

import { SimpleAuthService } from "@/lib/simple-auth"

export default function RegisterPage() {
  const [form, setForm] = useState({
    phone: "",
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    referralCode: "",
  })
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [isOnline, setIsOnline] = useState(true)
  const [authMode, setAuthMode] = useState<"database" | "local">("local")
  const router = useRouter()

  // Check online status
  useEffect(() => {
    // Initialize auth system
    SimpleAuthService.initialize()

    // Monitor online status
    const handleOnline = () => {
      setIsOnline(true)
      setAuthMode("database")
      // Try to sync when coming back online
      SimpleAuthService.syncToDatabase().catch(console.error)
    }

    const handleOffline = () => {
      setIsOnline(false)
      setAuthMode("local")
    }

    // Set initial online status
    setIsOnline(navigator.onLine)
    setAuthMode(navigator.onLine ? "database" : "local")

    window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)

    return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
  }, [])

  const handleChange = (field: keyof typeof form, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }))
    // Clear messages when user starts typing
    if (error) setError("")
    if (success) setSuccess("")
  }

  const formatPhoneNumber = (value: string) => {
    // Remove all non-digit characters
    const digits = value.replace(/\D/g, "")

    // Format as Kenyan phone number
    if (digits.startsWith("254")) {
      return "+" + digits.slice(0, 12)
    } else if (digits.startsWith("0")) {
      return "+254" + digits.slice(1, 10)
    } else {
      return "+254" + digits.slice(0, 9)
    }
  }

  const validateForm = () => {
    if (!form.phone.trim()) {
      setError("Phone number is required")
      return false
    }

    if (!form.name.trim()) {
      setError("Full name is required")
      return false
    }

    if (!form.password.trim()) {
      setError("Password is required")
      return false
    }

    if (form.password.length < 6) {
      setError("Password must be at least 6 characters long")
      return false
    }

    if (form.password !== form.confirmPassword) {
      setError("Passwords do not match")
      return false
    }

    // Email validation if provided
    if (form.email && !/\S+@\S+\.\S+/.test(form.email)) {
      setError("Please enter a valid email address")
      return false
    }

    return true
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setSuccess("")

    if (!validateForm()) {
      return
    }

    setLoading(true)

    try {
      console.log("Registration attempt for:", form.phone)

      const result = await SimpleAuthService.register({
        phone: form.phone,
        name: form.name,
        email: form.email || undefined,
        password: form.password,
        referralCode: form.referralCode || undefined,
      })

      if (result.success && result.user) {
        setSuccess(
          isOnline
            ? "Account created successfully! Redirecting to dashboard..."
            : "Account created offline! Data will sync when connection is restored. Redirecting to dashboard...",
        )
        console.log("Registration successful, redirecting to dashboard")

        setTimeout(() => {
          router.push("/dashboard")
        }, 1500)
      } else {
        setError(result.message)
      }
    } catch (error) {
      console.error("Registration error:", error)
      setError("Registration failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-green-50 p-4">
      <div className="w-full max-w-md space-y-6">
        {/* Connection Status */}
        <div className="text-center">
          <Badge variant={isOnline ? "default" : "secondary"} className="mb-4">
            {isOnline ? (
              <>
                <Wifi className="w-3 h-3 mr-1" />
                Online - Database Mode
              </>
            ) : (
              <>
                <WifiOff className="w-3 h-3 mr-1" />
                Offline - Local Mode
              </>
            )}
          </Badge>
        </div>

        <Card className="w-full shadow-xl border-0 bg-white/80 backdrop-blur">
          <CardHeader className="space-y-1 pb-4 text-center">
            <div className="flex items-center mb-4">
              <Link href="/">
                <Button variant="ghost" size="sm" className="mr-2">
                  <ArrowLeft className="h-4 w-4" />
                </Button>
              </Link>
              <h1 className="text-xl font-bold text-gray-900">Create Account</h1>
            </div>

            <div className="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-r from-blue-600 to-green-600 flex items-center justify-center mb-4">
              <Image src="/fcb-logo.jpg" alt="FCB VIP" width={60} height={60} className="rounded-xl" />
            </div>
            <CardTitle className="text-2xl font-bold flex items-center justify-center gap-2">
              <UserPlus className="h-6 w-6 text-green-600" />
              Sign Up
            </CardTitle>
            <CardDescription>
              Join FCB VIP and start earning today
              {!isOnline && (
                <div className="mt-2 text-xs text-amber-600">
                  Working offline - your account will sync when connection is restored
                </div>
              )}
            </CardDescription>
          </CardHeader>

          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="phone">Phone Number *</Label>
                <div className="relative">
                  <Phone className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+254700000000"
                    value={form.phone}
                    onChange={(e) => handleChange("phone", formatPhoneNumber(e.target.value))}
                    className="pl-10 h-12"
                    disabled={loading}
                    required
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="name">Full Name *</Label>
                <div className="relative">
                  <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="name"
                    type="text"
                    placeholder="Your full name"
                    value={form.name}
                    onChange={(e) => handleChange("name", e.target.value)}
                    className="pl-10 h-12"
                    disabled={loading}
                    required
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="email">Email (Optional)</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="email"
                    type="email"
                    placeholder="your.email@example.com"
                    value={form.email}
                    onChange={(e) => handleChange("email", e.target.value)}
                    className="pl-10 h-12"
                    disabled={loading}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="password">Password *</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Create a strong password"
                    value={form.password}
                    onChange={(e) => handleChange("password", e.target.value)}
                    className="pl-10 pr-10 h-12"
                    disabled={loading}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword((s) => !s)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-4 w-4 text-gray-400" />
                    ) : (
                      <Eye className="h-4 w-4 text-gray-400" />
                    )}
                  </Button>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm Password *</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="confirmPassword"
                    type={showConfirmPassword ? "text" : "password"}
                    placeholder="Confirm your password"
                    value={form.confirmPassword}
                    onChange={(e) => handleChange("confirmPassword", e.target.value)}
                    className="pl-10 pr-10 h-12"
                    disabled={loading}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowConfirmPassword((s) => !s)}
                  >
                    {showConfirmPassword ? (
                      <EyeOff className="h-4 w-4 text-gray-400" />
                    ) : (
                      <Eye className="h-4 w-4 text-gray-400" />
                    )}
                  </Button>
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="referralCode">Referral Code (Optional)</Label>
                <div className="relative">
                  <Gift className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="referralCode"
                    type="text"
                    placeholder="Enter referral code for bonus"
                    value={form.referralCode}
                    onChange={(e) => handleChange("referralCode", e.target.value.toUpperCase())}
                    className="pl-10 h-12"
                    disabled={loading}
                  />
                </div>
              </div>

              {error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              {success && (
                <Alert className="border-green-500 bg-green-50">
                  <AlertDescription className="text-green-700">{success}</AlertDescription>
                </Alert>
              )}

              <Button
                type="submit"
                className="w-full h-12 bg-gradient-to-r from-green-600 to-blue-600 text-white font-semibold"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Creating Account...
                  </>
                ) : (
                  "Create Account"
                )}
              </Button>
            </form>

            <div className="mt-6 text-center">
              <p className="text-sm text-gray-600">
                Already have an account?{" "}
                <Link href="/" className="font-semibold text-blue-600 hover:text-blue-700">
                  Sign in here
                </Link>
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Status Info */}
        <Card className="bg-gray-50">
          <CardContent className="pt-6">
            <div className="text-xs text-gray-600 space-y-1">
              <div>Mode: {authMode === "database" ? "🌐 Database" : "💾 Local Storage"}</div>
              <div>Status: {isOnline ? "✅ Online" : "📱 Offline"}</div>
              <div>Works offline: ✅ Yes</div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Home, FileText, Trophy, TrendingUp, User, Play, Clock, CheckCircle, Lock, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { SimpleAuthService } from "@/lib/simple-auth"

export default function TasksPage() {
  const [activeTab, setActiveTab] = useState("doing")
  const [userBalance, setUserBalance] = useState(0)
  const [userVipLevel, setUserVipLevel] = useState(0)
  const [completedTasks, setCompletedTasks] = useState<number[]>([])
  const [taskInProgress, setTaskInProgress] = useState<number | null>(null)
  const [lastResetDate, setLastResetDate] = useState("")
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

  // Load data from localStorage and database on component mount
  useEffect(() => {
    loadUserData()
    checkMidnightReset()
    setupMidnightTimer()
  }, [])

  const loadUserData = async () => {
    try {
      setIsLoading(true)
      const user = SimpleAuthService.getCurrentUser()
      if (!user) {
        router.push("/")
        return
      }

      setCurrentUser(user)
      setUserBalance(Number(user.balance) || 0)
      setUserVipLevel(Number(user.vip_level) || 0)

      // Load task completion data
      const savedCompletedTasks = localStorage.getItem(`completedTasks_${user.id}`)
      const savedLastReset = localStorage.getItem(`lastTaskReset_${user.id}`)

      if (savedCompletedTasks) {
        setCompletedTasks(JSON.parse(savedCompletedTasks))
      }
      if (savedLastReset) {
        setLastResetDate(savedLastReset)
      }
    } catch (error) {
      console.error("Error loading user data:", error)
    } finally {
      setIsLoading(false)
    }
  }

  // Save data to localStorage whenever it changes
  useEffect(() => {
    if (currentUser) {
      localStorage.setItem(`completedTasks_${currentUser.id}`, JSON.stringify(completedTasks))
    }
  }, [completedTasks, currentUser])

  // Check if tasks should be reset at midnight
  const checkMidnightReset = () => {
    if (!currentUser) return

    const today = new Date().toDateString()
    const savedResetDate = localStorage.getItem(`lastTaskReset_${currentUser.id}`)

    if (savedResetDate !== today) {
      // Reset tasks for new day
      setCompletedTasks([])
      localStorage.setItem(`completedTasks_${currentUser.id}`, "[]")
      localStorage.setItem(`lastTaskReset_${currentUser.id}`, today)
      setLastResetDate(today)
    }
  }

  // Set up midnight reset timer
  const setupMidnightTimer = () => {
    const now = new Date()
    const tomorrow = new Date(now)
    tomorrow.setDate(tomorrow.getDate() + 1)
    tomorrow.setHours(0, 0, 0, 0)

    const timeUntilMidnight = tomorrow.getTime() - now.getTime()

    const timer = setTimeout(() => {
      checkMidnightReset()
      // Set up daily interval after first midnight
      setInterval(checkMidnightReset, 24 * 60 * 60 * 1000)
    }, timeUntilMidnight)

    return () => clearTimeout(timer)
  }

  const taskItems = [
    {
      id: 1,
      title: "Pen Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.07.35-yTJpQFl6UCvELeOw6mE6H0Mv8kGLCU.jpeg",
      reward: 60,
      category: "Intern",
      status: "available",
      description: "Review pen product",
      level: "Intern",
      dailyEarning: "KES 60 per 2 days",
      duration: 3000,
      requiredVipLevel: 0, // Intern level
    },
    {
      id: 2,
      title: "Watch Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.09.39-uGBrzzKSjKM8AhI3JaqC0RaTsPczIu.jpeg",
      reward: 70,
      category: "J1",
      status: "available",
      description: "Apple Watch review",
      level: "J1",
      dailyEarning: "KES 70 per day for 365 days",
      duration: 4000,
      requiredVipLevel: 1, // J1 level
    },
    {
      id: 3,
      title: "Phone Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.10.33-Lmy6oz5bpzO9s8u29da5JsWBsORjE6.jpeg",
      reward: 180,
      category: "J2",
      status: "available",
      description: "Smartphone analysis",
      level: "J2",
      dailyEarning: "KES 180 per day for 365 days",
      duration: 5000,
      requiredVipLevel: 2, // J2 level
    },
    {
      id: 4,
      title: "Tractor Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.12.55-NMdj8cGIwtfqTk4pTO61YavtWzInbt.jpeg",
      reward: 350,
      category: "J3",
      status: "available",
      description: "Vehicle product review",
      level: "J3",
      dailyEarning: "KES 350 per day for 365 days",
      duration: 6000,
      requiredVipLevel: 3, // J3 level
    },
    {
      id: 5,
      title: "Motorbike Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.13.36-ZO70Doi5nzz1JQ8Ky4EjFUuXcJVb2A.jpeg",
      reward: 600,
      category: "J4",
      status: "available",
      description: "Ducati motorcycle review",
      level: "J4",
      dailyEarning: "KES 600 per day for 365 days",
      duration: 7000,
      requiredVipLevel: 4, // J4 level
    },
    {
      id: 6,
      title: "Ferrari Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.23.52-aAw53910WyelVJr3uhHwUpjW6KSusf.jpeg",
      reward: 1300,
      category: "J5",
      status: "available",
      description: "Luxury sports car review",
      level: "J5",
      dailyEarning: "KES 1300 per day for 365 days",
      duration: 8000,
      requiredVipLevel: 5, // J5 level
    },
    {
      id: 7,
      title: "House Review Task",
      image:
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-07-19%20at%2010.25.10-dcKUkoACv5cdDJJ7P9vlg8jZ2ao6Fc.jpeg",
      reward: 3200,
      category: "J6",
      status: "available",
      description: "Luxury property review",
      level: "J6",
      dailyEarning: "KES 3200 per day for 365 days",
      duration: 10000,
      requiredVipLevel: 6, // J6 level
    },
  ]

  const handleStartTask = async (taskId: number) => {
    const task = taskItems.find((t) => t.id === taskId)
    if (!task || completedTasks.includes(taskId) || taskInProgress === taskId || !currentUser) return

    // Check if user has required VIP level for this task
    if (userVipLevel < task.requiredVipLevel) {
      alert(
        `VIP Level ${task.requiredVipLevel} required! You need to purchase ${task.category} package to unlock this task.`,
      )
      return
    }

    setTaskInProgress(taskId)

    // Simulate task completion after duration
    setTimeout(async () => {
      const newBalance = userBalance + task.reward
      const newTaskEarnings = (currentUser.task_earnings || 0) + task.reward

      // Update user using the auth service
      const updatedUser = await SimpleAuthService.updateUser(currentUser.id, {
        balance: newBalance,
        task_earnings: newTaskEarnings,
      })

      if (updatedUser) {
        setUserBalance(newBalance)
        setCompletedTasks((prev) => [...prev, taskId])
        setTaskInProgress(null)
        setCurrentUser(updatedUser)

        // Show success message
        alert(`Task completed! You earned KES ${task.reward}`)
      }
    }, task.duration)
  }

  const isTaskLocked = (task: any) => {
    return userVipLevel < task.requiredVipLevel
  }

  const getTaskButtonContent = (task: any) => {
    if (completedTasks.includes(task.id)) {
      return (
        <>
          <CheckCircle className="h-3 w-3 mr-1" />
          Completed
        </>
      )
    }

    if (taskInProgress === task.id) {
      return (
        <>
          <Clock className="h-3 w-3 mr-1 animate-spin" />
          In Progress...
        </>
      )
    }

    if (isTaskLocked(task)) {
      return (
        <>
          <Lock className="h-3 w-3 mr-1" />
          Locked
        </>
      )
    }

    return (
      <>
        <Play className="h-3 w-3 mr-1" />
        Start Task
      </>
    )
  }

  const getTaskButtonClass = (task: any) => {
    if (completedTasks.includes(task.id)) {
      return "bg-green-500 hover:bg-green-600 text-white"
    }

    if (taskInProgress === task.id) {
      return "bg-yellow-500 hover:bg-yellow-600 text-white"
    }

    if (isTaskLocked(task)) {
      return "bg-gray-400 text-white cursor-not-allowed"
    }

    return "bg-orange-500 hover:bg-orange-600 text-white"
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center p-4">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading tasks...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
      {/* Header */}
      <div className="bg-white/80 backdrop-blur border-b border-gray-200 p-4 sticky top-0 z-10">
        <div className="flex items-center justify-between max-w-6xl mx-auto">
          <div className="flex items-center">
            <Button variant="ghost" size="sm" onClick={() => router.back()} className="mr-3">
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h1 className="text-xl font-bold">Task Center</h1>
          </div>
          <div className="text-right">
            <div className="text-sm font-medium text-green-600">Balance: KES {userBalance.toLocaleString()}</div>
            <div className="text-xs text-gray-500">VIP Level: {userVipLevel}</div>
            <div className="text-xs text-gray-500">Tasks reset daily at 00:00</div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="bg-white/80 backdrop-blur border-b border-gray-200">
        <div className="max-w-6xl mx-auto">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-3 bg-transparent">
              <TabsTrigger
                value="doing"
                className="data-[state=active]:bg-transparent data-[state=active]:text-orange-500 data-[state=active]:border-b-2 data-[state=active]:border-orange-500 rounded-none"
              >
                Doing
              </TabsTrigger>
              <TabsTrigger
                value="audit"
                className="data-[state=active]:bg-transparent data-[state=active]:text-orange-500 data-[state=active]:border-b-2 data-[state=active]:border-orange-500 rounded-none"
              >
                Audit
              </TabsTrigger>
              <TabsTrigger
                value="success"
                className="data-[state=active]:bg-transparent data-[state=active]:text-orange-500 data-[state=active]:border-b-2 data-[state=active]:border-orange-500 rounded-none"
              >
                Success
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>
      </div>

      {/* Content */}
      <div className="p-4 max-w-6xl mx-auto pb-20">
        {activeTab === "doing" && (
          <div>
            {/* Task Hall Header */}
            <div className="mb-6">
              <h2 className="text-2xl font-bold mb-4 text-center">Task Hall</h2>
              <div className="flex justify-center space-x-2 mb-6 overflow-x-auto">
                <Button size="sm" className="bg-blue-600 text-white whitespace-nowrap">
                  Intern
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J1
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J2
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J3
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J4
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J5
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="border-blue-600 text-blue-600 bg-transparent whitespace-nowrap"
                >
                  J6
                </Button>
              </div>
            </div>

            {/* Task Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
              {taskItems.map((task) => (
                <Card
                  key={task.id}
                  className={`relative overflow-hidden shadow-lg hover:shadow-xl transition-shadow ${isTaskLocked(task) ? "opacity-60" : ""}`}
                >
                  <CardContent className="p-0">
                    <div className="relative">
                      <div className="w-full h-48 relative">
                        <img
                          src={task.image || "/placeholder.svg"}
                          alt={task.title}
                          className="w-full h-full object-cover"
                        />
                        {isTaskLocked(task) && (
                          <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                            <Lock className="h-8 w-8 text-white" />
                          </div>
                        )}
                      </div>
                      <div className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <Badge className="bg-red-500 text-white">{task.category}</Badge>
                          <div className="font-bold text-green-600 text-lg">KES +{task.reward}</div>
                        </div>
                        <div className="font-semibold text-lg mb-2">{task.title}</div>
                        <div className="text-sm text-gray-600 mb-2">{task.description}</div>
                        <div className="text-xs text-blue-600 mb-3">{task.dailyEarning}</div>
                        {isTaskLocked(task) && (
                          <div className="text-xs text-red-500 mb-3">
                            Requires VIP Level {task.requiredVipLevel} ({task.category})
                          </div>
                        )}
                        <Button
                          size="sm"
                          className={`w-full ${getTaskButtonClass(task)}`}
                          onClick={() => handleStartTask(task.id)}
                          disabled={
                            completedTasks.includes(task.id) || taskInProgress === task.id || isTaskLocked(task)
                          }
                        >
                          {getTaskButtonContent(task)}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        )}

        {activeTab === "success" && (
          <div>
            <h3 className="text-2xl font-bold mb-6 text-center">Completed Tasks</h3>
            {completedTasks.length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {taskItems
                  .filter((task) => completedTasks.includes(task.id))
                  .map((task) => (
                    <Card key={task.id} className="shadow-lg">
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <CheckCircle className="h-6 w-6 text-green-500" />
                          <div className="font-bold text-green-600 text-lg">+KES {task.reward}</div>
                        </div>
                        <div className="font-semibold text-lg mb-2">{task.title}</div>
                        <div className="text-sm text-gray-500">Completed Successfully</div>
                      </CardContent>
                    </Card>
                  ))}
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center py-20">
                <div className="text-center">
                  <div className="w-20 h-20 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                    <Clock className="h-10 w-10 text-gray-400" />
                  </div>
                  <p className="text-gray-500 text-lg">No completed tasks yet</p>
                  <p className="text-gray-400 text-sm">Start completing tasks to see them here</p>
                </div>
              </div>
            )}
          </div>
        )}

        {activeTab === "audit" && (
          <div className="flex flex-col items-center justify-center py-20">
            <div className="text-center">
              <div className="w-20 h-20 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                <Clock className="h-10 w-10 text-gray-400" />
              </div>
              <p className="text-gray-500 text-lg">No audit data</p>
              <p className="text-gray-400 text-sm">Task audit information will appear here</p>
            </div>
          </div>
        )}
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur border-t border-gray-200">
        <div className="flex justify-around py-2 max-w-6xl mx-auto">
          <Link
            href="/dashboard"
            className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600 transition-colors"
          >
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-blue-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1 font-medium">Task</span>
          </Link>
          <Link
            href="/vip"
            className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600 transition-colors"
          >
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link
            href="/profits"
            className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600 transition-colors"
          >
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link
            href="/profile"
            className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600 transition-colors"
          >
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">My</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vip/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Trophy, ArrowLeft, MessageCircle } from "lucide-react"
import { SimpleAuthService } from "@/lib/simple-auth"

interface User {
  id: string
  phone: string
  name?: string
  balance: number
  vip_level: number
  task_earnings: number
  referral_earnings: number
}

interface VipPackage {
  id: string
  name: string
  investment: number
  daily: number
  duration: number
  color: string
  level: number
}

const packages: VipPackage[] = [
  { id: "intern", name: "Intern", investment: 0, daily: 60, duration: 2, color: "from-gray-500 to-gray-600", level: 0 },
  { id: "j1", name: "J1", investment: 2100, daily: 70, duration: 365, color: "from-orange-500 to-red-500", level: 1 },
  { id: "j2", name: "J2", investment: 5400, daily: 180, duration: 365, color: "from-green-500 to-teal-500", level: 2 },
  {
    id: "j3",
    name: "J3",
    investment: 10500,
    daily: 350,
    duration: 365,
    color: "from-yellow-500 to-orange-500",
    level: 3,
  },
  {
    id: "j4",
    name: "J4",
    investment: 18000,
    daily: 600,
    duration: 365,
    color: "from-purple-500 to-pink-500",
    level: 4,
  },
  {
    id: "j5",
    name: "J5",
    investment: 39000,
    daily: 1300,
    duration: 365,
    color: "from-blue-500 to-indigo-500",
    level: 5,
  },
  { id: "j6", name: "J6", investment: 96000, daily: 3200, duration: 365, color: "from-red-500 to-pink-500", level: 6 },
]

export default function VipPage() {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

  useEffect(() => {
    loadUserData()
  }, [router])

  const loadUserData = async () => {
    try {
      setIsLoading(true)
      const currentUser = SimpleAuthService.getCurrentUser()
      if (!currentUser) {
        router.push("/")
        return
      }

      const userWithBalance = {
        id: currentUser.id,
        phone: currentUser.phone,
        name: currentUser.name,
        balance: Number(currentUser.balance) || 0,
        vip_level: Number(currentUser.vip_level) || 0,
        task_earnings: Number(currentUser.task_earnings) || 0,
        referral_earnings: Number(currentUser.referral_earnings) || 0,
      }
      setUser(userWithBalance)
    } catch (error) {
      console.error("Error loading user data:", error)
      router.push("/")
    } finally {
      setIsLoading(false)
    }
  }

  const handleJoin = async (pkg: VipPackage) => {
    if (!user) return

    // Special handling for Intern package (free)
    if (pkg.id === "intern") {
      const confirmed = confirm(
        `Join ${pkg.name} for FREE?\n\nYou will earn KES ${pkg.daily} daily for ${pkg.duration} days.`,
      )
      if (!confirmed) return

      setLoading(true)

      try {
        const newVipLevel = Math.max(user.vip_level, pkg.level)

        // Update user using auth service
        const updatedUser = await SimpleAuthService.updateUser(user.id, {
          vip_level: newVipLevel,
        })

        if (updatedUser) {
          const userWithBalance = {
            ...user,
            vip_level: newVipLevel,
          }
          setUser(userWithBalance)

          alert(`Successfully joined ${pkg.name}! You can now access ${pkg.name} level tasks.`)
        } else {
          alert("Failed to process. Please try again.")
        }
      } catch (error) {
        console.error("Error joining VIP:", error)
        alert("Failed to process. Please try again.")
      } finally {
        setLoading(false)
      }
      return
    }

    if (user.balance < pkg.investment) {
      alert(
        `Insufficient balance. You need KES ${pkg.investment.toLocaleString()} but only have KES ${user.balance.toLocaleString()}`,
      )
      return
    }

    const confirmed = confirm(
      `Join ${pkg.name} for KES ${pkg.investment.toLocaleString()}?\n\nYou will earn KES ${pkg.daily} daily for ${pkg.duration} days.\n\nNote: Payment requires admin confirmation before tasks unlock.`,
    )
    if (!confirmed) return

    setLoading(true)

    try {
      // Deduct balance and create pending VIP subscription
      const newBalance = user.balance - pkg.investment
      const newVipLevel = Math.max(user.vip_level, pkg.level)

      // Update user balance and VIP level
      const updatedUser = await SimpleAuthService.updateUser(user.id, {
        balance: newBalance,
        vip_level: newVipLevel,
      })

      if (updatedUser) {
        const userWithBalance = {
          ...user,
          balance: newBalance,
          vip_level: newVipLevel,
        }
        setUser(userWithBalance)

        alert(
          `Payment successful! KES ${pkg.investment.toLocaleString()} has been deducted.\n\nYour VIP ${pkg.name} subscription is now active!\nYou can now access ${pkg.name} level tasks.`,
        )
      } else {
        alert("Failed to process payment. Please try again.")
      }
    } catch (error) {
      console.error("Error processing payment:", error)
      alert("Failed to process payment. Please try again.")
    } finally {
      setLoading(false)
    }
  }

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center p-4">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading VIP packages...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 flex items-center justify-center p-4">
        <div className="text-center">
          <p className="text-gray-600 mb-4">Unable to load user data</p>
          <Button onClick={() => router.push("/")} variant="outline">
            Return to Login
          </Button>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50">
      {/* Header */}
      <div className="bg-white/80 backdrop-blur shadow-sm border-b sticky top-0 z-10">
        <div className="flex items-center justify-between p-4 max-w-6xl mx-auto">
          <div className="flex items-center">
            <Button variant="ghost" size="sm" onClick={() => router.back()} className="mr-3">
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h1 className="text-xl font-semibold">VIP Center</h1>
          </div>
          <div className="text-sm font-medium text-blue-600">KES {user.balance.toLocaleString()}</div>
        </div>
      </div>

      {/* Content */}
      <div className="p-4 space-y-6 max-w-6xl mx-auto pb-20">
        {/* Current VIP Status */}
        <Card className="bg-gradient-to-r from-slate-800 to-slate-900 text-white shadow-xl">
          <CardContent className="p-8">
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-2xl font-bold mb-3">My VIP Status</h2>
                <p className="text-slate-300 mb-2 text-lg">Level: {user.vip_level}</p>
                <p className="text-slate-300 text-lg">Balance: KES {user.balance.toLocaleString()}</p>
              </div>
              <div className="bg-blue-600 rounded-full p-4">
                <Trophy className="h-8 w-8 text-white" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* VIP Packages */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {packages.map((pkg) => (
            <Card
              key={pkg.id}
              className={`bg-gradient-to-r ${pkg.color} text-white shadow-xl hover:shadow-2xl transition-shadow`}
            >
              <CardContent className="p-6">
                <div className="text-center">
                  <div className="bg-white/20 rounded-full p-3 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                    <Trophy className="h-8 w-8 text-white" />
                  </div>
                  <h3 className="text-3xl font-bold mb-3">{pkg.name}</h3>
                  <p className="text-xl mb-2">KES {pkg.daily}/Per day</p>
                  <p className="text-sm mb-2">Duration: {pkg.duration} days</p>
                  <p className="text-lg mb-4">
                    {pkg.investment === 0 ? "FREE" : `Deposit KES ${pkg.investment.toLocaleString()}`}
                  </p>
                  {user.vip_level >= pkg.level && (
                    <p className="text-sm mb-4 bg-green-500/30 px-3 py-1 rounded-full inline-block">✓ Unlocked</p>
                  )}
                  <Button
                    variant="secondary"
                    className="w-full bg-white/20 hover:bg-white/30 text-white border-0 py-3"
                    onClick={() => handleJoin(pkg)}
                    disabled={loading || user.vip_level >= pkg.level}
                  >
                    {loading ? "Processing..." : user.vip_level >= pkg.level ? "Unlocked" : "Join now"}
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur border-t border-gray-200">
        <div className="grid grid-cols-5 py-2 max-w-6xl mx-auto">
          <Button variant="ghost" className="flex flex-col items-center py-2" onClick={() => router.push("/dashboard")}>
            <div className="w-6 h-6 mb-1 bg-gray-400 rounded"></div>
            <span className="text-xs text-gray-600">Home</span>
          </Button>
          <Button variant="ghost" className="flex flex-col items-center py-2" onClick={() => router.push("/tasks")}>
            <div className="w-6 h-6 mb-1 bg-gray-400 rounded"></div>
            <span className="text-xs text-gray-600">Task</span>
          </Button>
          <Button variant="ghost" className="flex flex-col items-center py-2">
            <Trophy className="w-6 h-6 mb-1 text-blue-600" />
            <span className="text-xs text-blue-600 font-medium">VIP</span>
          </Button>
          <Button variant="ghost" className="flex flex-col items-center py-2" onClick={() => router.push("/profits")}>
            <div className="w-6 h-6 mb-1 bg-gray-400 rounded"></div>
            <span className="text-xs text-gray-600">Profits</span>
          </Button>
          <Button variant="ghost" className="flex flex-col items-center py-2" onClick={() => router.push("/profile")}>
            <div className="w-6 h-6 mb-1 bg-gray-400 rounded"></div>
            <span className="text-xs text-gray-600">My</span>
          </Button>
        </div>
      </div>

      {/* Floating Customer Care */}
      <Button
        className="fixed bottom-20 right-4 bg-green-600 hover:bg-green-700 text-white rounded-full w-14 h-14 shadow-lg"
        onClick={() => window.open("https://wa.me/254700000000", "_blank")}
      >
        <MessageCircle className="h-6 w-6" />
      </Button>
    </div>
  )
}
[V0_FILE]json:file="package.json"
{
  "name": "fcb-vip-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.5",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-hover-card": "^1.0.7",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-toggle-group": "^1.0.4",
    "@radix-ui/react-tooltip": "^1.0.7",
    "@supabase/supabase-js": "^2.38.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "date-fns": "^2.30.0",
    "embla-carousel-react": "^8.0.0-rc22",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.294.0",
    "nanoid": "^5.0.4",
    "next": "14.0.4",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "react-resizable-panels": "^0.0.55",
    "recharts": "^2.8.0",
    "sonner": "^1.2.4",
    "tailwind-merge": "^2.1.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.7.9",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/admin-login/page.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Shield, Eye, EyeOff, User, Lock, Loader2 } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function AdminLoginPage() {
  const [form, setForm] = useState({ username: "", password: "" })
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const router = useRouter()

  // Check if admin is already logged in
  useEffect(() => {
    const adminSession = localStorage.getItem("admin_session")
    if (adminSession) {
      try {
        const session = JSON.parse(adminSession)
        if (session.expires > Date.now()) {
          router.push("/admin")
          return
        } else {
          localStorage.removeItem("admin_session")
        }
      } catch (error) {
        localStorage.removeItem("admin_session")
      }
    }
  }, [router])

  const handleChange = (field: "username" | "password", value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }))
    if (error) setError("")
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setLoading(true)

    try {
      // Admin credentials check
      const adminCredentials = {
        username: "fcb_admin",
        password: "FCB@Admin2024!",
      }

      if (form.username === adminCredentials.username && form.password === adminCredentials.password) {
        // Create admin session
        const adminSession = {
          username: form.username,
          loginTime: Date.now(),
          expires: Date.now() + 24 * 60 * 60 * 1000, // 24 hours
        }

        localStorage.setItem("admin_session", JSON.stringify(adminSession))

        console.log("Admin login successful, redirecting to dashboard")
        router.push("/admin")
      } else {
        setError("Invalid admin credentials")
      }
    } catch (error) {
      console.error("Admin login error:", error)
      setError("Login failed. Please try again.")
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 via-white to-orange-50 p-4">
      <div className="w-full max-w-md space-y-6">
        <Card className="w-full shadow-xl border-0 bg-white/80 backdrop-blur">
          <CardHeader className="space-y-1 pb-4 text-center">
            <div className="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-r from-red-600 to-orange-600 flex items-center justify-center mb-4">
              <Shield className="h-10 w-10 text-white" />
            </div>
            <CardTitle className="text-2xl font-bold flex items-center justify-center gap-2">
              <Shield className="h-6 w-6 text-red-600" />
              Admin Access
            </CardTitle>
            <CardDescription>Secure admin portal for FCB VIP management</CardDescription>
          </CardHeader>

          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="username">Admin Username</Label>
                <div className="relative">
                  <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="username"
                    type="text"
                    placeholder="Enter admin username"
                    value={form.username}
                    onChange={(e) => handleChange("username", e.target.value)}
                    className="pl-10 h-12"
                    disabled={loading}
                    required
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="password">Admin Password</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    placeholder="Enter admin password"
                    value={form.password}
                    onChange={(e) => handleChange("password", e.target.value)}
                    className="pl-10 pr-10 h-12"
                    disabled={loading}
                    required
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    className="absolute right-0 top-0 h-12 px-3 py-2 hover:bg-transparent"
                    onClick={() => setShowPassword((s) => !s)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-4 w-4 text-gray-400" />
                    ) : (
                      <Eye className="h-4 w-4 text-gray-400" />
                    )}
                  </Button>
                </div>
              </div>

              {error && (
                <Alert variant="destructive">
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <Button
                type="submit"
                className="w-full h-12 bg-gradient-to-r from-red-600 to-orange-600 text-white font-semibold"
                disabled={loading}
              >
                {loading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Authenticating...
                  </>
                ) : (
                  "Access Admin Panel"
                )}
              </Button>
            </form>

            <div className="mt-6 text-center">
              <p className="text-xs text-gray-500">Authorized personnel only. All access is logged and monitored.</p>
            </div>
          </CardContent>
        </Card>

        {/* Admin Info */}
        <Card className="bg-red-50 border-red-200">
          <CardContent className="pt-6">
            <div className="text-xs text-red-700 space-y-1">
              <div className="font-semibold">🔐 Secure Admin Portal</div>
              <div>• M-Pesa Transaction Management</div>
              <div>• User Account Control</div>
              <div>• Activity Monitoring</div>
              <div>• System Administration</div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Users,
  DollarSign,
  AlertTriangle,
  Eye,
  CheckCircle,
  XCircle,
  Activity,
  Search,
  Filter,
  Download,
  Shield,
  LogOut,
  UserPlus,
  UserX,
  CreditCard,
  Smartphone,
  Ban,
  UserCheck,
} from "lucide-react"

interface MpesaTransaction {
  id: string
  transactionId: string
  phone: string
  amount: number
  type: "deposit" | "withdrawal"
  status: "pending" | "confirmed" | "failed"
  mpesaCode: string
  timestamp: string
  userMessage: string
}

interface WithdrawalRequest {
  id: string
  userId: string
  phone: string
  amount: number
  method: string
  status: "pending" | "approved" | "rejected"
  requestDate: string
  riskLevel: "low" | "medium" | "high"
  isTrialWithdrawal: boolean
  mpesaPhone: string
  userActivity: {
    accountAge: number
    totalDeposits: number
    totalEarnings: number
    taskEarnings: number
    referralEarnings: number
    tasksCompleted: number
    referralsMade: number
    lastActivity: string
  }
  withdrawalHistory: Array<{
    amount: number
    date: string
    status: string
  }>
}

interface UserAccount {
  id: string
  phone: string
  name: string
  email: string
  balance: number
  vipLevel: number
  status: "active" | "suspended" | "banned"
  joinDate: string
  lastActivity: string
  totalDeposits: number
  totalWithdrawals: number
  referralCode: string
  referredBy: string
}

interface UserActivity {
  id: string
  userId: string
  phone: string
  action: string
  details: string
  timestamp: string
  ipAddress: string
  device: string
}

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("overview")
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedUser, setSelectedUser] = useState<WithdrawalRequest | null>(null)
  const [selectedAccount, setSelectedAccount] = useState<UserAccount | null>(null)
  const [mpesaTransactions, setMpesaTransactions] = useState<MpesaTransaction[]>([])
  const [userAccounts, setUserAccounts] = useState<UserAccount[]>([])
  const [userActivities, setUserActivities] = useState<UserActivity[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

  // Mock data - in real app this would come from API
  const [withdrawalRequests, setWithdrawalRequests] = useState<WithdrawalRequest[]>([
    {
      id: "WD001",
      userId: "USR001",
      phone: "+254700000001",
      amount: 500,
      method: "M-Pesa",
      status: "pending",
      requestDate: "2025-01-23",
      riskLevel: "low",
      isTrialWithdrawal: false,
      mpesaPhone: "+254700000001",
      userActivity: {
        accountAge: 15,
        totalDeposits: 5000,
        totalEarnings: 800,
        taskEarnings: 650,
        referralEarnings: 150,
        tasksCompleted: 25,
        referralsMade: 3,
        lastActivity: "2025-01-23",
      },
      withdrawalHistory: [
        { amount: 200, date: "2025-01-20", status: "approved" },
        { amount: 300, date: "2025-01-18", status: "approved" },
      ],
    },
  ])

  const [dashboardStats, setDashboardStats] = useState({
    totalUsers: 1247,
    activeUsers: 892,
    suspendedUsers: 15,
    totalDeposits: 2847500,
    totalWithdrawals: 1234560,
    pendingWithdrawals: 8,
    pendingMpesaTransactions: 12,
    totalEarnings: 456780,
    newUsersToday: 23,
    referralBonusesPaid: 45600,
  })

  // Check admin authentication
  useEffect(() => {
    const adminSession = localStorage.getItem("admin_session")
    if (!adminSession) {
      router.push("/admin-login")
      return
    }

    try {
      const session = JSON.parse(adminSession)
      if (session.expires <= Date.now()) {
        localStorage.removeItem("admin_session")
        router.push("/admin-login")
        return
      }
    } catch (error) {
      localStorage.removeItem("admin_session")
      router.push("/admin-login")
      return
    }

    loadData()
  }, [router])

  const loadData = async () => {
    try {
      setIsLoading(true)

      // Load M-Pesa transactions
      const mockMpesaTransactions: MpesaTransaction[] = [
        {
          id: "MP001",
          transactionId: "QHX8K9L2M3",
          phone: "+254700000001",
          amount: 2100,
          type: "deposit",
          status: "pending",
          mpesaCode: "QHX8K9L2M3",
          timestamp: "2025-01-23 14:30:00",
          userMessage: "Deposit for VIP J1 package",
        },
        {
          id: "MP002",
          transactionId: "RJY9M4N5P6",
          phone: "+254700000002",
          amount: 500,
          type: "withdrawal",
          status: "pending",
          mpesaCode: "RJY9M4N5P6",
          timestamp: "2025-01-23 13:15:00",
          userMessage: "Withdrawal request",
        },
      ]

      // Load user accounts
      const mockUserAccounts: UserAccount[] = [
        {
          id: "user_001",
          phone: "+254700000001",
          name: "John Doe",
          email: "john@example.com",
          balance: 1250,
          vipLevel: 1,
          status: "active",
          joinDate: "2025-01-10",
          lastActivity: "2025-01-23 14:30:00",
          totalDeposits: 5000,
          totalWithdrawals: 1200,
          referralCode: "FCBJ001",
          referredBy: "FCBR123",
        },
        {
          id: "user_002",
          phone: "+254700000002",
          name: "Jane Smith",
          email: "jane@example.com",
          balance: 850,
          vipLevel: 0,
          status: "active",
          joinDate: "2025-01-15",
          lastActivity: "2025-01-23 13:15:00",
          totalDeposits: 2100,
          totalWithdrawals: 500,
          referralCode: "FCBJ002",
          referredBy: "",
        },
      ]

      // Load user activities
      const mockUserActivities: UserActivity[] = [
        {
          id: "ACT001",
          userId: "user_001",
          phone: "+254700000001",
          action: "VIP_PURCHASE",
          details: "Purchased J1 VIP package for KES 2,100",
          timestamp: "2025-01-23 14:30:00",
          ipAddress: "192.168.1.100",
          device: "Mobile - Android",
        },
        {
          id: "ACT002",
          userId: "user_002",
          phone: "+254700000002",
          action: "WITHDRAWAL_REQUEST",
          details: "Requested withdrawal of KES 500",
          timestamp: "2025-01-23 13:15:00",
          ipAddress: "192.168.1.101",
          device: "Mobile - iOS",
        },
        {
          id: "ACT003",
          userId: "user_001",
          phone: "+254700000001",
          action: "TASK_COMPLETED",
          details: "Completed task: Product Review - Earned KES 70",
          timestamp: "2025-01-23 12:45:00",
          ipAddress: "192.168.1.100",
          device: "Mobile - Android",
        },
      ]

      setMpesaTransactions(mockMpesaTransactions)
      setUserAccounts(mockUserAccounts)
      setUserActivities(mockUserActivities)
    } catch (error) {
      console.error("Error loading admin data:", error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleLogout = () => {
    localStorage.removeItem("admin_session")
    router.push("/admin-login")
  }

  const handleMpesaAction = (transactionId: string, action: "confirm" | "reject") => {
    setMpesaTransactions((prev) =>
      prev.map((transaction) =>
        transaction.id === transactionId
          ? { ...transaction, status: action === "confirm" ? "confirmed" : "failed" }
          : transaction,
      ),
    )

    const transaction = mpesaTransactions.find((t) => t.id === transactionId)
    if (transaction) {
      alert(`M-Pesa transaction ${transaction.mpesaCode} has been ${action}ed`)
    }
  }

  const handleUserAction = (userId: string, action: "suspend" | "activate" | "ban") => {
    setUserAccounts((prev) =>
      prev.map((user) =>
        user.id === userId
          ? {
              ...user,
              status: action === "suspend" ? "suspended" : action === "ban" ? "banned" : "active",
            }
          : user,
      ),
    )

    const user = userAccounts.find((u) => u.id === userId)
    if (user) {
      alert(`User ${user.phone} has been ${action}ed`)
    }
  }

  const handleWithdrawalAction = (requestId: string, action: "approve" | "reject") => {
    setWithdrawalRequests((prev) =>
      prev.map((request) =>
        request.id === requestId ? { ...request, status: action === "approve" ? "approved" : "rejected" } : request,
      ),
    )

    const request = withdrawalRequests.find((r) => r.id === requestId)
    if (request) {
      alert(`Withdrawal request ${requestId} has been ${action}d for ${request.phone}`)
    }
  }

  const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "confirmed":
      case "approved":
      case "active":
        return "bg-green-100 text-green-800"
      case "failed":
      case "rejected":
      case "banned":
        return "bg-red-100 text-red-800"
      case "pending":
      case "suspended":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getRiskBadgeColor = (riskLevel: string) => {
    switch (riskLevel) {
      case "high":
        return "bg-red-100 text-red-800 border-red-200"
      case "medium":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "low":
        return "bg-green-100 text-green-800 border-green-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  const filteredMpesaTransactions = mpesaTransactions.filter(
    (transaction) =>
      transaction.phone.includes(searchTerm) || transaction.mpesaCode.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredUserAccounts = userAccounts.filter(
    (user) =>
      user.phone.includes(searchTerm) ||
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.referralCode.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredUserActivities = userActivities.filter(
    (activity) =>
      activity.phone.includes(searchTerm) || activity.action.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredWithdrawals = withdrawalRequests.filter(
    (request) => request.phone.includes(searchTerm) || request.id.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  return (
    <div className="min-h-screen bg-gray-50 p-4 max-w-7xl mx-auto">
      {/* Header */}
      <div className="mb-8 flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2 flex items-center gap-2">
            <Shield className="h-8 w-8 text-red-600" />
            Admin Dashboard
          </h1>
          <p className="text-gray-600">FCB VIP Platform Management System</p>
        </div>
        <Button onClick={handleLogout} variant="outline" className="text-red-600 border-red-200 bg-transparent">
          <LogOut className="h-4 w-4 mr-2" />
          Logout
        </Button>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-blue-100 rounded-lg">
                <Users className="h-6 w-6 text-blue-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Users</p>
                <p className="text-2xl font-bold text-gray-900">{dashboardStats.totalUsers.toLocaleString()}</p>
                <p className="text-xs text-gray-500">
                  Active: {dashboardStats.activeUsers} | Suspended: {dashboardStats.suspendedUsers}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-green-100 rounded-lg">
                <DollarSign className="h-6 w-6 text-green-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Deposits</p>
                <p className="text-2xl font-bold text-gray-900">KES {dashboardStats.totalDeposits.toLocaleString()}</p>
                <p className="text-xs text-gray-500">
                  Withdrawals: KES {dashboardStats.totalWithdrawals.toLocaleString()}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-orange-100 rounded-lg">
                <Smartphone className="h-6 w-6 text-orange-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">M-Pesa Pending</p>
                <p className="text-2xl font-bold text-gray-900">{dashboardStats.pendingMpesaTransactions}</p>
                <p className="text-xs text-gray-500">Requires confirmation</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-red-100 rounded-lg">
                <AlertTriangle className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Pending Actions</p>
                <p className="text-2xl font-bold text-gray-900">
                  {dashboardStats.pendingWithdrawals + dashboardStats.pendingMpesaTransactions}
                </p>
                <p className="text-xs text-gray-500">Withdrawals: {dashboardStats.pendingWithdrawals}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Main Content */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-6 max-w-2xl">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="mpesa">M-Pesa</TabsTrigger>
          <TabsTrigger value="withdrawals">Withdrawals</TabsTrigger>
          <TabsTrigger value="users">Users</TabsTrigger>
          <TabsTrigger value="activities">Activities</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          {/* Recent Activity */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Activity className="h-5 w-5 mr-2" />
                Recent System Activity
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
                  <div className="flex items-center">
                    <Smartphone className="h-5 w-5 text-orange-600 mr-3" />
                    <div>
                      <p className="font-medium">M-Pesa Transaction Pending</p>
                      <p className="text-sm text-gray-600">+254700000001 - KES 2,100 deposit</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">5 min ago</span>
                </div>

                <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                  <div className="flex items-center">
                    <CreditCard className="h-5 w-5 text-yellow-600 mr-3" />
                    <div>
                      <p className="font-medium">Withdrawal Request</p>
                      <p className="text-sm text-gray-600">+254700000002 - KES 500</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">15 min ago</span>
                </div>

                <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                  <div className="flex items-center">
                    <UserPlus className="h-5 w-5 text-blue-600 mr-3" />
                    <div>
                      <p className="font-medium">New User Registration</p>
                      <p className="text-sm text-gray-600">+254700000003 joined with referral</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">1 hour ago</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="mpesa" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or M-Pesa code..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* M-Pesa Transactions Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Smartphone className="h-5 w-5 mr-2" />
                M-Pesa Transactions
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>M-Pesa Code</TableHead>
                    <TableHead>Phone</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>Message</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredMpesaTransactions.map((transaction) => (
                    <TableRow key={transaction.id}>
                      <TableCell className="font-medium">{transaction.mpesaCode}</TableCell>
                      <TableCell>{transaction.phone}</TableCell>
                      <TableCell>
                        <Badge
                          className={
                            transaction.type === "deposit" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"
                          }
                        >
                          {transaction.type.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell className="font-bold">KES {transaction.amount.toLocaleString()}</TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(transaction.status)}>
                          {transaction.status.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell>{transaction.timestamp}</TableCell>
                      <TableCell className="max-w-xs truncate">{transaction.userMessage}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          {transaction.status === "pending" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                    <CheckCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Confirm M-Pesa Transaction</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Confirm M-Pesa transaction {transaction.mpesaCode} for KES{" "}
                                      {transaction.amount.toLocaleString()}? This will update the user's balance.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleMpesaAction(transaction.id, "confirm")}
                                      className="bg-green-600 hover:bg-green-700"
                                    >
                                      Confirm Transaction
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <XCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Reject M-Pesa Transaction</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Reject M-Pesa transaction {transaction.mpesaCode}? This action cannot be undone.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleMpesaAction(transaction.id, "reject")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Reject Transaction
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="withdrawals" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or request ID..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Withdrawal Requests Table */}
          <Card>
            <CardHeader>
              <CardTitle>Withdrawal Requests</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Request ID</TableHead>
                    <TableHead>User</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>M-Pesa Phone</TableHead>
                    <TableHead>Risk Level</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Date</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredWithdrawals.map((request) => (
                    <TableRow key={request.id}>
                      <TableCell className="font-medium">
                        {request.id}
                        {request.isTrialWithdrawal && <Badge className="ml-2 bg-blue-100 text-blue-800">Trial</Badge>}
                      </TableCell>
                      <TableCell>{request.phone}</TableCell>
                      <TableCell className="font-bold">KES {request.amount}</TableCell>
                      <TableCell>{request.mpesaPhone}</TableCell>
                      <TableCell>
                        <Badge className={getRiskBadgeColor(request.riskLevel)}>
                          {request.riskLevel.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(request.status)}>{request.status.toUpperCase()}</Badge>
                      </TableCell>
                      <TableCell>{request.requestDate}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Dialog>
                            <DialogTrigger asChild>
                              <Button variant="outline" size="sm" onClick={() => setSelectedUser(request)}>
                                <Eye className="h-4 w-4" />
                              </Button>
                            </DialogTrigger>
                            <DialogContent className="max-w-4xl">
                              <DialogHeader>
                                <DialogTitle>User Activity Details - {request.phone}</DialogTitle>
                                <DialogDescription>Complete activity history and fraud analysis</DialogDescription>
                              </DialogHeader>

                              {selectedUser && (
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                  {/* User Info */}
                                  <div className="space-y-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Account Information</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Phone:</span>
                                          <span className="font-medium">{selectedUser.phone}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>M-Pesa Phone:</span>
                                          <span className="font-medium">{selectedUser.mpesaPhone}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Account Age:</span>
                                          <span className="font-medium">
                                            {selectedUser.userActivity.accountAge} days
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Last Activity:</span>
                                          <span className="font-medium">{selectedUser.userActivity.lastActivity}</span>
                                        </div>
                                      </div>
                                    </div>

                                    <div>
                                      <h4 className="font-semibold mb-2">Financial Summary</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Total Deposits:</span>
                                          <span className="font-medium text-green-600">
                                            KES {selectedUser.userActivity.totalDeposits}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Total Earnings:</span>
                                          <span className="font-medium text-blue-600">
                                            KES {selectedUser.userActivity.totalEarnings}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Task Earnings:</span>
                                          <span className="font-medium">
                                            KES {selectedUser.userActivity.taskEarnings}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Referral Earnings:</span>
                                          <span className="font-medium">
                                            KES {selectedUser.userActivity.referralEarnings}
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

                                  {/* Activity Analysis */}
                                  <div className="space-y-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Activity Analysis</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Tasks Completed:</span>
                                          <span className="font-medium">
                                            {selectedUser.userActivity.tasksCompleted}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Referrals Made:</span>
                                          <span className="font-medium">{selectedUser.userActivity.referralsMade}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Avg. Earning/Task:</span>
                                          <span className="font-medium">
                                            KES{" "}
                                            {(
                                              selectedUser.userActivity.taskEarnings /
                                              Math.max(selectedUser.userActivity.tasksCompleted, 1)
                                            ).toFixed(2)}
                                          </span>
                                        </div>
                                      </div>
                                    </div>

                                    {/* Withdrawal History */}
                                    <div>
                                      <h4 className="font-semibold mb-2">Withdrawal History</h4>
                                      {selectedUser.withdrawalHistory.length > 0 ? (
                                        <div className="space-y-1">
                                          {selectedUser.withdrawalHistory.map((withdrawal, index) => (
                                            <div key={index} className="flex justify-between text-sm">
                                              <span>KES {withdrawal.amount}</span>
                                              <span className="text-gray-500">{withdrawal.date}</span>
                                            </div>
                                          ))}
                                        </div>
                                      ) : (
                                        <p className="text-sm text-gray-500">No previous withdrawals</p>
                                      )}
                                    </div>
                                  </div>
                                </div>
                              )}
                            </DialogContent>
                          </Dialog>

                          {request.status === "pending" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                    <CheckCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Approve Withdrawal</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to approve this withdrawal request for KES {request.amount}{" "}
                                      to {request.mpesaPhone}?
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleWithdrawalAction(request.id, "approve")}
                                      className="bg-green-600 hover:bg-green-700"
                                    >
                                      Approve & Send M-Pesa
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <XCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Reject Withdrawal</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to reject this withdrawal request? The amount will be
                                      refunded to user's balance.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleWithdrawalAction(request.id, "reject")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Reject & Refund
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="users" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone, name, or referral code..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <UserPlus className="h-4 w-4 mr-2" />
                  Add User
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* User Accounts Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Users className="h-5 w-5 mr-2" />
                User Accounts Management
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Phone</TableHead>
                    <TableHead>Balance</TableHead>
                    <TableHead>VIP Level</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Join Date</TableHead>
                    <TableHead>Referral Code</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUserAccounts.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell>
                        <div>
                          <div className="font-medium">{user.name}</div>
                          <div className="text-sm text-gray-500">{user.email}</div>
                        </div>
                      </TableCell>
                      <TableCell>{user.phone}</TableCell>
                      <TableCell className="font-bold">KES {user.balance.toLocaleString()}</TableCell>
                      <TableCell>
                        <Badge className="bg-purple-100 text-purple-800">Level {user.vipLevel}</Badge>
                      </TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(user.status)}>{user.status.toUpperCase()}</Badge>
                      </TableCell>
                      <TableCell>{user.joinDate}</TableCell>
                      <TableCell className="font-mono text-sm">{user.referralCode}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Dialog>
                            <DialogTrigger asChild>
                              <Button variant="outline" size="sm" onClick={() => setSelectedAccount(user)}>
                                <Eye className="h-4 w-4" />
                              </Button>
                            </DialogTrigger>
                            <DialogContent className="max-w-2xl">
                              <DialogHeader>
                                <DialogTitle>User Account Details - {user.name}</DialogTitle>
                                <DialogDescription>Complete user information and account history</DialogDescription>
                              </DialogHeader>

                              {selectedAccount && (
                                <div className="space-y-6">
                                  <div className="grid grid-cols-2 gap-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Personal Information</h4>
                                      <div className="space-y-2 text-sm">
                                        <div>
                                          <strong>Name:</strong> {selectedAccount.name}
                                        </div>
                                        <div>
                                          <strong>Phone:</strong> {selectedAccount.phone}
                                        </div>
                                        <div>
                                          <strong>Email:</strong> {selectedAccount.email}
                                        </div>
                                        <div>
                                          <strong>Referral Code:</strong> {selectedAccount.referralCode}
                                        </div>
                                        <div>
                                          <strong>Referred By:</strong> {selectedAccount.referredBy || "Direct signup"}
                                        </div>
                                      </div>
                                    </div>
                                    <div>
                                      <h4 className="font-semibold mb-2">Account Statistics</h4>
                                      <div className="space-y-2 text-sm">
                                        <div>
                                          <strong>Balance:</strong> KES {selectedAccount.balance.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>VIP Level:</strong> {selectedAccount.vipLevel}
                                        </div>
                                        <div>
                                          <strong>Total Deposits:</strong> KES{" "}
                                          {selectedAccount.totalDeposits.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>Total Withdrawals:</strong> KES{" "}
                                          {selectedAccount.totalWithdrawals.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>Last Activity:</strong> {selectedAccount.lastActivity}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              )}
                            </DialogContent>
                          </Dialog>

                          {user.status === "active" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-yellow-600 bg-transparent">
                                    <Ban className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Suspend User Account</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to suspend {user.name}'s account? They will not be able to
                                      access the platform.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleUserAction(user.id, "suspend")}
                                      className="bg-yellow-600 hover:bg-yellow-700"
                                    >
                                      Suspend Account
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <UserX className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Ban User Account</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to permanently ban {user.name}'s account? This action cannot
                                      be easily undone.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleUserAction(user.id, "ban")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Ban Account
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}

                          {(user.status === "suspended" || user.status === "banned") && (
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                  <UserCheck className="h-4 w-4" />
                                </Button>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>Activate User Account</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    Are you sure you want to reactivate {user.name}'s account?
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                                  <AlertDialogAction
                                    onClick={() => handleUserAction(user.id, "activate")}
                                    className="bg-green-600 hover:bg-green-700"
                                  >
                                    Activate Account
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="activities" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or activity..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* User Activities Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Activity className="h-5 w-5 mr-2" />
                User Activity Monitor
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Action</TableHead>
                    <TableHead>Details</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>IP Address</TableHead>
                    <TableHead>Device</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUserActivities.map((activity) => (
                    <TableRow key={activity.id}>
                      <TableCell>{activity.phone}</TableCell>
                      <TableCell>
                        <Badge
                          className={
                            activity.action === "VIP_PURCHASE"
                              ? "bg-purple-100 text-purple-800"
                              : activity.action === "WITHDRAWAL_REQUEST"
                                ? "bg-orange-100 text-orange-800"
                                : activity.action === "TASK_COMPLETED"
                                  ? "bg-green-100 text-green-800"
                                  : "bg-gray-100 text-gray-800"
                          }
                        >
                          {activity.action.replace("_", " ")}
                        </Badge>
                      </TableCell>
                      <TableCell className="max-w-xs truncate">{activity.details}</TableCell>
                      <TableCell>{activity.timestamp}</TableCell>
                      <TableCell className="font-mono text-sm">{activity.ipAddress}</TableCell>
                      <TableCell>{activity.device}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="reports" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>System Reports & Analytics</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h3 className="font-semibold">Financial Reports</h3>
                  <div className="space-y-2">
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Daily Transaction Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Monthly Revenue Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      User Balance Report
                    </Button>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="font-semibold">User Reports</h3>
                  <div className="space-y-2">
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      User Activity Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      VIP Subscription Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Referral Performance Report
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  ArrowUpRight,
  ArrowDownLeft,
  Users,
  Star,
  Building,
  Download,
  Gift,
  DollarSign,
  Target,
  Zap,
} from "lucide-react"
import Link from "next/link"

export default function DashboardPage() {
  const [user, setUser] = useState({
    phone: "****5268",
    balance: 0,
    taskEarnings: 0,
    referralEarnings: 0,
    identity: "J2",
    hasUpgraded: true,
    selectedPackage: "",
  })

  // Load balance from localStorage on component mount
  useEffect(() => {
    const savedBalance = localStorage.getItem("userBalance")
    const savedTaskEarnings = localStorage.getItem("taskEarnings")
    const savedReferralEarnings = localStorage.getItem("referralEarnings")
    const savedPhone = localStorage.getItem("userPhone")
    const savedPackage = localStorage.getItem("selectedPackage")

    // Initialize with zero balance for new users
    if (savedBalance) {
      setUser((prev) => ({ ...prev, balance: Number.parseFloat(savedBalance) }))
    } else {
      localStorage.setItem("userBalance", "0")
    }

    if (savedTaskEarnings) {
      setUser((prev) => ({ ...prev, taskEarnings: Number.parseFloat(savedTaskEarnings) }))
    } else {
      localStorage.setItem("taskEarnings", "0")
    }

    if (savedReferralEarnings) {
      setUser((prev) => ({ ...prev, referralEarnings: Number.parseFloat(savedReferralEarnings) }))
    } else {
      localStorage.setItem("referralEarnings", "0")
    }

    if (savedPhone) {
      // Mask the phone number for display
      const maskedPhone = `****${savedPhone.slice(-4)}`
      setUser((prev) => ({ ...prev, phone: maskedPhone }))
    }

    if (savedPackage) {
      setUser((prev) => ({ ...prev, selectedPackage: savedPackage }))
    }
  }, [])

  const menuItems = [
    { icon: ArrowDownLeft, label: "Withdraw", href: "/withdraw", color: "text-blue-600" },
    { icon: ArrowUpRight, label: "Recharge", href: "/recharge", color: "text-blue-600" },
    { icon: Users, label: "Invitation rewards", href: "/invite-friends", color: "text-blue-600" },
    { icon: Star, label: "VIP", href: "/vip", color: "text-blue-600" },
    { icon: Gift, label: "Turntable of Luck", href: "/turntable", color: "text-blue-600" },
    { icon: Building, label: "Company Profile", href: "/company-profile", color: "text-blue-600" },
    { icon: Download, label: "Unduh App", href: "/download", color: "text-blue-600" },
  ]

  // Calculate total earnings breakdown
  const totalEarnings = user.taskEarnings + user.referralEarnings
  const hasEarnings = totalEarnings > 0

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 via-blue-600 to-purple-800 text-white p-4">
        <div className="flex items-center justify-between mb-4">
          <span className="text-sm">Choose language</span>
          <div className="flex items-center space-x-2">
            <img src="/fcb-logo.jpg" alt="FCB Logo" className="h-8 w-8 rounded" />
            <h1 className="text-xl font-bold">FCB</h1>
          </div>
          <div></div>
        </div>

        {user.hasUpgraded && (
          <div className="bg-white/20 backdrop-blur-sm rounded-lg p-3 mb-4">
            <div className="flex items-center">
              <span className="text-green-300 mr-2">🎉</span>
              <span className="text-sm">
                Congratulations to {user.phone} for successfully upgrading to {user.identity}!
              </span>
            </div>
          </div>
        )}

        <div className="text-center">
          <div className="text-3xl font-bold mb-1">KES {user.balance.toFixed(2)}</div>
          <div className="text-sm opacity-90">Available Balance</div>

          {/* Earnings Breakdown */}
          {hasEarnings && (
            <div className="flex justify-center space-x-4 mt-2 text-xs opacity-75">
              <span>Tasks: KES {user.taskEarnings.toFixed(2)}</span>
              <span>•</span>
              <span>Referrals: KES {user.referralEarnings.toFixed(2)}</span>
            </div>
          )}
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Quick Stats */}
        <div className="grid grid-cols-3 gap-3">
          <Card className="border-0 shadow-sm">
            <CardContent className="p-3 text-center">
              <div className="bg-green-50 p-2 rounded-lg w-fit mx-auto mb-2">
                <DollarSign className="h-4 w-4 text-green-600" />
              </div>
              <div className="text-sm font-bold">KES {user.balance.toFixed(2)}</div>
              <div className="text-xs text-gray-600">Balance</div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardContent className="p-3 text-center">
              <div className="bg-blue-50 p-2 rounded-lg w-fit mx-auto mb-2">
                <Target className="h-4 w-4 text-blue-600" />
              </div>
              <div className="text-sm font-bold">KES {user.taskEarnings.toFixed(2)}</div>
              <div className="text-xs text-gray-600">Tasks</div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardContent className="p-3 text-center">
              <div className="bg-purple-50 p-2 rounded-lg w-fit mx-auto mb-2">
                <Users className="h-4 w-4 text-purple-600" />
              </div>
              <div className="text-sm font-bold">KES {user.referralEarnings.toFixed(2)}</div>
              <div className="text-xs text-gray-600">Referrals</div>
            </CardContent>
          </Card>
        </div>

        {/* Package Status */}
        {user.selectedPackage && (
          <Card className="bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-bold text-orange-800">Active Package: {user.selectedPackage}</div>
                  <div className="text-sm text-orange-600">Start completing tasks to earn money</div>
                </div>
                <Badge className="bg-yellow-100 text-yellow-800">
                  <Zap className="h-3 w-3 mr-1" />
                  Active
                </Badge>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Zero Balance Alert */}
        {user.balance === 0 && (
          <Card className="bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
            <CardContent className="p-4 text-center">
              <Zap className="h-8 w-8 text-blue-600 mx-auto mb-2" />
              <div className="font-bold text-blue-800 mb-1">Get Started!</div>
              <div className="text-sm text-blue-600 mb-3">
                Invest in a VIP package to unlock tasks and start earning money
              </div>
              <Link href="/vip">
                <Button className="bg-blue-600 hover:bg-blue-700">
                  <Trophy className="h-4 w-4 mr-2" />
                  Choose VIP Package
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}

        {/* Menu Grid */}
        <div className="grid grid-cols-2 gap-4">
          {menuItems.map((item, index) => (
            <Link key={index} href={item.href}>
              <Card className="hover:bg-gray-50 transition-colors">
                <CardContent className="flex flex-col items-center justify-center p-6 text-center">
                  <item.icon className={`h-8 w-8 ${item.color} mb-3`} />
                  <span className="text-sm font-medium text-gray-700">{item.label}</span>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

        {/* Invitation Banner */}
        <Card className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 text-white overflow-hidden">
          <CardContent className="p-6">
            <div className="mb-3">
              <h3 className="text-lg font-bold">FCB</h3>
              <p className="text-sm opacity-90">INVITE YOUR FRIENDS TO JOIN US</p>
            </div>
            <Link href="/invite-friends">
              <Button className="bg-yellow-600 hover:bg-yellow-700 text-white">GET MORE BENEFITS</Button>
            </Link>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-blue-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-gray-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">Profile</span>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin-dashboard/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Users,
  DollarSign,
  AlertTriangle,
  Eye,
  CheckCircle,
  XCircle,
  Activity,
  Search,
  Filter,
  Download,
  Shield,
  LogOut,
  UserPlus,
  UserX,
  CreditCard,
  Smartphone,
  Ban,
  UserCheck,
} from "lucide-react"

interface MpesaTransaction {
  id: string
  transactionId: string
  phone: string
  amount: number
  type: "deposit" | "withdrawal"
  status: "pending" | "confirmed" | "failed"
  mpesaCode: string
  timestamp: string
  userMessage: string
}

interface WithdrawalRequest {
  id: string
  userId: string
  phone: string
  amount: number
  method: string
  status: "pending" | "approved" | "rejected"
  requestDate: string
  riskLevel: "low" | "medium" | "high"
  isTrialWithdrawal: boolean
  mpesaPhone: string
  userActivity: {
    accountAge: number
    totalDeposits: number
    totalEarnings: number
    taskEarnings: number
    referralEarnings: number
    tasksCompleted: number
    referralsMade: number
    lastActivity: string
  }
  withdrawalHistory: Array<{
    amount: number
    date: string
    status: string
  }>
}

interface UserAccount {
  id: string
  phone: string
  name: string
  email: string
  balance: number
  vipLevel: number
  status: "active" | "suspended" | "banned"
  joinDate: string
  lastActivity: string
  totalDeposits: number
  totalWithdrawals: number
  referralCode: string
  referredBy: string
}

interface UserActivity {
  id: string
  userId: string
  phone: string
  action: string
  details: string
  timestamp: string
  ipAddress: string
  device: string
}

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("overview")
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedUser, setSelectedUser] = useState<WithdrawalRequest | null>(null)
  const [selectedAccount, setSelectedAccount] = useState<UserAccount | null>(null)
  const [mpesaTransactions, setMpesaTransactions] = useState<MpesaTransaction[]>([])
  const [userAccounts, setUserAccounts] = useState<UserAccount[]>([])
  const [userActivities, setUserActivities] = useState<UserActivity[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()

  // Mock data - in real app this would come from API
  const [withdrawalRequests, setWithdrawalRequests] = useState<WithdrawalRequest[]>([
    {
      id: "WD001",
      userId: "USR001",
      phone: "+254700000001",
      amount: 500,
      method: "M-Pesa",
      status: "pending",
      requestDate: "2025-01-23",
      riskLevel: "low",
      isTrialWithdrawal: false,
      mpesaPhone: "+254700000001",
      userActivity: {
        accountAge: 15,
        totalDeposits: 5000,
        totalEarnings: 800,
        taskEarnings: 650,
        referralEarnings: 150,
        tasksCompleted: 25,
        referralsMade: 3,
        lastActivity: "2025-01-23",
      },
      withdrawalHistory: [
        { amount: 200, date: "2025-01-20", status: "approved" },
        { amount: 300, date: "2025-01-18", status: "approved" },
      ],
    },
  ])

  const [dashboardStats, setDashboardStats] = useState({
    totalUsers: 1247,
    activeUsers: 892,
    suspendedUsers: 15,
    totalDeposits: 2847500,
    totalWithdrawals: 1234560,
    pendingWithdrawals: 8,
    pendingMpesaTransactions: 12,
    totalEarnings: 456780,
    newUsersToday: 23,
    referralBonusesPaid: 45600,
  })

  // Check admin authentication
  useEffect(() => {
    const adminSession = localStorage.getItem("admin_session")
    if (!adminSession) {
      router.push("/admin-login")
      return
    }

    try {
      const session = JSON.parse(adminSession)
      if (session.expires <= Date.now()) {
        localStorage.removeItem("admin_session")
        router.push("/admin-login")
        return
      }
    } catch (error) {
      localStorage.removeItem("admin_session")
      router.push("/admin-login")
      return
    }

    loadData()
  }, [router])

  const loadData = async () => {
    try {
      setIsLoading(true)

      // Load M-Pesa transactions
      const mockMpesaTransactions: MpesaTransaction[] = [
        {
          id: "MP001",
          transactionId: "QHX8K9L2M3",
          phone: "+254700000001",
          amount: 2100,
          type: "deposit",
          status: "pending",
          mpesaCode: "QHX8K9L2M3",
          timestamp: "2025-01-23 14:30:00",
          userMessage: "Deposit for VIP J1 package",
        },
        {
          id: "MP002",
          transactionId: "RJY9M4N5P6",
          phone: "+254700000002",
          amount: 500,
          type: "withdrawal",
          status: "pending",
          mpesaCode: "RJY9M4N5P6",
          timestamp: "2025-01-23 13:15:00",
          userMessage: "Withdrawal request",
        },
      ]

      // Load user accounts
      const mockUserAccounts: UserAccount[] = [
        {
          id: "user_001",
          phone: "+254700000001",
          name: "John Doe",
          email: "john@example.com",
          balance: 1250,
          vipLevel: 1,
          status: "active",
          joinDate: "2025-01-10",
          lastActivity: "2025-01-23 14:30:00",
          totalDeposits: 5000,
          totalWithdrawals: 1200,
          referralCode: "FCBJ001",
          referredBy: "FCBR123",
        },
        {
          id: "user_002",
          phone: "+254700000002",
          name: "Jane Smith",
          email: "jane@example.com",
          balance: 850,
          vipLevel: 0,
          status: "active",
          joinDate: "2025-01-15",
          lastActivity: "2025-01-23 13:15:00",
          totalDeposits: 2100,
          totalWithdrawals: 500,
          referralCode: "FCBJ002",
          referredBy: "",
        },
      ]

      // Load user activities
      const mockUserActivities: UserActivity[] = [
        {
          id: "ACT001",
          userId: "user_001",
          phone: "+254700000001",
          action: "VIP_PURCHASE",
          details: "Purchased J1 VIP package for KES 2,100",
          timestamp: "2025-01-23 14:30:00",
          ipAddress: "192.168.1.100",
          device: "Mobile - Android",
        },
        {
          id: "ACT002",
          userId: "user_002",
          phone: "+254700000002",
          action: "WITHDRAWAL_REQUEST",
          details: "Requested withdrawal of KES 500",
          timestamp: "2025-01-23 13:15:00",
          ipAddress: "192.168.1.101",
          device: "Mobile - iOS",
        },
        {
          id: "ACT003",
          userId: "user_001",
          phone: "+254700000001",
          action: "TASK_COMPLETED",
          details: "Completed task: Product Review - Earned KES 70",
          timestamp: "2025-01-23 12:45:00",
          ipAddress: "192.168.1.100",
          device: "Mobile - Android",
        },
      ]

      setMpesaTransactions(mockMpesaTransactions)
      setUserAccounts(mockUserAccounts)
      setUserActivities(mockUserActivities)
    } catch (error) {
      console.error("Error loading admin data:", error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleLogout = () => {
    localStorage.removeItem("admin_session")
    router.push("/admin-login")
  }

  const handleMpesaAction = (transactionId: string, action: "confirm" | "reject") => {
    setMpesaTransactions((prev) =>
      prev.map((transaction) =>
        transaction.id === transactionId
          ? { ...transaction, status: action === "confirm" ? "confirmed" : "failed" }
          : transaction,
      ),
    )

    const transaction = mpesaTransactions.find((t) => t.id === transactionId)
    if (transaction) {
      alert(`M-Pesa transaction ${transaction.mpesaCode} has been ${action}ed`)
    }
  }

  const handleUserAction = (userId: string, action: "suspend" | "activate" | "ban") => {
    setUserAccounts((prev) =>
      prev.map((user) =>
        user.id === userId
          ? {
              ...user,
              status: action === "suspend" ? "suspended" : action === "ban" ? "banned" : "active",
            }
          : user,
      ),
    )

    const user = userAccounts.find((u) => u.id === userId)
    if (user) {
      alert(`User ${user.phone} has been ${action}ed`)
    }
  }

  const handleWithdrawalAction = (requestId: string, action: "approve" | "reject") => {
    setWithdrawalRequests((prev) =>
      prev.map((request) =>
        request.id === requestId ? { ...request, status: action === "approve" ? "approved" : "rejected" } : request,
      ),
    )

    const request = withdrawalRequests.find((r) => r.id === requestId)
    if (request) {
      alert(`Withdrawal request ${requestId} has been ${action}d for ${request.phone}`)
    }
  }

  const getStatusBadgeColor = (status: string) => {
    switch (status) {
      case "confirmed":
      case "approved":
      case "active":
        return "bg-green-100 text-green-800"
      case "failed":
      case "rejected":
      case "banned":
        return "bg-red-100 text-red-800"
      case "pending":
      case "suspended":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getRiskBadgeColor = (riskLevel: string) => {
    switch (riskLevel) {
      case "high":
        return "bg-red-100 text-red-800 border-red-200"
      case "medium":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "low":
        return "bg-green-100 text-green-800 border-green-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  const filteredMpesaTransactions = mpesaTransactions.filter(
    (transaction) =>
      transaction.phone.includes(searchTerm) || transaction.mpesaCode.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredUserAccounts = userAccounts.filter(
    (user) =>
      user.phone.includes(searchTerm) ||
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.referralCode.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredUserActivities = userActivities.filter(
    (activity) =>
      activity.phone.includes(searchTerm) || activity.action.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  const filteredWithdrawals = withdrawalRequests.filter(
    (request) => request.phone.includes(searchTerm) || request.id.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  return (
    <div className="min-h-screen bg-gray-50 p-4 max-w-7xl mx-auto">
      {/* Header */}
      <div className="mb-8 flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2 flex items-center gap-2">
            <Shield className="h-8 w-8 text-red-600" />
            FCB VIP Admin Dashboard
          </h1>
          <p className="text-gray-600">Platform Management & Control Center</p>
        </div>
        <Button onClick={handleLogout} variant="outline" className="text-red-600 border-red-200 bg-transparent">
          <LogOut className="h-4 w-4 mr-2" />
          Logout
        </Button>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-blue-100 rounded-lg">
                <Users className="h-6 w-6 text-blue-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Users</p>
                <p className="text-2xl font-bold text-gray-900">{dashboardStats.totalUsers.toLocaleString()}</p>
                <p className="text-xs text-gray-500">
                  Active: {dashboardStats.activeUsers} | Suspended: {dashboardStats.suspendedUsers}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-green-100 rounded-lg">
                <DollarSign className="h-6 w-6 text-green-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Deposits</p>
                <p className="text-2xl font-bold text-gray-900">KES {dashboardStats.totalDeposits.toLocaleString()}</p>
                <p className="text-xs text-gray-500">
                  Withdrawals: KES {dashboardStats.totalWithdrawals.toLocaleString()}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-orange-100 rounded-lg">
                <Smartphone className="h-6 w-6 text-orange-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">M-Pesa Pending</p>
                <p className="text-2xl font-bold text-gray-900">{dashboardStats.pendingMpesaTransactions}</p>
                <p className="text-xs text-gray-500">Requires confirmation</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center">
              <div className="p-2 bg-red-100 rounded-lg">
                <AlertTriangle className="h-6 w-6 text-red-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Pending Actions</p>
                <p className="text-2xl font-bold text-gray-900">
                  {dashboardStats.pendingWithdrawals + dashboardStats.pendingMpesaTransactions}
                </p>
                <p className="text-xs text-gray-500">Withdrawals: {dashboardStats.pendingWithdrawals}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Main Content */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-6 max-w-2xl">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="mpesa">M-Pesa</TabsTrigger>
          <TabsTrigger value="withdrawals">Withdrawals</TabsTrigger>
          <TabsTrigger value="users">Users</TabsTrigger>
          <TabsTrigger value="activities">Activities</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          {/* Recent Activity */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Activity className="h-5 w-5 mr-2" />
                Recent System Activity
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
                  <div className="flex items-center">
                    <Smartphone className="h-5 w-5 text-orange-600 mr-3" />
                    <div>
                      <p className="font-medium">M-Pesa Transaction Pending</p>
                      <p className="text-sm text-gray-600">+254700000001 - KES 2,100 deposit</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">5 min ago</span>
                </div>

                <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                  <div className="flex items-center">
                    <CreditCard className="h-5 w-5 text-yellow-600 mr-3" />
                    <div>
                      <p className="font-medium">Withdrawal Request</p>
                      <p className="text-sm text-gray-600">+254700000002 - KES 500</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">15 min ago</span>
                </div>

                <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                  <div className="flex items-center">
                    <UserPlus className="h-5 w-5 text-blue-600 mr-3" />
                    <div>
                      <p className="font-medium">New User Registration</p>
                      <p className="text-sm text-gray-600">+254700000003 joined with referral</p>
                    </div>
                  </div>
                  <span className="text-sm text-gray-500">1 hour ago</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="mpesa" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or M-Pesa code..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* M-Pesa Transactions Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Smartphone className="h-5 w-5 mr-2" />
                M-Pesa Transactions
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>M-Pesa Code</TableHead>
                    <TableHead>Phone</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>Message</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredMpesaTransactions.map((transaction) => (
                    <TableRow key={transaction.id}>
                      <TableCell className="font-medium">{transaction.mpesaCode}</TableCell>
                      <TableCell>{transaction.phone}</TableCell>
                      <TableCell>
                        <Badge
                          className={
                            transaction.type === "deposit" ? "bg-green-100 text-green-800" : "bg-blue-100 text-blue-800"
                          }
                        >
                          {transaction.type.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell className="font-bold">KES {transaction.amount.toLocaleString()}</TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(transaction.status)}>
                          {transaction.status.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell>{transaction.timestamp}</TableCell>
                      <TableCell className="max-w-xs truncate">{transaction.userMessage}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          {transaction.status === "pending" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                    <CheckCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Confirm M-Pesa Transaction</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Confirm M-Pesa transaction {transaction.mpesaCode} for KES{" "}
                                      {transaction.amount.toLocaleString()}? This will update the user's balance.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleMpesaAction(transaction.id, "confirm")}
                                      className="bg-green-600 hover:bg-green-700"
                                    >
                                      Confirm Transaction
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <XCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Reject M-Pesa Transaction</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Reject M-Pesa transaction {transaction.mpesaCode}? This action cannot be undone.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleMpesaAction(transaction.id, "reject")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Reject Transaction
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="withdrawals" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or request ID..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Withdrawal Requests Table */}
          <Card>
            <CardHeader>
              <CardTitle>Withdrawal Requests</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Request ID</TableHead>
                    <TableHead>User</TableHead>
                    <TableHead>Amount</TableHead>
                    <TableHead>M-Pesa Phone</TableHead>
                    <TableHead>Risk Level</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Date</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredWithdrawals.map((request) => (
                    <TableRow key={request.id}>
                      <TableCell className="font-medium">
                        {request.id}
                        {request.isTrialWithdrawal && <Badge className="ml-2 bg-blue-100 text-blue-800">Trial</Badge>}
                      </TableCell>
                      <TableCell>{request.phone}</TableCell>
                      <TableCell className="font-bold">KES {request.amount}</TableCell>
                      <TableCell>{request.mpesaPhone}</TableCell>
                      <TableCell>
                        <Badge className={getRiskBadgeColor(request.riskLevel)}>
                          {request.riskLevel.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(request.status)}>{request.status.toUpperCase()}</Badge>
                      </TableCell>
                      <TableCell>{request.requestDate}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Dialog>
                            <DialogTrigger asChild>
                              <Button variant="outline" size="sm" onClick={() => setSelectedUser(request)}>
                                <Eye className="h-4 w-4" />
                              </Button>
                            </DialogTrigger>
                            <DialogContent className="max-w-4xl">
                              <DialogHeader>
                                <DialogTitle>User Activity Details - {request.phone}</DialogTitle>
                                <DialogDescription>Complete activity history and fraud analysis</DialogDescription>
                              </DialogHeader>

                              {selectedUser && (
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                  {/* User Info */}
                                  <div className="space-y-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Account Information</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Phone:</span>
                                          <span className="font-medium">{selectedUser.phone}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>M-Pesa Phone:</span>
                                          <span className="font-medium">{selectedUser.mpesaPhone}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Account Age:</span>
                                          <span className="font-medium">
                                            {selectedUser.userActivity.accountAge} days
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Last Activity:</span>
                                          <span className="font-medium">{selectedUser.userActivity.lastActivity}</span>
                                        </div>
                                      </div>
                                    </div>

                                    <div>
                                      <h4 className="font-semibold mb-2">Financial Summary</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Total Deposits:</span>
                                          <span className="font-medium text-green-600">
                                            KES {selectedUser.userActivity.totalDeposits}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Total Earnings:</span>
                                          <span className="font-medium text-blue-600">
                                            KES {selectedUser.userActivity.totalEarnings}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Task Earnings:</span>
                                          <span className="font-medium">
                                            KES {selectedUser.userActivity.taskEarnings}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Referral Earnings:</span>
                                          <span className="font-medium">
                                            KES {selectedUser.userActivity.referralEarnings}
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

                                  {/* Activity Analysis */}
                                  <div className="space-y-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Activity Analysis</h4>
                                      <div className="space-y-2 text-sm">
                                        <div className="flex justify-between">
                                          <span>Tasks Completed:</span>
                                          <span className="font-medium">
                                            {selectedUser.userActivity.tasksCompleted}
                                          </span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Referrals Made:</span>
                                          <span className="font-medium">{selectedUser.userActivity.referralsMade}</span>
                                        </div>
                                        <div className="flex justify-between">
                                          <span>Avg. Earning/Task:</span>
                                          <span className="font-medium">
                                            KES{" "}
                                            {(
                                              selectedUser.userActivity.taskEarnings /
                                              Math.max(selectedUser.userActivity.tasksCompleted, 1)
                                            ).toFixed(2)}
                                          </span>
                                        </div>
                                      </div>
                                    </div>

                                    {/* Withdrawal History */}
                                    <div>
                                      <h4 className="font-semibold mb-2">Withdrawal History</h4>
                                      {selectedUser.withdrawalHistory.length > 0 ? (
                                        <div className="space-y-1">
                                          {selectedUser.withdrawalHistory.map((withdrawal, index) => (
                                            <div key={index} className="flex justify-between text-sm">
                                              <span>KES {withdrawal.amount}</span>
                                              <span className="text-gray-500">{withdrawal.date}</span>
                                            </div>
                                          ))}
                                        </div>
                                      ) : (
                                        <p className="text-sm text-gray-500">No previous withdrawals</p>
                                      )}
                                    </div>
                                  </div>
                                </div>
                              )}
                            </DialogContent>
                          </Dialog>

                          {request.status === "pending" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                    <CheckCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Approve Withdrawal</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to approve this withdrawal request for KES {request.amount}{" "}
                                      to {request.mpesaPhone}?
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleWithdrawalAction(request.id, "approve")}
                                      className="bg-green-600 hover:bg-green-700"
                                    >
                                      Approve & Send M-Pesa
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <XCircle className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Reject Withdrawal</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to reject this withdrawal request? The amount will be
                                      refunded to user's balance.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleWithdrawalAction(request.id, "reject")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Reject & Refund
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="users" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone, name, or referral code..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <UserPlus className="h-4 w-4 mr-2" />
                  Add User
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* User Accounts Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Users className="h-5 w-5 mr-2" />
                User Accounts Management
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Phone</TableHead>
                    <TableHead>Balance</TableHead>
                    <TableHead>VIP Level</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Join Date</TableHead>
                    <TableHead>Referral Code</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUserAccounts.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell>
                        <div>
                          <div className="font-medium">{user.name}</div>
                          <div className="text-sm text-gray-500">{user.email}</div>
                        </div>
                      </TableCell>
                      <TableCell>{user.phone}</TableCell>
                      <TableCell className="font-bold">KES {user.balance.toLocaleString()}</TableCell>
                      <TableCell>
                        <Badge className="bg-purple-100 text-purple-800">Level {user.vipLevel}</Badge>
                      </TableCell>
                      <TableCell>
                        <Badge className={getStatusBadgeColor(user.status)}>{user.status.toUpperCase()}</Badge>
                      </TableCell>
                      <TableCell>{user.joinDate}</TableCell>
                      <TableCell className="font-mono text-sm">{user.referralCode}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Dialog>
                            <DialogTrigger asChild>
                              <Button variant="outline" size="sm" onClick={() => setSelectedAccount(user)}>
                                <Eye className="h-4 w-4" />
                              </Button>
                            </DialogTrigger>
                            <DialogContent className="max-w-2xl">
                              <DialogHeader>
                                <DialogTitle>User Account Details - {user.name}</DialogTitle>
                                <DialogDescription>Complete user information and account history</DialogDescription>
                              </DialogHeader>

                              {selectedAccount && (
                                <div className="space-y-6">
                                  <div className="grid grid-cols-2 gap-4">
                                    <div>
                                      <h4 className="font-semibold mb-2">Personal Information</h4>
                                      <div className="space-y-2 text-sm">
                                        <div>
                                          <strong>Name:</strong> {selectedAccount.name}
                                        </div>
                                        <div>
                                          <strong>Phone:</strong> {selectedAccount.phone}
                                        </div>
                                        <div>
                                          <strong>Email:</strong> {selectedAccount.email}
                                        </div>
                                        <div>
                                          <strong>Referral Code:</strong> {selectedAccount.referralCode}
                                        </div>
                                        <div>
                                          <strong>Referred By:</strong> {selectedAccount.referredBy || "Direct signup"}
                                        </div>
                                      </div>
                                    </div>
                                    <div>
                                      <h4 className="font-semibold mb-2">Account Statistics</h4>
                                      <div className="space-y-2 text-sm">
                                        <div>
                                          <strong>Balance:</strong> KES {selectedAccount.balance.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>VIP Level:</strong> {selectedAccount.vipLevel}
                                        </div>
                                        <div>
                                          <strong>Total Deposits:</strong> KES{" "}
                                          {selectedAccount.totalDeposits.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>Total Withdrawals:</strong> KES{" "}
                                          {selectedAccount.totalWithdrawals.toLocaleString()}
                                        </div>
                                        <div>
                                          <strong>Last Activity:</strong> {selectedAccount.lastActivity}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              )}
                            </DialogContent>
                          </Dialog>

                          {user.status === "active" && (
                            <>
                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-yellow-600 bg-transparent">
                                    <Ban className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Suspend User Account</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to suspend {user.name}'s account? They will not be able to
                                      access the platform.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleUserAction(user.id, "suspend")}
                                      className="bg-yellow-600 hover:bg-yellow-700"
                                    >
                                      Suspend Account
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>

                              <AlertDialog>
                                <AlertDialogTrigger asChild>
                                  <Button variant="outline" size="sm" className="text-red-600 bg-transparent">
                                    <UserX className="h-4 w-4" />
                                  </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                  <AlertDialogHeader>
                                    <AlertDialogTitle>Ban User Account</AlertDialogTitle>
                                    <AlertDialogDescription>
                                      Are you sure you want to permanently ban {user.name}'s account? This action cannot
                                      be easily undone.
                                    </AlertDialogDescription>
                                  </AlertDialogHeader>
                                  <AlertDialogFooter>
                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                    <AlertDialogAction
                                      onClick={() => handleUserAction(user.id, "ban")}
                                      className="bg-red-600 hover:bg-red-700"
                                    >
                                      Ban Account
                                    </AlertDialogAction>
                                  </AlertDialogFooter>
                                </AlertDialogContent>
                              </AlertDialog>
                            </>
                          )}

                          {(user.status === "suspended" || user.status === "banned") && (
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <Button variant="outline" size="sm" className="text-green-600 bg-transparent">
                                  <UserCheck className="h-4 w-4" />
                                </Button>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>Activate User Account</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    Are you sure you want to reactivate {user.name}'s account?
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                                  <AlertDialogAction
                                    onClick={() => handleUserAction(user.id, "activate")}
                                    className="bg-green-600 hover:bg-green-700"
                                  >
                                    Activate Account
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="activities" className="space-y-6">
          {/* Search and Filters */}
          <Card>
            <CardContent className="p-4">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                    <Input
                      placeholder="Search by phone number or activity..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button variant="outline">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* User Activities Table */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Activity className="h-5 w-5 mr-2" />
                User Activity Monitor
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Action</TableHead>
                    <TableHead>Details</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>IP Address</TableHead>
                    <TableHead>Device</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredUserActivities.map((activity) => (
                    <TableRow key={activity.id}>
                      <TableCell>{activity.phone}</TableCell>
                      <TableCell>
                        <Badge
                          className={
                            activity.action === "VIP_PURCHASE"
                              ? "bg-purple-100 text-purple-800"
                              : activity.action === "WITHDRAWAL_REQUEST"
                                ? "bg-orange-100 text-orange-800"
                                : activity.action === "TASK_COMPLETED"
                                  ? "bg-green-100 text-green-800"
                                  : "bg-gray-100 text-gray-800"
                          }
                        >
                          {activity.action.replace("_", " ")}
                        </Badge>
                      </TableCell>
                      <TableCell className="max-w-xs truncate">{activity.details}</TableCell>
                      <TableCell>{activity.timestamp}</TableCell>
                      <TableCell className="font-mono text-sm">{activity.ipAddress}</TableCell>
                      <TableCell>{activity.device}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="reports" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>System Reports & Analytics</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h3 className="font-semibold">Financial Reports</h3>
                  <div className="space-y-2">
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Daily Transaction Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Monthly Revenue Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      User Balance Report
                    </Button>
                  </div>
                </div>

                <div className="space-y-4">
                  <h3 className="font-semibold">User Reports</h3>
                  <div className="space-y-2">
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      User Activity Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      VIP Subscription Report
                    </Button>
                    <Button variant="outline" className="w-full justify-start bg-transparent">
                      <Download className="h-4 w-4 mr-2" />
                      Referral Performance Report
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin-dashboard/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  Home,
  FileText,
  Trophy,
  TrendingUp,
  User,
  Settings,
  LogOut,
  Phone,
  Mail,
  Calendar,
  Shield,
  Copy,
  Check,
} from "lucide-react"
import Link from "next/link"
import { getUserSession, clearUserSession } from "@/lib/simple-auth"

export default function ProfilePage() {
  const [user, setUser] = useState<any>(null)
  const [copied, setCopied] = useState(false)
  const router = useRouter()

  useEffect(() => {
    const currentUser = getUserSession()
    if (!currentUser) {
      router.push("/")
      return
    }
    setUser(currentUser)
  }, [router])

  const handleLogout = () => {
    clearUserSession()
    router.push("/")
  }

  const copyReferralCode = () => {
    if (user?.referral_code) {
      navigator.clipboard.writeText(user.referral_code)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading profile...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header */}
      <div className="bg-gradient-to-r from-purple-600 via-blue-600 to-purple-800 text-white p-4">
        <div className="flex items-center justify-between mb-4">
          <h1 className="text-xl font-bold">Profile</h1>
          <Link href="/admin-dashboard" className="text-white hover:text-gray-200">
            <Shield className="h-6 w-6" />
          </Link>
        </div>

        <div className="text-center">
          <div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <User className="h-10 w-10 text-white" />
          </div>
          <h2 className="text-xl font-bold">{user.name || "FCB User"}</h2>
          <p className="text-blue-100">{user.phone}</p>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Account Info */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <User className="h-5 w-5 mr-2" />
              Account Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Phone className="h-4 w-4 text-gray-400 mr-3" />
                <div>
                  <p className="text-sm text-gray-600">Phone Number</p>
                  <p className="font-medium">{user.phone}</p>
                </div>
              </div>
            </div>

            {user.email && (
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <Mail className="h-4 w-4 text-gray-400 mr-3" />
                  <div>
                    <p className="text-sm text-gray-600">Email</p>
                    <p className="font-medium">{user.email}</p>
                  </div>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Calendar className="h-4 w-4 text-gray-400 mr-3" />
                <div>
                  <p className="text-sm text-gray-600">Member Since</p>
                  <p className="font-medium">{new Date(user.created_at).toLocaleDateString()}</p>
                </div>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Trophy className="h-4 w-4 text-gray-400 mr-3" />
                <div>
                  <p className="text-sm text-gray-600">VIP Level</p>
                  <Badge className="bg-purple-100 text-purple-800">Level {user.vip_level}</Badge>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Referral Code */}
        <Card>
          <CardHeader>
            <CardTitle>Referral Code</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div>
                <p className="text-sm text-gray-600">Your Referral Code</p>
                <p className="font-mono text-lg font-bold">{user.referral_code}</p>
              </div>
              <Button variant="outline" size="sm" onClick={copyReferralCode} className="bg-transparent">
                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              </Button>
            </div>
            <p className="text-xs text-gray-500 mt-2">Share this code with friends to earn referral bonuses</p>
          </CardContent>
        </Card>

        {/* Account Stats */}
        <Card>
          <CardHeader>
            <CardTitle>Account Statistics</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-3 bg-green-50 rounded-lg">
                <p className="text-2xl font-bold text-green-600">KES {user.balance?.toFixed(2) || "0.00"}</p>
                <p className="text-sm text-gray-600">Current Balance</p>
              </div>
              <div className="text-center p-3 bg-blue-50 rounded-lg">
                <p className="text-2xl font-bold text-blue-600">KES {user.task_earnings?.toFixed(2) || "0.00"}</p>
                <p className="text-sm text-gray-600">Task Earnings</p>
              </div>
              <div className="text-center p-3 bg-purple-50 rounded-lg">
                <p className="text-2xl font-bold text-purple-600">KES {user.referral_earnings?.toFixed(2) || "0.00"}</p>
                <p className="text-sm text-gray-600">Referral Earnings</p>
              </div>
              <div className="text-center p-3 bg-orange-50 rounded-lg">
                <p className="text-2xl font-bold text-orange-600">{user.vip_level}</p>
                <p className="text-sm text-gray-600">VIP Level</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Quick Actions */}
        <Card>
          <CardHeader>
            <CardTitle>Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <Link href="/helpbook">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <Settings className="h-4 w-4 mr-2" />
                Help & Support
              </Button>
            </Link>

            <Link href="/daily-statement">
              <Button variant="outline" className="w-full justify-start bg-transparent">
                <FileText className="h-4 w-4 mr-2" />
                Transaction History
              </Button>
            </Link>

            <Button
              variant="outline"
              className="w-full justify-start text-red-600 border-red-200 bg-transparent hover:bg-red-50"
              onClick={handleLogout}
            >
              <LogOut className="h-4 w-4 mr-2" />
              Logout
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div className="flex justify-around py-2">
          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600">
            <Home className="h-5 w-5" />
            <span className="text-xs mt-1">Home</span>
          </Link>
          <Link href="/tasks" className="flex flex-col items-center p-2 text-gray-600">
            <FileText className="h-5 w-5" />
            <span className="text-xs mt-1">Task</span>
          </Link>
          <Link href="/vip" className="flex flex-col items-center p-2 text-gray-600">
            <Trophy className="h-5 w-5" />
            <span className="text-xs mt-1">VIP</span>
          </Link>
          <Link href="/profits" className="flex flex-col items-center p-2 text-gray-600">
            <TrendingUp className="h-5 w-5" />
            <span className="text-xs mt-1">Profits</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center p-2 text-blue-600">
            <User className="h-5 w-5" />
            <span className="text-xs mt-1">Profile</span>
          </Link>
        </div>
      </div>
    </div>
  )
}</article></body></html>