Isaac_Aracena
588 lines
24 KiB
TypeScript
588 lines
24 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { mockInterviews, mockCandidates, mockRequisitions, mockUsers } from "@/lib/mock-data"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Plus,
|
|
Video,
|
|
MapPin,
|
|
Clock,
|
|
User,
|
|
Calendar as CalendarIcon,
|
|
Users,
|
|
MoreVertical,
|
|
Mail,
|
|
Phone,
|
|
FileText,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Edit,
|
|
Trash2,
|
|
ExternalLink
|
|
} from "lucide-react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const weekDays = ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"]
|
|
const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
|
|
|
|
export function CalendarPage() {
|
|
const [currentDate, setCurrentDate] = useState(new Date())
|
|
const [selectedDate, setSelectedDate] = useState<Date | null>(null)
|
|
const [viewMode, setViewMode] = useState<"month" | "week" | "day">("month")
|
|
const [isNewInterviewOpen, setIsNewInterviewOpen] = useState(false)
|
|
const [selectedInterview, setSelectedInterview] = useState<typeof mockInterviews[0] | null>(null)
|
|
const [filterType, setFilterType] = useState<string>("all")
|
|
|
|
const interviews = mockInterviews
|
|
|
|
const getDaysInMonth = (date: Date) => {
|
|
const year = date.getFullYear()
|
|
const month = date.getMonth()
|
|
const firstDay = new Date(year, month, 1)
|
|
const lastDay = new Date(year, month + 1, 0)
|
|
const daysInMonth = lastDay.getDate()
|
|
const startingDay = firstDay.getDay()
|
|
|
|
const days: (Date | null)[] = []
|
|
|
|
for (let i = 0; i < startingDay; i++) {
|
|
days.push(null)
|
|
}
|
|
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
days.push(new Date(year, month, i))
|
|
}
|
|
|
|
return days
|
|
}
|
|
|
|
const getInterviewsForDate = (date: Date) => {
|
|
return interviews.filter(interview => {
|
|
const interviewDate = new Date(interview.scheduledDate)
|
|
return (
|
|
interviewDate.getDate() === date.getDate() &&
|
|
interviewDate.getMonth() === date.getMonth() &&
|
|
interviewDate.getFullYear() === date.getFullYear()
|
|
)
|
|
}).filter(interview => {
|
|
if (filterType === "all") return true
|
|
return interview.type === filterType
|
|
})
|
|
}
|
|
|
|
const navigateMonth = (direction: "prev" | "next") => {
|
|
setCurrentDate(prev => {
|
|
const newDate = new Date(prev)
|
|
if (direction === "prev") {
|
|
newDate.setMonth(newDate.getMonth() - 1)
|
|
} else {
|
|
newDate.setMonth(newDate.getMonth() + 1)
|
|
}
|
|
return newDate
|
|
})
|
|
}
|
|
|
|
const getInterviewTypeColor = (type: string) => {
|
|
const colors: Record<string, string> = {
|
|
rrhh: "bg-primary text-primary-foreground",
|
|
technical: "bg-blue-500 text-white",
|
|
manager: "bg-purple-500 text-white",
|
|
final: "bg-accent text-accent-foreground"
|
|
}
|
|
return colors[type] || "bg-secondary text-secondary-foreground"
|
|
}
|
|
|
|
const getInterviewTypeLabel = (type: string) => {
|
|
const labels: Record<string, string> = {
|
|
rrhh: "RR.HH.",
|
|
technical: "Técnica",
|
|
manager: "Gerente",
|
|
final: "Final"
|
|
}
|
|
return labels[type] || type
|
|
}
|
|
|
|
const getCandidateName = (candidateId: string) => {
|
|
const candidate = mockCandidates.find(c => c.id === candidateId)
|
|
return candidate?.name || "Candidato"
|
|
}
|
|
|
|
const getRequisitionTitle = (requisitionId: string) => {
|
|
const requisition = mockRequisitions.find(r => r.id === requisitionId)
|
|
return requisition?.position || "Vacante"
|
|
}
|
|
|
|
const formatTime = (dateString: string) => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" })
|
|
}
|
|
|
|
const days = getDaysInMonth(currentDate)
|
|
|
|
const upcomingInterviews = interviews
|
|
.filter(i => new Date(i.scheduledDate) >= new Date())
|
|
.sort((a, b) => new Date(a.scheduledDate).getTime() - new Date(b.scheduledDate).getTime())
|
|
.slice(0, 5)
|
|
|
|
const todayInterviews = getInterviewsForDate(new Date())
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Calendario de Entrevistas</h1>
|
|
<p className="text-muted-foreground">
|
|
Gestiona y agenda entrevistas con candidatos
|
|
</p>
|
|
</div>
|
|
<Dialog open={isNewInterviewOpen} onOpenChange={setIsNewInterviewOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button className="bg-accent hover:bg-accent/90 text-accent-foreground">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Agendar Entrevista
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Agendar Nueva Entrevista</DialogTitle>
|
|
<DialogDescription>
|
|
Programa una entrevista con un candidato
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label>Candidato</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Seleccionar candidato" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{mockCandidates.map(candidate => (
|
|
<SelectItem key={candidate.id} value={candidate.id}>
|
|
{candidate.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Tipo de Entrevista</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Seleccionar tipo" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="rrhh">Entrevista RR.HH.</SelectItem>
|
|
<SelectItem value="technical">Entrevista Técnica</SelectItem>
|
|
<SelectItem value="manager">Entrevista Gerente</SelectItem>
|
|
<SelectItem value="final">Entrevista Final</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label>Fecha</Label>
|
|
<Input type="date" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Hora</Label>
|
|
<Input type="time" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Duracion (minutos)</Label>
|
|
<Select defaultValue="60">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="30">30 minutos</SelectItem>
|
|
<SelectItem value="45">45 minutos</SelectItem>
|
|
<SelectItem value="60">60 minutos</SelectItem>
|
|
<SelectItem value="90">90 minutos</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Modalidad</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Seleccionar modalidad" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="video">Videoconferencia</SelectItem>
|
|
<SelectItem value="presencial">Presencial</SelectItem>
|
|
<SelectItem value="phone">Telefonica</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Entrevistadores</Label>
|
|
<Select>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Seleccionar entrevistadores" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{mockUsers.filter(u => u.role === "recruiter" || u.role === "hr_manager").map(user => (
|
|
<SelectItem key={user.id} value={user.id}>
|
|
{user.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>Notas</Label>
|
|
<Textarea placeholder="Notas adicionales para la entrevista..." />
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsNewInterviewOpen(false)}>
|
|
Cancelar
|
|
</Button>
|
|
<Button className="bg-accent hover:bg-accent/90" onClick={() => setIsNewInterviewOpen(false)}>
|
|
Agendar
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
{/* Calendar */}
|
|
<div className="lg:col-span-3">
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="outline" size="icon" onClick={() => navigateMonth("prev")}>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<h2 className="text-xl font-semibold">
|
|
{monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
|
|
</h2>
|
|
<Button variant="outline" size="icon" onClick={() => navigateMonth("next")}>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Select value={filterType} onValueChange={setFilterType}>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue placeholder="Filtrar por tipo" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos los tipos</SelectItem>
|
|
<SelectItem value="rrhh">Entrevista RR.HH.</SelectItem>
|
|
<SelectItem value="technical">Entrevista Técnica</SelectItem>
|
|
<SelectItem value="manager">Entrevista Gerente</SelectItem>
|
|
<SelectItem value="final">Entrevista Final</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentDate(new Date())}
|
|
>
|
|
Hoy
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Week Headers */}
|
|
<div className="grid grid-cols-7 gap-px mb-2">
|
|
{weekDays.map(day => (
|
|
<div key={day} className="text-center text-sm font-medium text-muted-foreground py-2">
|
|
{day}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Calendar Grid */}
|
|
<div className="grid grid-cols-7 gap-px bg-border rounded-lg overflow-hidden">
|
|
{days.map((day, index) => {
|
|
const dayInterviews = day ? getInterviewsForDate(day) : []
|
|
const isToday = day &&
|
|
day.getDate() === new Date().getDate() &&
|
|
day.getMonth() === new Date().getMonth() &&
|
|
day.getFullYear() === new Date().getFullYear()
|
|
const isSelected = day && selectedDate &&
|
|
day.getDate() === selectedDate.getDate() &&
|
|
day.getMonth() === selectedDate.getMonth() &&
|
|
day.getFullYear() === selectedDate.getFullYear()
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={cn(
|
|
"min-h-[120px] bg-card p-2 cursor-pointer transition-colors hover:bg-muted/50",
|
|
!day && "bg-muted/30",
|
|
isSelected && "ring-2 ring-primary ring-inset"
|
|
)}
|
|
onClick={() => day && setSelectedDate(day)}
|
|
>
|
|
{day && (
|
|
<>
|
|
<div className={cn(
|
|
"text-sm font-medium mb-1",
|
|
isToday && "w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center"
|
|
)}>
|
|
{day.getDate()}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{dayInterviews.slice(0, 3).map(interview => (
|
|
<div
|
|
key={interview.id}
|
|
className={cn(
|
|
"text-xs p-1 rounded truncate cursor-pointer",
|
|
getInterviewTypeColor(interview.type)
|
|
)}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setSelectedInterview(interview)
|
|
}}
|
|
>
|
|
{formatTime(interview.scheduledDate)} - {getCandidateName(interview.candidateId)}
|
|
</div>
|
|
))}
|
|
{dayInterviews.length > 3 && (
|
|
<div className="text-xs text-muted-foreground text-center">
|
|
+{dayInterviews.length - 3} mas
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Today's Interviews */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Entrevistas de Hoy</CardTitle>
|
|
<CardDescription>{todayInterviews.length} programadas</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{todayInterviews.length > 0 ? todayInterviews.map(interview => (
|
|
<div
|
|
key={interview.id}
|
|
className="p-3 border rounded-lg cursor-pointer hover:bg-muted/50 transition-colors"
|
|
onClick={() => setSelectedInterview(interview)}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Badge className={getInterviewTypeColor(interview.type)}>
|
|
{getInterviewTypeLabel(interview.type)}
|
|
</Badge>
|
|
<span className="text-sm font-medium">{formatTime(interview.scheduledDate)}</span>
|
|
</div>
|
|
<div className="text-sm font-medium">{getCandidateName(interview.candidateId)}</div>
|
|
<div className="text-xs text-muted-foreground">{getRequisitionTitle(interview.requisitionId)}</div>
|
|
</div>
|
|
)) : (
|
|
<div className="text-center py-4 text-muted-foreground text-sm">
|
|
No hay entrevistas hoy
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Upcoming */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Proximas Entrevistas</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{upcomingInterviews.map(interview => (
|
|
<div
|
|
key={interview.id}
|
|
className="p-3 border rounded-lg cursor-pointer hover:bg-muted/50 transition-colors"
|
|
onClick={() => setSelectedInterview(interview)}
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<Badge variant="outline" className="text-xs">
|
|
{getInterviewTypeLabel(interview.type)}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(interview.scheduledDate).toLocaleDateString("es-MX", {
|
|
day: "numeric",
|
|
month: "short"
|
|
})}
|
|
</span>
|
|
</div>
|
|
<div className="text-sm font-medium">{getCandidateName(interview.candidateId)}</div>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
|
|
<Clock className="h-3 w-3" />
|
|
{formatTime(interview.scheduledDate)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Legend */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base">Tipos de Entrevista</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded bg-primary" />
|
|
<span className="text-sm">Entrevista RR.HH.</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded bg-blue-500" />
|
|
<span className="text-sm">Entrevista Técnica</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded bg-purple-500" />
|
|
<span className="text-sm">Entrevista Gerente</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded bg-accent" />
|
|
<span className="text-sm">Entrevista Final</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Interview Detail Dialog */}
|
|
<Dialog open={!!selectedInterview} onOpenChange={() => setSelectedInterview(null)}>
|
|
<DialogContent className="max-w-lg">
|
|
{selectedInterview && (
|
|
<>
|
|
<DialogHeader>
|
|
<div className="flex items-center justify-between">
|
|
<Badge className={getInterviewTypeColor(selectedInterview.type)}>
|
|
{getInterviewTypeLabel(selectedInterview.type)}
|
|
</Badge>
|
|
<Badge variant={
|
|
selectedInterview.status === "scheduled" ? "secondary" :
|
|
selectedInterview.status === "completed" ? "default" :
|
|
"destructive"
|
|
}>
|
|
{selectedInterview.status === "scheduled" ? "Programada" :
|
|
selectedInterview.status === "completed" ? "Completada" :
|
|
"Cancelada"}
|
|
</Badge>
|
|
</div>
|
|
<DialogTitle className="mt-2">
|
|
Entrevista con {getCandidateName(selectedInterview.candidateId)}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{getRequisitionTitle(selectedInterview.requisitionId)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 py-4">
|
|
<div className="flex items-center gap-3 p-3 bg-muted/50 rounded-lg">
|
|
<CalendarIcon className="h-5 w-5 text-muted-foreground" />
|
|
<div>
|
|
<div className="font-medium">
|
|
{new Date(selectedInterview.scheduledDate).toLocaleDateString("es-MX", {
|
|
weekday: "long",
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric"
|
|
})}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{formatTime(selectedInterview.scheduledDate)} - {selectedInterview.duration} minutos
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 p-3 bg-muted/50 rounded-lg">
|
|
{selectedInterview.location === "video" ? (
|
|
<Video className="h-5 w-5 text-muted-foreground" />
|
|
) : (
|
|
<MapPin className="h-5 w-5 text-muted-foreground" />
|
|
)}
|
|
<div>
|
|
<div className="font-medium">
|
|
{selectedInterview.location === "video" ? "Videoconferencia" : "Presencial"}
|
|
</div>
|
|
{selectedInterview.meetingLink && (
|
|
<a
|
|
href={selectedInterview.meetingLink}
|
|
className="text-sm text-primary hover:underline flex items-center gap-1"
|
|
>
|
|
Unirse a la reunion <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm text-muted-foreground">Entrevistadores</Label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedInterview.interviewers.map(interviewerId => {
|
|
const interviewer = mockUsers.find(u => u.id === interviewerId)
|
|
return interviewer ? (
|
|
<div key={interviewerId} className="flex items-center gap-2 px-3 py-1.5 bg-muted rounded-full">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarImage src={interviewer.avatar} />
|
|
<AvatarFallback className="text-xs">
|
|
{interviewer.name.split(" ").map(n => n[0]).join("")}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="text-sm">{interviewer.name}</span>
|
|
</div>
|
|
) : null
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedInterview.notes && (
|
|
<div className="space-y-2">
|
|
<Label className="text-sm text-muted-foreground">Notas</Label>
|
|
<p className="text-sm p-3 bg-muted/50 rounded-lg">{selectedInterview.notes}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2">
|
|
<Button variant="outline" size="sm">
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
Editar
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="text-destructive">
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Cancelar
|
|
</Button>
|
|
{selectedInterview.status === "scheduled" && (
|
|
<Button size="sm" className="bg-accent hover:bg-accent/90">
|
|
<CheckCircle2 className="mr-2 h-4 w-4" />
|
|
Completar
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|