[V0_FILE]typescriptreact:file="app/page.tsx" import { Button } from "@/components/ui/button" import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Users, MessageCircle, Video, Target } from "lucide-react" import Link from "next/link" export default function HomePage() { return (

{/* Header */}

MentorConnect

{/* Hero Section */}

Connect. Learn. Grow.

Our AI-powered platform matches employees with perfect mentors based on skills, interests, and career goals. Experience seamless mentorship with integrated chat, video calls, and intelligent recommendations.

{/* Features */}

Powerful Features

Smart Matching AI-powered algorithm matches mentors and mentees based on skills, experience, interests, and career goals Live Chat Real-time messaging with file sharing, emoji reactions, and conversation history

{/* Stats */}

500+

Active Mentors

1,200+

Successful Matches

95%

Satisfaction Rate

{/* How It Works */}

How It Works

Create Profile

Set up your profile with skills, interests, and goals

Get Matched

Our AI finds the perfect mentor or mentee for you

Connect

Start chatting and schedule video calls

Grow Together

Track progress and achieve your goals

{/* Footer */}

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" "use client" import type React from "react" import { useState } from "react" 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 { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, X, User, Briefcase, Target, Heart } from "lucide-react" import { useRouter } from "next/navigation" export default function ProfilePage() { const router = useRouter() const [role, setRole] = useState<"mentor" | "mentee" | "both">("mentee") const [skills, setSkills] = useState([]) const [interests, setInterests] = useState([]) const [newSkill, setNewSkill] = useState("") const [newInterest, setNewInterest] = useState("") const [formData, setFormData] = useState({ name: "", email: "", department: "", experience: "", bio: "", goals: "", availability: [] as string[], }) const addSkill = () => { if (newSkill.trim() && !skills.includes(newSkill.trim())) { setSkills([...skills, newSkill.trim()]) setNewSkill("") } } const addInterest = () => { if (newInterest.trim() && !interests.includes(newInterest.trim())) { setInterests([...interests, newInterest.trim()]) setNewInterest("") } } const removeSkill = (skill: string) => { setSkills(skills.filter((s) => s !== skill)) } const removeInterest = (interest: string) => { setInterests(interests.filter((i) => i !== interest)) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Save profile data localStorage.setItem( "userProfile", JSON.stringify({ ...formData, role, skills, interests, }), ) router.push("/dashboard") } return (

Create Your Profile

Tell us about yourself to get matched with the perfect mentor or mentee

{/* Role Selection */} Your Role How would you like to participate?

setRole("mentee")} >

Mentee

Looking for guidance

setRole("mentor")} >

Mentor

Ready to guide others

setRole("both")} >

Both

Mentor and learn

{/* Basic Information */} Basic Information

Full Name setFormData({ ...formData, name: e.target.value })} required />

Email setFormData({ ...formData, email: e.target.value })} required />

Department

Years of Experience

Bio

setFormData({ ...formData, bio: e.target.value })}
                />
              </div>
            </CardContent>
          </Card>

{/* Skills */}
          <Card>
            <CardHeader>
              <CardTitle>Skills & Expertise</CardTitle>
              <CardDescription>Add your technical and soft skills</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex gap-2 mb-4">
                <Input
                  placeholder="Add a skill (e.g., React, Leadership, Data Analysis)"
                  value={newSkill}
                  onChange={(e) => setNewSkill(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addSkill())}
                />
                <Button type="button" onClick={addSkill}>
                  <Plus className="w-4 h-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-2">
                {skills.map((skill) => (
                  <Badge key={skill} variant="secondary" className="flex items-center gap-1">
                    {skill}
                    <X className="w-3 h-3 cursor-pointer" onClick={() => removeSkill(skill)} />
                  </Badge>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Interests */}
          <Card>
            <CardHeader>
              <CardTitle>Interests & Goals</CardTitle>
              <CardDescription>What areas are you interested in learning or teaching?</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex gap-2 mb-4">
                <Input
                  placeholder="Add an interest (e.g., Machine Learning, Career Growth, Public Speaking)"
                  value={newInterest}
                  onChange={(e) => setNewInterest(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addInterest())}
                />
                <Button type="button" onClick={addInterest}>
                  <Plus className="w-4 h-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mb-4">
                {interests.map((interest) => (
                  <Badge key={interest} variant="outline" className="flex items-center gap-1">
                    {interest}
                    <X className="w-3 h-3 cursor-pointer" onClick={() => removeInterest(interest)} />
                  </Badge>
                ))}
              </div>
              <div>
                <Label htmlFor="goals">Goals & Aspirations</Label>
                <Textarea
                  id="goals"
                  placeholder="What do you hope to achieve through mentorship?"
                  value={formData.goals}
                  onChange={(e) => setFormData({ ...formData, goals: e.target.value })}
                />
              </div>
            </CardContent>
          </Card>

<div className="flex justify-end">
            <Button type="submit" size="lg" className="bg-gradient-to-r from-blue-600 to-purple-600">
              Create Profile & Find Matches
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Users, MessageCircle, Video, TrendingUp, Award, Clock, Target, Star } from "lucide-react"
import Link from "next/link"

interface UserProfile {
  name: string
  email: string
  department: string
  experience: string
  bio: string
  goals: string
  role: "mentor" | "mentee" | "both"
  skills: string[]
  interests: string[]
}

export default function DashboardPage() {
  const [profile, setProfile] = useState<UserProfile | null>(null)

useEffect(() => {
    const savedProfile = localStorage.getItem("userProfile")
    if (savedProfile) {
      setProfile(JSON.parse(savedProfile))
    }
  }, [])

const mockMatches = [
    {
      id: 1,
      name: "Sarah Chen",
      role: "Senior Product Manager",
      department: "Product",
      skills: ["Product Strategy", "User Research", "Data Analysis"],
      matchScore: 95,
      avatar: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 2,
      name: "Marcus Johnson",
      role: "Tech Lead",
      department: "Engineering",
      skills: ["React", "System Design", "Team Leadership"],
      matchScore: 88,
      avatar: "/placeholder.svg?height=40&width=40",
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      role: "Design Director",
      department: "Design",
      skills: ["UX Design", "Design Systems", "Mentoring"],
      matchScore: 82,
      avatar: "/placeholder.svg?height=40&width=40",
    },
  ]

const mockMentorships = [
    {
      id: 1,
      name: "Alex Thompson",
      role: "Junior Developer",
      progress: 75,
      nextSession: "Tomorrow, 2:00 PM",
      status: "active",
    },
    {
      id: 2,
      name: "Lisa Park",
      role: "Product Analyst",
      progress: 45,
      nextSession: "Friday, 10:00 AM",
      status: "active",
    },
  ]

if (!profile) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Card className="w-full max-w-md">
          <CardHeader className="text-center">
            <CardTitle>Welcome to MentorConnect</CardTitle>
            <CardDescription>Create your profile to get started</CardDescription>
          </CardHeader>
          <CardContent>
            <Button asChild className="w-full">
              <Link href="/profile">Create Profile</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <Avatar>
              <AvatarImage src="/placeholder.svg?height=40&width=40" />
              <AvatarFallback>
                {profile.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <div>
              <h1 className="text-xl font-semibold">Welcome back, {profile.name.split(" ")[0]}!</h1>
              <p className="text-sm text-gray-600">
                {profile.department} • {profile.experience} experience
              </p>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" asChild>
              <Link href="/chat">
                <MessageCircle className="w-4 h-4 mr-2" />
                Messages
              </Link>
            </Button>
            <Button variant="outline" size="sm" asChild>
              <Link href="/matches">
                <Users className="w-4 h-4 mr-2" />
                Find Matches
              </Link>
            </Button>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Stats Overview */}
        <div className="grid md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Active Connections</p>
                  <p className="text-2xl font-bold">3</p>
                </div>
                <Users className="w-8 h-8 text-blue-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Messages</p>
                  <p className="text-2xl font-bold">12</p>
                </div>
                <MessageCircle className="w-8 h-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Video Calls</p>
                  <p className="text-2xl font-bold">8</p>
                </div>
                <Video className="w-8 h-8 text-purple-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Goals Achieved</p>
                  <p className="text-2xl font-bold">5</p>
                </div>
                <Award className="w-8 h-8 text-orange-600" />
              </div>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="matches" className="space-y-6">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="matches">Recommended Matches</TabsTrigger>
            <TabsTrigger value="mentorships">My Mentorships</TabsTrigger>
            <TabsTrigger value="goals">Goals & Progress</TabsTrigger>
          </TabsList>

<TabsContent value="matches" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Target className="w-5 h-5" />
                  AI-Powered Matches
                </CardTitle>
                <CardDescription>Based on your skills, interests, and goals, here are your top matches</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockMatches.map((match) => (
                    <div
                      key={match.id}
                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
                    >
                      <div className="flex items-center space-x-4">
                        <Avatar>
                          <AvatarImage src={match.avatar || "/placeholder.svg"} />
                          <AvatarFallback>
                            {match.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h3 className="font-semibold">{match.name}</h3>
                          <p className="text-sm text-gray-600">
                            {match.role} • {match.department}
                          </p>
                          <div className="flex gap-1 mt-1">
                            {match.skills.slice(0, 3).map((skill) => (
                              <Badge key={skill} variant="secondary" className="text-xs">
                                {skill}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="flex items-center gap-1 mb-2">
                          <Star className="w-4 h-4 text-yellow-500 fill-current" />
                          <span className="text-sm font-medium">{match.matchScore}% match</span>
                        </div>
                        <div className="flex gap-2">
                          <Button size="sm" variant="outline" asChild>
                            <Link href={`/chat?user=${match.id}`}>
                              <MessageCircle className="w-4 h-4 mr-1" />
                              Chat
                            </Link>
                          </Button>
                          <Button size="sm" asChild>
                            <Link href={`/video-call?user=${match.id}`}>
                              <Video className="w-4 h-4 mr-1" />
                              Call
                            </Link>
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="mentorships" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Active Mentorships</CardTitle>
                <CardDescription>Track your ongoing mentoring relationships</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {mockMentorships.map((mentorship) => (
                    <div key={mentorship.id} className="p-4 border rounded-lg">
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center space-x-3">
                          <Avatar>
                            <AvatarFallback>
                              {mentorship.name
                                .split(" ")
                                .map((n) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <h3 className="font-semibold">{mentorship.name}</h3>
                            <p className="text-sm text-gray-600">{mentorship.role}</p>
                          </div>
                        </div>
                        <Badge variant={mentorship.status === "active" ? "default" : "secondary"}>
                          {mentorship.status}
                        </Badge>
                      </div>
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span>Progress</span>
                          <span>{mentorship.progress}%</span>
                        </div>
                        <Progress value={mentorship.progress} className="h-2" />
                        <div className="flex items-center justify-between text-sm text-gray-600">
                          <div className="flex items-center gap-1">
                            <Clock className="w-4 h-4" />
                            Next session: {mentorship.nextSession}
                          </div>
                          <div className="flex gap-2">
                            <Button size="sm" variant="outline">
                              <MessageCircle className="w-4 h-4 mr-1" />
                              Chat
                            </Button>
                            <Button size="sm" variant="outline">
                              <Video className="w-4 h-4 mr-1" />
                              Join Call
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="goals" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="w-5 h-5" />
                  Your Goals & Progress
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  <div>
                    <h3 className="font-semibold mb-2">Current Goals</h3>
                    <p className="text-gray-600 mb-4">{profile.goals || "No goals set yet"}</p>
                  </div>

<div className="grid md:grid-cols-2 gap-4">
                    <div className="p-4 bg-blue-50 rounded-lg">
                      <h4 className="font-semibold text-blue-900 mb-2">Skills Development</h4>
                      <div className="space-y-2">
                        {profile.skills.slice(0, 3).map((skill) => (
                          <div key={skill} className="flex justify-between items-center">
                            <span className="text-sm">{skill}</span>
                            <Progress value={Math.random() * 100} className="w-20 h-2" />
                          </div>
                        ))}
                      </div>
                    </div>

<div className="p-4 bg-green-50 rounded-lg">
                      <h4 className="font-semibold text-green-900 mb-2">Mentoring Impact</h4>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-sm">Sessions Completed</span>
                          <span className="font-medium">24</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm">Mentees Helped</span>
                          <span className="font-medium">3</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sm">Satisfaction Rating</span>
                          <span className="font-medium">4.8/5</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/chat/page.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Send, Paperclip, Video, Phone, MoreVertical, Search, Smile, Calendar } from "lucide-react"
import { useSearchParams } from "next/navigation"

interface Message {
  id: string
  sender: string
  content: string
  timestamp: Date
  type: "text" | "file" | "system"
}

interface Contact {
  id: string
  name: string
  role: string
  avatar: string
  status: "online" | "offline" | "away"
  lastMessage: string
  unread: number
}

export default function ChatPage() {
  const searchParams = useSearchParams()
  const selectedUserId = searchParams.get("user")

const [selectedContact, setSelectedContact] = useState<string>("1")
  const [message, setMessage] = useState("")
  const [messages, setMessages] = useState<Message[]>([])
  const messagesEndRef = useRef<HTMLDivElement>(null)

const contacts: Contact[] = [
    {
      id: "1",
      name: "Sarah Chen",
      role: "Senior Product Manager",
      avatar: "/placeholder.svg?height=40&width=40",
      status: "online",
      lastMessage: "Thanks for the feedback on the product roadmap!",
      unread: 2,
    },
    {
      id: "2",
      name: "Marcus Johnson",
      role: "Tech Lead",
      avatar: "/placeholder.svg?height=40&width=40",
      status: "away",
      lastMessage: "Let's schedule a code review session",
      unread: 0,
    },
    {
      id: "3",
      name: "Emily Rodriguez",
      role: "Design Director",
      avatar: "/placeholder.svg?height=40&width=40",
      status: "offline",
      lastMessage: "The design system documentation looks great",
      unread: 1,
    },
  ]

const mockMessages: Message[] = [
    {
      id: "1",
      sender: "Sarah Chen",
      content:
        "Hi! I saw your profile and I think we could have a great mentoring relationship. I'd love to help you with product strategy.",
      timestamp: new Date(Date.now() - 3600000),
      type: "text",
    },
    {
      id: "2",
      sender: "You",
      content:
        "That sounds amazing! I've been looking to learn more about product roadmapping and user research methodologies.",
      timestamp: new Date(Date.now() - 3500000),
      type: "text",
    },
    {
      id: "3",
      sender: "Sarah Chen",
      content:
        "Perfect! I have 15 years of experience in product management. We can start with understanding your current challenges and goals.",
      timestamp: new Date(Date.now() - 3400000),
      type: "text",
    },
    {
      id: "4",
      sender: "You",
      content:
        "I'm particularly interested in learning how to prioritize features and work with engineering teams effectively.",
      timestamp: new Date(Date.now() - 3300000),
      type: "text",
    },
    {
      id: "5",
      sender: "Sarah Chen",
      content:
        "Great topics! Let's schedule our first video call to discuss your background and create a learning plan. Are you free this Friday at 2 PM?",
      timestamp: new Date(Date.now() - 300000),
      type: "text",
    },
  ]

useEffect(() => {
    setMessages(mockMessages)
    if (selectedUserId) {
      setSelectedContact(selectedUserId)
    }
  }, [selectedUserId])

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const sendMessage = () => {
    if (message.trim()) {
      const newMessage: Message = {
        id: Date.now().toString(),
        sender: "You",
        content: message,
        timestamp: new Date(),
        type: "text",
      }
      setMessages([...messages, newMessage])
      setMessage("")

// Simulate response
      setTimeout(() => {
        const response: Message = {
          id: (Date.now() + 1).toString(),
          sender: contacts.find((c) => c.id === selectedContact)?.name || "Contact",
          content: "Thanks for your message! I'll get back to you soon.",
          timestamp: new Date(),
          type: "text",
        }
        setMessages((prev) => [...prev, response])
      }, 1000)
    }
  }

const selectedContactInfo = contacts.find((c) => c.id === selectedContact)

return (
    <div className="h-screen bg-gray-50 flex">
      {/* Contacts Sidebar */}
      <div className="w-80 bg-white border-r flex flex-col">
        <div className="p-4 border-b">
          <h2 className="text-xl font-semibold mb-4">Messages</h2>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <Input placeholder="Search conversations..." className="pl-10" />
          </div>
        </div>

<ScrollArea className="flex-1">
          <div className="p-2">
            {contacts.map((contact) => (
              <div
                key={contact.id}
                className={`p-3 rounded-lg cursor-pointer transition-colors ${
                  selectedContact === contact.id ? "bg-blue-50 border border-blue-200" : "hover:bg-gray-50"
                }`}
                onClick={() => setSelectedContact(contact.id)}
              >
                <div className="flex items-center space-x-3">
                  <div className="relative">
                    <Avatar>
                      <AvatarImage src={contact.avatar || "/placeholder.svg"} />
                      <AvatarFallback>
                        {contact.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div
                      className={`absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white ${
                        contact.status === "online"
                          ? "bg-green-500"
                          : contact.status === "away"
                            ? "bg-yellow-500"
                            : "bg-gray-400"
                      }`}
                    />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <h3 className="font-semibold text-sm truncate">{contact.name}</h3>
                      {contact.unread > 0 && (
                        <Badge variant="destructive" className="text-xs">
                          {contact.unread}
                        </Badge>
                      )}
                    </div>
                    <p className="text-xs text-gray-600 mb-1">{contact.role}</p>
                    <p className="text-xs text-gray-500 truncate">{contact.lastMessage}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>

{/* Chat Area */}
      <div className="flex-1 flex flex-col">
        {selectedContactInfo ? (
          <>
            {/* Chat Header */}
            <div className="bg-white border-b p-4 flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <Avatar>
                  <AvatarImage src={selectedContactInfo.avatar || "/placeholder.svg"} />
                  <AvatarFallback>
                    {selectedContactInfo.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h3 className="font-semibold">{selectedContactInfo.name}</h3>
                  <p className="text-sm text-gray-600">{selectedContactInfo.role}</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <Button variant="outline" size="sm">
                  <Phone className="w-4 h-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <Video className="w-4 h-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <Calendar className="w-4 h-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <MoreVertical className="w-4 h-4" />
                </Button>
              </div>
            </div>

{/* Messages */}
            <ScrollArea className="flex-1 p-4">
              <div className="space-y-4">
                {messages.map((msg) => (
                  <div key={msg.id} className={`flex ${msg.sender === "You" ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                        msg.sender === "You" ? "bg-blue-600 text-white" : "bg-white border shadow-sm"
                      }`}
                    >
                      <p className="text-sm">{msg.content}</p>
                      <p className={`text-xs mt-1 ${msg.sender === "You" ? "text-blue-100" : "text-gray-500"}`}>
                        {msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                      </p>
                    </div>
                  </div>
                ))}
                <div ref={messagesEndRef} />
              </div>
            </ScrollArea>

{/* Message Input */}
            <div className="bg-white border-t p-4">
              <div className="flex items-center space-x-2">
                <Button variant="outline" size="sm">
                  <Paperclip className="w-4 h-4" />
                </Button>
                <Button variant="outline" size="sm">
                  <Smile className="w-4 h-4" />
                </Button>
                <Input
                  placeholder="Type your message..."
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && sendMessage()}
                  className="flex-1"
                />
                <Button onClick={sendMessage} disabled={!message.trim()}>
                  <Send className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </>
        ) : (
          <div className="flex-1 flex items-center justify-center">
            <div className="text-center">
              <h3 className="text-lg font-semibold mb-2">Select a conversation</h3>
              <p className="text-gray-600">Choose a contact to start messaging</p>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/chat/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/video-call/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
  Video,
  VideoOff,
  Mic,
  MicOff,
  Phone,
  PhoneOff,
  Monitor,
  MessageCircle,
  Settings,
  Users,
  Calendar,
  Clock,
} from "lucide-react"
import { useSearchParams } from "next/navigation"

export default function VideoCallPage() {
  const searchParams = useSearchParams()
  const userId = searchParams.get("user")

const [isCallActive, setIsCallActive] = useState(false)
  const [isVideoOn, setIsVideoOn] = useState(true)
  const [isAudioOn, setIsAudioOn] = useState(true)
  const [isScreenSharing, setIsScreenSharing] = useState(false)
  const [callDuration, setCallDuration] = useState(0)

const participant = {
    id: userId || "1",
    name: "Sarah Chen",
    role: "Senior Product Manager",
    avatar: "/placeholder.svg?height=200&width=200",
  }

useEffect(() => {
    let interval: NodeJS.Timeout
    if (isCallActive) {
      interval = setInterval(() => {
        setCallDuration((prev) => prev + 1)
      }, 1000)
    }
    return () => clearInterval(interval)
  }, [isCallActive])

const formatDuration = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
  }

const startCall = () => {
    setIsCallActive(true)
  }

const endCall = () => {
    setIsCallActive(false)
    setCallDuration(0)
  }

if (!isCallActive) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center p-4">
        <Card className="w-full max-w-md">
          <CardContent className="p-8 text-center">
            <Avatar className="w-24 h-24 mx-auto mb-4">
              <AvatarImage src={participant.avatar || "/placeholder.svg"} />
              <AvatarFallback className="text-2xl">
                {participant.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <h2 className="text-2xl font-bold mb-2">{participant.name}</h2>
            <p className="text-gray-600 mb-6">{participant.role}</p>
            <Badge variant="secondary" className="mb-6">
              Available for call
            </Badge>
            <div className="space-y-4">
              <Button onClick={startCall} className="w-full bg-green-600 hover:bg-green-700" size="lg">
                <Video className="w-5 h-5 mr-2" />
                Start Video Call
              </Button>
              <div className="flex gap-2">
                <Button variant="outline" className="flex-1">
                  <Phone className="w-4 h-4 mr-2" />
                  Audio Only
                </Button>
                <Button variant="outline" className="flex-1">
                  <Calendar className="w-4 h-4 mr-2" />
                  Schedule
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="h-screen bg-gray-900 flex flex-col">
      {/* Call Header */}
      <div className="bg-gray-800 text-white p-4 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" />
            <span className="text-sm">Live</span>
          </div>
          <div className="flex items-center space-x-2">
            <Clock className="w-4 h-4" />
            <span className="text-sm font-mono">{formatDuration(callDuration)}</span>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          <Badge variant="secondary">
            <Users className="w-3 h-3 mr-1" />2 participants
          </Badge>
        </div>
      </div>

{/* Video Area */}
      <div className="flex-1 relative bg-gray-900">
        {/* Main Video */}
        <div className="h-full relative">
          <div className="w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center">
            <div className="text-center text-white">
              <Avatar className="w-32 h-32 mx-auto mb-4">
                <AvatarImage src={participant.avatar || "/placeholder.svg"} />
                <AvatarFallback className="text-4xl">
                  {participant.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <h3 className="text-2xl font-semibold mb-2">{participant.name}</h3>
              <p className="text-blue-100">{participant.role}</p>
              {!isVideoOn && (
                <Badge variant="secondary" className="mt-2">
                  <VideoOff className="w-3 h-3 mr-1" />
                  Video Off
                </Badge>
              )}
            </div>
          </div>

{/* Picture-in-Picture (Your Video) */}
          <div className="absolute top-4 right-4 w-48 h-36 bg-gray-800 rounded-lg border-2 border-gray-600 overflow-hidden">
            <div className="w-full h-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center">
              <div className="text-center text-white">
                <Avatar className="w-16 h-16 mx-auto mb-2">
                  <AvatarFallback>You</AvatarFallback>
                </Avatar>
                <p className="text-sm">You</p>
                {!isVideoOn && <VideoOff className="w-4 h-4 mx-auto mt-1 text-gray-400" />}
              </div>
            </div>
          </div>

{/* Screen Share Indicator */}
          {isScreenSharing && (
            <div className="absolute top-4 left-4">
              <Badge className="bg-green-600">
                <Monitor className="w-3 h-3 mr-1" />
                Sharing Screen
              </Badge>
            </div>
          )}
        </div>
      </div>

{/* Controls */}
      <div className="bg-gray-800 p-6">
        <div className="flex items-center justify-center space-x-4">
          <Button
            variant={isAudioOn ? "secondary" : "destructive"}
            size="lg"
            className="rounded-full w-14 h-14"
            onClick={() => setIsAudioOn(!isAudioOn)}
          >
            {isAudioOn ? <Mic className="w-6 h-6" /> : <MicOff className="w-6 h-6" />}
          </Button>

<Button
            variant={isVideoOn ? "secondary" : "destructive"}
            size="lg"
            className="rounded-full w-14 h-14"
            onClick={() => setIsVideoOn(!isVideoOn)}
          >
            {isVideoOn ? <Video className="w-6 h-6" /> : <VideoOff className="w-6 h-6" />}
          </Button>

<Button
            variant={isScreenSharing ? "default" : "secondary"}
            size="lg"
            className="rounded-full w-14 h-14"
            onClick={() => setIsScreenSharing(!isScreenSharing)}
          >
            <Monitor className="w-6 h-6" />
          </Button>

<div className="text-center mt-4">
          <p className="text-gray-400 text-sm">
            {isAudioOn ? "Microphone on" : "Microphone muted"} • {isVideoOn ? "Camera on" : "Camera off"}
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/video-call/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/matches/page.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Search, Filter, Star, MessageCircle, Video, Users, Award, Target, Zap } from "lucide-react"
import Link from "next/link"

interface Match {
  id: string
  name: string
  role: string
  department: string
  experience: string
  skills: string[]
  interests: string[]
  bio: string
  matchScore: number
  rating: number
  sessionsCompleted: number
  avatar: string
  availability: string[]
  mentorshipStyle: string
}

export default function MatchesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [departmentFilter, setDepartmentFilter] = useState("all")
  const [experienceFilter, setExperienceFilter] = useState("all")
  const [minMatchScore, setMinMatchScore] = useState([70])

const mockMatches: Match[] = [
    {
      id: "1",
      name: "Sarah Chen",
      role: "Senior Product Manager",
      department: "Product",
      experience: "7-10 years",
      skills: ["Product Strategy", "User Research", "Data Analysis", "Roadmapping", "Stakeholder Management"],
      interests: ["AI/ML Products", "B2B SaaS", "Growth Strategy"],
      bio: "Passionate product leader with experience scaling products from 0 to millions of users. I love helping junior PMs develop strategic thinking and execution skills.",
      matchScore: 95,
      rating: 4.9,
      sessionsCompleted: 47,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 2-4 PM", "Saturdays 10 AM-12 PM"],
      mentorshipStyle: "Hands-on with real projects",
    },
    {
      id: "2",
      name: "Marcus Johnson",
      role: "Engineering Director",
      department: "Engineering",
      experience: "10+ years",
      skills: ["System Architecture", "Team Leadership", "React", "Node.js", "Cloud Infrastructure"],
      interests: ["Distributed Systems", "Engineering Culture", "Technical Leadership"],
      bio: "Former startup CTO turned big tech engineering leader. I focus on helping engineers transition into leadership roles and build scalable systems.",
      matchScore: 88,
      rating: 4.8,
      sessionsCompleted: 62,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 6-8 PM", "Sundays 2-4 PM"],
      mentorshipStyle: "Strategic guidance with practical examples",
    },
    {
      id: "3",
      name: "Emily Rodriguez",
      role: "Design Director",
      department: "Design",
      experience: "7-10 years",
      skills: ["UX Design", "Design Systems", "User Research", "Design Leadership", "Figma"],
      interests: ["Accessibility", "Design Ops", "Cross-functional Collaboration"],
      bio: "Design leader passionate about creating inclusive experiences. I help designers develop both craft skills and business acumen.",
      matchScore: 82,
      rating: 4.7,
      sessionsCompleted: 34,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 1-3 PM", "Thursdays 7-9 PM"],
      mentorshipStyle: "Portfolio reviews and career planning",
    },
    {
      id: "4",
      name: "David Kim",
      role: "Data Science Manager",
      department: "Engineering",
      experience: "7-10 years",
      skills: ["Machine Learning", "Python", "SQL", "Statistics", "Team Management"],
      interests: ["MLOps", "AI Ethics", "Data Visualization"],
      bio: "Data science leader with experience in fintech and healthcare. I enjoy helping analysts transition to ML engineering and leadership.",
      matchScore: 79,
      rating: 4.6,
      sessionsCompleted: 28,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 5-7 PM", "Saturdays 9-11 AM"],
      mentorshipStyle: "Technical deep-dives and career strategy",
    },
    {
      id: "5",
      name: "Lisa Park",
      role: "Marketing Director",
      department: "Marketing",
      experience: "7-10 years",
      skills: ["Growth Marketing", "Content Strategy", "Analytics", "Brand Management", "SEO"],
      interests: ["Performance Marketing", "Customer Acquisition", "Marketing Automation"],
      bio: "Growth-focused marketer who scaled multiple B2B companies. I love teaching data-driven marketing and growth experimentation.",
      matchScore: 76,
      rating: 4.8,
      sessionsCompleted: 41,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 3-5 PM", "Fridays 6-8 PM"],
      mentorshipStyle: "Practical workshops and growth experiments",
    },
    {
      id: "6",
      name: "Alex Thompson",
      role: "Sales Director",
      department: "Sales",
      experience: "10+ years",
      skills: ["Enterprise Sales", "Sales Strategy", "Team Building", "CRM", "Negotiation"],
      interests: ["Sales Enablement", "Customer Success", "Revenue Operations"],
      bio: "Enterprise sales leader with a track record of building high-performing teams. I focus on consultative selling and sales leadership.",
      matchScore: 73,
      rating: 4.5,
      sessionsCompleted: 19,
      avatar: "/placeholder.svg?height=80&width=80",
      availability: ["Weekdays 4-6 PM", "Saturdays 1-3 PM"],
      mentorshipStyle: "Role-playing and real deal coaching",
    },
  ]

const filteredMatches = mockMatches.filter((match) => {
    const matchesSearch =
      match.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      match.skills.some((skill) => skill.toLowerCase().includes(searchTerm.toLowerCase())) ||
      match.interests.some((interest) => interest.toLowerCase().includes(searchTerm.toLowerCase()))

const matchesDepartment = departmentFilter === "all" || match.department.toLowerCase() === departmentFilter
    const matchesExperience = experienceFilter === "all" || match.experience === experienceFilter
    const matchesScore = match.matchScore >= minMatchScore[0]

return matchesSearch && matchesDepartment && matchesExperience && matchesScore
  })

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between mb-6">
            <div>
              <h1 className="text-3xl font-bold mb-2">Find Your Perfect Mentor</h1>
              <p className="text-gray-600">AI-powered matching based on your skills, interests, and goals</p>
            </div>
            <div className="flex items-center space-x-2">
              <Badge variant="secondary" className="flex items-center gap-1">
                <Zap className="w-3 h-3" />
                Smart Matching Active
              </Badge>
            </div>
          </div>

{/* Search and Filters */}
          <div className="grid md:grid-cols-4 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                placeholder="Search by name, skills, or interests..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>

<Select value={departmentFilter} onValueChange={setDepartmentFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Department" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Departments</SelectItem>
                <SelectItem value="product">Product</SelectItem>
                <SelectItem value="engineering">Engineering</SelectItem>
                <SelectItem value="design">Design</SelectItem>
                <SelectItem value="marketing">Marketing</SelectItem>
                <SelectItem value="sales">Sales</SelectItem>
              </SelectContent>
            </Select>

<Select value={experienceFilter} onValueChange={setExperienceFilter}>
              <SelectTrigger>
                <SelectValue placeholder="Experience Level" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Levels</SelectItem>
                <SelectItem value="2-3 years">2-3 years</SelectItem>
                <SelectItem value="4-6 years">4-6 years</SelectItem>
                <SelectItem value="7-10 years">7-10 years</SelectItem>
                <SelectItem value="10+ years">10+ years</SelectItem>
              </SelectContent>
            </Select>

<div className="flex items-center space-x-2">
              <Filter className="w-4 h-4 text-gray-500" />
              <span className="text-sm text-gray-600">Match Score: {minMatchScore[0]}%+</span>
              <Slider
                value={minMatchScore}
                onValueChange={setMinMatchScore}
                max={100}
                min={50}
                step={5}
                className="flex-1"
              />
            </div>
          </div>
        </div>
      </div>

{/* Results */}
      <div className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-xl font-semibold">{filteredMatches.length} mentors found</h2>
          <Select defaultValue="match-score">
            <SelectTrigger className="w-48">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="match-score">Sort by Match Score</SelectItem>
              <SelectItem value="rating">Sort by Rating</SelectItem>
              <SelectItem value="sessions">Sort by Experience</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="grid lg:grid-cols-2 gap-6">
          {filteredMatches.map((match) => (
            <Card key={match.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="flex items-center space-x-4">
                    <Avatar className="w-16 h-16">
                      <AvatarImage src={match.avatar || "/placeholder.svg"} />
                      <AvatarFallback>
                        {match.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-lg">{match.name}</CardTitle>
                      <CardDescription className="text-base">{match.role}</CardDescription>
                      <div className="flex items-center space-x-4 mt-2">
                        <Badge variant="outline">{match.department}</Badge>
                        <Badge variant="outline">{match.experience}</Badge>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="flex items-center gap-1 mb-1">
                      <Star className="w-4 h-4 text-yellow-500 fill-current" />
                      <span className="text-2xl font-bold text-green-600">{match.matchScore}%</span>
                    </div>
                    <p className="text-sm text-gray-600">match</p>
                  </div>
                </div>
              </CardHeader>

<CardContent className="space-y-4">
                <p className="text-gray-700 text-sm leading-relaxed">{match.bio}</p>

<div>
                  <h4 className="font-semibold text-sm mb-2">Skills & Expertise</h4>
                  <div className="flex flex-wrap gap-1">
                    {match.skills.slice(0, 4).map((skill) => (
                      <Badge key={skill} variant="secondary" className="text-xs">
                        {skill}
                      </Badge>
                    ))}
                    {match.skills.length > 4 && (
                      <Badge variant="outline" className="text-xs">
                        +{match.skills.length - 4} more
                      </Badge>
                    )}
                  </div>
                </div>

<div>
                  <h4 className="font-semibold text-sm mb-2">Focus Areas</h4>
                  <div className="flex flex-wrap gap-1">
                    {match.interests.map((interest) => (
                      <Badge key={interest} variant="outline" className="text-xs">
                        {interest}
                      </Badge>
                    ))}
                  </div>
                </div>

<div className="grid grid-cols-3 gap-4 py-3 border-t border-gray-100">
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <Star className="w-3 h-3 text-yellow-500 fill-current" />
                      <span className="font-semibold text-sm">{match.rating}</span>
                    </div>
                    <p className="text-xs text-gray-600">Rating</p>
                  </div>
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <Award className="w-3 h-3 text-blue-500" />
                      <span className="font-semibold text-sm">{match.sessionsCompleted}</span>
                    </div>
                    <p className="text-xs text-gray-600">Sessions</p>
                  </div>
                  <div className="text-center">
                    <div className="flex items-center justify-center gap-1 mb-1">
                      <Target className="w-3 h-3 text-green-500" />
                      <span className="font-semibold text-sm">{match.mentorshipStyle.split(" ")[0]}</span>
                    </div>
                    <p className="text-xs text-gray-600">Style</p>
                  </div>
                </div>

<div className="flex gap-2 pt-2">
                  <Button asChild className="flex-1">
                    <Link href={`/chat?user=${match.id}`}>
                      <MessageCircle className="w-4 h-4 mr-2" />
                      Message
                    </Link>
                  </Button>
                  <Button variant="outline" asChild className="flex-1">
                    <Link href={`/video-call?user=${match.id}`}>
                      <Video className="w-4 h-4 mr-2" />
                      Video Call
                    </Link>
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredMatches.length === 0 && (
          <div className="text-center py-12">
            <Users className="w-16 h-16 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold mb-2">No matches found</h3>
            <p className="text-gray-600 mb-4">Try adjusting your search criteria or filters</p>
            <Button
              variant="outline"
              onClick={() => {
                setSearchTerm("")
                setDepartmentFilter("all")
                setExperienceFilter("all")
                setMinMatchScore([70])
              }}
            >
              Clear Filters
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/matches/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[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/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/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="app/admin/page.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Users, TrendingUp, Video, Award, CheckCircle, BarChart3, UserCheck, UserX, Calendar } from "lucide-react"

export default function AdminPage() {
  const [selectedTimeframe, setSelectedTimeframe] = useState("30d")

const stats = {
    totalUsers: 1247,
    activeMentorships: 342,
    completedSessions: 1856,
    averageRating: 4.7,
    monthlyGrowth: 12.5,
  }

const recentActivity = [
    {
      id: 1,
      type: "new_match",
      message: "Sarah Chen matched with Alex Thompson",
      timestamp: "2 hours ago",
      status: "success",
    },
    {
      id: 2,
      type: "session_completed",
      message: "Video session completed: Marcus Johnson & Lisa Park",
      timestamp: "4 hours ago",
      status: "success",
    },
    {
      id: 3,
      type: "feedback_received",
      message: "5-star rating received for Emily Rodriguez",
      timestamp: "6 hours ago",
      status: "success",
    },
    {
      id: 4,
      type: "issue_reported",
      message: "Technical issue reported in video call",
      timestamp: "8 hours ago",
      status: "warning",
    },
  ]

const topMentors = [
    {
      name: "Sarah Chen",
      sessions: 47,
      rating: 4.9,
      department: "Product",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    {
      name: "Marcus Johnson",
      sessions: 62,
      rating: 4.8,
      department: "Engineering",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    {
      name: "Emily Rodriguez",
      sessions: 34,
      rating: 4.7,
      department: "Design",
      avatar: "/placeholder.svg?height=40&width=40",
    },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="container mx-auto px-4 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold mb-2">Admin Dashboard</h1>
              <p className="text-gray-600">Monitor and manage the MentorConnect platform</p>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="outline">Export Data</Button>
              <Button>Generate Report</Button>
            </div>
          </div>
        </div>
      </div>

<div className="container mx-auto px-4 py-8">
        {/* Key Metrics */}
        <div className="grid md:grid-cols-5 gap-6 mb-8">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Total Users</p>
                  <p className="text-2xl font-bold">{stats.totalUsers.toLocaleString()}</p>
                </div>
                <Users className="w-8 h-8 text-blue-600" />
              </div>
              <div className="flex items-center mt-2">
                <TrendingUp className="w-4 h-4 text-green-600 mr-1" />
                <span className="text-sm text-green-600">+{stats.monthlyGrowth}% this month</span>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Active Mentorships</p>
                  <p className="text-2xl font-bold">{stats.activeMentorships}</p>
                </div>
                <UserCheck className="w-8 h-8 text-green-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Sessions Completed</p>
                  <p className="text-2xl font-bold">{stats.completedSessions.toLocaleString()}</p>
                </div>
                <Video className="w-8 h-8 text-purple-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Average Rating</p>
                  <p className="text-2xl font-bold">{stats.averageRating}</p>
                </div>
                <Award className="w-8 h-8 text-yellow-600" />
              </div>
            </CardContent>
          </Card>

<Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-600">Success Rate</p>
                  <p className="text-2xl font-bold">94%</p>
                </div>
                <CheckCircle className="w-8 h-8 text-green-600" />
              </div>
            </CardContent>
          </Card>
        </div>

<Tabs defaultValue="overview" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="users">User Management</TabsTrigger>
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
            <TabsTrigger value="reports">Reports</TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-6">
            <div className="grid lg:grid-cols-2 gap-6">
              {/* Recent Activity */}
              <Card>
                <CardHeader>
                  <CardTitle>Recent Activity</CardTitle>
                  <CardDescription>Latest platform events and updates</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentActivity.map((activity) => (
                      <div key={activity.id} className="flex items-center space-x-3">
                        <div
                          className={`w-2 h-2 rounded-full ${
                            activity.status === "success"
                              ? "bg-green-500"
                              : activity.status === "warning"
                                ? "bg-yellow-500"
                                : "bg-red-500"
                          }`}
                        />
                        <div className="flex-1">
                          <p className="text-sm">{activity.message}</p>
                          <p className="text-xs text-gray-500">{activity.timestamp}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Top Mentors */}
              <Card>
                <CardHeader>
                  <CardTitle>Top Performing Mentors</CardTitle>
                  <CardDescription>Based on sessions and ratings</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {topMentors.map((mentor, index) => (
                      <div key={mentor.name} className="flex items-center space-x-3">
                        <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 text-sm font-semibold">
                          {index + 1}
                        </div>
                        <Avatar className="w-10 h-10">
                          <AvatarImage src={mentor.avatar || "/placeholder.svg"} />
                          <AvatarFallback>
                            {mentor.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <p className="font-semibold text-sm">{mentor.name}</p>
                          <p className="text-xs text-gray-600">{mentor.department}</p>
                        </div>
                        <div className="text-right">
                          <p className="text-sm font-semibold">{mentor.sessions} sessions</p>
                          <p className="text-xs text-gray-600">★ {mentor.rating}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Platform Health */}
            <Card>
              <CardHeader>
                <CardTitle>Platform Health</CardTitle>
                <CardDescription>Key performance indicators</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-3 gap-6">
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm font-medium">Match Success Rate</span>
                      <span className="text-sm text-gray-600">87%</span>
                    </div>
                    <Progress value={87} className="h-2" />
                  </div>
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm font-medium">Session Completion</span>
                      <span className="text-sm text-gray-600">94%</span>
                    </div>
                    <Progress value={94} className="h-2" />
                  </div>
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm font-medium">User Satisfaction</span>
                      <span className="text-sm text-gray-600">92%</span>
                    </div>
                    <Progress value={92} className="h-2" />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="users" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>User Management</CardTitle>
                <CardDescription>Manage mentors, mentees, and user accounts</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-3 gap-4 mb-6">
                  <Card>
                    <CardContent className="p-4 text-center">
                      <Users className="w-8 h-8 text-blue-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold">847</p>
                      <p className="text-sm text-gray-600">Total Mentees</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-4 text-center">
                      <UserCheck className="w-8 h-8 text-green-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold">400</p>
                      <p className="text-sm text-gray-600">Active Mentors</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardContent className="p-4 text-center">
                      <UserX className="w-8 h-8 text-red-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold">23</p>
                      <p className="text-sm text-gray-600">Pending Approvals</p>
                    </CardContent>
                  </Card>
                </div>
                <div className="flex justify-between items-center">
                  <p className="text-sm text-gray-600">Recent user registrations and activity</p>
                  <Button variant="outline">View All Users</Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="analytics" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BarChart3 className="w-5 h-5" />
                  Platform Analytics
                </CardTitle>
                <CardDescription>Detailed insights and trends</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-4">Department Distribution</h4>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Engineering</span>
                        <div className="flex items-center gap-2">
                          <Progress value={35} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">35%</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Product</span>
                        <div className="flex items-center gap-2">
                          <Progress value={28} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">28%</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Design</span>
                        <div className="flex items-center gap-2">
                          <Progress value={22} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">22%</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Marketing</span>
                        <div className="flex items-center gap-2">
                          <Progress value={15} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">15%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-4">Session Types</h4>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Video Calls</span>
                        <div className="flex items-center gap-2">
                          <Progress value={65} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">65%</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-sm">Chat Sessions</span>
                        <div className="flex items-center gap-2">
                          <Progress value={35} className="w-20 h-2" />
                          <span className="text-sm text-gray-600">35%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="reports" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Generate Reports</CardTitle>
                <CardDescription>Create detailed reports for stakeholders</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <h4 className="font-semibold">Available Reports</h4>
                    <div className="space-y-2">
                      <Button variant="outline" className="w-full justify-start">
                        <Calendar className="w-4 h-4 mr-2" />
                        Monthly Activity Report
                      </Button>
                      <Button variant="outline" className="w-full justify-start">
                        <Users className="w-4 h-4 mr-2" />
                        User Engagement Report
                      </Button>
                      <Button variant="outline" className="w-full justify-start">
                        <Award className="w-4 h-4 mr-2" />
                        Mentor Performance Report
                      </Button>
                      <Button variant="outline" className="w-full justify-start">
                        <BarChart3 className="w-4 h-4 mr-2" />
                        Platform Analytics Report
                      </Button>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h4 className="font-semibold">Quick Stats</h4>
                    <div className="space-y-3">
                      <div className="flex justify-between">
                        <span className="text-sm">This Month's Sessions</span>
                        <span className="font-semibold">342</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">New Registrations</span>
                        <span className="font-semibold">89</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Successful Matches</span>
                        <span className="font-semibold">156</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Average Session Duration</span>
                        <span className="font-semibold">47 min</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}</article></body></html>