259 lines
16 KiB
JavaScript
259 lines
16 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,
|
|
Calendar,
|
|
LayoutGrid,
|
|
Users,
|
|
FileText,
|
|
Sparkles,
|
|
ShieldCheck
|
|
} from 'lucide-react';
|
|
|
|
export default function Create({ categories: initialCategories }) {
|
|
const categories = initialCategories || [
|
|
'Electrician', 'Mason', 'Plumber', 'Cleaner', 'Site Supervisor', 'Driver', 'General Helper'
|
|
];
|
|
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
title: '',
|
|
category: '',
|
|
workers_needed: 1,
|
|
location: '',
|
|
salary: '',
|
|
job_type: 'Full Time',
|
|
start_date: '',
|
|
description: '',
|
|
requirements: ''
|
|
});
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post('/employer/jobs/create');
|
|
};
|
|
|
|
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">
|
|
<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 border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={data.title}
|
|
onChange={e => setData('title', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Worker Category</label>
|
|
<div className="relative">
|
|
<LayoutGrid 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-4 py-3 bg-slate-50 border border-slate-100 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"
|
|
value={data.category}
|
|
onChange={e => setData('category', e.target.value)}
|
|
required
|
|
>
|
|
<option value="">Select Category</option>
|
|
{categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<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 border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={data.workers_needed}
|
|
onChange={e => setData('workers_needed', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Job Type</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{['Full Time', 'Part Time', 'Contract'].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: Logistics & Pay */}
|
|
<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" />
|
|
Logistics & Compensation
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="space-y-2">
|
|
<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 border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={data.location}
|
|
onChange={e => setData('location', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<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 border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={data.salary}
|
|
onChange={e => setData('salary', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Start Date</label>
|
|
<div className="relative">
|
|
<Calendar className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="date"
|
|
className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={data.start_date}
|
|
onChange={e => setData('start_date', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 3: Details */}
|
|
<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">Job Description</label>
|
|
<textarea
|
|
placeholder="Briefly describe the responsibilities..."
|
|
maxLength={300}
|
|
className="w-full px-5 py-4 bg-slate-50 border border-slate-100 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"
|
|
value={data.description}
|
|
onChange={e => setData('description', e.target.value)}
|
|
/>
|
|
<div className="text-right text-[10px] font-bold text-slate-400 uppercase tracking-widest pr-2">
|
|
{data.description.length} / 300 Characters
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Special Requirements (Optional)</label>
|
|
<div className="relative">
|
|
<FileText className="absolute left-4 top-5 w-4 h-4 text-slate-400" />
|
|
<textarea
|
|
placeholder="e.g. Must speak Arabic, 5+ years experience, transferable visa..."
|
|
className="w-full pl-11 pr-4 py-4 bg-slate-50 border border-slate-100 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"
|
|
value={data.requirements}
|
|
onChange={e => setData('requirements', e.target.value)}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|