Back to My Jobs

Post a New Job

Fill in the details to find the perfect workers

Premium Listing Active

{/* Section 1: Basic Info */}

Basic Information

Job Title

setData('title', e.target.value)} />

{(clientErrors.title || errors.title) && (

{clientErrors.title || errors.title}

)}

Workers Needed

setData('workers_needed', e.target.value)} />

{(clientErrors.workers_needed || errors.workers_needed) && (

{clientErrors.workers_needed || errors.workers_needed}

)}

Job Type

{['Full Time', 'Part Time', 'Contract'].map(type => ( ))}

{/* Section 2: Logistics & Pay */}

Logistics & Compensation

Job Location

setData('location', e.target.value)} />

{(clientErrors.location || errors.location) && (

{clientErrors.location || errors.location}

)}

Salary (AED / mo)

setData('salary', e.target.value)} />

{(clientErrors.salary || errors.salary) && (

{clientErrors.salary || errors.salary}

)}

Start Date

setData('start_date', e.target.value)} />

{(clientErrors.start_date || errors.start_date) && (

{clientErrors.start_date || errors.start_date}

)}

{/* Section 3: Details */}

Detailed Requirements

Job Description

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 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>
    );
}