[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { ArrowRight, Briefcase, CheckCircle, Search } from "lucide-react" export default function Home() { return (

School Job Board

Find Your Perfect Job Opportunity

Browse through job postings curated by your school's guidance department.

Find Jobs

Browse through a curated list of job opportunities approved by the guidance department.

Submit Jobs

Employers can easily submit job postings for review by the guidance department.

Apply with Ease

Students can quickly apply to jobs with a streamlined application process.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { Toaster } from "@/components/ui/toaster" import { AuthProvider } from "@/components/auth-provider" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "School Job Board", description: "Find and apply for jobs through your school's guidance department", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/auth-provider.tsx" isMerged="true" "use client" import type React from "react" import { SessionProvider } from "next-auth/react" export function AuthProvider({ children }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const reducer = (state: State, action: Action): State => { switch (action.type) { case actionTypes.ADD_TOAST: return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case actionTypes.UPDATE_TOAST: return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case actionTypes.DISMISS_TOAST: { const { toastId } = action if (toastId) { toastTimeouts.set( toastId, setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: actionTypes.REMOVE_TOAST, toastId, }) }, TOAST_REMOVE_DELAY), ) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case actionTypes.REMOVE_TOAST: if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: actionTypes.UPDATE_TOAST, toast: { ...props, id }, }) const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id }) dispatch({ type: actionTypes.ADD_TOAST, toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }), } } export { useToast, toast } [V0_FILE]plaintext:file="prisma/schema.prisma" isEdit="true" isMerged="true" generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = "file:./dev.db" } model User { id String @id @default(cuid()) name String? email String @unique emailVerified DateTime? password String? image String? role Role @default(STUDENT) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] applications Application[] jobPostings JobPosting[] savedJobs SavedJob[] activities Activity[] skills Skill[] profile Profile? } model Account { id String @id @default(cuid()) userId String type String provider String providerAccountId String refresh_token String? access_token String? expires_at Int? token_type String? scope String? id_token String? session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(cuid()) sessionToken String @unique userId String expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model VerificationToken { identifier String token String @unique expires DateTime @@unique([identifier, token]) } model JobPosting { id String @id @default(cuid()) title String company String location String description String requirements String salary String? contactEmail String contactPhone String? deadline DateTime? status PostingStatus @default(PENDING) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt employerId String employer User @relation(fields: [employerId], references: [id]) applications Application[] savedJobs SavedJob[] categories Category[] views JobView[] } model Application { id String @id @default(cuid()) coverLetter String? resumeUrl String? status ApplicationStatus @default(PENDING) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt studentId String student User @relation(fields: [studentId], references: [id]) jobPostingId String jobPosting JobPosting @relation(fields: [jobPostingId], references: [id]) } model SavedJob { id String @id @default(cuid()) createdAt DateTime @default(now()) userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) jobPostingId String jobPosting JobPosting @relation(fields: [jobPostingId], references: [id], onDelete: Cascade) } model Category { id String @id @default(cuid()) name String @unique jobPostings JobPosting[] } model Skill { id String @id @default(cuid()) name String @unique userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model Profile { id String @id @default(cuid()) bio String? education String? experience String? userId String @unique user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model Activity { id String @id @default(cuid()) type String message String data String? // JSON data createdAt DateTime @default(now()) userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model JobView { id String @id @default(cuid()) createdAt DateTime @default(now()) userId String? jobPostingId String jobPosting JobPosting @relation(fields: [jobPostingId], references: [id], onDelete: Cascade) } model Notification { id String @id @default(cuid()) type String message String read Boolean @default(false) createdAt DateTime @default(now()) userId String } enum Role { ADMIN EMPLOYER STUDENT } enum PostingStatus { PENDING APPROVED REJECTED } enum ApplicationStatus { PENDING REVIEWED ACCEPTED REJECTED } [V0_FILE]typescriptreact:file="app/employers/submit/page.tsx" isMerged="true" import { EmployerJobForm } from "@/components/employer-job-form" export default function SubmitJobPage() { return (

Submit a Job Posting

Post a New Job Opportunity

Fill out the form below to submit a job posting for review by the guidance department.

) } [V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true" "use client" import * as React from "react" import type * as LabelPrimitive from "@radix-ui/react-label" import { Slot } from "@radix-ui/react-slot" import { Controller, type ControllerProps, type FieldPath, type FieldValues, FormProvider, useFormContext, } from "react-hook-form" import { cn } from "@/lib/utils" import { Label } from "@/components/ui/label" const Form = FormProvider type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName } const FormFieldContext = React.createContext({} as FormFieldContextValue) const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( ) } const useFormField = () => { const fieldContext = React.useContext(FormFieldContext) const itemContext = React.useContext(FormItemContext) const { getFieldState, formState } = useFormContext() const fieldState = getFieldState(fieldContext.name, formState) if (!fieldContext) { throw new Error("useFormField should be used within ") } const { id } = itemContext return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, } } type FormItemContextValue = { id: string } const FormItemContext = React.createContext({} as FormItemContextValue) const FormItem = React.forwardRef>( ({ className, ...props }, ref) => { const id = React.useId() return (

) }, ) FormItem.displayName = "FormItem" const FormLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { const { error, formItemId } = useFormField() return }) FormLabel.displayName = "FormLabel" const FormControl = React.forwardRef, React.ComponentPropsWithoutRef>( ({ ...props }, ref) => { const { error, formItemId, formDescriptionId, formMessageId } = useFormField() return ( ) }, ) FormControl.displayName = "FormControl" const FormDescription = React.forwardRef>( ({ className, ...props }, ref) => { const { formDescriptionId } = useFormField() return

}, ) FormDescription.displayName = "FormDescription" const FormMessage = React.forwardRef>( ({ className, children, ...props }, ref) => { const { error, formMessageId } = useFormField() const body = error ? String(error?.message) : children if (!body) { return null } return (

{body}

) }, ) FormMessage.displayName = "FormMessage" export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="lib/actions.ts" isEdit="true" isMerged="true"
"use server"

import { revalidatePath } from "next/cache"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"
import { prisma } from "@/lib/prisma"
import { PostingStatus } from "@prisma/client"

export async function submitJobPosting(data: any) {
  const session = await getServerSession(authOptions)

// For demo purposes, we'll create the job posting without requiring authentication
  // In a real application, you would check if the user is authenticated and has the EMPLOYER role

const jobPosting = await prisma.jobPosting.create({
    data: {
      title: data.title,
      company: data.company,
      location: data.location,
      description: data.description,
      requirements: data.requirements,
      salary: data.salary,
      contactEmail: data.contactEmail,
      contactPhone: data.contactPhone,
      deadline: data.deadline,
      status: PostingStatus.PENDING,
      // In a real app, you would use the authenticated user's ID
      employerId: session?.user?.id || "demo-employer-id",
    },
  })

// Create activity
  if (session?.user?.id) {
    await prisma.activity.create({
      data: {
        type: "JOB_POSTED",
        message: `You posted a job: ${data.title} at ${data.company}`,
        data: JSON.stringify({
          jobId: jobPosting.id,
          jobTitle: data.title,
          company: data.company,
        }),
        userId: session.user.id,
      },
    })
  }

return jobPosting
}

export async function approveJobPosting(id: string) {
  const session = await getServerSession(authOptions)

// In a real app, check if user is admin

const jobPosting = await prisma.jobPosting.update({
    where: { id },
    data: { status: PostingStatus.APPROVED },
    include: { employer: true },
  })

// Create notification for employer
  await prisma.notification.create({
    data: {
      type: "JOB_APPROVED",
      message: `Your job posting "${jobPosting.title}" has been approved.`,
      userId: jobPosting.employerId,
    },
  })

revalidatePath("/admin")
  revalidatePath("/jobs")

return jobPosting
}

export async function rejectJobPosting(id: string) {
  const session = await getServerSession(authOptions)

// In a real app, check if user is admin

const jobPosting = await prisma.jobPosting.update({
    where: { id },
    data: { status: PostingStatus.REJECTED },
    include: { employer: true },
  })

// Create notification for employer
  await prisma.notification.create({
    data: {
      type: "JOB_REJECTED",
      message: `Your job posting "${jobPosting.title}" has been rejected.`,
      userId: jobPosting.employerId,
    },
  })

revalidatePath("/admin")

return jobPosting
}

export async function deleteJobPosting(id: string) {
  const session = await getServerSession(authOptions)

// In a real app, check if user is admin

await prisma.jobPosting.delete({
    where: { id },
  })

revalidatePath("/admin")
  revalidatePath("/jobs")
}

export async function submitApplication(data: any) {
  const session = await getServerSession(authOptions)

// For demo purposes, we'll create the application without requiring authentication
  // In a real application, you would check if the user is authenticated and has the STUDENT role

const application = await prisma.application.create({
    data: {
      coverLetter: data.coverLetter,
      resumeUrl: data.resumeUrl,
      // In a real app, you would use the authenticated user's ID
      studentId: session?.user?.id || "demo-student-id",
      jobPostingId: data.jobPostingId,
    },
    include: {
      jobPosting: true,
    },
  })

// Create activity
  if (session?.user?.id) {
    await prisma.activity.create({
      data: {
        type: "APPLICATION_SUBMITTED",
        message: `You applied for ${application.jobPosting.title} at ${application.jobPosting.company}`,
        data: JSON.stringify({
          jobId: application.jobPostingId,
          jobTitle: application.jobPosting.title,
          company: application.jobPosting.company,
        }),
        userId: session.user.id,
      },
    })
  }

// Create notification for employer
  await prisma.notification.create({
    data: {
      type: "NEW_APPLICATION",
      message: `A new application has been submitted for "${application.jobPosting.title}".`,
      userId: application.jobPosting.employerId,
    },
  })

return application
}

export async function saveJob(jobId: string) {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    throw new Error("You must be logged in to save a job")
  }

const job = await prisma.jobPosting.findUnique({
    where: { id: jobId },
  })

if (!job) {
    throw new Error("Job not found")
  }

const savedJob = await prisma.savedJob.create({
    data: {
      userId: session.user.id,
      jobPostingId: jobId,
    },
  })

// Create activity
  await prisma.activity.create({
    data: {
      type: "JOB_SAVED",
      message: `You saved ${job.title} at ${job.company}`,
      data: JSON.stringify({
        jobId: job.id,
        jobTitle: job.title,
        company: job.company,
      }),
      userId: session.user.id,
    },
  })

revalidatePath("/dashboard")
  revalidatePath(`/jobs/${jobId}`)

return savedJob
}

export async function removeSavedJob(savedJobId: string) {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    throw new Error("You must be logged in to remove a saved job")
  }

const savedJob = await prisma.savedJob.findUnique({
    where: { id: savedJobId },
    include: { jobPosting: true },
  })

if (!savedJob || savedJob.userId !== session.user.id) {
    throw new Error("Saved job not found or unauthorized")
  }

await prisma.savedJob.delete({
    where: { id: savedJobId },
  })

// Create activity
  await prisma.activity.create({
    data: {
      type: "JOB_UNSAVED",
      message: `You removed ${savedJob.jobPosting.title} from your saved jobs`,
      data: JSON.stringify({
        jobId: savedJob.jobPosting.id,
        jobTitle: savedJob.jobPosting.title,
        company: savedJob.jobPosting.company,
      }),
      userId: session.user.id,
    },
  })

revalidatePath("/dashboard")

return { success: true }
}

export async function getRecommendedJobs(userId: string) {
  // Get user's skills and previous applications
  const user = await prisma.user.findUnique({
    where: { id: userId },
    include: {
      skills: true,
      applications: {
        include: {
          jobPosting: true,
        },
      },
      savedJobs: true,
    },
  })

if (!user) {
    throw new Error("User not found")
  }

// Get approved jobs
  const jobs = await prisma.jobPosting.findMany({
    where: {
      status: PostingStatus.APPROVED,
      // Exclude jobs the user has already applied to
      id: {
        notIn: user.applications.map((app) => app.jobPostingId),
      },
    },
    take: 6,
    orderBy: {
      createdAt: "desc",
    },
  })

// Get IDs of jobs the user has saved
  const savedJobIds = user.savedJobs.map((savedJob) => savedJob.jobPostingId)

return {
    jobs,
    savedJobIds,
  }
}

export async function getUserActivity(userId: string) {
  const activities = await prisma.activity.findMany({
    where: {
      userId,
    },
    orderBy: {
      createdAt: "desc",
    },
    take: 10,
  })

// Parse JSON data
  return activities.map((activity) => ({
    ...activity,
    data: activity.data ? JSON.parse(activity.data) : null,
  }))
}

export async function updateUserProfile(data: any) {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    throw new Error("You must be logged in to update your profile")
  }

// Update user
  const user = await prisma.user.update({
    where: { id: session.user.id },
    data: {
      name: data.name,
    },
  })

// Update or create profile
  const profile = await prisma.profile.upsert({
    where: { userId: session.user.id },
    update: {
      bio: data.bio,
      education: data.education,
      experience: data.experience,
    },
    create: {
      bio: data.bio,
      education: data.education,
      experience: data.experience,
      userId: session.user.id,
    },
  })

// Update skills
  if (data.skills && data.skills.length > 0) {
    // Delete existing skills
    await prisma.skill.deleteMany({
      where: { userId: session.user.id },
    })

// Create new skills
    for (const skill of data.skills) {
      await prisma.skill.create({
        data: {
          name: skill,
          userId: session.user.id,
        },
      })
    }
  }

revalidatePath("/dashboard/profile")

return { user, profile }
}

export async function recordJobView(jobId: string) {
  const session = await getServerSession(authOptions)

const jobView = await prisma.jobView.create({
    data: {
      jobPostingId: jobId,
      userId: session?.user?.id,
    },
  })

if (session?.user?.id) {
    const job = await prisma.jobPosting.findUnique({
      where: { id: jobId },
    })

if (job) {
      await prisma.activity.create({
        data: {
          type: "JOB_VIEWED",
          message: `You viewed ${job.title} at ${job.company}`,
          data: JSON.stringify({
            jobId: job.id,
            jobTitle: job.title,
            company: job.company,
          }),
          userId: session.user.id,
        },
      })
    }
  }

return jobView
}

export async function getNotifications() {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    return []
  }

const notifications = await prisma.notification.findMany({
    where: {
      userId: session.user.id,
    },
    orderBy: {
      createdAt: "desc",
    },
    take: 10,
  })

return notifications
}

export async function markNotificationAsRead(id: string) {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    throw new Error("You must be logged in to mark a notification as read")
  }

const notification = await prisma.notification.update({
    where: { id },
    data: { read: true },
  })

revalidatePath("/notifications")

return notification
}

export async function markAllNotificationsAsRead() {
  const session = await getServerSession(authOptions)

if (!session?.user?.id) {
    throw new Error("You must be logged in to mark notifications as read")
  }

await prisma.notification.updateMany({
    where: {
      userId: session.user.id,
      read: false,
    },
    data: { read: true },
  })

revalidatePath("/notifications")

return { success: true }
}

[V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true"
import type { NextAuthOptions } from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { prisma } from "@/lib/prisma"
import { compare } from "bcrypt"

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  session: {
    strategy: "jwt",
  },
  pages: {
    signIn: "/login",
  },
  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
        }

const user = await prisma.user.findUnique({
          where: {
            email: credentials.email,
          },
        })

if (!user || !user.password) {
          return null
        }

const isPasswordValid = await compare(credentials.password, user.password)

if (!isPasswordValid) {
          return null
        }

return {
          id: user.id,
          email: user.email,
          name: user.name,
          role: user.role,
        }
      },
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      if (token) {
        session.user.id = token.id as string
        session.user.name = token.name as string
        session.user.email = token.email as string
        session.user.role = token.role as string
      }
      return session
    },
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
        token.role = user.role
      }
      return token
    },
  },
}

[V0_FILE]typescriptreact:file="lib/prisma.ts" isMerged="true"
import { PrismaClient } from "@prisma/client"

const globalForPrisma = global as unknown as { prisma: PrismaClient }

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient({
    log: ["query"],
  })

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

[V0_FILE]typescriptreact:file="app/jobs/page.tsx" isMerged="true"
import Link from "next/link"
import { prisma } from "@/lib/prisma"
import { JobCard } from "@/components/job-card"
import { JobFilters } from "@/components/job-filters"
import { PostingStatus } from "@prisma/client"

export default async function JobsPage({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  const search = typeof searchParams.search === "string" ? searchParams.search : ""

const jobs = await prisma.jobPosting.findMany({
    where: {
      status: PostingStatus.APPROVED,
      OR: [
        { title: { contains: search, mode: "insensitive" } },
        { company: { contains: search, mode: "insensitive" } },
        { location: { contains: search, mode: "insensitive" } },
        { description: { contains: search, mode: "insensitive" } },
      ],
    },
    orderBy: {
      createdAt: "desc",
    },
  })

return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between py-4">
          <h1 className="text-xl font-bold">Browse Job Opportunities</h1>
        </div>
      </header>
      <main className="flex-1 container py-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div className="md:col-span-1">
            <JobFilters />
          </div>
          <div className="md:col-span-3">
            <div className="mb-6">
              <h2 className="text-2xl font-bold mb-2">Available Jobs</h2>
              <p className="text-muted-foreground">
                Browse through job opportunities approved by the guidance department.
              </p>
            </div>

{jobs.length === 0 ? (
              <div className="text-center py-12 border rounded-lg">
                <h3 className="text-lg font-medium mb-2">No jobs found</h3>
                <p className="text-muted-foreground mb-4">No job postings match your search criteria.</p>
                <Link href="/jobs" className="text-primary hover:underline">
                  Clear filters
                </Link>
              </div>
            ) : (
              <div className="grid gap-6">
                {jobs.map((job) => (
                  <JobCard key={job.id} job={job} />
                ))}
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/job-card.tsx" isMerged="true"
import Link from "next/link"
import { formatDistanceToNow } from "date-fns"
import { MapPin, Calendar, DollarSign } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function JobCard({ job }: { job: any }) {
  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-xl">{job.title}</CardTitle>
            <div className="text-lg font-medium mt-1">{job.company}</div>
          </div>
          <div className="text-sm text-muted-foreground">
            Posted {formatDistanceToNow(new Date(job.createdAt), { addSuffix: true })}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-wrap gap-3">
          <div className="flex items-center text-sm text-muted-foreground">
            <MapPin className="mr-1 h-4 w-4" />
            {job.location}
          </div>
          {job.salary && (
            <div className="flex items-center text-sm text-muted-foreground">
              <DollarSign className="mr-1 h-4 w-4" />
              {job.salary}
            </div>
          )}
          {job.deadline && (
            <div className="flex items-center text-sm text-muted-foreground">
              <Calendar className="mr-1 h-4 w-4" />
              Apply by {new Date(job.deadline).toLocaleDateString()}
            </div>
          )}
        </div>

<div>
          <p className="line-clamp-3">{job.description}</p>
        </div>
      </CardContent>
      <CardFooter>
        <Link href={`/jobs/${job.id}`} className="w-full">
          <Button className="w-full">View Details</Button>
        </Link>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/job-filters.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Search } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function JobFilters() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "")

const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    const params = new URLSearchParams(searchParams)

if (searchTerm) {
      params.set("search", searchTerm)
    } else {
      params.delete("search")
    }

router.push(`/jobs?${params.toString()}`)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Filter Jobs</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSearch} className="space-y-4">
          <div className="space-y-2">
            <div className="relative">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="Search jobs..."
                className="pl-8"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <Button type="submit" className="w-full">
            Apply Filters
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/jobs/[id]/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { notFound } from "next/navigation"
import { getServerSession } from "next-auth"
import { formatDistanceToNow } from "date-fns"
import { MapPin, Calendar, DollarSign, Mail, Phone } from "lucide-react"
import { prisma } from "@/lib/prisma"
import { authOptions } from "@/lib/auth"
import { PostingStatus } from "@prisma/client"
import { ApplicationForm } from "@/components/application-form"
import { SaveJobButton } from "@/components/jobs/save-job-button"
import { recordJobView } from "@/lib/actions"

export default async function JobDetailsPage({ params }: { params: { id: string } }) {
  const session = await getServerSession(authOptions)

const job = await prisma.jobPosting.findUnique({
    where: {
      id: params.id,
      status: PostingStatus.APPROVED,
    },
  })

if (!job) {
    notFound()
  }

// Record job view
  await recordJobView(job.id)

// Check if job is saved by the user
  let isSaved = false
  if (session?.user?.id) {
    const savedJob = await prisma.savedJob.findFirst({
      where: {
        userId: session.user.id,
        jobPostingId: job.id,
      },
    })
    isSaved = !!savedJob
  }

return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between py-4">
          <h1 className="text-xl font-bold">Job Details</h1>
        </div>
      </header>
      <main className="flex-1 container py-8">
        <div className="max-w-4xl mx-auto">
          <div className="mb-6">
            <Link href="/jobs" className="text-primary hover:underline mb-4 inline-block">
              ← Back to Jobs
            </Link>
            <div className="flex justify-between items-start">
              <div>
                <h1 className="text-3xl font-bold">{job.title}</h1>
                <div className="text-xl mt-1">{job.company}</div>
              </div>
              <div className="flex items-center gap-2">
                <SaveJobButton jobId={job.id} isSaved={isSaved} />
              </div>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="md:col-span-2">
              <h2 className="text-2xl font-bold mb-4">Job Description</h2>
              <div dangerouslySetInnerHTML={{ __html: job.description }} className="prose prose-lg max-w-none" />
            </div>

<div>
              <div className="bg-gray-100 p-4 rounded">
                <h3 className="text-lg font-bold mb-2">Job Details</h3>
                <div className="flex items-center gap-2 mb-2">
                  <MapPin className="h-5 w-5" />
                  {job.location}
                </div>
                <div className="flex items-center gap-2 mb-2">
                  <Calendar className="h-5 w-5" />
                  Posted {formatDistanceToNow(new Date(job.createdAt), { addSuffix: true })}
                </div>
                <div className="flex items-center gap-2 mb-2">
                  <DollarSign className="h-5 w-5" />
                  {job.salary}
                </div>
                <div className="flex items-center gap-2 mb-2">
                  <Mail className="h-5 w-5" />
                  <a href={`mailto:${job.contactEmail}`} className="hover:underline">
                    {job.contactEmail}
                  </a>
                </div>
                {job.contactPhone ? (
                  <div className="flex items-center gap-2 mb-2">
                    <Phone className="h-5 w-5" />
                    {job.contactPhone}
                  </div>
                ) : null}
              </div>
              {session?.user ? (
                <div className="mt-4">
                  <ApplicationForm jobId={job.id} />
                </div>
              ) : (
                <p className="mt-4 text-center">
                  <Link href="/auth/signin" className="text-primary hover:underline">
                    Sign in to apply
                  </Link>
                </p>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/application-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { submitApplication } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"

const formSchema = z.object({
  coverLetter: z.string().min(50, {
    message: "Cover letter must be at least 50 characters.",
  }),
  resumeUrl: z.string().url({
    message: "Please enter a valid URL to your resume.",
  }),
})

export function ApplicationForm({ jobId }: { jobId: string }) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      coverLetter: "",
      resumeUrl: "",
    },
  })

async function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    try {
      await submitApplication({
        ...values,
        jobPostingId: jobId,
      })
      toast({
        title: "Application submitted",
        description: "Your application has been submitted successfully.",
      })
      form.reset()
      router.push("/jobs/application-success")
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error submitting your application. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="coverLetter"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Cover Letter</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Explain why you're a good fit for this position..."
                  className="min-h-[150px]"
                  {...field}
                />
              </FormControl>
              <FormDescription>Briefly describe your qualifications and interest in this position.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="resumeUrl"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Resume URL</FormLabel>
              <FormControl>
                <Input placeholder="https://drive.google.com/your-resume" {...field} />
              </FormControl>
              <FormDescription>Link to your resume (Google Drive, Dropbox, etc.)</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? "Submitting..." : "Submit Application"}
        </Button>
      </form>
    </Form>
  )
}

[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { prisma } from "@/lib/prisma"
import { AdminJobCard } from "@/components/admin-job-card"

export default async function AdminPage() {
  const pendingJobs = await prisma.jobPosting.findMany({
    where: {
      status: "PENDING",
    },
    orderBy: {
      createdAt: "desc",
    },
  })

const approvedJobs = await prisma.jobPosting.findMany({
    where: {
      status: "APPROVED",
    },
    orderBy: {
      createdAt: "desc",
    },
  })

const rejectedJobs = await prisma.jobPosting.findMany({
    where: {
      status: "REJECTED",
    },
    orderBy: {
      createdAt: "desc",
    },
  })

return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between py-4">
          <h1 className="text-xl font-bold">Admin Dashboard</h1>
        </div>
      </header>
      <main className="flex-1 container py-8">
        <div className="max-w-6xl mx-auto">
          <div className="mb-8">
            <h2 className="text-2xl font-bold mb-2">Job Posting Management</h2>
            <p className="text-muted-foreground">Review, approve, or reject job postings submitted by employers.</p>
          </div>

<div className="space-y-10">
            <div>
              <h3 className="text-xl font-bold mb-4">Pending Approval ({pendingJobs.length})</h3>
              {pendingJobs.length === 0 ? (
                <div className="text-center py-8 border rounded-lg">
                  <p className="text-muted-foreground">No pending job postings to review.</p>
                </div>
              ) : (
                <div className="grid gap-6">
                  {pendingJobs.map((job) => (
                    <AdminJobCard key={job.id} job={job} />
                  ))}
                </div>
              )}
            </div>

<div>
              <h3 className="text-xl font-bold mb-4">Approved Jobs ({approvedJobs.length})</h3>
              {approvedJobs.length === 0 ? (
                <div className="text-center py-8 border rounded-lg">
                  <p className="text-muted-foreground">No approved job postings.</p>
                </div>
              ) : (
                <div className="grid gap-6">
                  {approvedJobs.map((job) => (
                    <AdminJobCard key={job.id} job={job} />
                  ))}
                </div>
              )}
            </div>

<div>
              <h3 className="text-xl font-bold mb-4">Rejected Jobs ({rejectedJobs.length})</h3>
              {rejectedJobs.length === 0 ? (
                <div className="text-center py-8 border rounded-lg">
                  <p className="text-muted-foreground">No rejected job postings.</p>
                </div>
              ) : (
                <div className="grid gap-6">
                  {rejectedJobs.map((job) => (
                    <AdminJobCard key={job.id} job={job} />
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/admin-job-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { formatDistanceToNow } from "date-fns"
import { MapPin, Calendar, DollarSign, CheckCircle, XCircle, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { approveJobPosting, rejectJobPosting, deleteJobPosting } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"

export function AdminJobCard({ job }: { job: any }) {
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

const handleApprove = async () => {
    setIsLoading(true)
    try {
      await approveJobPosting(job.id)
      toast({
        title: "Job approved",
        description: "The job posting has been approved and is now visible to students.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error approving the job posting.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleReject = async () => {
    setIsLoading(true)
    try {
      await rejectJobPosting(job.id)
      toast({
        title: "Job rejected",
        description: "The job posting has been rejected.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error rejecting the job posting.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleDelete = async () => {
    if (!confirm("Are you sure you want to delete this job posting? This action cannot be undone.")) {
      return
    }

setIsLoading(true)
    try {
      await deleteJobPosting(job.id)
      toast({
        title: "Job deleted",
        description: "The job posting has been permanently deleted.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error deleting the job posting.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-xl">{job.title}</CardTitle>
            <div className="text-lg font-medium mt-1">{job.company}</div>
          </div>
          <div className="text-sm text-muted-foreground">
            Posted {formatDistanceToNow(new Date(job.createdAt), { addSuffix: true })}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-wrap gap-3">
          <div className="flex items-center text-sm text-muted-foreground">
            <MapPin className="mr-1 h-4 w-4" />
            {job.location}
          </div>
          {job.salary && (
            <div className="flex items-center text-sm text-muted-foreground">
              <DollarSign className="mr-1 h-4 w-4" />
              {job.salary}
            </div>
          )}
          {job.deadline && (
            <div className="flex items-center text-sm text-muted-foreground">
              <Calendar className="mr-1 h-4 w-4" />
              Apply by {new Date(job.deadline).toLocaleDateString()}
            </div>
          )}
        </div>

<div>
          <h3 className="font-medium mb-1">Description</h3>
          <p className="line-clamp-3">{job.description}</p>
        </div>

<div>
          <h3 className="font-medium mb-1">Requirements</h3>
          <p className="line-clamp-3">{job.requirements}</p>
        </div>

<div>
          <h3 className="font-medium mb-1">Contact</h3>
          <p>{job.contactEmail}</p>
          {job.contactPhone && <p>{job.contactPhone}</p>}
        </div>
      </CardContent>
      <CardFooter>
        <div className="flex flex-wrap gap-2 w-full">
          {job.status === "PENDING" && (
            <>
              <Button onClick={handleApprove} className="flex-1" disabled={isLoading}>
                <CheckCircle className="mr-2 h-4 w-4" />
                Approve
              </Button>
              <Button onClick={handleReject} variant="outline" className="flex-1" disabled={isLoading}>
                <XCircle className="mr-2 h-4 w-4" />
                Reject
              </Button>
            </>
          )}
          <Button onClick={handleDelete} variant="destructive" className="flex-1" disabled={isLoading}>
            <Trash2 className="mr-2 h-4 w-4" />
            Delete
          </Button>
        </div>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

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

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

[V0_FILE]typescriptreact:file="app/jobs/application-success/page.tsx" isMerged="true"
import Link from "next/link"
import { CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function ApplicationSuccessPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <main className="flex-1 container py-12">
        <div className="max-w-md mx-auto text-center">
          <div className="mb-6 flex justify-center">
            <CheckCircle className="h-16 w-16 text-green-500" />
          </div>
          <h1 className="text-3xl font-bold mb-4">Application Submitted!</h1>
          <p className="text-muted-foreground mb-8">
            Your application has been successfully submitted. The employer will review your application and contact you
            if they're interested.
          </p>
          <div className="space-y-4">
            <Link href="/jobs">
              <Button className="w-full">Browse More Jobs</Button>
            </Link>
            <Link href="/">
              <Button variant="outline" className="w-full">
                Return to Home
              </Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/employers/thank-you/page.tsx" isMerged="true"
import Link from "next/link"
import { CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function ThankYouPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <main className="flex-1 container py-12">
        <div className="max-w-md mx-auto text-center">
          <div className="mb-6 flex justify-center">
            <CheckCircle className="h-16 w-16 text-green-500" />
          </div>
          <h1 className="text-3xl font-bold mb-4">Job Posting Submitted!</h1>
          <p className="text-muted-foreground mb-8">
            Thank you for submitting your job posting. The guidance department will review your submission and approve
            it if it meets the requirements. You'll be notified once your posting is approved.
          </p>
          <div className="space-y-4">
            <Link href="/employers/submit">
              <Button className="w-full">Submit Another Job</Button>
            </Link>
            <Link href="/">
              <Button variant="outline" className="w-full">
                Return to Home
              </Button>
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

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

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

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

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

export { Label }

[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

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

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

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }

[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

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

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

export type CalendarProps = React.ComponentProps<typeof DayPicker>

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

export { Calendar }

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"
import { prisma } from "@/lib/prisma"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { DashboardTabs } from "@/components/dashboard/dashboard-tabs"
import { JobRecommendations } from "@/components/dashboard/job-recommendations"
import { ApplicationsTable } from "@/components/dashboard/applications-table"
import { SavedJobsList } from "@/components/dashboard/saved-jobs-list"
import { StatsCards } from "@/components/dashboard/stats-cards"
import { RecentActivity } from "@/components/dashboard/recent-activity"

export default async function DashboardPage() {
  const session = await getServerSession(authOptions)

if (!session) {
    redirect("/login")
  }

// Fetch user's applications
  const applications = await prisma.application.findMany({
    where: {
      studentId: session.user.id,
    },
    include: {
      jobPosting: true,
    },
    orderBy: {
      createdAt: "desc",
    },
  })

// Fetch user's saved jobs
  const savedJobs = await prisma.savedJob.findMany({
    where: {
      userId: session.user.id,
    },
    include: {
      jobPosting: true,
    },
    orderBy: {
      createdAt: "desc",
    },
  })

// Get application stats
  const stats = {
    totalApplications: applications.length,
    pendingApplications: applications.filter((app) => app.status === "PENDING").length,
    reviewedApplications: applications.filter((app) => app.status === "REVIEWED").length,
    acceptedApplications: applications.filter((app) => app.status === "ACCEPTED").length,
  }

return (
    <div className="flex flex-col min-h-screen">
      <DashboardHeader />
      <main className="flex-1 container py-8">
        <div className="grid gap-8">
          <StatsCards stats={stats} />

<DashboardTabs
            applicationsTab={<ApplicationsTable applications={applications} />}
            savedJobsTab={<SavedJobsList savedJobs={savedJobs} />}
            recommendationsTab={<JobRecommendations userId={session.user.id} />}
            activityTab={<RecentActivity userId={session.user.id} />}
          />
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { signOut, useSession } from "next-auth/react"
import { Bell, Briefcase, LogOut, Menu, Moon, Settings, Sun, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useTheme } from "@/components/theme-provider"

export function DashboardHeader() {
  const { data: session } = useSession()
  const pathname = usePathname()
  const { theme, setTheme } = useTheme()

const navigation = [
    { name: "Dashboard", href: "/dashboard" },
    { name: "Browse Jobs", href: "/jobs" },
    { name: "Applications", href: "/dashboard/applications" },
    { name: "Saved Jobs", href: "/dashboard/saved" },
    { name: "Profile", href: "/dashboard/profile" },
  ]

return (
    <header className="border-b">
      <div className="container flex h-16 items-center justify-between py-4">
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2">
            <Briefcase className="h-6 w-6" />
            <span className="text-xl font-bold">School Job Board</span>
          </Link>
        </div>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          {navigation.map((item) => (
            <Link
              key={item.name}
              href={item.href}
              className={`text-sm font-medium transition-colors hover:text-primary ${
                pathname === item.href ? "text-primary" : "text-muted-foreground"
              }`}
            >
              {item.name}
            </Link>
          ))}
        </nav>

<div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" className="relative" asChild>
            <Link href="/notifications">
              <Bell className="h-5 w-5" />
              <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-primary"></span>
              <span className="sr-only">Notifications</span>
            </Link>
          </Button>

<Button
            variant="ghost"
            size="icon"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            aria-label="Toggle theme"
          >
            {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
          </Button>

{session?.user ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                  <Avatar className="h-8 w-8">
                    <AvatarImage src={session.user.image || ""} alt={session.user.name || ""} />
                    <AvatarFallback>{session.user.name?.charAt(0) || "U"}</AvatarFallback>
                  </Avatar>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-56" align="end" forceMount>
                <DropdownMenuLabel className="font-normal">
                  <div className="flex flex-col space-y-1">
                    <p className="text-sm font-medium leading-none">{session.user.name}</p>
                    <p className="text-xs leading-none text-muted-foreground">{session.user.email}</p>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                  <Link href="/dashboard/profile">
                    <User className="mr-2 h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/dashboard/settings">
                    <Settings className="mr-2 h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onClick={() => signOut({ callbackUrl: "/" })}
                  className="text-destructive focus:text-destructive"
                >
                  <LogOut className="mr-2 h-4 w-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <Button asChild>
              <Link href="/login">Sign in</Link>
            </Button>
          )}

{/* Mobile Navigation */}
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="right">
              <nav className="flex flex-col gap-4 mt-8">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    href={item.href}
                    className={`text-sm font-medium transition-colors hover:text-primary ${
                      pathname === item.href ? "text-primary" : "text-muted-foreground"
                    }`}
                  >
                    {item.name}
                  </Link>
                ))}
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/dashboard-tabs.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface DashboardTabsProps {
  applicationsTab: React.ReactNode
  savedJobsTab: React.ReactNode
  recommendationsTab: React.ReactNode
  activityTab: React.ReactNode
}

export function DashboardTabs({ applicationsTab, savedJobsTab, recommendationsTab, activityTab }: DashboardTabsProps) {
  const [activeTab, setActiveTab] = useState("applications")

return (
    <Tabs defaultValue="applications" value={activeTab} onValueChange={setActiveTab} className="w-full">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="applications">Applications</TabsTrigger>
        <TabsTrigger value="saved">Saved Jobs</TabsTrigger>
        <TabsTrigger value="recommendations">Recommendations</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="applications" className="mt-6">
        {applicationsTab}
      </TabsContent>
      <TabsContent value="saved" className="mt-6">
        {savedJobsTab}
      </TabsContent>
      <TabsContent value="recommendations" className="mt-6">
        {recommendationsTab}
      </TabsContent>
      <TabsContent value="activity" className="mt-6">
        {activityTab}
      </TabsContent>
    </Tabs>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/applications-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { formatDistanceToNow } from "date-fns"
import { Eye, FileText, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"

interface ApplicationsTableProps {
  applications: any[]
}

export function ApplicationsTable({ applications }: ApplicationsTableProps) {
  const [sortColumn, setSortColumn] = useState("createdAt")
  const [sortDirection, setSortDirection] = useState("desc")

const sortedApplications = [...applications].sort((a, b) => {
    const aValue = a[sortColumn]
    const bValue = b[sortColumn]

if (sortDirection === "asc") {
      return aValue > bValue ? 1 : -1
    } else {
      return aValue < bValue ? 1 : -1
    }
  })

const handleSort = (column: string) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortColumn(column)
      setSortDirection("asc")
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "PENDING":
        return <Badge variant="outline">Pending</Badge>
      case "REVIEWED":
        return <Badge variant="secondary">Reviewed</Badge>
      case "ACCEPTED":
        return <Badge variant="success">Accepted</Badge>
      case "REJECTED":
        return <Badge variant="destructive">Rejected</Badge>
      default:
        return <Badge variant="outline">{status}</Badge>
    }
  }

return (
    <div className="rounded-md border">
      {applications.length === 0 ? (
        <div className="flex flex-col items-center justify-center p-8 text-center">
          <h3 className="mt-2 text-lg font-semibold">No applications yet</h3>
          <p className="mt-1 text-sm text-muted-foreground">Start applying for jobs to see your applications here.</p>
          <Button asChild className="mt-4">
            <Link href="/jobs">Browse Jobs</Link>
          </Button>
        </div>
      ) : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[300px]">Job Title</TableHead>
              <TableHead className="w-[150px]">Company</TableHead>
              <TableHead className="w-[150px]">Status</TableHead>
              <TableHead className="w-[150px] cursor-pointer" onClick={() => handleSort("createdAt")}>
                Applied Date
                {sortColumn === "createdAt" && <span className="ml-1">{sortDirection === "asc" ? "↑" : "↓"}</span>}
              </TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {sortedApplications.map((application) => (
              <TableRow key={application.id}>
                <TableCell className="font-medium">{application.jobPosting.title}</TableCell>
                <TableCell>{application.jobPosting.company}</TableCell>
                <TableCell>{getStatusBadge(application.status)}</TableCell>
                <TableCell>{formatDistanceToNow(new Date(application.createdAt), { addSuffix: true })}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Open menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem asChild>
                        <Link href={`/jobs/${application.jobPosting.id}`}>
                          <Eye className="mr-2 h-4 w-4" />
                          View Job
                        </Link>
                      </DropdownMenuItem>
                      <DropdownMenuItem asChild>
                        <Link href={`/dashboard/applications/${application.id}`}>
                          <FileText className="mr-2 h-4 w-4" />
                          View Application
                        </Link>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/saved-jobs-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { formatDistanceToNow } from "date-fns"
import { Bookmark, ExternalLink, MapPin, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { removeSavedJob } from "@/lib/actions"

interface SavedJobsListProps {
  savedJobs: any[]
}

export function SavedJobsList({ savedJobs }: SavedJobsListProps) {
  const [jobs, setJobs] = useState(savedJobs)
  const { toast } = useToast()

const handleRemove = async (id: string) => {
    try {
      await removeSavedJob(id)
      setJobs(jobs.filter((job) => job.id !== id))
      toast({
        title: "Job removed",
        description: "The job has been removed from your saved list.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error removing the job. Please try again.",
        variant: "destructive",
      })
    }
  }

if (jobs.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg">
        <Bookmark className="h-12 w-12 text-muted-foreground" />
        <h3 className="mt-4 text-lg font-semibold">No saved jobs</h3>
        <p className="mt-1 text-sm text-muted-foreground">Save jobs you're interested in to view them later.</p>
        <Button asChild className="mt-4">
          <Link href="/jobs">Browse Jobs</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {jobs.map((savedJob) => (
        <Card key={savedJob.id}>
          <CardHeader className="pb-3">
            <div className="flex justify-between items-start">
              <CardTitle className="line-clamp-1">{savedJob.jobPosting.title}</CardTitle>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => handleRemove(savedJob.id)}
                aria-label="Remove saved job"
              >
                <Trash2 className="h-4 w-4 text-muted-foreground" />
              </Button>
            </div>
            <div className="text-sm font-medium">{savedJob.jobPosting.company}</div>
          </CardHeader>
          <CardContent className="pb-3">
            <div className="flex items-center text-sm text-muted-foreground mb-2">
              <MapPin className="mr-1 h-4 w-4" />
              {savedJob.jobPosting.location}
            </div>
            <p className="text-sm line-clamp-2">{savedJob.jobPosting.description}</p>
            <div className="text-xs text-muted-foreground mt-2">
              Saved {formatDistanceToNow(new Date(savedJob.createdAt), { addSuffix: true })}
            </div>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href={`/jobs/${savedJob.jobPosting.id}`}>
                <ExternalLink className="mr-2 h-4 w-4" />
                View Job
              </Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/job-recommendations.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { Bookmark, BookmarkPlus, MapPin } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/components/ui/use-toast"
import { getRecommendedJobs, saveJob } from "@/lib/actions"

interface JobRecommendationsProps {
  userId: string
}

export function JobRecommendations({ userId }: JobRecommendationsProps) {
  const [recommendations, setRecommendations] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [savedJobIds, setSavedJobIds] = useState<Set<string>>(new Set())
  const { toast } = useToast()

useEffect(() => {
    const fetchRecommendations = async () => {
      try {
        const data = await getRecommendedJobs(userId)
        setRecommendations(data.jobs)
        setSavedJobIds(new Set(data.savedJobIds))
      } catch (error) {
        console.error("Error fetching recommendations:", error)
      } finally {
        setLoading(false)
      }
    }

fetchRecommendations()
  }, [userId])

const handleSaveJob = async (jobId: string) => {
    try {
      await saveJob(jobId)
      setSavedJobIds(new Set([...savedJobIds, jobId]))
      toast({
        title: "Job saved",
        description: "The job has been added to your saved list.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error saving the job. Please try again.",
        variant: "destructive",
      })
    }
  }

if (loading) {
    return (
      <div className="flex justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    )
  }

if (recommendations.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg">
        <h3 className="mt-2 text-lg font-semibold">No recommendations yet</h3>
        <p className="mt-1 text-sm text-muted-foreground">
          Complete your profile and apply to more jobs to get personalized recommendations.
        </p>
        <Button asChild className="mt-4">
          <Link href="/dashboard/profile">Complete Profile</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {recommendations.map((job) => (
        <Card key={job.id}>
          <CardHeader className="pb-3">
            <div className="flex justify-between items-start">
              <CardTitle className="line-clamp-1">{job.title}</CardTitle>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => handleSaveJob(job.id)}
                disabled={savedJobIds.has(job.id)}
                aria-label={savedJobIds.has(job.id) ? "Job saved" : "Save job"}
              >
                {savedJobIds.has(job.id) ? (
                  <Bookmark className="h-4 w-4 text-primary" />
                ) : (
                  <BookmarkPlus className="h-4 w-4 text-muted-foreground" />
                )}
              </Button>
            </div>
            <div className="text-sm font-medium">{job.company}</div>
          </CardHeader>
          <CardContent className="pb-3">
            <div className="flex items-center text-sm text-muted-foreground mb-2">
              <MapPin className="mr-1 h-4 w-4" />
              {job.location}
            </div>
            <p className="text-sm line-clamp-2">{job.description}</p>
          </CardContent>
          <CardFooter>
            <Button asChild className="w-full">
              <Link href={`/jobs/${job.id}`}>View Job</Link>
            </Button>
          </CardFooter>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/stats-cards.tsx" isMerged="true"
import { CheckCircle, Clock, FileText, RefreshCw } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface StatsCardsProps {
  stats: {
    totalApplications: number
    pendingApplications: number
    reviewedApplications: number
    acceptedApplications: number
  }
}

export function StatsCards({ stats }: StatsCardsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Applications</CardTitle>
          <FileText className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.totalApplications}</div>
          <p className="text-xs text-muted-foreground">Jobs you've applied to</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</CardTitle>
          <Clock className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.pendingApplications}</div>
          <p className="text-xs text-muted-foreground">Waiting for employer review</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Reviewed</CardTitle>
          <RefreshCw className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.reviewedApplications}</div>
          <p className="text-xs text-muted-foreground">Applications under consideration</p>
        </CardContent>
      </Card>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Accepted</CardTitle>
          <CheckCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.acceptedApplications}</div>
          <p className="text-xs text-muted-foreground">Successful applications</p>
        </CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/dashboard/recent-activity.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { formatDistanceToNow } from "date-fns"
import { Activity, BookmarkCheck, CheckCircle, Clock, Eye, FileCheck } from "lucide-react"
import { Button } from "@/components/ui/button"
import { getUserActivity } from "@/lib/actions"

interface RecentActivityProps {
  userId: string
}

export function RecentActivity({ userId }: RecentActivityProps) {
  const [activities, setActivities] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchActivity = async () => {
      try {
        const data = await getUserActivity(userId)
        setActivities(data)
      } catch (error) {
        console.error("Error fetching activity:", error)
      } finally {
        setLoading(false)
      }
    }

fetchActivity()
  }, [userId])

const getActivityIcon = (type: string) => {
    switch (type) {
      case "APPLICATION_SUBMITTED":
        return <FileCheck className="h-4 w-4" />
      case "APPLICATION_REVIEWED":
        return <Clock className="h-4 w-4" />
      case "APPLICATION_ACCEPTED":
        return <CheckCircle className="h-4 w-4" />
      case "JOB_SAVED":
        return <BookmarkCheck className="h-4 w-4" />
      case "JOB_VIEWED":
        return <Eye className="h-4 w-4" />
      default:
        return <Activity className="h-4 w-4" />
    }
  }

const getActivityText = (activity: any) => {
    switch (activity.type) {
      case "APPLICATION_SUBMITTED":
        return `You applied for ${activity.data.jobTitle} at ${activity.data.company}`
      case "APPLICATION_REVIEWED":
        return `Your application for ${activity.data.jobTitle} was reviewed`
      case "APPLICATION_ACCEPTED":
        return `Your application for ${activity.data.jobTitle} was accepted`
      case "JOB_SAVED":
        return `You saved ${activity.data.jobTitle} at ${activity.data.company}`
      case "JOB_VIEWED":
        return `You viewed ${activity.data.jobTitle} at ${activity.data.company}`
      default:
        return activity.message
    }
  }

if (loading) {
    return (
      <div className="flex justify-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    )
  }

if (activities.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg">
        <Activity className="h-12 w-12 text-muted-foreground" />
        <h3 className="mt-4 text-lg font-semibold">No recent activity</h3>
        <p className="mt-1 text-sm text-muted-foreground">
          Your recent activities will appear here as you interact with jobs.
        </p>
        <Button asChild className="mt-4">
          <Link href="/jobs">Browse Jobs</Link>
        </Button>
      </div>
    )
  }

return (
    <div className="space-y-4">
      {activities.map((activity) => (
        <div key={activity.id} className="flex items-start gap-4 p-4 border rounded-lg">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
            {getActivityIcon(activity.type)}
          </div>
          <div className="flex-1">
            <p className="text-sm">{getActivityText(activity)}</p>
            <p className="text-xs text-muted-foreground">
              {formatDistanceToNow(new Date(activity.createdAt), { addSuffix: true })}
            </p>
          </div>
          {activity.data?.jobId && (
            <Button variant="ghost" size="sm" asChild>
              <Link href={`/jobs/${activity.data.jobId}`}>View</Link>
            </Button>
          )}
        </div>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"

import type React from "react"

import { createContext, useContext, useEffect, useState } from "react"

type Theme = "dark" | "light" | "system"

type ThemeProviderProps = {
  children: React.ReactNode
  defaultTheme?: Theme
  storageKey?: string
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const initialState: ThemeProviderState = {
  theme: "system",
  setTheme: () => null,
}

const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

export function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "theme",
  ...props
}: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(defaultTheme)

useEffect(() => {
    const root = window.document.documentElement
    root.classList.remove("light", "dark")

if (theme === "system") {
      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
      root.classList.add(systemTheme)
      return
    }

root.classList.add(theme)
  }, [theme])

const value = {
    theme,
    setTheme: (theme: Theme) => {
      localStorage.setItem(storageKey, theme)
      setTheme(theme)
    },
  }

return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeProviderContext)

if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }

return context
}

[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }

[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
        success: "border-transparent bg-green-500 text-white hover:bg-green-500/80",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

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

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

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

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

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

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

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

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

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

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

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

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}

[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

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

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

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-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}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

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

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

const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
  ({ side = "right", className, children, ...props }, ref) => (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
        {children}
        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  ),
)
SheetContent.displayName = SheetPrimitive.Content.displayName

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

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

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

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

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}

[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

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

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

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

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

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

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

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

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

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

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

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

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

const Tabs = TabsPrimitive.Root

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

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

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

export { Tabs, TabsList, TabsTrigger, TabsContent }

[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getServerSession } from "next-auth"
import { Bell, CheckCircle } from "lucide-react"
import { authOptions } from "@/lib/auth"
import { getNotifications, markAllNotificationsAsRead } from "@/lib/actions"
import { Button } from "@/components/ui/button"
import { NotificationItem } from "@/components/notifications/notification-item"

export default async function NotificationsPage() {
  const session = await getServerSession(authOptions)

if (!session) {
    redirect("/login")
  }

const notifications = await getNotifications()

return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b">
        <div className="container flex h-16 items-center justify-between py-4">
          <h1 className="text-xl font-bold">Notifications</h1>
          <form action={markAllNotificationsAsRead}>
            <Button variant="outline" size="sm" type="submit">
              <CheckCircle className="mr-2 h-4 w-4" />
              Mark all as read
            </Button>
          </form>
        </div>
      </header>
      <main className="flex-1 container py-8">
        <div className="max-w-3xl mx-auto">
          {notifications.length === 0 ? (
            <div className="flex flex-col items-center justify-center p-8 text-center border rounded-lg">
              <Bell className="h-12 w-12 text-muted-foreground" />
              <h3 className="mt-4 text-lg font-semibold">No notifications</h3>
              <p className="mt-1 text-sm text-muted-foreground">
                You don't have any notifications yet. We'll notify you when there's activity related to your account.
              </p>
            </div>
          ) : (
            <div className="space-y-4">
              {notifications.map((notification) => (
                <NotificationItem key={notification.id} notification={notification} />
              ))}
            </div>
          )}
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/notifications/notification-item.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { formatDistanceToNow } from "date-fns"
import { Bell, BookmarkCheck, CheckCircle, FileCheck, ThumbsUp, X } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { markNotificationAsRead } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"

interface NotificationItemProps {
  notification: {
    id: string
    type: string
    message: string
    read: boolean
    createdAt: Date
  }
}

export function NotificationItem({ notification }: NotificationItemProps) {
  const [isRead, setIsRead] = useState(notification.read)
  const { toast } = useToast()

const getNotificationIcon = (type: string) => {
    switch (type) {
      case "NEW_APPLICATION":
        return <FileCheck className="h-5 w-5" />
      case "JOB_APPROVED":
        return <CheckCircle className="h-5 w-5" />
      case "JOB_REJECTED":
        return <X className="h-5 w-5" />
      case "APPLICATION_REVIEWED":
        return <ThumbsUp className="h-5 w-5" />
      case "JOB_SAVED":
        return <BookmarkCheck className="h-5 w-5" />
      default:
        return <Bell className="h-5 w-5" />
    }
  }

const handleMarkAsRead = async () => {
    try {
      await markNotificationAsRead(notification.id)
      setIsRead(true)
      toast({
        title: "Notification marked as read",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error marking the notification as read.",
        variant: "destructive",
      })
    }
  }

return (
    <Card className={`${isRead ? "bg-background" : "bg-muted/30"}`}>
      <CardContent className="p-4">
        <div className="flex items-start gap-4">
          <div className={`mt-0.5 rounded-full p-2 ${isRead ? "bg-muted" : "bg-primary/10"}`}>
            {getNotificationIcon(notification.type)}
          </div>
          <div className="flex-1">
            <p className="text-sm">{notification.message}</p>
            <p className="text-xs text-muted-foreground mt-1">
              {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
            </p>
          </div>
          {!isRead && (
            <Button variant="ghost" size="sm" onClick={handleMarkAsRead}>
              Mark as read
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/profile/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { getServerSession } from "next-auth"
import { authOptions } from "@/lib/auth"
import { prisma } from "@/lib/prisma"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { ProfileForm } from "@/components/profile/profile-form"

export default async function ProfilePage() {
  const session = await getServerSession(authOptions)

if (!session) {
    redirect("/login")
  }

const user = await prisma.user.findUnique({
    where: { id: session.user.id },
    include: {
      profile: true,
      skills: true,
    },
  })

if (!user) {
    redirect("/login")
  }

return (
    <div className="flex flex-col min-h-screen">
      <DashboardHeader />
      <main className="flex-1 container py-8">
        <div className="max-w-3xl mx-auto">
          <div className="mb-8">
            <h1 className="text-2xl font-bold mb-2">Your Profile</h1>
            <p className="text-muted-foreground">
              Update your profile information to help employers learn more about you.
            </p>
          </div>
          <ProfileForm user={user} profile={user.profile} skills={user.skills.map((skill) => skill.name)} />
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/profile/profile-form.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { updateUserProfile } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"

const formSchema = z.object({
  name: z.string().min(2, {
    message: "Name must be at least 2 characters.",
  }),
  bio: z.string().optional(),
  education: z.string().optional(),
  experience: z.string().optional(),
  skills: z.array(z.string()).optional(),
})

interface ProfileFormProps {
  user: any
  profile: any
  skills: string[]
}

export function ProfileForm({ user, profile, skills }: ProfileFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [skillInput, setSkillInput] = useState("")
  const { toast } = useToast()

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: user.name || "",
      bio: profile?.bio || "",
      education: profile?.education || "",
      experience: profile?.experience || "",
      skills: skills || [],
    },
  })

async function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    try {
      await updateUserProfile(values)
      toast({
        title: "Profile updated",
        description: "Your profile has been updated successfully.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error updating your profile. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

const addSkill = () => {
    if (!skillInput.trim()) return

const currentSkills = form.getValues("skills") || []
    if (!currentSkills.includes(skillInput.trim())) {
      form.setValue("skills", [...currentSkills, skillInput.trim()])
    }
    setSkillInput("")
  }

const removeSkill = (skill: string) => {
    const currentSkills = form.getValues("skills") || []
    form.setValue(
      "skills",
      currentSkills.filter((s) => s !== skill),
    )
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="Your name" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="bio"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bio</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Tell employers about yourself"
                  className="min-h-[120px]"
                  {...field}
                  value={field.value || ""}
                />
              </FormControl>
              <FormDescription>A brief description of yourself, your interests, and career goals.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="education"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Education</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Your educational background"
                  className="min-h-[100px]"
                  {...field}
                  value={field.value || ""}
                />
              </FormControl>
              <FormDescription>List your educational qualifications, schools, and graduation years.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="experience"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Experience</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Your work experience"
                  className="min-h-[100px]"
                  {...field}
                  value={field.value || ""}
                />
              </FormControl>
              <FormDescription>Describe your work experience, internships, or volunteer work.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="skills"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Skills</FormLabel>
              <div className="flex gap-2">
                <Input
                  placeholder="Add a skill"
                  value={skillInput}
                  onChange={(e) => setSkillInput(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault()
                      addSkill()
                    }
                  }}
                />
                <Button type="button" onClick={addSkill}>
                  Add
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {field.value?.map((skill) => (
                  <div key={skill} className="flex items-center gap-1 bg-muted px-2 py-1 rounded-md">
                    <span className="text-sm">{skill}</span>
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="h-5 w-5"
                      onClick={() => removeSkill(skill)}
                    >
                      <X className="h-3 w-3" />
                      <span className="sr-only">Remove {skill}</span>
                    </Button>
                  </div>
                ))}
              </div>
              <FormDescription>Add skills that are relevant to the jobs you're interested in.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<Button type="submit" disabled={isSubmitting}>
          {isSubmitting ? "Saving..." : "Save Profile"}
        </Button>
      </form>
    </Form>
  )
}

[V0_FILE]typescriptreact:file="components/jobs/save-job-button.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Bookmark, BookmarkPlus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { saveJob } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"

export function SaveJobButton({ jobId, isSaved }: { jobId: string; isSaved: boolean }) {
  const [saved, setSaved] = useState(isSaved)
  const { toast } = useToast()

const handleSaveJob = async () => {
    try {
      await saveJob(jobId)
      setSaved(true)
      toast({
        title: "Job saved",
        description: "The job has been added to your saved list.",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error saving the job. Please try again.",
        variant: "destructive",
      })
    }
  }

return (
    <Button variant="outline" onClick={handleSaveJob} disabled={saved}>
      {saved ? (
        <>
          <Bookmark className="mr-2 h-4 w-4" />
          Saved
        </>
      ) : (
        <>
          <BookmarkPlus className="mr-2 h-4 w-4" />
          Save Job
        </>
      )}
    </Button>
  )
}

[V0_FILE]typescriptreact:file="components/preview/preview-dialog.tsx"
"use client"

import { useState } from "react"
import { Calendar, DollarSign, Mail, MapPin, Phone } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"

interface PreviewDialogProps {
  formData: {
    title: string
    company: string
    location: string
    description: string
    requirements: string
    salary?: string
    contactEmail: string
    contactPhone?: string
    deadline?: Date
  }
}

export function PreviewDialog({ formData }: PreviewDialogProps) {
  const [open, setOpen] = useState(false)

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" type="button">
          Preview Job Posting
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-4xl h-[90vh]">
        <DialogHeader>
          <DialogTitle>Preview Job Posting</DialogTitle>
          <DialogDescription>This is how your job posting will appear to students</DialogDescription>
        </DialogHeader>
        <ScrollArea className="h-full pr-4">
          <div className="space-y-8 pb-4">
            <div>
              <h1 className="text-3xl font-bold">{formData.title}</h1>
              <div className="text-xl mt-1">{formData.company}</div>
            </div>

<div className="flex flex-wrap gap-4">
              <div className="flex items-center text-muted-foreground">
                <MapPin className="mr-1 h-4 w-4" />
                {formData.location}
              </div>
              {formData.salary && (
                <div className="flex items-center text-muted-foreground">
                  <DollarSign className="mr-1 h-4 w-4" />
                  {formData.salary}
                </div>
              )}
              {formData.deadline && (
                <div className="flex items-center text-muted-foreground">
                  <Calendar className="mr-1 h-4 w-4" />
                  Apply by {formData.deadline.toLocaleDateString()}
                </div>
              )}
            </div>

<div>
              <h2 className="text-xl font-bold mb-2">Job Description</h2>
              <div className="prose max-w-none">
                <p className="whitespace-pre-line">{formData.description}</p>
              </div>
            </div>

<div>
              <h2 className="text-xl font-bold mb-2">Requirements</h2>
              <div className="prose max-w-none">
                <p className="whitespace-pre-line">{formData.requirements}</p>
              </div>
            </div>

<div>
              <h2 className="text-xl font-bold mb-2">Contact Information</h2>
              <div className="space-y-2">
                <div className="flex items-center">
                  <Mail className="mr-2 h-4 w-4" />
                  <span>{formData.contactEmail}</span>
                </div>
                {formData.contactPhone && (
                  <div className="flex items-center">
                    <Phone className="mr-2 h-4 w-4" />
                    <span>{formData.contactPhone}</span>
                  </div>
                )}
              </div>
            </div>

<div className="bg-muted p-4 rounded-lg">
              <p className="text-sm text-muted-foreground">
                This job posting will be reviewed by the guidance department before being published. You will be
                notified once it is approved.
              </p>
            </div>
          </div>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx"
"use client"

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

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

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

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

export { ScrollArea, ScrollBar }

[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

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

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

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

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

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

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

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

[V0_FILE]typescriptreact:file="components/employer-job-form.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"

import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Calendar } from "@/components/ui/calendar"
import { submitJobPosting } from "@/lib/actions"
import { useToast } from "@/components/ui/use-toast"
import { PreviewDialog } from "@/components/preview/preview-dialog"

const formSchema = z.object({
  title: z.string().min(5, {
    message: "Job title must be at least 5 characters.",
  }),
  company: z.string().min(2, {
    message: "Company name must be at least 2 characters.",
  }),
  location: z.string().min(2, {
    message: "Location must be at least 2 characters.",
  }),
  description: z.string().min(20, {
    message: "Description must be at least 20 characters.",
  }),
  requirements: z.string().min(10, {
    message: "Requirements must be at least 10 characters.",
  }),
  salary: z.string().optional(),
  contactEmail: z.string().email({
    message: "Please enter a valid email address.",
  }),
  contactPhone: z.string().optional(),
  deadline: z.date().optional(),
})

export function EmployerJobForm() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      company: "",
      location: "",
      description: "",
      requirements: "",
      salary: "",
      contactEmail: "",
      contactPhone: "",
    },
  })

async function onSubmit(values: z.infer<typeof formSchema>) {
    setIsSubmitting(true)
    try {
      await submitJobPosting(values)
      toast({
        title: "Job posting submitted",
        description: "Your job posting has been submitted for review.",
      })
      router.push("/employers/thank-you")
    } catch (error) {
      toast({
        title: "Error",
        description: "There was an error submitting your job posting. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Job Title</FormLabel>
                <FormControl>
                  <Input placeholder="e.g. Summer Intern, Retail Associate" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="company"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Company Name</FormLabel>
                <FormControl>
                  <Input placeholder="e.g. ABC Corporation" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<FormField
          control={form.control}
          name="location"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Location</FormLabel>
              <FormControl>
                <Input placeholder="e.g. Remote, New York, NY" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Job Description</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Describe the job responsibilities and details"
                  className="min-h-[120px]"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="requirements"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Requirements</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="List the skills, qualifications, and experience required"
                  className="min-h-[100px]"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField
            control={form.control}
            name="salary"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Salary (Optional)</FormLabel>
                <FormControl>
                  <Input placeholder="e.g. $15/hr, $40,000-$50,000/year" {...field} />
                </FormControl>
                <FormDescription>Providing salary information helps students make informed decisions.</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="deadline"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Application Deadline (Optional)</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant={"outline"}
                        className={`w-full pl-3 text-left font-normal ${!field.value && "text-muted-foreground"}`}
                      >
                        {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                      mode="single"
                      selected={field.value}
                      onSelect={field.onChange}
                      disabled={(date) => date < new Date()}
                      initialFocus
                    />
                  </PopoverContent>
                </Popover>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <FormField
            control={form.control}
            name="contactEmail"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Contact Email</FormLabel>
                <FormControl>
                  <Input type="email" placeholder="contact@company.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="contactPhone"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Contact Phone (Optional)</FormLabel>
                <FormControl>
                  <Input placeholder="e.g. (555) 123-4567" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<div className="flex justify-between gap-4">
          <PreviewDialog formData={form.getValues()} />
          <div className="flex gap-4">
            <Button variant="ghost" type="button" onClick={() => router.back()}>
              Cancel
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Submitting..." : "Submit Job Posting"}
            </Button>
          </div>
        </div>
      </form>
    </Form>
  )
}
</article></body></html>

About

About