347 lines
22 KiB
JavaScript
347 lines
22 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import EmployerLayout from '@/Layouts/EmployerLayout';
|
|
import {
|
|
Plus,
|
|
ArrowLeft,
|
|
Briefcase,
|
|
MapPin,
|
|
DollarSign,
|
|
LayoutGrid,
|
|
Users,
|
|
FileText,
|
|
Sparkles,
|
|
ShieldCheck,
|
|
X
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function Create({ professions, availableSkills }) {
|
|
const categoryList = professions || [
|
|
'Housekeeper', 'Nanny', 'Maid', 'Electrician', 'Mason', 'Plumber', 'Cleaner', 'Driver', 'Caregiver', 'Cook'
|
|
];
|
|
const skillList = availableSkills || [];
|
|
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
title: '',
|
|
main_profession: '',
|
|
skills: [],
|
|
workers_needed: 1,
|
|
location: '',
|
|
salary: '',
|
|
job_type: 'Full Time',
|
|
start_date: new Date().toISOString().split('T')[0],
|
|
description: '',
|
|
});
|
|
|
|
const [clientErrors, setClientErrors] = useState({});
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
// Client-side validation
|
|
const newErrors = {};
|
|
if (!data.title.trim()) {
|
|
newErrors.title = 'Job title is required.';
|
|
}
|
|
if (!data.main_profession) {
|
|
newErrors.main_profession = 'Main profession is required.';
|
|
}
|
|
if (!data.skills || data.skills.length === 0) {
|
|
newErrors.skills = 'At least one skill is required.';
|
|
}
|
|
if (!data.workers_needed || data.workers_needed < 1) {
|
|
newErrors.workers_needed = 'Workers needed must be at least 1.';
|
|
}
|
|
if (!data.location.trim()) {
|
|
newErrors.location = 'Job location is required.';
|
|
}
|
|
if (!data.salary || data.salary < 0) {
|
|
newErrors.salary = 'Monthly salary must be a positive number.';
|
|
}
|
|
if (!data.start_date) {
|
|
newErrors.start_date = 'Start date is required.';
|
|
}
|
|
if (!data.description.trim()) {
|
|
newErrors.description = 'Job description is required.';
|
|
}
|
|
|
|
if (Object.keys(newErrors).length > 0) {
|
|
setClientErrors(newErrors);
|
|
toast.error('Validation failed. Please correct the fields in red.');
|
|
return;
|
|
}
|
|
|
|
setClientErrors({});
|
|
post('/employer/jobs/create', {
|
|
onSuccess: () => {
|
|
toast.success('Job posted successfully.');
|
|
},
|
|
onError: () => {
|
|
toast.error('Failed to post job. Please check the inputs.');
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title="Post a Job">
|
|
<Head title="Post a New Job - 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">
|
|
<div className="p-8 border-b border-slate-50 bg-slate-50/30 flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="p-3 bg-blue-50 rounded-2xl">
|
|
<Plus className="w-6 h-6 text-[#185FA5]" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-black text-slate-900 tracking-tight uppercase">Post a New Job</h1>
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Fill in the details to find the perfect workers</p>
|
|
</div>
|
|
</div>
|
|
<div className="hidden sm:flex items-center space-x-2 text-emerald-600 bg-emerald-50 px-4 py-2 rounded-xl border border-emerald-100">
|
|
<Sparkles className="w-4 h-4" />
|
|
<span className="text-[10px] font-black uppercase">Premium Listing Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-8 space-y-8">
|
|
{/* Section 1: Basic Info */}
|
|
<div className="space-y-6">
|
|
<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" />
|
|
Basic Information
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2 col-span-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Job Title</label>
|
|
<div className="relative">
|
|
<Briefcase className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. Senior Electrician for Villa Project"
|
|
className={`w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all ${
|
|
(clientErrors.title || errors.title) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.title}
|
|
onChange={e => setData('title', e.target.value)}
|
|
/>
|
|
</div>
|
|
{(clientErrors.title || errors.title) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.title || errors.title}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Main Profession</label>
|
|
<div className="relative">
|
|
<Briefcase className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<select
|
|
className={`w-full pl-11 pr-10 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all appearance-none cursor-pointer ${
|
|
(clientErrors.main_profession || errors.main_profession) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.main_profession}
|
|
onChange={e => setData('main_profession', e.target.value)}
|
|
>
|
|
<option value="">Select main profession...</option>
|
|
{categoryList.map(prof => (
|
|
<option key={prof} value={prof}>{prof}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
{(clientErrors.main_profession || errors.main_profession) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.main_profession || errors.main_profession}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Workers Needed</label>
|
|
<div className="relative">
|
|
<Users className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
className={`w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all ${
|
|
(clientErrors.workers_needed || errors.workers_needed) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.workers_needed}
|
|
onChange={e => setData('workers_needed', e.target.value)}
|
|
/>
|
|
</div>
|
|
{(clientErrors.workers_needed || errors.workers_needed) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.workers_needed || errors.workers_needed}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Job Location</label>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="e.g. Dubai Marina"
|
|
className={`w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all ${
|
|
(clientErrors.location || errors.location) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.location}
|
|
onChange={e => setData('location', e.target.value)}
|
|
/>
|
|
</div>
|
|
{(clientErrors.location || errors.location) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.location || errors.location}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Salary (AED / mo)</label>
|
|
<div className="relative">
|
|
<DollarSign className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="number"
|
|
placeholder="e.g. 2500"
|
|
className={`w-full pl-11 pr-4 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all ${
|
|
(clientErrors.salary || errors.salary) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.salary}
|
|
onChange={e => setData('salary', e.target.value)}
|
|
/>
|
|
</div>
|
|
{(clientErrors.salary || errors.salary) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.salary || errors.salary}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2 col-span-2 md:col-span-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Job Type</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{['Full Time', 'Part Time'].map(type => (
|
|
<button
|
|
key={type}
|
|
type="button"
|
|
onClick={() => setData('job_type', type)}
|
|
className={`py-3 text-[10px] font-black rounded-xl border transition-all ${
|
|
data.job_type === type
|
|
? 'bg-[#185FA5] text-white border-[#185FA5] shadow-md shadow-blue-500/20'
|
|
: 'bg-white text-slate-400 border-slate-100 hover:border-slate-300'
|
|
}`}
|
|
>
|
|
{type.toUpperCase()}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 2: Detailed Requirements */}
|
|
<div className="space-y-6">
|
|
<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" />
|
|
Detailed Requirements
|
|
</h3>
|
|
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Skills (Select from list)</label>
|
|
<div className="space-y-3">
|
|
<div className="relative">
|
|
<Briefcase className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<select
|
|
className={`w-full pl-11 pr-10 py-3 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all appearance-none cursor-pointer ${
|
|
(clientErrors.skills || errors.skills) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value=""
|
|
onChange={e => {
|
|
const val = e.target.value;
|
|
if (val && !data.skills.includes(val)) {
|
|
setData('skills', [...data.skills, val]);
|
|
}
|
|
}}
|
|
>
|
|
<option value="">Choose skills to add...</option>
|
|
{skillList.filter(s => !data.skills.includes(s.name)).map(skill => (
|
|
<option key={skill.id} value={skill.name}>{skill.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Selected skills pills */}
|
|
{data.skills.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 p-3 bg-slate-50 rounded-2xl border border-slate-100">
|
|
{data.skills.map(skill => (
|
|
<span
|
|
key={skill}
|
|
className="inline-flex items-center space-x-1.5 px-3 py-1.5 bg-[#185FA5] text-white rounded-xl text-xs font-black uppercase tracking-wider shadow-xs"
|
|
>
|
|
<span>{skill}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setData('skills', data.skills.filter(s => s !== skill))}
|
|
className="hover:bg-blue-700/50 p-0.5 rounded-full transition-colors"
|
|
>
|
|
<X className="w-3.5 h-3.5 text-white" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{(clientErrors.skills || errors.skills) && (
|
|
<p className="text-xs font-bold text-red-500 mt-1 ml-1">{clientErrors.skills || errors.skills}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Job Description</label>
|
|
<textarea
|
|
placeholder="Briefly describe the responsibilities..."
|
|
maxLength={300}
|
|
className={`w-full px-5 py-4 bg-slate-50 border rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all min-h-[100px] resize-none ${
|
|
(clientErrors.description || errors.description) ? 'border-red-500 bg-red-50/20' : 'border-slate-100'
|
|
}`}
|
|
value={data.description}
|
|
onChange={e => setData('description', e.target.value)}
|
|
/>
|
|
<div className="flex justify-between items-center px-1">
|
|
{(clientErrors.description || errors.description) ? (
|
|
<p className="text-xs font-bold text-red-500">{clientErrors.description || errors.description}</p>
|
|
) : <div />}
|
|
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
{data.description.length} / 300 Characters
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<div className="pt-6 border-t border-slate-100">
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full bg-[#185FA5] text-white py-5 rounded-2xl font-black text-sm uppercase tracking-widest shadow-xl shadow-blue-500/20 hover:bg-[#144f8a] active:scale-[0.98] transition-all flex items-center justify-center space-x-3"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
<span>Post Job Now</span>
|
|
</button>
|
|
<p className="text-center text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-4 flex items-center justify-center space-x-2">
|
|
<ShieldCheck className="w-3.5 h-3.5 text-emerald-500" />
|
|
<span>All job posts are reviewed for compliance with UAE Labor Laws</span>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|