181 lines
9.6 KiB
JavaScript
181 lines
9.6 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import EmployerLayout from '@/Layouts/EmployerLayout';
|
|
import {
|
|
ArrowLeft,
|
|
Briefcase,
|
|
MapPin,
|
|
DollarSign,
|
|
Calendar,
|
|
Users,
|
|
FileText,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Clock,
|
|
Edit2,
|
|
Trash2,
|
|
Eye
|
|
} from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function Show({ job }) {
|
|
const handleDelete = () => {
|
|
if (confirm('Are you sure you want to delete this job posting? This action cannot be undone.')) {
|
|
router.delete(`/employer/jobs/${job.id}`, {
|
|
onSuccess: () => {
|
|
toast.success('Job deleted successfully.');
|
|
},
|
|
onError: () => {
|
|
toast.error('Failed to delete job.');
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title="Job Details">
|
|
<Head title={`Job Details: ${job.title} - Employer Portal`} />
|
|
|
|
<div className="max-w-4xl mx-auto space-y-6 pb-12 select-none">
|
|
<Link
|
|
href="/employer/jobs"
|
|
className="inline-flex items-center space-x-2 text-xs font-bold text-slate-600 hover:text-[#185FA5] transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Back to My Jobs</span>
|
|
</Link>
|
|
|
|
<div className="bg-white rounded-[32px] border border-slate-200 shadow-sm overflow-hidden">
|
|
{/* Header */}
|
|
<div className="p-8 border-b border-slate-50 bg-slate-50/30 flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="flex items-start space-x-4">
|
|
<div className="p-3 bg-blue-50 rounded-2xl">
|
|
<Briefcase className="w-6 h-6 text-[#185FA5]" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-black text-slate-900 tracking-tight">{job.title}</h1>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Posted on {job.posted_at}</span>
|
|
<span className="text-slate-300">•</span>
|
|
<span className="text-[10px] font-black text-[#185FA5] uppercase tracking-widest">{job.job_type}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<Badge
|
|
variant="outline"
|
|
className={`px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest ${
|
|
job.status === 'Active' ? 'bg-emerald-50 text-emerald-700 border-emerald-100' :
|
|
job.status === 'Closed' ? 'bg-rose-50 text-rose-700 border-rose-100' :
|
|
'bg-slate-50 text-slate-500 border-slate-100'
|
|
}`}
|
|
>
|
|
{job.status === 'Active' && <CheckCircle2 className="w-3 h-3 mr-1" />}
|
|
{job.status === 'Closed' && <XCircle className="w-3 h-3 mr-1" />}
|
|
{job.status === 'Draft' && <Clock className="w-3 h-3 mr-1" />}
|
|
{job.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 p-8 border-b border-slate-100 bg-slate-50/10">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-2.5 bg-slate-100 rounded-xl">
|
|
<MapPin className="w-5 h-5 text-slate-500" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Location</p>
|
|
<p className="text-sm font-bold text-slate-800">{job.location}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-2.5 bg-emerald-50 rounded-xl">
|
|
<DollarSign className="w-5 h-5 text-emerald-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Salary</p>
|
|
<p className="text-sm font-bold text-slate-800">{job.salary} AED / month</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-2.5 bg-blue-50 rounded-xl">
|
|
<Users className="w-5 h-5 text-[#185FA5]" />
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Workers Needed</p>
|
|
<p className="text-sm font-bold text-slate-800">{job.workers_needed} ({job.applied_count} applied)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-8">
|
|
{/* Start Date */}
|
|
<div className="flex items-center space-x-3 text-slate-600 bg-slate-50 p-4 rounded-2xl border border-slate-100">
|
|
<Calendar className="w-5 h-5 text-[#185FA5]" />
|
|
<div>
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400 block">Expected Start Date</span>
|
|
<span className="text-xs font-bold text-slate-700">{job.start_date || 'Immediate'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-xs font-black text-[#185FA5] uppercase tracking-[0.2em] flex items-center">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full mr-2" />
|
|
Job Description
|
|
</h3>
|
|
<div className="bg-slate-50/50 p-6 rounded-2xl border border-slate-100 text-sm font-medium text-slate-700 leading-relaxed whitespace-pre-wrap">
|
|
{job.description}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Requirements */}
|
|
{job.requirements && (
|
|
<div className="space-y-3">
|
|
<h3 className="text-xs font-black text-[#185FA5] uppercase tracking-[0.2em] flex items-center">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full mr-2" />
|
|
Special Requirements
|
|
</h3>
|
|
<div className="bg-slate-50/50 p-6 rounded-2xl border border-slate-100 text-sm font-medium text-slate-700 leading-relaxed whitespace-pre-wrap">
|
|
{job.requirements}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col sm:flex-row gap-4 pt-6 border-t border-slate-100">
|
|
<Link
|
|
href={`/employer/jobs/${job.id}/applicants`}
|
|
className="flex-1 bg-[#185FA5] text-white py-4 rounded-2xl font-black text-xs uppercase tracking-widest shadow-xl shadow-blue-500/10 hover:bg-[#144f8a] transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
<span>View Applicants ({job.applied_count})</span>
|
|
</Link>
|
|
|
|
<Link
|
|
href={`/employer/jobs/${job.id}/edit`}
|
|
className="bg-slate-50 border border-slate-200 text-slate-700 py-4 px-6 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-slate-100 transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<Edit2 className="w-4 h-4 text-[#185FA5]" />
|
|
<span>Edit Posting</span>
|
|
</Link>
|
|
|
|
<button
|
|
onClick={handleDelete}
|
|
className="bg-rose-50 border border-rose-100 text-rose-700 py-4 px-6 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-rose-100/50 transition-all flex items-center justify-center space-x-2"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
<span>Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|