Isaac_Aracena
385 lines
14 KiB
TypeScript
385 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import Link from 'next/link'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import {
|
|
PlusCircle,
|
|
Search,
|
|
Filter,
|
|
MoreHorizontal,
|
|
Eye,
|
|
Edit,
|
|
Clock,
|
|
Users,
|
|
MapPin,
|
|
Building2,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
XCircle,
|
|
ArrowUpDown,
|
|
Download,
|
|
RefreshCw,
|
|
} from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { requisitions, countries } from '@/lib/mock-data'
|
|
import { STATUS_CONFIG, URGENCY_CONFIG, type Requisition, type RequisitionStatus } from '@/lib/types'
|
|
|
|
function getDaysUntilDeadline(deadline: string): number {
|
|
const now = new Date()
|
|
const deadlineDate = new Date(deadline)
|
|
return Math.ceil((deadlineDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
|
|
}
|
|
|
|
function formatDate(dateString: string): string {
|
|
return new Date(dateString).toLocaleDateString('es-ES', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
interface RequisitionRowProps {
|
|
requisition: Requisition
|
|
}
|
|
|
|
function RequisitionTableRow({ requisition }: RequisitionRowProps) {
|
|
const status = STATUS_CONFIG[requisition.status]
|
|
const urgency = URGENCY_CONFIG[requisition.urgency]
|
|
const daysLeft = getDaysUntilDeadline(requisition.hardDeadline)
|
|
const isOverdue = daysLeft < 0
|
|
const isAtRisk = daysLeft >= 0 && daysLeft <= 7
|
|
|
|
return (
|
|
<TableRow className="group">
|
|
<TableCell className="font-medium">
|
|
<Link href={`/requisiciones/${requisition.id}`} className="hover:text-primary hover:underline">
|
|
{requisition.id}
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<p className="font-medium text-sm">{requisition.positionName}</p>
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<MapPin className="h-3 w-3" />
|
|
{requisition.cityName}, {requisition.countryName}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium">{requisition.vacanciesFilled}</span>
|
|
<span className="text-muted-foreground">/ {requisition.quantity}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className={cn('text-xs', status.color, status.bgColor, status.borderColor)}>
|
|
{status.label}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className={cn('text-xs', urgency.color, urgency.bgColor)}>
|
|
{urgency.label}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
|
{requisition.departmentName}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className={cn(
|
|
'flex items-center gap-1.5 text-sm',
|
|
isOverdue && 'text-red-600 dark:text-red-400',
|
|
isAtRisk && !isOverdue && 'text-amber-600 dark:text-amber-400'
|
|
)}>
|
|
{isOverdue ? (
|
|
<AlertTriangle className="h-4 w-4" />
|
|
) : isAtRisk ? (
|
|
<Clock className="h-4 w-4" />
|
|
) : (
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
<span>
|
|
{isOverdue
|
|
? `${Math.abs(daysLeft)}d vencido`
|
|
: `${daysLeft}d`
|
|
}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-sm text-muted-foreground">{formatDate(requisition.createdAt)}</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Acciones</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/requisiciones/${requisition.id}`}>
|
|
<Eye className="mr-2 h-4 w-4" />
|
|
Ver detalles
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{requisition.status === 'borrador' && (
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/requisiciones/${requisition.id}/editar`}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
Editar
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
{requisition.status === 'correccion_requerida' && (
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/requisiciones/${requisition.id}/editar`}>
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
Corregir y reenviar
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|
|
|
|
export function RequisitionsListPage() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const [searchTerm, setSearchTerm] = React.useState('')
|
|
const [statusFilter, setStatusFilter] = React.useState<string>('all')
|
|
const [countryFilter, setCountryFilter] = React.useState<string>('all')
|
|
const [activeTab, setActiveTab] = React.useState('todas')
|
|
|
|
// Check for filter param
|
|
React.useEffect(() => {
|
|
const filter = searchParams.get('filter')
|
|
if (filter === 'urgent') {
|
|
setActiveTab('urgentes')
|
|
}
|
|
}, [searchParams])
|
|
|
|
const filteredRequisitions = React.useMemo(() => {
|
|
let filtered = [...requisitions]
|
|
|
|
// Search filter
|
|
if (searchTerm) {
|
|
const term = searchTerm.toLowerCase()
|
|
filtered = filtered.filter(r =>
|
|
r.id.toLowerCase().includes(term) ||
|
|
r.positionName.toLowerCase().includes(term) ||
|
|
r.cityName.toLowerCase().includes(term) ||
|
|
r.requesterName.toLowerCase().includes(term)
|
|
)
|
|
}
|
|
|
|
// Status filter
|
|
if (statusFilter !== 'all') {
|
|
filtered = filtered.filter(r => r.status === statusFilter)
|
|
}
|
|
|
|
// Country filter
|
|
if (countryFilter !== 'all') {
|
|
filtered = filtered.filter(r => r.countryId === countryFilter)
|
|
}
|
|
|
|
// Tab filter
|
|
if (activeTab === 'abiertas') {
|
|
filtered = filtered.filter(r => !['cerrado', 'cancelado'].includes(r.status))
|
|
} else if (activeTab === 'urgentes') {
|
|
filtered = filtered.filter(r => {
|
|
const daysLeft = getDaysUntilDeadline(r.hardDeadline)
|
|
return !['cerrado', 'cancelado'].includes(r.status) && daysLeft <= 7
|
|
})
|
|
} else if (activeTab === 'cerradas') {
|
|
filtered = filtered.filter(r => ['cerrado', 'cancelado'].includes(r.status))
|
|
}
|
|
|
|
// Sort by date (newest first)
|
|
filtered.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
|
|
|
return filtered
|
|
}, [searchTerm, statusFilter, countryFilter, activeTab])
|
|
|
|
const stats = React.useMemo(() => {
|
|
const open = requisitions.filter(r => !['cerrado', 'cancelado'].includes(r.status))
|
|
const urgent = open.filter(r => getDaysUntilDeadline(r.hardDeadline) <= 7)
|
|
const closed = requisitions.filter(r => ['cerrado', 'cancelado'].includes(r.status))
|
|
|
|
return {
|
|
all: requisitions.length,
|
|
open: open.length,
|
|
urgent: urgent.length,
|
|
closed: closed.length,
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="p-6 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">Requisiciones</h1>
|
|
<p className="text-muted-foreground">
|
|
Gestiona y da seguimiento a todas las requisiciones de vacantes
|
|
</p>
|
|
</div>
|
|
<Button asChild>
|
|
<Link href="/requisiciones/nueva">
|
|
<PlusCircle className="mr-2 h-4 w-4" />
|
|
Nueva Requisición
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="grid w-full grid-cols-4 lg:w-[400px]">
|
|
<TabsTrigger value="todas" className="text-xs sm:text-sm">
|
|
Todas ({stats.all})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="abiertas" className="text-xs sm:text-sm">
|
|
Abiertas ({stats.open})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="urgentes" className="text-xs sm:text-sm">
|
|
<AlertTriangle className="mr-1 h-3 w-3" />
|
|
Urgentes ({stats.urgent})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="cerradas" className="text-xs sm:text-sm">
|
|
Cerradas ({stats.closed})
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<Card className="mt-4">
|
|
<CardHeader className="pb-4">
|
|
{/* Filters */}
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Buscar por ID, posición, ciudad..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="w-[180px] sm:w-[220px]">
|
|
<Filter className="mr-2 h-4 w-4" />
|
|
<SelectValue placeholder="Estado" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos los estados</SelectItem>
|
|
{Object.entries(STATUS_CONFIG).map(([key, config]) => (
|
|
<SelectItem key={key} value={key}>
|
|
{config.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={countryFilter} onValueChange={setCountryFilter}>
|
|
<SelectTrigger className="w-[160px] sm:w-[200px]">
|
|
<SelectValue placeholder="País" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos los países</SelectItem>
|
|
{countries.map((country) => (
|
|
<SelectItem key={country.id} value={country.id}>
|
|
{country.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button variant="outline" size="icon">
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<TabsContent value={activeTab} className="mt-0">
|
|
{filteredRequisitions.length > 0 ? (
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[120px]">ID</TableHead>
|
|
<TableHead>Posición</TableHead>
|
|
<TableHead className="w-[100px]">Vacantes</TableHead>
|
|
<TableHead className="w-[160px]">Estado</TableHead>
|
|
<TableHead className="w-[100px]">Urgencia</TableHead>
|
|
<TableHead>Departamento</TableHead>
|
|
<TableHead className="w-[110px]">
|
|
<div className="flex items-center gap-1">
|
|
SLA
|
|
<ArrowUpDown className="h-3 w-3" />
|
|
</div>
|
|
</TableHead>
|
|
<TableHead className="w-[110px]">Creada</TableHead>
|
|
<TableHead className="w-[50px]"></TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredRequisitions.map((requisition) => (
|
|
<RequisitionTableRow key={requisition.id} requisition={requisition} />
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<div className="rounded-full bg-muted p-3 mb-4">
|
|
<Search className="h-6 w-6 text-muted-foreground" />
|
|
</div>
|
|
<h3 className="text-lg font-medium">No se encontraron requisiciones</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Intenta ajustar los filtros de búsqueda
|
|
</p>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</CardContent>
|
|
</Card>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|