[V0_FILE]typescriptreact:file="app/employees/page.tsx" isMerged="true" "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 { Search, Filter, Plus, Star, Mail, Phone, MapPin, Calendar } from "lucide-react" import Link from "next/link" const employees = [ { id: 1, name: "Sarah Johnson", role: "Software Engineer", department: "Engineering", email: "sarah.johnson@company.com", phone: "+1 (555) 123-4567", location: "New York, NY", joinDate: "2022-03-15", performance: 4.5, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, { id: 2, name: "Michael Chen", role: "Product Manager", department: "Product", email: "michael.chen@company.com", phone: "+1 (555) 234-5678", location: "San Francisco, CA", joinDate: "2021-08-22", performance: 4.2, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, { id: 3, name: "Emily Davis", role: "UX Designer", department: "Design", email: "emily.davis@company.com", phone: "+1 (555) 345-6789", location: "Austin, TX", joinDate: "2023-01-10", performance: 4.8, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, { id: 4, name: "David Wilson", role: "Data Analyst", department: "Analytics", email: "david.wilson@company.com", phone: "+1 (555) 456-7890", location: "Chicago, IL", joinDate: "2022-11-05", performance: 4.1, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, { id: 5, name: "Lisa Rodriguez", role: "Marketing Manager", department: "Marketing", email: "lisa.rodriguez@company.com", phone: "+1 (555) 567-8901", location: "Miami, FL", joinDate: "2021-06-18", performance: 4.6, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, { id: 6, name: "James Thompson", role: "Sales Representative", department: "Sales", email: "james.thompson@company.com", phone: "+1 (555) 678-9012", location: "Boston, MA", joinDate: "2023-04-12", performance: 3.9, status: "active", avatar: "/placeholder.svg?height=40&width=40", }, ] export default function EmployeesPage() { const [searchTerm, setSearchTerm] = useState("") const [departmentFilter, setDepartmentFilter] = useState("all") const filteredEmployees = employees.filter((employee) => { const matchesSearch = employee.name.toLowerCase().includes(searchTerm.toLowerCase()) || employee.role.toLowerCase().includes(searchTerm.toLowerCase()) const matchesDepartment = departmentFilter === "all" || employee.department === departmentFilter return matchesSearch && matchesDepartment }) const departments = [...new Set(employees.map((emp) => emp.department))] return (

{/* Header */}

PMS Dashboard / Employees

{/* Filters */} Employee Directory Manage and view all company employees

setSearchTerm(e.target.value)} className="pl-10" />

{/* Employee Grid */}

{filteredEmployees.map((employee) => (

{employee.name .split(" ") .map((n) => n[0]) .join("")}

{employee.name} {employee.role}

{employee.department}

Performance

{employee.performance}

{employee.email}

{employee.phone}

{employee.location}

Joined {new Date(employee.joinDate).toLocaleDateString()}

))}

{filteredEmployees.length === 0 && (

No employees found matching your criteria.

)}

) } [V0_FILE]typescriptreact:file="app/employees/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/reviews/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/goals/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true" import type { NextAuthOptions } from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" import { MongoClient } from "mongodb" import bcrypt from "bcryptjs" const client = new MongoClient(process.env.MONGODB_URI!) export const authOptions: NextAuthOptions = { providers: [ CredentialsProvider({ name: "credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { if (!credentials?.email || !credentials?.password) { return null } try { await client.connect() const db = client.db("pms") const user = await db.collection("users").findOne({ email: credentials.email }) if (!user) { return null } const isPasswordValid = await bcrypt.compare(credentials.password, user.password) if (!isPasswordValid) { return null } return { id: user._id.toString(), email: user.email, name: user.name, role: user.role, department: user.department, employeeId: user.employeeId, } } catch (error) { console.error("Auth error:", error) return null } finally { await client.close() } }, }), ], session: { strategy: "jwt", }, callbacks: { async jwt({ token, user }) { if (user) { token.role = user.role token.department = user.department token.employeeId = user.employeeId } return token }, async session({ session, token }) { if (token) { session.user.id = token.sub! session.user.role = token.role as string session.user.department = token.department as string session.user.employeeId = token.employeeId as string } return session }, }, pages: { signIn: "/login", }, } [V0_FILE]typescriptreact:file="lib/mongodb.ts" isMerged="true" import { MongoClient } from "mongodb" if (!process.env.MONGODB_URI) { throw new Error('Invalid/Missing environment variable: "MONGODB_URI"') } const uri = process.env.MONGODB_URI const options = {} let client: MongoClient let clientPromise: Promise if (process.env.NODE_ENV === "development") { const globalWithMongo = global as typeof globalThis & { _mongoClientPromise?: Promise } if (!globalWithMongo._mongoClientPromise) { client = new MongoClient(uri, options) globalWithMongo._mongoClientPromise = client.connect() } clientPromise = globalWithMongo._mongoClientPromise } else { client = new MongoClient(uri, options) clientPromise = client.connect() } export default clientPromise [V0_FILE]typescriptreact:file="types/next-auth.d.ts" isMerged="true" declare module "next-auth" { interface Session { user: { id: string name?: string | null email?: string | null image?: string | null role: string department: string employeeId: string } } interface User { id: string name?: string | null email?: string | null image?: string | null role: string department: string employeeId: string } } declare module "next-auth/jwt" { interface JWT { role: string department: string employeeId: string } } [V0_FILE]typescriptreact:file="app/api/auth/[...nextauth]/route.ts" isMerged="true" import NextAuth from "next-auth" import { authOptions } from "@/lib/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } [V0_FILE]typescriptreact:file="middleware.ts" isMerged="true" import { withAuth } from "next-auth/middleware" export default withAuth( function middleware(req) { // Add middleware logic here if needed }, { callbacks: { authorized: ({ token }) => !!token, }, }, ) export const config = { matcher: ["/((?!api/auth|login|_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { signIn, getSession } from "next-auth/react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Loader2, Building2 } from "lucide-react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState("") const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError("") try { const result = await signIn("credentials", { email, password, redirect: false, }) if (result?.error) { setError("Invalid email or password") } else { const session = await getSession() if (session?.user?.role === "admin" || session?.user?.role === "hod") { router.push("/") } else { router.push("/employee") } } } catch (error) { setError("Something went wrong. Please try again.") } finally { setIsLoading(false) } } return (

Welcome to PMS Performance Management System

Demo Credentials:

Admin: admin@company.com / admin123

HOD: hod@company.com / hod123

Employee: employee@company.com / emp123

) } [V0_FILE]typescriptreact:file="app/api/employee/reviews/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const employeeId = searchParams.get("employeeId") if (!employeeId) { return NextResponse.json({ error: "Employee ID required" }, { status: 400 }) } const client = await clientPromise const db = client.db("pms") const reviews = await db .collection("reviews") .find({ employeeId: employeeId, }) .toArray() return NextResponse.json(reviews) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch reviews" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/employee/goals/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const employeeId = searchParams.get("employeeId") if (!employeeId) { return NextResponse.json({ error: "Employee ID required" }, { status: 400 }) } const client = await clientPromise const db = client.db("pms") const goals = await db .collection("goals") .find({ employeeId: employeeId, }) .toArray() return NextResponse.json(goals) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch goals" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/employees/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" export async function GET() { try { const client = await clientPromise const db = client.db("pms") const employees = await db .collection("users") .find({ role: { $in: ["employee", "hod"] }, }) .toArray() return NextResponse.json(employees) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch employees" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const body = await request.json() const client = await clientPromise const db = client.db("pms") const result = await db.collection("users").insertOne({ ...body, createdAt: new Date(), updatedAt: new Date(), }) return NextResponse.json({ id: result.insertedId }) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to create employee" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/reviews/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" export async function GET() { try { const client = await clientPromise const db = client.db("pms") const reviews = await db.collection("reviews").find({}).toArray() return NextResponse.json(reviews) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch reviews" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const body = await request.json() const client = await clientPromise const db = client.db("pms") const result = await db.collection("reviews").insertOne({ ...body, createdAt: new Date(), updatedAt: new Date(), }) return NextResponse.json({ id: result.insertedId }) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to create review" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/goals/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" export async function GET() { try { const client = await clientPromise const db = client.db("pms") const goals = await db.collection("goals").find({}).toArray() return NextResponse.json(goals) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch goals" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const body = await request.json() const client = await clientPromise const db = client.db("pms") const result = await db.collection("goals").insertOne({ ...body, createdAt: new Date(), updatedAt: new Date(), }) return NextResponse.json({ id: result.insertedId }) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to create goal" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import ClientLayout from "./ClientLayout" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "PMS - Performance Management System", description: "Comprehensive employee performance management and evaluation system", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/ClientLayout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { SessionProvider } from "next-auth/react" export default function ClientLayout({ children, }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="scripts/setup-database.js" isMerged="true" const { MongoClient } = require("mongodb") const bcrypt = require("bcryptjs") const MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost:27017" async function setupDatabase() { console.log("Setting up PMS database...") const client = new MongoClient(MONGODB_URI) try { await client.connect() const db = client.db("pms") // Create collections await db.createCollection("users") await db.createCollection("reviews") await db.createCollection("goals") // Hash passwords const adminPassword = await bcrypt.hash("admin123", 10) const hodPassword = await bcrypt.hash("hod123", 10) const empPassword = await bcrypt.hash("emp123", 10) // Insert demo users await db.collection("users").insertMany([ { name: "System Administrator", email: "admin@company.com", password: adminPassword, role: "admin", department: "IT", employeeId: "EMP001", phone: "+1 (555) 000-0001", location: "New York, NY", joinDate: new Date("2020-01-01"), createdAt: new Date(), updatedAt: new Date(), }, { name: "John Smith", email: "hod@company.com", password: hodPassword, role: "hod", department: "Engineering", employeeId: "HOD001", phone: "+1 (555) 000-0002", location: "San Francisco, CA", joinDate: new Date("2019-03-15"), createdAt: new Date(), updatedAt: new Date(), }, { name: "Sarah Johnson", email: "employee@company.com", password: empPassword, role: "employee", department: "Engineering", employeeId: "EMP002", phone: "+1 (555) 123-4567", location: "New York, NY", joinDate: new Date("2022-03-15"), createdAt: new Date(), updatedAt: new Date(), }, { name: "Michael Chen", email: "michael.chen@company.com", password: empPassword, role: "employee", department: "Product", employeeId: "EMP003", phone: "+1 (555) 234-5678", location: "San Francisco, CA", joinDate: new Date("2021-08-22"), createdAt: new Date(), updatedAt: new Date(), }, { name: "Emily Davis", email: "emily.davis@company.com", password: empPassword, role: "employee", department: "Design", employeeId: "EMP004", phone: "+1 (555) 345-6789", location: "Austin, TX", joinDate: new Date("2023-01-10"), createdAt: new Date(), updatedAt: new Date(), }, ]) // Insert demo reviews await db.collection("reviews").insertMany([ { employeeId: "EMP002", employeeName: "Sarah Johnson", employeeRole: "Software Engineer", reviewType: "Quarterly", period: "Q4 2024", status: "completed", score: 4.5, reviewer: "John Smith", reviewerId: "HOD001", dueDate: new Date("2024-12-15"), completedDate: new Date("2024-12-10"), ratings: { technical: 5, communication: 4, teamwork: 4, leadership: 4, problem_solving: 5, adaptability: 4, quality: 5, productivity: 4, }, goals: "Complete React certification, Lead junior developer mentoring", achievements: "Successfully delivered 3 major features, Improved code review process", improvements: "Enhance public speaking skills, Learn advanced testing frameworks", comments: "Excellent technical performance with great attention to detail.", createdAt: new Date(), updatedAt: new Date(), }, ]) // Insert demo goals await db.collection("goals").insertMany([ { title: "Complete React Certification", description: "Obtain React Developer Certification to enhance frontend skills", employeeId: "EMP002", employee: "Sarah Johnson", employeeRole: "Software Engineer", category: "Professional Development", priority: "high", status: "in_progress", progress: 75, startDate: new Date("2024-01-15"), dueDate: new Date("2024-12-31"), createdBy: "HOD001", createdAt: new Date(), updatedAt: new Date(), }, { title: "Lead Junior Developer Mentoring", description: "Mentor 2 junior developers and help with their onboarding", employeeId: "EMP002", employee: "Sarah Johnson", employeeRole: "Software Engineer", category: "Leadership", priority: "medium", status: "in_progress", progress: 60, startDate: new Date("2024-02-01"), dueDate: new Date("2024-12-31"), createdBy: "HOD001", createdAt: new Date(), updatedAt: new Date(), }, ]) console.log("✅ Database setup completed successfully!") console.log("\nDemo login credentials:") console.log("Admin: admin@company.com / admin123") console.log("HOD: hod@company.com / hod123") console.log("Employee: employee@company.com / emp123") } catch (error) { console.error("❌ Error setting up database:", error) } finally { await client.close() } } setupDatabase() [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" 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 & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertDescription } [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "name": "pms-system", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "setup-db": "node scripts/setup-database.js" }, "dependencies": { "next": "14.0.0", "react": "^18", "react-dom": "^18", "next-auth": "^4.24.5", "mongodb": "^6.3.0", "bcryptjs": "^2.4.3", "@types/bcryptjs": "^2.4.6", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "tailwind-merge": "^2.0.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", "postcss": "^8", "tailwindcss": "^3.3.0", "eslint": "^8", "eslint-config-next": "14.0.0" } } [V0_FILE]typescriptreact:file="app/api/reviews/submit/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" export async function POST(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || (session.user.role !== "admin" && session.user.role !== "hod")) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const body = await request.json() const client = await clientPromise const db = client.db("pms") // Calculate overall score const ratingValues = Object.values(body.ratings || {}) const overallScore = ratingValues.length > 0 ? ratingValues.reduce((sum: number, rating: number) => sum + rating, 0) / ratingValues.length : 0 const review = { ...body, score: overallScore, reviewerId: session.user.employeeId, reviewer: session.user.name, status: "completed", completedDate: new Date(), createdAt: new Date(), updatedAt: new Date(), } const result = await db.collection("reviews").insertOne(review) return NextResponse.json({ id: result.insertedId, message: "Review submitted successfully" }) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to submit review" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/review-questions/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import clientPromise from "@/lib/mongodb" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" export async function GET() { try { const client = await clientPromise const db = client.db("pms") const questions = await db.collection("reviewQuestions").findOne({ type: "default" }) if (!questions) { // Return default questions if none exist const defaultQuestions = { type: "default", criteria: [ { id: "technical", label: "Technical Skills", description: "Proficiency in job-related technical competencies", }, { id: "communication", label: "Communication", description: "Verbal and written communication effectiveness", }, { id: "teamwork", label: "Teamwork & Collaboration", description: "Ability to work effectively with others" }, { id: "leadership", label: "Leadership", description: "Demonstrates leadership qualities and initiative" }, { id: "problem_solving", label: "Problem Solving", description: "Analytical thinking and solution-oriented approach", }, { id: "adaptability", label: "Adaptability", description: "Flexibility and openness to change" }, { id: "quality", label: "Quality of Work", description: "Attention to detail and work standards" }, { id: "productivity", label: "Productivity", description: "Efficiency and meeting deadlines" }, ], createdAt: new Date(), updatedAt: new Date(), } await db.collection("reviewQuestions").insertOne(defaultQuestions) return NextResponse.json(defaultQuestions.criteria) } return NextResponse.json(questions.criteria) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to fetch review questions" }, { status: 500 }) } } export async function PUT(request: NextRequest) { try { const session = await getServerSession(authOptions) if (!session || session.user.role !== "admin") { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }) } const { criteria } = await request.json() const client = await clientPromise const db = client.db("pms") await db.collection("reviewQuestions").updateOne( { type: "default" }, { $set: { criteria, updatedAt: new Date(), }, }, { upsert: true }, ) return NextResponse.json({ message: "Review questions updated successfully" }) } catch (error) { console.error("Database error:", error) return NextResponse.json({ error: "Failed to update review questions" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/admin/review-questions/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Alert, AlertDescription } from "@/components/ui/alert" import { Plus, Trash2, ArrowLeft, Save, Loader2, CheckCircle, AlertCircle } from "lucide-react" import Link from "next/link" interface ReviewCriteria { id: string label: string description: string } export default function ReviewQuestionsPage() { const { data: session } = useSession() const router = useRouter() const [criteria, setCriteria] = useState([]) const [loading, setLoading] = useState(true) const [saving, setSaving] = useState(false) const [message, setMessage] = useState({ type: "", text: "" }) useEffect(() => { if (session?.user?.role !== "admin") { router.push("/") return } fetchCriteria() }, [session, router]) const fetchCriteria = async () => { try { const response = await fetch("/api/review-questions") const data = await response.json() setCriteria(data) } catch (error) { console.error("Error fetching criteria:", error) } finally { setLoading(false) } } const handleSave = async () => { setSaving(true) setMessage({ type: "", text: "" }) try { const response = await fetch("/api/review-questions", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ criteria }), }) const result = await response.json() if (response.ok) { setMessage({ type: "success", text: "Review questions updated successfully!" }) } else { setMessage({ type: "error", text: result.error || "Failed to update questions" }) } } catch (error) { setMessage({ type: "error", text: "Something went wrong. Please try again." }) } finally { setSaving(false) } } const addCriteria = () => { const newId = `custom_${Date.now()}` setCriteria([ ...criteria, { id: newId, label: "", description: "", }, ]) } const updateCriteria = (index: number, field: keyof ReviewCriteria, value: string) => { const updated = [...criteria] updated[index] = { ...updated[index], [field]: value } setCriteria(updated) } const removeCriteria = (index: number) => { setCriteria(criteria.filter((_, i) => i !== index)) } if (loading) { return (

Loading review questions...

) } return (

{/* Header */}

Admin Panel / Review Questions

Review Questions Management Customize the performance review criteria and questions used for employee evaluations {message.text && ( {message.type === "success" ? : } {message.text} )}

{criteria.map((criterion, index) => (

Question Title updateCriteria(index, "label", e.target.value)} placeholder="e.g., Technical Skills" />

Description

updateCriteria(index, "description", e.target.value)}
                            placeholder="e.g., Proficiency in job-related technical competencies"
                            rows={2}
                          />
                        </div>
                      </div>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => removeCriteria(index)}
                        className="ml-4 text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </Card>
              ))}
            </div>

{criteria.length === 0 && (
              <div className="text-center py-8">
                <p className="text-gray-500 mb-4">No review questions configured</p>
                <Button onClick={addCriteria}>
                  <Plus className="w-4 h-4 mr-2" />
                  Add First Question
                </Button>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
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-background/80 backdrop-blur-sm 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="app/reviews/new/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/goals/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } 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 { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Search, Filter, Plus, Target, CheckCircle, Clock, AlertTriangle, ArrowLeft, Edit } from "lucide-react"
import Link from "next/link"

export default function GoalsPage() {
  const [goals, setGoals] = useState([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [priorityFilter, setPriorityFilter] = useState("all")
  const [activeTab, setActiveTab] = useState("all")
  const [selectedGoal, setSelectedGoal] = useState(null)
  const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false)
  const [updateData, setUpdateData] = useState({
    progress: 0,
    status: "",
  })

useEffect(() => {
    const fetchGoals = async () => {
      try {
        const response = await fetch("/api/goals")
        const data = await response.json()
        setGoals(data)
      } catch (error) {
        console.error("Error fetching goals:", error)
      } finally {
        setLoading(false)
      }
    }

fetchGoals()
  }, [])

const handleUpdateProgress = (goal: any) => {
    setSelectedGoal(goal)
    setUpdateData({
      progress: goal.progress || 0,
      status: goal.status || "not_started",
    })
    setIsUpdateDialogOpen(true)
  }

const handleSaveProgress = async () => {
    if (!selectedGoal) return

try {
      const response = await fetch(`/api/goals/${selectedGoal._id}/update`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updateData),
      })

if (response.ok) {
        // Update the local state
        setGoals(
          goals.map((goal) =>
            goal._id === selectedGoal._id
              ? { ...goal, progress: updateData.progress, status: updateData.status }
              : goal,
          ),
        )
        setIsUpdateDialogOpen(false)
        alert("Goal progress updated successfully!")
      } else {
        alert("Failed to update goal progress")
      }
    } catch (error) {
      console.error("Error updating goal:", error)
      alert("Something went wrong. Please try again.")
    }
  }

const filteredGoals = goals.filter((goal) => {
    const matchesSearch =
      goal.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      goal.employee.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus = statusFilter === "all" || goal.status === statusFilter
    const matchesPriority = priorityFilter === "all" || goal.priority === priorityFilter
    const matchesTab = activeTab === "all" || goal.status === activeTab
    return matchesSearch && matchesStatus && matchesPriority && matchesTab
  })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Completed
          </Badge>
        )
      case "in_progress":
        return (
          <Badge variant="secondary" className="bg-blue-100 text-blue-800">
            <Clock className="w-3 h-3 mr-1" />
            In Progress
          </Badge>
        )
      case "at_risk":
        return (
          <Badge variant="destructive">
            <AlertTriangle className="w-3 h-3 mr-1" />
            At Risk
          </Badge>
        )
      case "not_started":
        return <Badge variant="outline">Not Started</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const getPriorityBadge = (priority: string) => {
    switch (priority) {
      case "high":
        return <Badge variant="destructive">High</Badge>
      case "medium":
        return <Badge variant="secondary">Medium</Badge>
      case "low":
        return <Badge variant="outline">Low</Badge>
      default:
        return <Badge variant="outline">{priority}</Badge>
    }
  }

const getStatusCounts = () => {
    return {
      all: goals.length,
      completed: goals.filter((g) => g.status === "completed").length,
      in_progress: goals.filter((g) => g.status === "in_progress").length,
      at_risk: goals.filter((g) => g.status === "at_risk").length,
      not_started: goals.filter((g) => g.status === "not_started").length,
    }
  }

const statusCounts = getStatusCounts()

if (loading) {
    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"></div>
          <p className="mt-4 text-gray-600">Loading goals...</p>
        </div>
      </div>
    )
  }

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Performance Goals</CardTitle>
            <CardDescription>Track and manage employee goals and objectives</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col sm:flex-row gap-4 mb-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="Search goals..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-full sm:w-48">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue placeholder="Filter by status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="at_risk">At Risk</SelectItem>
                  <SelectItem value="not_started">Not Started</SelectItem>
                </SelectContent>
              </Select>
              <Select value={priorityFilter} onValueChange={setPriorityFilter}>
                <SelectTrigger className="w-full sm:w-48">
                  <SelectValue placeholder="Filter by priority" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Priority</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="low">Low</SelectItem>
                </SelectContent>
              </Select>
            </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-5">
                <TabsTrigger value="all">All ({statusCounts.all})</TabsTrigger>
                <TabsTrigger value="completed">Completed ({statusCounts.completed})</TabsTrigger>
                <TabsTrigger value="in_progress">In Progress ({statusCounts.in_progress})</TabsTrigger>
                <TabsTrigger value="at_risk">At Risk ({statusCounts.at_risk})</TabsTrigger>
                <TabsTrigger value="not_started">Not Started ({statusCounts.not_started})</TabsTrigger>
              </TabsList>
            </Tabs>
          </CardContent>
        </Card>

{/* Goals Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {filteredGoals.map((goal) => (
            <Card key={goal.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="pb-4">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <CardTitle className="text-lg mb-2">{goal.title}</CardTitle>
                    <CardDescription className="text-sm">{goal.description}</CardDescription>
                  </div>
                  <div className="flex flex-col space-y-2">
                    {getStatusBadge(goal.status)}
                    {getPriorityBadge(goal.priority)}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Avatar className="w-8 h-8">
                    <AvatarImage src={goal.avatar || "/placeholder.svg"} />
                    <AvatarFallback>
                      {goal.employee
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium text-sm">{goal.employee}</p>
                    <p className="text-xs text-muted-foreground">{goal.employeeRole}</p>
                  </div>
                </div>

<div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm font-medium">Progress</span>
                    <span className="text-sm text-muted-foreground">{goal.progress}%</span>
                  </div>
                  <Progress value={goal.progress} className="h-2" />
                </div>

<div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="text-muted-foreground">Category</p>
                    <p className="font-medium">{goal.category}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Due Date</p>
                    <p className="font-medium">{new Date(goal.dueDate).toLocaleDateString()}</p>
                  </div>
                </div>

<div className="flex space-x-2 pt-2">
                  <Button variant="outline" size="sm" className="flex-1">
                    View Details
                  </Button>
                  <Button size="sm" className="flex-1" onClick={() => handleUpdateProgress(goal)}>
                    <Edit className="w-4 h-4 mr-1" />
                    Update Progress
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredGoals.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <Target className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <p className="text-muted-foreground">No goals found matching your criteria.</p>
            </CardContent>
          </Card>
        )}
      </div>

{/* Update Progress Dialog */}
      <Dialog open={isUpdateDialogOpen} onOpenChange={setIsUpdateDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Update Goal Progress</DialogTitle>
            <DialogDescription>Update the progress and status for: {selectedGoal?.title}</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="progress">Progress (%)</Label>
              <Input
                id="progress"
                type="number"
                min="0"
                max="100"
                value={updateData.progress}
                onChange={(e) => setUpdateData({ ...updateData, progress: Number(e.target.value) })}
              />
            </div>
            <div>
              <Label htmlFor="status">Status</Label>
              <Select
                value={updateData.status}
                onValueChange={(value) => setUpdateData({ ...updateData, status: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="not_started">Not Started</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="at_risk">At Risk</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex space-x-2">
              <Button variant="outline" onClick={() => setIsUpdateDialogOpen(false)} className="flex-1">
                Cancel
              </Button>
              <Button onClick={handleSaveProgress} className="flex-1">
                Save Changes
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/goals/[id]/update/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { progress, status } = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

const result = await db.collection("goals").updateOne(
      { _id: new ObjectId(params.id) },
      {
        $set: {
          progress,
          status,
          updatedAt: new Date(),
        },
      },
    )

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Goal not found" }, { status: 404 })
    }

return NextResponse.json({ message: "Goal updated successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to update goal" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/goals/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { ArrowLeft, Trash2, Target, Calendar, User, Flag, CheckCircle, Clock, AlertTriangle } from "lucide-react"
import Link from "next/link"

export default function GoalDetailsPage() {
  const params = useParams()
  const router = useRouter()
  const [goal, setGoal] = useState(null)
  const [loading, setLoading] = useState(true)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)

useEffect(() => {
    const fetchGoal = async () => {
      try {
        const response = await fetch(`/api/goals/${params.id}`)
        if (response.ok) {
          const data = await response.json()
          setGoal(data)
        } else {
          router.push("/goals")
        }
      } catch (error) {
        console.error("Error fetching goal:", error)
        router.push("/goals")
      } finally {
        setLoading(false)
      }
    }

if (params.id) {
      fetchGoal()
    }
  }, [params.id, router])

const handleDelete = async () => {
    try {
      const response = await fetch(`/api/goals/${params.id}/delete`, {
        method: "DELETE",
      })

if (response.ok) {
        alert("Goal deleted successfully!")
        router.push("/goals")
      } else {
        alert("Failed to delete goal")
      }
    } catch (error) {
      console.error("Error deleting goal:", error)
      alert("Something went wrong. Please try again.")
    }
  }

if (!goal) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">Goal not found</p>
        </div>
      </div>
    )
  }

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            <Card>
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div>
                    <CardTitle className="text-2xl mb-2">{goal.title}</CardTitle>
                    <CardDescription className="text-base">{goal.description}</CardDescription>
                  </div>
                  <div className="flex flex-col space-y-2">
                    {getStatusBadge(goal.status)}
                    {getPriorityBadge(goal.priority)}
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center space-x-4">
                  <Avatar className="w-12 h-12">
                    <AvatarImage src={goal.avatar || "/placeholder.svg"} />
                    <AvatarFallback>
                      {goal.employee
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold">{goal.employee}</p>
                    <p className="text-muted-foreground">{goal.employeeRole}</p>
                  </div>
                </div>

<div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">Progress</span>
                    <span className="text-muted-foreground">{goal.progress}%</span>
                  </div>
                  <Progress value={goal.progress} className="h-3" />
                </div>
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Target className="w-5 h-5 mr-2" />
                  Goal Information
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-3">
                  <Calendar className="w-4 h-4 text-muted-foreground" />
                  <div>
                    <p className="text-sm text-muted-foreground">Start Date</p>
                    <p className="font-medium">{new Date(goal.startDate).toLocaleDateString()}</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <Calendar className="w-4 h-4 text-muted-foreground" />
                  <div>
                    <p className="text-sm text-muted-foreground">Due Date</p>
                    <p className="font-medium">{new Date(goal.dueDate).toLocaleDateString()}</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <Flag className="w-4 h-4 text-muted-foreground" />
                  <div>
                    <p className="text-sm text-muted-foreground">Category</p>
                    <p className="font-medium">{goal.category}</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <User className="w-4 h-4 text-muted-foreground" />
                  <div>
                    <p className="text-sm text-muted-foreground">Created By</p>
                    <p className="font-medium">{goal.createdByName || "System"}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

{/* Delete Confirmation Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Delete Goal</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this goal? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <div className="flex space-x-2">
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} className="flex-1">
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDelete} className="flex-1">
              Delete Goal
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/goals/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const client = await clientPromise
    const db = client.db("pms")

const goal = await db.collection("goals").findOne({ _id: new ObjectId(params.id) })

if (!goal) {
      return NextResponse.json({ error: "Goal not found" }, { status: 404 })
    }

return NextResponse.json(goal)
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to fetch goal" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/goals/[id]/delete/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const client = await clientPromise
    const db = client.db("pms")

const result = await db.collection("goals").deleteOne({ _id: new ObjectId(params.id) })

if (result.deletedCount === 0) {
      return NextResponse.json({ error: "Goal not found" }, { status: 404 })
    }

return NextResponse.json({ message: "Goal deleted successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to delete goal" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/reviews/draft/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"

export async function POST(request: NextRequest) {
  try {
    const session = await getServerSession(authOptions)
    if (!session || (session.user.role !== "admin" && session.user.role !== "hod")) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

const draft = {
      ...body,
      reviewerId: session.user.employeeId,
      reviewer: session.user.name,
      status: "draft",
      createdAt: new Date(),
      updatedAt: new Date(),
    }

const result = await db.collection("review_drafts").insertOne(draft)
    return NextResponse.json({ id: result.insertedId, message: "Draft saved successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to save draft" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/employee/review/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { useSession } from "next-auth/react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ArrowLeft, Star, Target, MessageSquare, TrendingUp } from "lucide-react"
import Link from "next/link"

export default function EmployeeReviewViewPage() {
  const params = useParams()
  const router = useRouter()
  const { data: session } = useSession()
  const [review, setReview] = useState(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchReview = async () => {
      try {
        const response = await fetch(`/api/reviews/${params.id}`)
        if (response.ok) {
          const data = await response.json()
          // Check if this review belongs to the current employee
          if (data.employeeId === session?.user?.employeeId) {
            setReview(data)
          } else {
            router.push("/employee")
          }
        } else {
          router.push("/employee")
        }
      } catch (error) {
        console.error("Error fetching review:", error)
        router.push("/employee")
      } finally {
        setLoading(false)
      }
    }

if (params.id && session?.user?.employeeId) {
      fetchReview()
    }
  }, [params.id, session, router])

if (!review) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">Review not found</p>
        </div>
      </div>
    )
  }

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Review Header */}
            <Card>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-2xl">{review.reviewType} Review</CardTitle>
                    <CardDescription className="text-lg">{review.period}</CardDescription>
                  </div>
                  <Badge variant="secondary" className="bg-green-100 text-green-800">
                    Completed
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="flex items-center space-x-4">
                  <Avatar className="w-12 h-12">
                    <AvatarImage src="/placeholder.svg?height=48&width=48" />
                    <AvatarFallback>
                      {review.reviewer
                        ?.split(" ")
                        .map((n) => n[0])
                        .join("") || "R"}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold">Reviewed by: {review.reviewer}</p>
                    <p className="text-muted-foreground">
                      Completed on: {new Date(review.completedDate).toLocaleDateString()}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Performance Ratings */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="w-5 h-5 mr-2" />
                  Performance Ratings
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {review.ratings &&
                  Object.entries(review.ratings).map(([key, value]) => (
                    <div key={key} className="flex items-center justify-between">
                      <span className="font-medium capitalize">{key.replace("_", " ")}</span>
                      <div className="flex items-center">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <Star
                            key={star}
                            className={`w-4 h-4 ${star <= value ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}`}
                          />
                        ))}
                        <span className="ml-2 font-medium">{value}/5</span>
                      </div>
                    </div>
                  ))}
              </CardContent>
            </Card>

{/* Feedback Sections */}
            {review.achievements && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <TrendingUp className="w-5 h-5 mr-2" />
                    Key Achievements
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700">{review.achievements}</p>
                </CardContent>
              </Card>
            )}

{review.goals && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Target className="w-5 h-5 mr-2" />
                    Goals for Next Period
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700">{review.goals}</p>
                </CardContent>
              </Card>
            )}

{review.improvements && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Target className="w-5 h-5 mr-2" />
                    Areas for Improvement
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700">{review.improvements}</p>
                </CardContent>
              </Card>
            )}

{review.comments && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <MessageSquare className="w-5 h-5 mr-2" />
                    Additional Comments
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-700">{review.comments}</p>
                </CardContent>
              </Card>
            )}
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="w-5 h-5 mr-2" />
                  Overall Score
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="text-4xl font-bold text-primary mb-2">{review.score}</div>
                <div className="flex justify-center mb-2">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Star
                      key={star}
                      className={`w-6 h-6 ${
                        star <= review.score ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                      }`}
                    />
                  ))}
                </div>
                <p className="text-sm text-muted-foreground">Out of 5.0</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/reviews/[id]/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const client = await clientPromise
    const db = client.db("pms")

const review = await db.collection("reviews").findOne({ _id: new ObjectId(params.id) })

if (!review) {
      return NextResponse.json({ error: "Review not found" }, { status: 404 })
    }

return NextResponse.json(review)
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to fetch review" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/users/create/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"
import bcrypt from "bcryptjs"

export async function POST(request: NextRequest) {
  try {
    const session = await getServerSession(authOptions)
    if (!session || session.user.role !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

// Check if user already exists
    const existingUser = await db.collection("users").findOne({ email: body.email })
    if (existingUser) {
      return NextResponse.json({ error: "User with this email already exists" }, { status: 400 })
    }

// Hash password
    const hashedPassword = await bcrypt.hash(body.password, 10)

// Check if employee ID already exists
    const existingEmployeeId = await db.collection("users").findOne({ employeeId: body.employeeId })
    if (existingEmployeeId) {
      return NextResponse.json({ error: "Employee ID already exists" }, { status: 400 })
    }

const user = {
      ...body,
      password: hashedPassword,
      employeeId: body.employeeId, // Use provided employee ID
      createdAt: new Date(),
      updatedAt: new Date(),
    }

const result = await db.collection("users").insertOne(user)
    return NextResponse.json({
      id: result.insertedId,
      employeeId: body.employeeId,
      message: "User created successfully",
    })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to create user" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/reviews/new/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSession } from "next-auth/react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Save, Send, ArrowLeft, Star, Target, TrendingUp, Users, MessageSquare, Search } from "lucide-react"
import Link from "next/link"

export default function NewReviewPage() {
  const { data: session } = useSession()
  const [selectedEmployee, setSelectedEmployee] = useState("")
  const [employeeSearch, setEmployeeSearch] = useState("")
  const [reviewType, setReviewType] = useState("")
  const [reviewPeriod, setReviewPeriod] = useState("")
  const [ratings, setRatings] = useState<Record<string, number>>({})
  const [goals, setGoals] = useState("")
  const [achievements, setAchievements] = useState("")
  const [improvements, setImprovements] = useState("")
  const [comments, setComments] = useState("")
  const [overallRating, setOverallRating] = useState(0)
  const [reviewCriteria, setReviewCriteria] = useState([])

const [employees, setEmployees] = useState([])
  const [filteredEmployees, setFilteredEmployees] = useState([])
  const [loading, setLoading] = useState(true)
  const [showEmployeeList, setShowEmployeeList] = useState(false)

useEffect(() => {
    const fetchEmployees = async () => {
      try {
        const response = await fetch("/api/employees")
        const data = await response.json()

let employeeList = []

// If user is admin, they can review everyone except themselves
        if (session?.user?.role === "admin") {
          employeeList = data.filter((emp: any) => emp.employeeId !== session.user.employeeId)
        }
        // If user is HOD, they can review employees and other HODs (but not employees reviewing HODs)
        else if (session?.user?.role === "hod") {
          employeeList = data.filter(
            (emp: any) => emp.employeeId !== session.user.employeeId && (emp.role === "employee" || emp.role === "hod"),
          )
        }
        // If user is employee, they cannot review anyone (remove this functionality)
        else if (session?.user?.role === "employee") {
          employeeList = [] // Employees cannot create reviews
        }

setEmployees(employeeList)
        setFilteredEmployees(employeeList)
      } catch (error) {
        console.error("Error fetching employees:", error)
      } finally {
        setLoading(false)
      }
    }

if (session) {
      fetchEmployees()
    }
  }, [session])

useEffect(() => {
    if (employeeSearch) {
      const filtered = employees.filter(
        (emp: any) =>
          emp.name.toLowerCase().includes(employeeSearch.toLowerCase()) ||
          emp.department.toLowerCase().includes(employeeSearch.toLowerCase()),
      )
      setFilteredEmployees(filtered)
      setShowEmployeeList(true)
    } else {
      setFilteredEmployees(employees)
      setShowEmployeeList(false)
    }
  }, [employeeSearch, employees])

const handleEmployeeSelect = (employee: any) => {
    setSelectedEmployee(employee.employeeId)
    setEmployeeSearch(employee.name)
    setShowEmployeeList(false)
  }

useEffect(() => {
    const fetchReviewCriteria = async () => {
      try {
        const response = await fetch("/api/review-questions")
        const data = await response.json()
        setReviewCriteria(data)
      } catch (error) {
        console.error("Error fetching review criteria:", error)
      }
    }

fetchReviewCriteria()
  }, [])

const handleRatingChange = (criteriaId: string, rating: number) => {
    setRatings((prev) => ({ ...prev, [criteriaId]: rating }))
  }

const calculateOverallRating = () => {
    const ratingValues = Object.values(ratings)
    if (ratingValues.length === 0) return 0
    return ratingValues.reduce((sum, rating) => sum + rating, 0) / ratingValues.length
  }

const getProgressPercentage = () => {
    const totalFields = 8
    let completedFields = 0

if (selectedEmployee) completedFields++
    if (reviewType) completedFields++
    if (reviewPeriod) completedFields++
    if (Object.keys(ratings).length > 0) completedFields++
    if (goals) completedFields++
    if (achievements) completedFields++
    if (improvements) completedFields++
    if (comments) completedFields++

return (completedFields / totalFields) * 100
  }

const handleSaveDraft = async () => {
    try {
      const selectedEmp = employees.find((emp: any) => emp.employeeId === selectedEmployee)

const response = await fetch("/api/reviews/draft", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          employeeId: selectedEmployee,
          employeeName: selectedEmp?.name,
          employeeRole: selectedEmp?.role || "Employee",
          reviewType,
          period: reviewPeriod,
          ratings,
          goals,
          achievements,
          improvements,
          comments,
          dueDate: new Date(),
        }),
      })

const result = await response.json()

if (response.ok) {
        alert("Draft saved successfully!")
      } else {
        alert(result.error || "Failed to save draft")
      }
    } catch (error) {
      alert("Something went wrong. Please try again.")
    }
  }

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

if (!selectedEmployee || !reviewType || !reviewPeriod || Object.keys(ratings).length === 0) {
      alert("Please fill in all required fields")
      return
    }

try {
      const selectedEmp = employees.find((emp: any) => emp.employeeId === selectedEmployee)

const response = await fetch("/api/reviews/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          employeeId: selectedEmployee,
          employeeName: selectedEmp?.name,
          employeeRole: selectedEmp?.role || "Employee",
          reviewType,
          period: reviewPeriod,
          ratings,
          goals,
          achievements,
          improvements,
          comments,
          dueDate: new Date(),
        }),
      })

const result = await response.json()

if (response.ok) {
        alert("Review submitted successfully!")
        window.location.href = "/reviews"
      } else {
        alert(result.error || "Failed to submit review")
      }
    } catch (error) {
      alert("Something went wrong. Please try again.")
    }
  }

const getRevieweeLabel = () => {
    if (session?.user?.role === "employee") {
      return "Select Supervisor/HOD to Review"
    }
    return "Select Employee to Review"
  }

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Progress */}
        <Card className="mb-6">
          <CardContent className="pt-6">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium">Review Progress</span>
              <span className="text-sm text-muted-foreground">{Math.round(getProgressPercentage())}% Complete</span>
            </div>
            <Progress value={getProgressPercentage()} className="h-2" />
          </CardContent>
        </Card>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Form */}
          <div className="lg:col-span-2 space-y-6">
            {/* Basic Information */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Users className="w-5 h-5 mr-2" />
                  Basic Information
                </CardTitle>
                <CardDescription>{getRevieweeLabel()}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="relative">
                  <Label htmlFor="employee">{session?.user?.role === "employee" ? "Supervisor/HOD" : "Employee"}</Label>
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="employee"
                      placeholder={`Search ${session?.user?.role === "employee" ? "supervisor" : "employee"} by name or department...`}
                      value={employeeSearch}
                      onChange={(e) => setEmployeeSearch(e.target.value)}
                      onFocus={() => setShowEmployeeList(true)}
                      className="pl-10"
                    />
                  </div>
                  {showEmployeeList && filteredEmployees.length > 0 && (
                    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
                      {filteredEmployees.map((employee: any) => (
                        <div
                          key={employee.employeeId}
                          className="flex items-center space-x-3 p-3 hover:bg-gray-50 cursor-pointer"
                          onClick={() => handleEmployeeSelect(employee)}
                        >
                          <Avatar className="w-8 h-8">
                            <AvatarImage src={employee.avatar || "/placeholder.svg"} />
                            <AvatarFallback>
                              {employee.name
                                .split(" ")
                                .map((n: string) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-medium">{employee.name}</p>
                            <p className="text-sm text-gray-500">
                              {employee.department} - {employee.employeeId} ({employee.role.toUpperCase()})
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="reviewType">Review Type</Label>
                    <Select value={reviewType} onValueChange={setReviewType}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select review type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="quarterly">Quarterly Review</SelectItem>
                        <SelectItem value="annual">Annual Review</SelectItem>
                        <SelectItem value="mid-year">Mid-Year Review</SelectItem>
                        <SelectItem value="probation">Probation Review</SelectItem>
                        <SelectItem value="project">Project Review</SelectItem>
                        <SelectItem value="peer">Peer Review</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="reviewPeriod">Review Period</Label>
                    <Input
                      id="reviewPeriod"
                      placeholder="e.g., Q4 2024"
                      value={reviewPeriod}
                      onChange={(e) => setReviewPeriod(e.target.value)}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Performance Ratings */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="w-5 h-5 mr-2" />
                  Performance Ratings
                </CardTitle>
                <CardDescription>
                  Rate the {session?.user?.role === "employee" ? "supervisor" : "employee"} on key performance criteria
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                {reviewCriteria.map((criteria) => (
                  <div key={criteria.id} className="space-y-2">
                    <div>
                      <Label className="text-base font-medium">{criteria.label}</Label>
                      <p className="text-sm text-muted-foreground">{criteria.description}</p>
                    </div>
                    <RadioGroup
                      value={ratings[criteria.id]?.toString() || ""}
                      onValueChange={(value) => handleRatingChange(criteria.id, Number.parseInt(value))}
                      className="flex space-x-4"
                    >
                      {[1, 2, 3, 4, 5].map((rating) => (
                        <div key={rating} className="flex items-center space-x-2">
                          <RadioGroupItem value={rating.toString()} id={`${criteria.id}-${rating}`} />
                          <Label htmlFor={`${criteria.id}-${rating}`} className="text-sm">
                            {rating}
                          </Label>
                        </div>
                      ))}
                    </RadioGroup>
                  </div>
                ))}
              </CardContent>
            </Card>

{/* Goals and Development */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Target className="w-5 h-5 mr-2" />
                  Goals & Development
                </CardTitle>
                <CardDescription>Set goals and identify development areas</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="achievements">Key Achievements</Label>
                  <Textarea
                    id="achievements"
                    placeholder="Describe the key achievements during this period..."
                    value={achievements}
                    onChange={(e) => setAchievements(e.target.value)}
                    rows={3}
                  />
                </div>

<div>
                  <Label htmlFor="goals">Goals for Next Period</Label>
                  <Textarea
                    id="goals"
                    placeholder="Set specific, measurable goals for the next review period..."
                    value={goals}
                    onChange={(e) => setGoals(e.target.value)}
                    rows={3}
                  />
                </div>

<div>
                  <Label htmlFor="improvements">Areas for Improvement</Label>
                  <Textarea
                    id="improvements"
                    placeholder="Identify areas for improvement and development..."
                    value={improvements}
                    onChange={(e) => setImprovements(e.target.value)}
                    rows={3}
                  />
                </div>
              </CardContent>
            </Card>

{/* Additional Comments */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <MessageSquare className="w-5 h-5 mr-2" />
                  Additional Comments
                </CardTitle>
                <CardDescription>Provide any additional feedback or observations</CardDescription>
              </CardHeader>
              <CardContent>
                <Textarea
                  placeholder="Add any additional comments, observations, or feedback..."
                  value={comments}
                  onChange={(e) => setComments(e.target.value)}
                  rows={4}
                />
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Overall Rating */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <TrendingUp className="w-5 h-5 mr-2" />
                  Overall Rating
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="text-4xl font-bold text-primary mb-2">{calculateOverallRating().toFixed(1)}</div>
                <div className="flex justify-center mb-2">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Star
                      key={star}
                      className={`w-6 h-6 ${
                        star <= calculateOverallRating() ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
                      }`}
                    />
                  ))}
                </div>
                <p className="text-sm text-muted-foreground">Based on {Object.keys(ratings).length} criteria</p>
              </CardContent>
            </Card>

{/* Review Summary */}
            <Card>
              <CardHeader>
                <CardTitle>Review Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">
                    {session?.user?.role === "employee" ? "Supervisor:" : "Employee:"}
                  </span>
                  <span className="font-medium">
                    {selectedEmployee
                      ? employees.find((e: any) => e.employeeId === selectedEmployee)?.name
                      : "Not selected"}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Type:</span>
                  <span className="font-medium">{reviewType || "Not selected"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Period:</span>
                  <span className="font-medium">{reviewPeriod || "Not specified"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Criteria Rated:</span>
                  <span className="font-medium">
                    {Object.keys(ratings).length}/{reviewCriteria.length}
                  </span>
                </div>
              </CardContent>
            </Card>

{/* Actions */}
            <Card>
              <CardHeader>
                <CardTitle>Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <Button variant="outline" className="w-full" onClick={handleSaveDraft}>
                  <Save className="w-4 h-4 mr-2" />
                  Save as Draft
                </Button>
                <Button className="w-full" onClick={handleSubmit}>
                  <Send className="w-4 h-4 mr-2" />
                  Submit Review
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/reviews/drafts/route.ts" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"

export async function GET() {
  try {
    const client = await clientPromise
    const db = client.db("pms")

const drafts = await db.collection("review_drafts").find({}).toArray()
    return NextResponse.json(drafts)
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to fetch drafts" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { BarChart3, TrendingUp, TrendingDown, Users, Target, Star, Calendar, Download, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { useState, useEffect } from "react"

const goalProgress = [
  { category: "Technical Skills", progress: 85, target: 90 },
  { category: "Leadership", progress: 72, target: 80 },
  { category: "Communication", progress: 88, target: 85 },
  { category: "Innovation", progress: 65, target: 75 },
  { category: "Collaboration", progress: 92, target: 90 },
]

export default function AnalyticsPage() {
  const [analyticsData, setAnalyticsData] = useState({
    avgPerformance: 0,
    reviewsCompleted: 0,
    goalAchievement: 0,
    employeeSatisfaction: 0,
    departmentPerformance: [],
    topPerformers: [],
  })
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchAnalyticsData = async () => {
      try {
        const [employeesRes, reviewsRes, goalsRes] = await Promise.all([
          fetch("/api/employees"),
          fetch("/api/reviews"),
          fetch("/api/goals"),
        ])

const employees = await employeesRes.json()
        const reviews = await reviewsRes.json()
        const goals = await goalsRes.json()

// Calculate analytics
        const completedReviews = reviews.filter((review: any) => review.status === "completed" && review.score)
        const avgPerformance =
          completedReviews.length > 0
            ? completedReviews.reduce((sum: number, review: any) => sum + review.score, 0) / completedReviews.length
            : 0

const totalEmployees = employees.filter((emp: any) => emp.role === "employee").length
        const reviewsCompleted = totalEmployees > 0 ? (completedReviews.length / totalEmployees) * 100 : 0

const completedGoals = goals.filter((goal: any) => goal.status === "completed").length
        const goalAchievement = goals.length > 0 ? (completedGoals / goals.length) * 100 : 0

// Calculate department performance
        const departments = [...new Set(employees.map((emp: any) => emp.department))]
        const departmentPerformance = departments.map((dept) => {
          const deptEmployees = employees.filter((emp: any) => emp.department === dept && emp.role === "employee")
          const deptReviews = reviews.filter(
            (review: any) =>
              deptEmployees.some((emp: any) => emp.employeeId === review.employeeId) &&
              review.status === "completed" &&
              review.score,
          )
          const avgScore =
            deptReviews.length > 0
              ? deptReviews.reduce((sum: number, review: any) => sum + review.score, 0) / deptReviews.length
              : 0

return {
            department: dept,
            avgScore: Math.round(avgScore * 10) / 10,
            employees: deptEmployees.length,
            trend: avgScore >= 4.0 ? "up" : avgScore >= 3.5 ? "stable" : "down",
          }
        })

// Get top performers
        const topPerformers = completedReviews
          .sort((a: any, b: any) => b.score - a.score)
          .slice(0, 5)
          .map((review: any) => {
            const employee = employees.find((emp: any) => emp.employeeId === review.employeeId)
            return {
              name: review.employeeName || employee?.name || "Unknown",
              role: review.employeeRole || employee?.role || "Employee",
              score: review.score,
              department: employee?.department || "Unknown",
            }
          })

setAnalyticsData({
          avgPerformance: Math.round(avgPerformance * 10) / 10,
          reviewsCompleted: Math.round(reviewsCompleted),
          goalAchievement: Math.round(goalAchievement),
          employeeSatisfaction: Math.round(avgPerformance * 0.8 * 10) / 10, // Estimated based on performance
          departmentPerformance,
          topPerformers,
        })
      } catch (error) {
        console.error("Error fetching analytics data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchAnalyticsData()
  }, [])

const handleExportReport = () => {
    // Prepare CSV data
    const csvData = []

// Add headers
    csvData.push([
      "Report Type",
      "Generated At",
      "Period",
      "Avg Performance",
      "Reviews Completed %",
      "Goal Achievement %",
      "Employee Satisfaction",
    ])

// Add summary data
    csvData.push([
      "Performance Analytics Summary",
      new Date().toISOString(),
      "Q4 2024",
      analyticsData.avgPerformance,
      analyticsData.reviewsCompleted,
      analyticsData.goalAchievement,
      analyticsData.employeeSatisfaction,
    ])

// Add empty row
    csvData.push([])

// Add department performance headers
    csvData.push(["Department Performance"])
    csvData.push(["Department", "Average Score", "Employees", "Trend"])

// Add department data
    analyticsData.departmentPerformance.forEach((dept) => {
      csvData.push([dept.department, dept.avgScore, dept.employees, dept.trend])
    })

// Add empty row
    csvData.push([])

// Add top performers headers
    csvData.push(["Top Performers"])
    csvData.push(["Rank", "Name", "Role", "Score", "Department"])

// Add top performers data
    analyticsData.topPerformers.forEach((performer, index) => {
      csvData.push([index + 1, performer.name, performer.role, performer.score, performer.department])
    })

// Add empty row
    csvData.push([])

// Add goal progress headers
    csvData.push(["Goal Progress"])
    csvData.push(["Category", "Current Progress %", "Target %"])

// Add goal progress data
    goalProgress.forEach((goal) => {
      csvData.push([goal.category, goal.progress, goal.target])
    })

// Convert to CSV string
    const csvContent = csvData.map((row) => row.map((field) => `"${field}"`).join(",")).join("\n")

// Create and download CSV file
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const link = document.createElement("a")
    const url = URL.createObjectURL(blob)
    link.setAttribute("href", url)
    link.setAttribute("download", `PMS_Analytics_Report_${new Date().toISOString().split("T")[0]}.csv`)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Average Performance</CardTitle>
              <Star className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{analyticsData.avgPerformance}</div>
              <div className="flex items-center text-xs text-green-600">
                <TrendingUp className="w-3 h-3 mr-1" />
                Based on completed reviews
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Reviews Completed</CardTitle>
              <BarChart3 className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{analyticsData.reviewsCompleted}%</div>
              <div className="flex items-center text-xs text-green-600">
                <TrendingUp className="w-3 h-3 mr-1" />
                Of total employees
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Goal Achievement</CardTitle>
              <Target className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{analyticsData.goalAchievement}%</div>
              <div className="flex items-center text-xs text-green-600">
                <TrendingUp className="w-3 h-3 mr-1" />
                Goals completed
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Employee Satisfaction</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{analyticsData.employeeSatisfaction}</div>
              <div className="flex items-center text-xs text-green-600">
                <TrendingUp className="w-3 h-3 mr-1" />
                Estimated from performance
              </div>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
          {/* Department Performance */}
          <Card>
            <CardHeader>
              <CardTitle>Department Performance</CardTitle>
              <CardDescription>Average performance scores by department</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {analyticsData.departmentPerformance.map((dept, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                      <div>
                        <p className="font-medium">{dept.department}</p>
                        <p className="text-sm text-muted-foreground">{dept.employees} employees</p>
                      </div>
                    </div>
                    <div className="flex items-center space-x-3">
                      <div className="text-right">
                        <p className="font-medium">{dept.avgScore}</p>
                        <div className="flex items-center">
                          {dept.trend === "up" && <TrendingUp className="w-3 h-3 text-green-500" />}
                          {dept.trend === "down" && <TrendingDown className="w-3 h-3 text-red-500" />}
                          {dept.trend === "stable" && <div className="w-3 h-3 bg-gray-400 rounded-full"></div>}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

{/* Top Performers */}
          <Card>
            <CardHeader>
              <CardTitle>Top Performers</CardTitle>
              <CardDescription>Highest rated employees this quarter</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {analyticsData.topPerformers.map((performer, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
                        {index + 1}
                      </div>
                      <div>
                        <p className="font-medium">{performer.name}</p>
                        <p className="text-sm text-muted-foreground">{performer.role}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="flex items-center">
                        <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 mr-1" />
                        <span className="font-medium">{performer.score}</span>
                      </div>
                      <Badge variant="secondary" className="text-xs">
                        {performer.department}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Goal Progress */}
        <Card>
          <CardHeader>
            <CardTitle>Organizational Goal Progress</CardTitle>
            <CardDescription>Progress towards company-wide performance objectives</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {goalProgress.map((goal, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">{goal.category}</span>
                    <span className="text-sm text-muted-foreground">
                      {goal.progress}% / {goal.target}%
                    </span>
                  </div>
                  <Progress value={goal.progress} className="h-2" />
                  <div className="flex justify-between text-xs text-muted-foreground">
                    <span>Current: {goal.progress}%</span>
                    <span>Target: {goal.target}%</span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { useEffect, useState } 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 {
  Users,
  Target,
  TrendingUp,
  Calendar,
  Star,
  BarChart3,
  Clock,
  CheckCircle,
  LogOut,
  UserCheck,
} from "lucide-react"
import { signOut } from "next-auth/react"
import Link from "next/link"

export default function Dashboard() {
  const { data: session, status } = useSession()
  const router = useRouter()

const [showScheduleDialog, setShowScheduleDialog] = useState(false)

const handleScheduleReview = () => {
    // For now, redirect to create review page
    router.push("/reviews/new")
  }

const [dashboardStats, setDashboardStats] = useState({
    totalEmployees: 0,
    totalHODs: 0,
    pendingReviews: 0,
    avgPerformance: 0,
    goalsCompleted: 0,
  })

const [recentReviews, setRecentReviews] = useState([])

useEffect(() => {
    const fetchDashboardStats = async () => {
      try {
        const [employeesRes, reviewsRes, goalsRes] = await Promise.all([
          fetch("/api/employees"),
          fetch("/api/reviews"),
          fetch("/api/goals"),
        ])

const employees = await employeesRes.json()
        const reviews = await reviewsRes.json()
        const goals = await goalsRes.json()

// Calculate stats
        const totalEmployees = employees.filter((emp: any) => emp.role === "employee").length
        const totalHODs = employees.filter((emp: any) => emp.role === "hod").length
        const pendingReviews = reviews.filter((review: any) => review.status === "pending").length

// Calculate average performance from completed reviews
        const completedReviews = reviews.filter((review: any) => review.status === "completed" && review.score)
        const avgPerformance =
          completedReviews.length > 0
            ? completedReviews.reduce((sum: number, review: any) => sum + review.score, 0) / completedReviews.length
            : 0

// Calculate goals completion percentage
        const completedGoals = goals.filter((goal: any) => goal.status === "completed").length
        const goalsCompleted = goals.length > 0 ? (completedGoals / goals.length) * 100 : 0

// Get recent reviews (last 4)
        const sortedReviews = reviews
          .sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
          .slice(0, 4)
          .map((review: any) => ({
            name: review.employeeName,
            role: review.employeeRole,
            score: review.score || 0,
            status: review.status,
            date: review.completedDate
              ? new Date(review.completedDate).toLocaleDateString()
              : `Due ${new Date(review.dueDate).toLocaleDateString()}`,
          }))

setDashboardStats({
          totalEmployees,
          totalHODs,
          pendingReviews,
          avgPerformance: Math.round(avgPerformance * 10) / 10,
          goalsCompleted: Math.round(goalsCompleted),
        })
        setRecentReviews(sortedReviews)
      } catch (error) {
        console.error("Error fetching dashboard stats:", error)
      }
    }

if (session?.user?.role !== "employee") {
      fetchDashboardStats()
    }
  }, [session])

useEffect(() => {
    if (status === "loading") return // Still loading

if (!session) {
      router.push("/login")
      return
    }

// Redirect employees to their dashboard
    if (session.user.role === "employee") {
      router.push("/employee")
      return
    }
  }, [session, status, router])

if (status === "loading") {
    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"></div>
          <p className="mt-4 text-gray-600">Loading...</p>
        </div>
      </div>
    )
  }

if (!session || session.user.role === "employee") {
    return null // Will redirect
  }

{/* Rest of the dashboard content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Stats Overview */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Employees</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardStats.totalEmployees}</div>
              <p className="text-xs text-muted-foreground">Active employees</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total HODs</CardTitle>
              <UserCheck className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardStats.totalHODs}</div>
              <p className="text-xs text-muted-foreground">Supervisors</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Pending Reviews</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardStats.pendingReviews}</div>
              <p className="text-xs text-muted-foreground">Awaiting completion</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Avg Performance</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardStats.avgPerformance}</div>
              <p className="text-xs text-muted-foreground">Out of 5.0</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Goals Completed</CardTitle>
              <Target className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{dashboardStats.goalsCompleted}%</div>
              <p className="text-xs text-muted-foreground">Of total goals</p>
            </CardContent>
          </Card>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Recent Reviews */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle>Recent Performance Reviews</CardTitle>
                <CardDescription>Latest employee evaluations and feedback</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {recentReviews.map((review, index) => (
                    <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center space-x-4">
                        <Avatar>
                          <AvatarImage src="/placeholder.svg?height=40&width=40" />
                          <AvatarFallback>
                            {review.name
                              .split(" ")
                              .map((n) => n[0])
                              .join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium">{review.name}</p>
                          <p className="text-sm text-muted-foreground">{review.role}</p>
                        </div>
                      </div>
                      <div className="flex items-center space-x-4">
                        {review.status === "completed" ? (
                          <div className="flex items-center space-x-2">
                            <div className="flex items-center">
                              <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                              <span className="ml-1 font-medium">{review.score}</span>
                            </div>
                            <Badge variant="secondary">
                              <CheckCircle className="w-3 h-3 mr-1" />
                              Completed
                            </Badge>
                          </div>
                        ) : (
                          <Badge variant="destructive">Pending</Badge>
                        )}
                        <span className="text-sm text-muted-foreground">{review.date}</span>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mt-4">
                  <Link href="/reviews">
                    <Button variant="outline" className="w-full">
                      View All Reviews
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Quick Actions */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Quick Actions</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Link href="/employees">
                  <Button className="w-full justify-start">
                    <Users className="w-4 h-4 mr-2" />
                    Manage Employees
                  </Button>
                </Link>
                <Link href="/reviews">
                  <Button variant="outline" className="w-full justify-start">
                    <Star className="w-4 h-4 mr-2" />
                    Performance Reviews
                  </Button>
                </Link>
                <Link href="/reviews/new">
                  <Button variant="outline" className="w-full justify-start">
                    <Star className="w-4 h-4 mr-2" />
                    Create Review
                  </Button>
                </Link>
                <Link href="/goals">
                  <Button variant="outline" className="w-full justify-start">
                    <Target className="w-4 h-4 mr-2" />
                    Set Goals
                  </Button>
                </Link>
                <Link href="/analytics">
                  <Button variant="outline" className="w-full justify-start">
                    <BarChart3 className="w-4 h-4 mr-2" />
                    View Analytics
                  </Button>
                </Link>
                {session.user.role === "admin" && (
                  <>
                    <Link href="/admin/users">
                      <Button variant="outline" className="w-full justify-start">
                        <Users className="w-4 h-4 mr-2" />
                        Manage Users
                      </Button>
                    </Link>
                    <Link href="/admin/review-questions">
                      <Button variant="outline" className="w-full justify-start">
                        <Star className="w-4 h-4 mr-2" />
                        Review Questions
                      </Button>
                    </Link>
                  </>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Plus, Users, ArrowLeft, Loader2, CheckCircle, AlertCircle, Edit } from "lucide-react"
import Link from "next/link"

const departments = [
  "Sales Support",
  "HR",
  "Training Department",
  "Dispatch Diamond",
  "Dispatch Franchise",
  "Dispatch Gold",
  "SNMCC",
  "Accounts",
  "Marketing",
  "IT",
  "E-COM",
  "PD / Merchandiser",
  "Visual Merchandiser FRN",
  "PR / CSR",
  "RARE",
  "Data Analyst",
  "Photography",
]

export default function AdminUsersPage() {
  const { data: session } = useSession()
  const router = useRouter()
  const [users, setUsers] = useState([])
  const [supervisors, setSupervisors] = useState([])
  const [loading, setLoading] = useState(true)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [message, setMessage] = useState({ type: "", text: "" })
  const [editingUser, setEditingUser] = useState(null)

const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    role: "",
    department: "",
    phone: "",
    location: "",
    reportingTo: "",
    employeeId: "",
  })

const [editFormData, setEditFormData] = useState({
    name: "",
    email: "",
    role: "",
    department: "",
    phone: "",
    location: "",
    reportingTo: "",
    employeeId: "",
  })

useEffect(() => {
    if (session?.user?.role !== "admin") {
      router.push("/")
      return
    }
    fetchUsers()
    fetchSupervisors()
  }, [session, router])

const fetchUsers = async () => {
    try {
      const response = await fetch("/api/employees")
      const data = await response.json()
      setUsers(data)
    } catch (error) {
      console.error("Error fetching users:", error)
    } finally {
      setLoading(false)
    }
  }

const fetchSupervisors = async () => {
    try {
      const response = await fetch("/api/employees")
      const data = await response.json()
      const supervisorList = data.filter((emp: any) => emp.role === "hod" || emp.role === "admin")
      setSupervisors(supervisorList)
    } catch (error) {
      console.error("Error fetching supervisors:", error)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setMessage({ type: "", text: "" })

try {
      const response = await fetch("/api/users/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...formData,
          joinDate: new Date(),
        }),
      })

const result = await response.json()

if (response.ok) {
        setMessage({ type: "success", text: `User created successfully! Employee ID: ${result.employeeId}` })
        setFormData({
          name: "",
          email: "",
          password: "",
          role: "",
          department: "",
          phone: "",
          location: "",
          reportingTo: "",
          employeeId: "",
        })
        fetchUsers()
        setTimeout(() => setIsDialogOpen(false), 2000)
      } else {
        setMessage({ type: "error", text: result.error || "Failed to create user" })
      }
    } catch (error) {
      setMessage({ type: "error", text: "Something went wrong. Please try again." })
    } finally {
      setIsSubmitting(false)
    }
  }

const handleEditSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    setMessage({ type: "", text: "" })

try {
      const response = await fetch(`/api/users/${editingUser._id}/update`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(editFormData),
      })

const result = await response.json()

if (response.ok) {
        setMessage({ type: "success", text: "User updated successfully!" })
        fetchUsers()
        setTimeout(() => setIsEditDialogOpen(false), 2000)
      } else {
        setMessage({ type: "error", text: result.error || "Failed to update user" })
      }
    } catch (error) {
      setMessage({ type: "error", text: "Something went wrong. Please try again." })
    } finally {
      setIsSubmitting(false)
    }
  }

const openEditDialog = (user: any) => {
    setEditingUser(user)
    setEditFormData({
      name: user.name,
      email: user.email,
      role: user.role,
      department: user.department,
      phone: user.phone || "",
      location: user.location || "",
      reportingTo: user.reportingTo || "",
      employeeId: user.employeeId,
    })
    setIsEditDialogOpen(true)
  }

const getRoleBadge = (role: string) => {
    switch (role) {
      case "admin":
        return <Badge variant="destructive">Admin</Badge>
      case "hod":
        return <Badge className="bg-blue-100 text-blue-800">Supervisor</Badge>
      case "employee":
        return <Badge variant="secondary">Employee</Badge>
      default:
        return <Badge variant="outline">{role}</Badge>
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <Link href="/" className="text-2xl font-bold text-gray-900 hover:text-gray-700 flex items-center">
                <ArrowLeft className="w-5 h-5 mr-2" />
                Admin Panel
              </Link>
              <span className="mx-2 text-gray-400">/</span>
              <span className="text-gray-600">User Management</span>
            </div>
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button>
                  <Plus className="w-4 h-4 mr-2" />
                  Create User
                </Button>
              </DialogTrigger>
              <DialogContent className="sm:max-w-md">
                <DialogHeader>
                  <DialogTitle>Create New User</DialogTitle>
                  <DialogDescription>Add a new employee or supervisor to the system</DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="name">Full Name</Label>
                      <Input
                        id="name"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="employeeId">Employee ID</Label>
                      <Input
                        id="employeeId"
                        type="number"
                        value={formData.employeeId}
                        onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
                        placeholder="e.g., 1001"
                        required
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="password">Password</Label>
                      <Input
                        id="password"
                        type="password"
                        value={formData.password}
                        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                        required
                      />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="role">Role</Label>
                    <Select value={formData.role} onValueChange={(value) => setFormData({ ...formData, role: value })}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select role" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="employee">Employee</SelectItem>
                        <SelectItem value="hod">HOD</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="department">Department</Label>
                      <Select
                        value={formData.department}
                        onValueChange={(value) => setFormData({ ...formData, department: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Select department" />
                        </SelectTrigger>
                        <SelectContent>
                          {departments.map((dept) => (
                            <SelectItem key={dept} value={dept}>
                              {dept}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="phone">Phone</Label>
                      <Input
                        id="phone"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        placeholder="+1 (555) 123-4567"
                      />
                    </div>
                  </div>
                  <div>
                    <Label htmlFor="location">Location</Label>
                    <Input
                      id="location"
                      value={formData.location}
                      onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                      placeholder="City, State"
                    />
                  </div>
                  {formData.role === "employee" && (
                    <div>
                      <Label htmlFor="reportingTo">Reporting HOD / Supervisor</Label>
                      <Select
                        value={formData.reportingTo}
                        onValueChange={(value) => setFormData({ ...formData, reportingTo: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Select supervisor" />
                        </SelectTrigger>
                        <SelectContent>
                          {supervisors.map((supervisor: any) => (
                            <SelectItem key={supervisor.employeeId} value={supervisor.employeeId}>
                              {supervisor.name} - {supervisor.department} ({supervisor.role.toUpperCase()})
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  )}
                  {message.text && (
                    <Alert variant={message.type === "error" ? "destructive" : "default"}>
                      {message.type === "success" ? (
                        <CheckCircle className="h-4 w-4" />
                      ) : (
                        <AlertCircle className="h-4 w-4" />
                      )}
                      <AlertDescription>{message.text}</AlertDescription>
                    </Alert>
                  )}
                  <Button type="submit" className="w-full" disabled={isSubmitting}>
                    {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                    Create User
                  </Button>
                </form>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      </header>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Users className="w-5 h-5 mr-2" />
              User Management
            </CardTitle>
            <CardDescription>Manage employees and supervisors in the system</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {users.map((user: any) => (
                <Card key={user._id} className="hover:shadow-md transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-center space-x-4 mb-4">
                      <Avatar className="w-12 h-12">
                        <AvatarImage src="/placeholder.svg?height=48&width=48" />
                        <AvatarFallback>
                          {user.name
                            ?.split(" ")
                            .map((n: string) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <h3 className="font-semibold">{user.name}</h3>
                        <p className="text-sm text-muted-foreground">{user.employeeId}</p>
                      </div>
                      {getRoleBadge(user.role)}
                    </div>
                    <div className="space-y-2 text-sm">
                      <div>
                        <span className="font-medium">Email:</span> {user.email}
                      </div>
                      <div>
                        <span className="font-medium">Department:</span> {user.department}
                      </div>
                      {user.phone && (
                        <div>
                          <span className="font-medium">Phone:</span> {user.phone}
                        </div>
                      )}
                      {user.location && (
                        <div>
                          <span className="font-medium">Location:</span> {user.location}
                        </div>
                      )}
                      {user.reportingTo && (
                        <div>
                          <span className="font-medium">Reports To:</span>{" "}
                          {users.find((u: any) => u.employeeId === user.reportingTo)?.name || user.reportingTo}
                        </div>
                      )}
                      <div>
                        <span className="font-medium">Joined:</span>{" "}
                        {new Date(user.joinDate || user.createdAt).toLocaleDateString()}
                      </div>
                    </div>
                    <div className="mt-4">
                      <Button variant="outline" size="sm" onClick={() => openEditDialog(user)} className="w-full">
                        <Edit className="w-4 h-4 mr-2" />
                        Edit User
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Edit User Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Edit User</DialogTitle>
            <DialogDescription>Update user information</DialogDescription>
          </DialogHeader>
          <form onSubmit={handleEditSubmit} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="editName">Full Name</Label>
                <Input
                  id="editName"
                  value={editFormData.name}
                  onChange={(e) => setEditFormData({ ...editFormData, name: e.target.value })}
                  required
                />
              </div>
              <div>
                <Label htmlFor="editEmployeeId">Employee ID</Label>
                <Input
                  id="editEmployeeId"
                  type="number"
                  value={editFormData.employeeId}
                  onChange={(e) => setEditFormData({ ...editFormData, employeeId: e.target.value })}
                  required
                />
              </div>
            </div>
            <div>
              <Label htmlFor="editEmail">Email</Label>
              <Input
                id="editEmail"
                type="email"
                value={editFormData.email}
                onChange={(e) => setEditFormData({ ...editFormData, email: e.target.value })}
                required
              />
            </div>
            <div>
              <Label htmlFor="editRole">Role</Label>
              <Select
                value={editFormData.role}
                onValueChange={(value) => setEditFormData({ ...editFormData, role: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="employee">Employee</SelectItem>
                  <SelectItem value="hod">HOD</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="editDepartment">Department</Label>
                <Select
                  value={editFormData.department}
                  onValueChange={(value) => setEditFormData({ ...editFormData, department: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select department" />
                  </SelectTrigger>
                  <SelectContent>
                    {departments.map((dept) => (
                      <SelectItem key={dept} value={dept}>
                        {dept}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="editPhone">Phone</Label>
                <Input
                  id="editPhone"
                  value={editFormData.phone}
                  onChange={(e) => setEditFormData({ ...editFormData, phone: e.target.value })}
                  placeholder="+1 (555) 123-4567"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="editLocation">Location</Label>
              <Input
                id="editLocation"
                value={editFormData.location}
                onChange={(e) => setEditFormData({ ...editFormData, location: e.target.value })}
                placeholder="City, State"
              />
            </div>
            {editFormData.role === "employee" && (
              <div>
                <Label htmlFor="editReportingTo">Reporting HOD / Supervisor</Label>
                <Select
                  value={editFormData.reportingTo}
                  onValueChange={(value) => setEditFormData({ ...editFormData, reportingTo: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select supervisor" />
                  </SelectTrigger>
                  <SelectContent>
                    {supervisors.map((supervisor: any) => (
                      <SelectItem key={supervisor.employeeId} value={supervisor.employeeId}>
                        {supervisor.name} - {supervisor.department} ({supervisor.role.toUpperCase()})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}
            {message.text && (
              <Alert variant={message.type === "error" ? "destructive" : "default"}>
                {message.type === "success" ? <CheckCircle className="h-4 w-4" /> : <AlertCircle className="h-4 w-4" />}
                <AlertDescription>{message.text}</AlertDescription>
              </Alert>
            )}
            <div className="flex space-x-2">
              <Button type="button" variant="outline" onClick={() => setIsEditDialogOpen(false)} className="flex-1">
                Cancel
              </Button>
              <Button type="submit" disabled={isSubmitting} className="flex-1">
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Update User
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/users/[id]/update/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const session = await getServerSession(authOptions)
    if (!session || session.user.role !== "admin") {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

// Check if employee ID already exists (excluding current user)
    if (body.employeeId) {
      const existingUser = await db.collection("users").findOne({
        employeeId: body.employeeId,
        _id: { $ne: new ObjectId(params.id) },
      })
      if (existingUser) {
        return NextResponse.json({ error: "Employee ID already exists" }, { status: 400 })
      }
    }

const updateData = {
      ...body,
      updatedAt: new Date(),
    }

const result = await db.collection("users").updateOne({ _id: new ObjectId(params.id) }, { $set: updateData })

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "User not found" }, { status: 404 })
    }

return NextResponse.json({ message: "User updated successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to update user" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/reviews/[id]/status/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const session = await getServerSession(authOptions)
    if (!session || (session.user.role !== "admin" && session.user.role !== "hod")) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { status } = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

const updateData: any = {
      status,
      updatedAt: new Date(),
    }

if (status === "completed") {
      updateData.completedDate = new Date()
    }

const result = await db.collection("reviews").updateOne({ _id: new ObjectId(params.id) }, { $set: updateData })

if (result.matchedCount === 0) {
      return NextResponse.json({ error: "Review not found" }, { status: 404 })
    }

return NextResponse.json({ message: "Review status updated successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to update review status" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/goals/create/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"

const body = await request.json()
    const client = await clientPromise
    const db = client.db("pms")

// Validate required fields
    if (!body.title || !body.description || !body.employeeId || !body.dueDate) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const goal = {
      title: body.title,
      description: body.description,
      employeeId: body.employeeId,
      employee: body.employee,
      employeeRole: body.employeeRole,
      category: body.category,
      priority: body.priority,
      startDate: body.startDate || new Date(),
      dueDate: new Date(body.dueDate),
      teamMembers: body.teamMembers || [],
      createdBy: session.user.employeeId,
      createdByName: session.user.name,
      status: "not_started",
      progress: 0,
      createdAt: new Date(),
      updatedAt: new Date(),
    }

const result = await db.collection("goals").insertOne(goal)
    return NextResponse.json({ id: result.insertedId, message: "Goal created successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to create goal" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/reviews/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
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 { Star, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function ReviewDetailPage() {
  const params = useParams()
  const [review, setReview] = useState(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchReview = async () => {
      try {
        const response = await fetch(`/api/reviews/${params.id}`)
        if (!response.ok) {
          throw new Error("Failed to fetch review")
        }
        const data = await response.json()
        setReview(data)
      } catch (error) {
        console.error("Error fetching review:", error)
      } finally {
        setLoading(false)
      }
    }

if (params.id) {
      fetchReview()
    }
  }, [params.id])

const getStatusBadge = (status) => {
    switch (status) {
      case "completed":
        return <Badge className="bg-green-100 text-green-800">Completed</Badge>
      case "pending":
        return <Badge className="bg-yellow-100 text-yellow-800">Pending</Badge>
      case "in_progress":
        return <Badge className="bg-blue-100 text-blue-800">In Progress</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

if (!review) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Card className="w-full max-w-2xl">
          <CardContent className="pt-6">
            <div className="text-center py-8">
              <p className="text-xl font-semibold text-gray-800">Review not found</p>
              <p className="text-gray-500 mt-2">The review you're looking for doesn't exist or has been deleted.</p>
              <Link href="/reviews">
                <Button className="mt-4">
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Back to Reviews
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Card>
          <CardHeader>
            <div className="flex justify-between items-center">
              <div>
                <CardTitle className="text-2xl">Performance Review</CardTitle>
                <CardDescription>Review details and feedback</CardDescription>
              </div>
              {getStatusBadge(review.status)}
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Employee Information */}
            <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
              <Avatar className="w-16 h-16">
                <AvatarImage src="/placeholder.svg?height=64&width=64" />
                <AvatarFallback>
                  {review.employeeName
                    ?.split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <div>
                <h3 className="text-xl font-semibold">{review.employeeName}</h3>
                <p className="text-gray-500">{review.employeeRole}</p>
                <p className="text-gray-500">{review.department}</p>
              </div>
            </div>

{/* Review Details */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-500">Review Type</p>
                <p className="font-medium">{review.reviewType}</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-500">Period</p>
                <p className="font-medium">{review.period}</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-500">Reviewer</p>
                <p className="font-medium">{review.reviewer}</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-500">Due Date</p>
                <p className="font-medium">{new Date(review.dueDate).toLocaleDateString()}</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="text-sm text-gray-500">Completion Date</p>
                <p className="font-medium">
                  {review.completionDate ? new Date(review.completionDate).toLocaleDateString() : "Not completed"}
                </p>
              </div>
              {review.score && (
                <div className="p-4 bg-gray-50 rounded-lg">
                  <p className="text-sm text-gray-500">Overall Score</p>
                  <div className="flex items-center">
                    <Star className="w-5 h-5 fill-yellow-400 text-yellow-400 mr-1" />
                    <span className="font-medium text-lg">{review.score}</span>
                  </div>
                </div>
              )}
            </div>

{/* Review Sections */}
            {review.sections && review.sections.length > 0 && (
              <div className="space-y-6">
                <h3 className="text-lg font-semibold">Review Sections</h3>
                {review.sections.map((section, index) => (
                  <div key={index} className="border rounded-lg p-4">
                    <h4 className="font-medium text-lg mb-2">{section.title}</h4>
                    {section.questions &&
                      section.questions.map((question, qIndex) => (
                        <div key={qIndex} className="mb-4">
                          <p className="font-medium">{question.question}</p>
                          <p className="mt-1 text-gray-700">{question.answer}</p>
                          {question.rating && (
                            <div className="flex items-center mt-1">
                              <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 mr-1" />
                              <span>{question.rating}/5</span>
                            </div>
                          )}
                        </div>
                      ))}
                  </div>
                ))}
              </div>
            )}

{/* Comments */}
            {review.comments && (
              <div className="border rounded-lg p-4">
                <h3 className="text-lg font-semibold mb-2">Additional Comments</h3>
                <p className="text-gray-700">{review.comments}</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/reviews/[id]/delete/route.ts" isEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import clientPromise from "@/lib/mongodb"
import { ObjectId } from "mongodb"

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const client = await clientPromise
    const db = client.db("pms")

// Check if the ID is valid
    if (!ObjectId.isValid(params.id)) {
      return NextResponse.json({ error: "Invalid review ID format" }, { status: 400 })
    }

const result = await db.collection("reviews").deleteOne({ _id: new ObjectId(params.id) })

if (result.deletedCount === 0) {
      return NextResponse.json({ error: "Review not found" }, { status: 404 })
    }

return NextResponse.json({ message: "Review deleted successfully" })
  } catch (error) {
    console.error("Database error:", error)
    return NextResponse.json({ error: "Failed to delete review" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/reviews/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Search, Filter, Plus, Star, Clock, CheckCircle, AlertCircle, Eye, Trash2, Edit } from "lucide-react"
import Link from "next/link"
import { useSession } from "next-auth/react"

export default function ReviewsPage() {
  const { data: session } = useSession()
  const [reviews, setReviews] = useState([])
  const [drafts, setDrafts] = useState([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [activeTab, setActiveTab] = useState("all")
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [isStatusDialogOpen, setIsStatusDialogOpen] = useState(false)
  const [selectedReview, setSelectedReview] = useState(null)
  const [newStatus, setNewStatus] = useState("")
  const [deleteError, setDeleteError] = useState("")

useEffect(() => {
    const fetchReviews = async () => {
      try {
        const [reviewsResponse, draftsResponse] = await Promise.all([
          fetch("/api/reviews"),
          fetch("/api/reviews/drafts"),
        ])
        const reviewsData = await reviewsResponse.json()
        const draftsData = await draftsResponse.json()
        setReviews(reviewsData)
        setDrafts(draftsData)
      } catch (error) {
        console.error("Error fetching data:", error)
      } finally {
        setLoading(false)
      }
    }

fetchReviews()
  }, [])

const handleDeleteReview = async () => {
    if (!selectedReview) return
    setDeleteError("")

try {
      const response = await fetch(`/api/reviews/${selectedReview._id}/delete`, {
        method: "DELETE",
      })

const data = await response.json()

if (response.ok) {
        setReviews(reviews.filter((review) => review._id !== selectedReview._id))
        setIsDeleteDialogOpen(false)
        alert("Review deleted successfully!")
      } else {
        setDeleteError(data.error || "Failed to delete review")
        alert(data.error || "Failed to delete review")
      }
    } catch (error) {
      console.error("Error deleting review:", error)
      setDeleteError("Something went wrong. Please try again.")
      alert("Something went wrong. Please try again.")
    }
  }

const handleStatusUpdate = async () => {
    if (!selectedReview || !newStatus) return

try {
      const response = await fetch(`/api/reviews/${selectedReview._id}/status`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      })

if (response.ok) {
        setReviews(
          reviews.map((review) => (review._id === selectedReview._id ? { ...review, status: newStatus } : review)),
        )
        setIsStatusDialogOpen(false)
        alert("Review status updated successfully!")
      } else {
        const error = await response.json()
        alert(error.error || "Failed to update status")
      }
    } catch (error) {
      console.error("Error updating status:", error)
      alert("Something went wrong. Please try again.")
    }
  }

const filteredReviews =
    activeTab === "drafts"
      ? drafts.filter((draft) => {
          const matchesSearch =
            draft?.employeeName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
            draft?.employeeRole?.toLowerCase().includes(searchTerm.toLowerCase())
          return matchesSearch
        })
      : reviews.filter((review) => {
          const matchesSearch =
            review?.employeeName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
            review?.employeeRole?.toLowerCase().includes(searchTerm.toLowerCase())
          const matchesStatus = statusFilter === "all" || review?.status === statusFilter
          const matchesTab = activeTab === "all" || review?.status === activeTab
          return matchesSearch && matchesStatus && matchesTab
        })

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return (
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            <CheckCircle className="w-3 h-3 mr-1" />
            Completed
          </Badge>
        )
      case "pending":
        return (
          <Badge variant="secondary" className="bg-yellow-100 text-yellow-800">
            <Clock className="w-3 h-3 mr-1" />
            Pending
          </Badge>
        )
      case "in_progress":
        return (
          <Badge variant="secondary" className="bg-blue-100 text-blue-800">
            <Clock className="w-3 h-3 mr-1" />
            In Progress
          </Badge>
        )
      case "overdue":
        return (
          <Badge variant="destructive">
            <AlertCircle className="w-3 h-3 mr-1" />
            Overdue
          </Badge>
        )
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const getStatusCounts = () => {
    return {
      all: reviews.length,
      completed: reviews.filter((r) => r?.status === "completed").length,
      pending: reviews.filter((r) => r?.status === "pending").length,
      in_progress: reviews.filter((r) => r?.status === "in_progress").length,
      overdue: reviews.filter((r) => r?.status === "overdue").length,
    }
  }

const statusCounts = getStatusCounts()

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Performance Reviews</CardTitle>
            <CardDescription>Track and manage employee performance evaluations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col sm:flex-row gap-4 mb-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="Search reviews..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger className="w-full sm:w-48">
                  <Filter className="w-4 h-4 mr-2" />
                  <SelectValue placeholder="Filter by status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="overdue">Overdue</SelectItem>
                </SelectContent>
              </Select>
            </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-6">
                <TabsTrigger value="all">All ({statusCounts.all})</TabsTrigger>
                <TabsTrigger value="completed">Completed ({statusCounts.completed})</TabsTrigger>
                <TabsTrigger value="pending">Pending ({statusCounts.pending})</TabsTrigger>
                <TabsTrigger value="in_progress">In Progress ({statusCounts.in_progress})</TabsTrigger>
                <TabsTrigger value="overdue">Overdue ({statusCounts.overdue})</TabsTrigger>
                <TabsTrigger value="drafts">Drafts ({drafts.length})</TabsTrigger>
              </TabsList>
            </Tabs>
          </CardContent>
        </Card>

{/* Reviews List */}
        <div className="space-y-4">
          {filteredReviews.map((review) => (
            <Card key={review._id} className="hover:shadow-md transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-4">
                    <Avatar className="w-12 h-12">
                      <AvatarImage src={review?.avatar || "/placeholder.svg"} />
                      <AvatarFallback>
                        {review?.employeeName
                          ?.split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-semibold text-lg">{review?.employeeName}</h3>
                      <p className="text-muted-foreground">{review?.employeeRole}</p>
                    </div>
                  </div>

<div className="flex items-center space-x-6">
                    <div className="text-center">
                      <p className="text-sm text-muted-foreground">Review Type</p>
                      <p className="font-medium">{review?.reviewType}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm text-muted-foreground">Period</p>
                      <p className="font-medium">{review?.period}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm text-muted-foreground">Reviewer</p>
                      <p className="font-medium">{review?.reviewer}</p>
                    </div>
                    {review?.score && (
                      <div className="text-center">
                        <p className="text-sm text-muted-foreground">Score</p>
                        <div className="flex items-center">
                          <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 mr-1" />
                          <span className="font-medium">{review?.score}</span>
                        </div>
                      </div>
                    )}
                    <div className="text-center">
                      <p className="text-sm text-muted-foreground">Due Date</p>
                      <p className="font-medium">{new Date(review?.dueDate).toLocaleDateString()}</p>
                    </div>
                    <div className="text-center">
                      <p className="text-sm text-muted-foreground">Status</p>
                      {getStatusBadge(review?.status)}
                    </div>
                    <div className="flex space-x-2">
                      <Link href={`/reviews/${review._id}`}>
                        <Button variant="outline" size="sm">
                          <Eye className="w-4 h-4 mr-2" />
                          View
                        </Button>
                      </Link>
                      {(session?.user?.role === "admin" || session?.user?.role === "hod") && (
                        <>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setSelectedReview(review)
                              setNewStatus(review.status)
                              setIsStatusDialogOpen(true)
                            }}
                          >
                            <Edit className="w-4 h-4 mr-2" />
                            Status
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setSelectedReview(review)
                              setDeleteError("")
                              setIsDeleteDialogOpen(true)
                            }}
                          >
                            <Trash2 className="w-4 h-4 mr-2" />
                            Delete
                          </Button>
                        </>
                      )}
                      {review?.status !== "completed" && <Button size="sm">Continue</Button>}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{filteredReviews.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <p className="text-muted-foreground">No reviews found matching your criteria.</p>
            </CardContent>
          </Card>
        )}
      </div>

{/* Delete Confirmation Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Delete Review</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this review for {selectedReview?.employeeName}? This action cannot be
              undone.
            </DialogDescription>
          </DialogHeader>
          {deleteError && <div className="bg-red-50 text-red-800 p-3 rounded-md text-sm mb-4">{deleteError}</div>}
          <div className="flex space-x-2">
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} className="flex-1">
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteReview} className="flex-1">
              Delete Review
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* Status Update Dialog */}
      <Dialog open={isStatusDialogOpen} onOpenChange={setIsStatusDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Update Review Status</DialogTitle>
            <DialogDescription>Change the status of the review for {selectedReview?.employeeName}</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <Select value={newStatus} onValueChange={setNewStatus}>
              <SelectTrigger>
                <SelectValue placeholder="Select new status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="in_progress">In Progress</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
                <SelectItem value="overdue">Overdue</SelectItem>
              </SelectContent>
            </Select>
            <div className="flex space-x-2">
              <Button variant="outline" onClick={() => setIsStatusDialogOpen(false)} className="flex-1">
                Cancel
              </Button>
              <Button onClick={handleStatusUpdate} className="flex-1">
                Update Status
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/goals/new/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Save, Loader2, CheckCircle, AlertCircle, Target, X, Search } from "lucide-react"
import Link from "next/link"

const categories = [
  "Professional Development",
  "Technical Skills",
  "Leadership",
  "Project Management",
  "Communication",
  "Sales",
  "Marketing",
  "Design",
  "Analytics",
  "Customer Service",
  "Training",
  "Process Improvement",
]

export default function NewGoalPage() {
  const { data: session } = useSession()
  const router = useRouter()
  const [employees, setEmployees] = useState([])
  const [allUsers, setAllUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [submitting, setSubmitting] = useState(false)
  const [message, setMessage] = useState({ type: "", text: "" })
  const [selectedTeamMembers, setSelectedTeamMembers] = useState([])
  const [searchTerm, setSearchTerm] = useState("")
  const [showEmployeeResults, setShowEmployeeResults] = useState(false)

const [formData, setFormData] = useState({
    title: "",
    description: "",
    employeeId: "",
    employee: "",
    employeeRole: "",
    category: "",
    priority: "",
    dueDate: "",
  })

useEffect(() => {
    if (session?.user?.role !== "admin" && session?.user?.role !== "hod") {
      router.push("/")
      return
    }
    fetchEmployees()
  }, [session, router])

const fetchEmployees = async () => {
    try {
      const response = await fetch("/api/employees")
      const data = await response.json()
      // Include both employees and HODs for goal assignment
      const eligibleUsers = data.filter((emp: any) => emp.role === "employee" || emp.role === "hod")
      setEmployees(eligibleUsers)
      setAllUsers(data) // For team member selection
    } catch (error) {
      console.error("Error fetching employees:", error)
    } finally {
      setLoading(false)
    }
  }

const handleEmployeeChange = (employee: any) => {
    setFormData({
      ...formData,
      employeeId: employee.employeeId,
      employee: employee.name,
      employeeRole: employee.role,
    })
    setSearchTerm(employee.name)
    setShowEmployeeResults(false)
  }

const filteredEmployees = employees.filter(
    (emp: any) =>
      emp.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      emp.employeeId.toLowerCase().includes(searchTerm.toLowerCase()) ||
      emp.department.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const addTeamMember = (memberId: string) => {
    const member = allUsers.find((user: any) => user.employeeId === memberId)
    if (member && !selectedTeamMembers.find((m: any) => m.employeeId === memberId)) {
      setSelectedTeamMembers([...selectedTeamMembers, member])
    }
  }

const removeTeamMember = (memberId: string) => {
    setSelectedTeamMembers(selectedTeamMembers.filter((m: any) => m.employeeId !== memberId))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)
    setMessage({ type: "", text: "" })

try {
      const response = await fetch("/api/goals/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...formData,
          startDate: new Date(),
          dueDate: new Date(formData.dueDate),
          teamMembers: selectedTeamMembers.map((member: any) => ({
            employeeId: member.employeeId,
            name: member.name,
            role: member.role,
          })),
        }),
      })

const result = await response.json()

if (response.ok) {
        setMessage({ type: "success", text: "Goal created successfully!" })
        setFormData({
          title: "",
          description: "",
          employeeId: "",
          employee: "",
          employeeRole: "",
          category: "",
          priority: "",
          dueDate: "",
        })
        setSelectedTeamMembers([])
        setTimeout(() => router.push("/goals"), 2000)
      } else {
        setMessage({ type: "error", text: result.error || "Failed to create goal" })
      }
    } catch (error) {
      console.error("Error creating goal:", error)
      setMessage({ type: "error", text: "Something went wrong. Please try again." })
    } finally {
      setSubmitting(false)
    }
  }

<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Target className="w-5 h-5 mr-2" />
              Create New Goal
            </CardTitle>
            <CardDescription>Set a new performance goal for an employee or HOD</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="relative">
                <Label htmlFor="employee">Select Employee/HOD</Label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    id="employee"
                    placeholder="Search by name, ID, or department..."
                    value={searchTerm}
                    onChange={(e) => {
                      setSearchTerm(e.target.value)
                      setShowEmployeeResults(true)
                      if (e.target.value === "") {
                        setFormData({
                          ...formData,
                          employeeId: "",
                          employee: "",
                          employeeRole: "",
                        })
                      }
                    }}
                    className="pl-10"
                    onFocus={() => setShowEmployeeResults(true)}
                  />
                </div>
                {showEmployeeResults && searchTerm && (
                  <div className="absolute z-10 mt-1 w-full bg-white border rounded-md shadow-lg max-h-60 overflow-auto">
                    {filteredEmployees.length > 0 ? (
                      filteredEmployees.map((emp: any) => (
                        <div
                          key={emp.employeeId}
                          className="flex items-center p-2 hover:bg-gray-100 cursor-pointer"
                          onClick={() => handleEmployeeChange(emp)}
                        >
                          <Avatar className="w-8 h-8 mr-2">
                            <AvatarImage src="/placeholder.svg?height=32&width=32" />
                            <AvatarFallback>
                              {emp.name
                                ?.split(" ")
                                .map((n: string) => n[0])
                                .join("")}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-medium">{emp.name}</p>
                            <p className="text-xs text-gray-500">
                              {emp.employeeId} - {emp.department} ({emp.role.toUpperCase()})
                            </p>
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="p-2 text-center text-gray-500">No employees found</div>
                    )}
                  </div>
                )}
                {formData.employeeId && (
                  <div className="mt-2 flex items-center">
                    <Badge className="bg-blue-100 text-blue-800">
                      Selected: {formData.employee} ({formData.employeeRole.toUpperCase()})
                    </Badge>
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="h-4 w-4 p-0 ml-2"
                      onClick={() => {
                        setFormData({
                          ...formData,
                          employeeId: "",
                          employee: "",
                          employeeRole: "",
                        })
                        setSearchTerm("")
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </div>
                )}
              </div>

<div>
                <Label htmlFor="title">Goal Title</Label>
                <Input
                  id="title"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="e.g., Complete React Certification"
                  required
                />
              </div>

<div>
                <Label htmlFor="description">Description</Label>
                <Textarea
                  id="description"
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Provide detailed description of the goal..."
                  rows={3}
                  required
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="category">Category</Label>
                  <Select
                    value={formData.category}
                    onValueChange={(value) => setFormData({ ...formData, category: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category} value={category}>
                          {category}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label htmlFor="priority">Priority</Label>
                  <Select
                    value={formData.priority}
                    onValueChange={(value) => setFormData({ ...formData, priority: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select priority" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="high">High</SelectItem>
                      <SelectItem value="medium">Medium</SelectItem>
                      <SelectItem value="low">Low</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div>
                <Label htmlFor="dueDate">Due Date</Label>
                <Input
                  id="dueDate"
                  type="date"
                  value={formData.dueDate}
                  onChange={(e) => setFormData({ ...formData, dueDate: e.target.value })}
                  required
                />
              </div>

<div>
                <Label htmlFor="teamMembers">Team Members (Optional)</Label>
                <Select onValueChange={addTeamMember}>
                  <SelectTrigger>
                    <SelectValue placeholder="Add team members" />
                  </SelectTrigger>
                  <SelectContent>
                    {allUsers
                      .filter((user: any) => !selectedTeamMembers.find((m: any) => m.employeeId === user.employeeId))
                      .map((user: any) => (
                        <SelectItem key={user.employeeId} value={user.employeeId}>
                          <div className="flex items-center space-x-2">
                            <Avatar className="w-6 h-6">
                              <AvatarImage src="/placeholder.svg?height=24&width=24" />
                              <AvatarFallback>
                                {user.name
                                  ?.split(" ")
                                  .map((n: string) => n[0])
                                  .join("")}
                              </AvatarFallback>
                            </Avatar>
                            <span>
                              {user.name} - {user.department} ({user.role.toUpperCase()})
                            </span>
                          </div>
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
                {selectedTeamMembers.length > 0 && (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {selectedTeamMembers.map((member: any) => (
                      <Badge key={member.employeeId} variant="secondary" className="flex items-center gap-1">
                        {member.name}
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="h-4 w-4 p-0"
                          onClick={() => removeTeamMember(member.employeeId)}
                        >
                          <X className="h-3 w-3" />
                        </Button>
                      </Badge>
                    ))}
                  </div>
                )}
              </div>

{message.text && (
                <Alert variant={message.type === "error" ? "destructive" : "default"}>
                  {message.type === "success" ? (
                    <CheckCircle className="h-4 w-4" />
                  ) : (
                    <AlertCircle className="h-4 w-4" />
                  )}
                  <AlertDescription>{message.text}</AlertDescription>
                </Alert>
              )}

<div className="flex space-x-4">
                <Button type="button" variant="outline" onClick={() => router.push("/goals")} className="flex-1">
                  Cancel
                </Button>
                <Button type="submit" disabled={submitting} className="flex-1">
                  {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  <Save className="w-4 h-4 mr-2" />
                  Create Goal
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/goals/new/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/employee/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useSession } from "next-auth/react"
import { useEffect, useState } 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 { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Star, Target, TrendingUp, MessageSquare, LogOut, CheckCircle } from "lucide-react"
import { signOut } from "next-auth/react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"

export default function EmployeeDashboard() {
  const { data: session } = useSession()
  const router = useRouter()
  const [reviews, setReviews] = useState([])
  const [goals, setGoals] = useState([])
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("overview")

useEffect(() => {
    // Allow both employees and HODs to access this dashboard
    if (session?.user?.role === "admin") {
      router.push("/")
      return
    }

const fetchData = async () => {
      try {
        const [reviewsRes, goalsRes] = await Promise.all([
          fetch(`/api/employee/reviews?employeeId=${session?.user?.employeeId}`),
          fetch(`/api/employee/goals?employeeId=${session?.user?.employeeId}`),
        ])

const reviewsData = await reviewsRes.json()
        const goalsData = await goalsRes.json()

setReviews(reviewsData)
        setGoals(goalsData)
      } catch (error) {
        console.error("Error fetching data:", error)
      } finally {
        setLoading(false)
      }
    }

if (session?.user?.employeeId) {
      fetchData()
    }
  }, [session, router])

const getStatusBadge = (status: string) => {
    switch (status) {
      case "completed":
        return <Badge className="bg-green-100 text-green-800">Completed</Badge>
      case "pending":
        return <Badge className="bg-yellow-100 text-yellow-800">Pending</Badge>
      case "in_progress":
        return <Badge className="bg-blue-100 text-blue-800">In Progress</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

const dashboardTitle = session?.user?.role === "hod" ? "HOD Dashboard" : "Employee Dashboard"
  const activeGoals = goals.filter((g) => g.status !== "completed")
  const completedGoals = goals.filter((g) => g.status === "completed")

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-2">Welcome back, {session?.user?.name?.split(" ")[0]}!</h2>
          <p className="text-gray-600">Here's an overview of your performance reviews and goals.</p>
        </div>

{/* Stats Overview */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Reviews</CardTitle>
              <Star className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{reviews.length}</div>
              <p className="text-xs text-muted-foreground">Performance evaluations</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Goals</CardTitle>
              <Target className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{activeGoals.length}</div>
              <p className="text-xs text-muted-foreground">Goals in progress</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Goal Completion</CardTitle>
              <TrendingUp className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">
                {goals.length > 0
                  ? Math.round((goals.filter((g) => g.status === "completed").length / goals.length) * 100)
                  : 0}
                %
              </div>
              <p className="text-xs text-muted-foreground">Goals completed</p>
            </CardContent>
          </Card>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="reviews">My Reviews</TabsTrigger>
            <TabsTrigger value="goals">My Goals</TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="mt-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Recent Reviews */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Star className="w-5 h-5 mr-2" />
                    My Performance Reviews
                  </CardTitle>
                  <CardDescription>Your recent performance evaluations</CardDescription>
                </CardHeader>
                <CardContent>
                  {reviews.length > 0 ? (
                    <div className="space-y-4">
                      {reviews.slice(0, 3).map((review: any, index) => (
                        <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                          <div>
                            <p className="font-medium">{review.reviewType} Review</p>
                            <p className="text-sm text-muted-foreground">{review.period}</p>
                            <p className="text-xs text-muted-foreground">Reviewed by: {review.reviewer}</p>
                          </div>
                          <div className="text-right">
                            {review.score && (
                              <div className="flex items-center mb-2">
                                <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 mr-1" />
                                <span className="font-medium">{review.score}</span>
                              </div>
                            )}
                            {getStatusBadge(review.status)}
                            <p className="text-xs text-muted-foreground mt-1">
                              {new Date(review.dueDate).toLocaleDateString()}
                            </p>
                            {review.status === "completed" && (
                              <Link href={`/employee/review/${review._id}`} className="mt-2 block">
                                <Button size="sm" variant="outline" className="w-full">
                                  View Review
                                </Button>
                              </Link>
                            )}
                          </div>
                        </div>
                      ))}
                      <div className="text-center mt-4">
                        <Button variant="outline" size="sm" onClick={() => setActiveTab("reviews")}>
                          View All Reviews
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <Star className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                      <p className="text-gray-500">No reviews available yet</p>
                    </div>
                  )}
                </CardContent>
              </Card>

{/* My Goals */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Target className="w-5 h-5 mr-2" />
                    My Goals
                  </CardTitle>
                  <CardDescription>Your assigned goals and progress</CardDescription>
                </CardHeader>
                <CardContent>
                  {goals.length > 0 ? (
                    <div className="space-y-4">
                      {goals.slice(0, 3).map((goal: any, index) => (
                        <div key={index} className="p-4 border rounded-lg">
                          <div className="flex justify-between items-start mb-2">
                            <div className="flex-1">
                              <p className="font-medium">{goal.title}</p>
                              <p className="text-sm text-muted-foreground">{goal.description}</p>
                            </div>
                            {getStatusBadge(goal.status)}
                          </div>
                          <div className="space-y-2">
                            <div className="flex justify-between items-center">
                              <span className="text-sm">Progress</span>
                              <span className="text-sm font-medium">{goal.progress}%</span>
                            </div>
                            <Progress value={goal.progress} className="h-2" />
                            <div className="flex justify-between text-xs text-muted-foreground">
                              <span>Due: {new Date(goal.dueDate).toLocaleDateString()}</span>
                              <span>{goal.category}</span>
                            </div>
                            {goal.teamMembers && goal.teamMembers.length > 0 && (
                              <div className="mt-2">
                                <p className="text-xs text-gray-500 mb-1">Team Members:</p>
                                <div className="flex flex-wrap gap-1">
                                  {goal.teamMembers.map((member: any) => (
                                    <Badge key={member.employeeId} variant="outline" className="text-xs">
                                      {member.name}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                      <div className="text-center mt-4">
                        <Button variant="outline" size="sm" onClick={() => setActiveTab("goals")}>
                          View All Goals
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <Target className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                      <p className="text-gray-500">No goals assigned yet</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>

{/* Recent Feedback */}
            <Card className="mt-8">
              <CardHeader>
                <CardTitle className="flex items-center">
                  <MessageSquare className="w-5 h-5 mr-2" />
                  Recent Feedback
                </CardTitle>
                <CardDescription>Latest feedback from your supervisors</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="text-center py-8">
                  <MessageSquare className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                  <p className="text-gray-500">No recent feedback available</p>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="reviews" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Star className="w-5 h-5 mr-2" />
                  All My Reviews
                </CardTitle>
                <CardDescription>Complete list of your performance evaluations</CardDescription>
              </CardHeader>
              <CardContent>
                {reviews.length > 0 ? (
                  <div className="space-y-4">
                    {reviews.map((review: any, index) => (
                      <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                        <div>
                          <p className="font-medium">{review.reviewType} Review</p>
                          <p className="text-sm text-muted-foreground">{review.period}</p>
                          <p className="text-xs text-muted-foreground">Reviewed by: {review.reviewer}</p>
                          <p className="text-xs text-muted-foreground">
                            Due: {new Date(review.dueDate).toLocaleDateString()}
                          </p>
                        </div>
                        <div className="text-right">
                          {review.score && (
                            <div className="flex items-center mb-2">
                              <Star className="w-4 h-4 fill-yellow-400 text-yellow-400 mr-1" />
                              <span className="font-medium">{review.score}</span>
                            </div>
                          )}
                          {getStatusBadge(review.status)}
                          {review.status === "completed" && (
                            <Link href={`/employee/review/${review._id}`} className="mt-2 block">
                              <Button size="sm" variant="outline" className="w-full">
                                View Review
                              </Button>
                            </Link>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-8">
                    <Star className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                    <p className="text-gray-500">No reviews available yet</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="goals" className="mt-6">
            <div className="space-y-8">
              {/* Active Goals */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Target className="w-5 h-5 mr-2" />
                    Active Goals
                  </CardTitle>
                  <CardDescription>Goals currently in progress</CardDescription>
                </CardHeader>
                <CardContent>
                  {activeGoals.length > 0 ? (
                    <div className="space-y-4">
                      {activeGoals.map((goal: any, index) => (
                        <div key={index} className="p-4 border rounded-lg">
                          <div className="flex justify-between items-start mb-2">
                            <div className="flex-1">
                              <p className="font-medium">{goal.title}</p>
                              <p className="text-sm text-muted-foreground">{goal.description}</p>
                            </div>
                            {getStatusBadge(goal.status)}
                          </div>
                          <div className="space-y-2">
                            <div className="flex justify-between items-center">
                              <span className="text-sm">Progress</span>
                              <span className="text-sm font-medium">{goal.progress}%</span>
                            </div>
                            <Progress value={goal.progress} className="h-2" />
                            <div className="flex justify-between text-xs text-muted-foreground">
                              <span>Due: {new Date(goal.dueDate).toLocaleDateString()}</span>
                              <span>{goal.category}</span>
                            </div>
                            {goal.teamMembers && goal.teamMembers.length > 0 && (
                              <div className="mt-2">
                                <p className="text-xs text-gray-500 mb-1">Team Members:</p>
                                <div className="flex flex-wrap gap-1">
                                  {goal.teamMembers.map((member: any) => (
                                    <Badge key={member.employeeId} variant="outline" className="text-xs">
                                      {member.name}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <Target className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                      <p className="text-gray-500">No active goals available yet</p>
                    </div>
                  )}
                </CardContent>
              </Card>

{/* Completed Goals */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <CheckCircle className="w-5 h-5 mr-2" />
                    Completed Goals
                  </CardTitle>
                  <CardDescription>Goals that have been completed</CardDescription>
                </CardHeader>
                <CardContent>
                  {completedGoals.length > 0 ? (
                    <div className="space-y-4">
                      {completedGoals.map((goal: any, index) => (
                        <div key={index} className="p-4 border rounded-lg">
                          <div className="flex justify-between items-start mb-2">
                            <div className="flex-1">
                              <p className="font-medium">{goal.title}</p>
                              <p className="text-sm text-muted-foreground">{goal.description}</p>
                            </div>
                            {getStatusBadge(goal.status)}
                          </div>
                          <div className="space-y-2">
                            <div className="flex justify-between items-center">
                              <span className="text-sm">Progress</span>
                              <span className="text-sm font-medium">{goal.progress}%</span>
                            </div>
                            <Progress value={goal.progress} className="h-2" />
                            <div className="flex justify-between text-xs text-muted-foreground">
                              <span>Due: {new Date(goal.dueDate).toLocaleDateString()}</span>
                              <span>{goal.category}</span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8">
                      <CheckCircle className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                      <p className="text-gray-500">No completed goals available yet</p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}</article></body></html>