160 lines
9.7 KiB
JavaScript
160 lines
9.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import EmployerLayout from '@/Layouts/EmployerLayout';
|
|
import {
|
|
ArrowLeft,
|
|
Calendar,
|
|
MapPin,
|
|
DollarSign,
|
|
Send,
|
|
CheckCircle2,
|
|
ShieldCheck,
|
|
Clock
|
|
} from 'lucide-react';
|
|
|
|
export default function Confirm({ worker }) {
|
|
const [startDate, setStartDate] = useState('');
|
|
const [location, setLocation] = useState('');
|
|
const [offeredSalary, setOfferedSalary] = useState(worker.salary);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
// Perform a real POST submission to create the Job Offer in DB
|
|
router.post(`/employer/workers/${worker.id}/hire`, {
|
|
work_date: startDate,
|
|
location: location,
|
|
salary: offeredSalary,
|
|
notes: 'Hiring offer dispatched from employer panel.'
|
|
});
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title="Confirm Hire">
|
|
<Head title={`Hire ${worker.name}`} />
|
|
|
|
<div className="max-w-3xl mx-auto space-y-6 pb-12">
|
|
<Link
|
|
href={`/employer/workers/${worker.id}`}
|
|
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 Profile</span>
|
|
</Link>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Worker Summary Card */}
|
|
<div className="lg:col-span-1 space-y-6">
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div className="bg-slate-50 p-6 border-b border-slate-100 flex flex-col items-center text-center">
|
|
<div className="w-20 h-20 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-3xl border-4 border-white shadow-sm mb-3">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<h3 className="font-extrabold text-slate-900 tracking-tight">{worker.name}</h3>
|
|
<p className="text-xs font-bold text-[#185FA5] uppercase tracking-widest mt-1">{worker.category}</p>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
<div className="flex items-center justify-between text-xs font-medium">
|
|
<span className="text-slate-500 uppercase tracking-tighter">Expected Salary</span>
|
|
<span className="text-slate-900 font-bold">{worker.salary} AED</span>
|
|
</div>
|
|
<div className="flex items-center justify-between text-xs font-medium">
|
|
<span className="text-slate-500 uppercase tracking-tighter">Nationality</span>
|
|
<span className="text-slate-900 font-bold">{worker.nationality}</span>
|
|
</div>
|
|
<div className="pt-4 border-t border-slate-50">
|
|
<div className="flex items-center space-x-2 text-[10px] text-emerald-600 font-bold uppercase">
|
|
<ShieldCheck className="w-3.5 h-3.5" />
|
|
<span>Documents Verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Offer Form */}
|
|
<div className="lg:col-span-2">
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-full flex flex-col">
|
|
<div className="p-6 border-b border-slate-100 bg-white">
|
|
<h2 className="text-lg font-black text-slate-900 tracking-tight">Step 1: Customize Your Offer</h2>
|
|
<p className="text-xs text-slate-500 font-medium mt-1 uppercase tracking-widest">Enter the employment details below</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="p-8 space-y-6 flex-1">
|
|
<div className="space-y-4">
|
|
{/* Start Date */}
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
<span>Requested Start Date</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* Location */}
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
|
|
<MapPin className="w-3.5 h-3.5" />
|
|
<span>Job Location</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="e.g. Dubai Marina, Villa 12"
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
/>
|
|
</div>
|
|
|
|
{/* Salary */}
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
|
|
<DollarSign className="w-3.5 h-3.5" />
|
|
<span>Offered Salary (AED / month)</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="number"
|
|
required
|
|
value={offeredSalary}
|
|
onChange={(e) => setOfferedSalary(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
/>
|
|
<div className="absolute left-4 top-1/2 -translate-y-1/2 font-bold text-slate-400">
|
|
$
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-slate-50 space-y-4">
|
|
<div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex items-start space-x-3">
|
|
<Clock className="w-5 h-5 text-[#185FA5] flex-shrink-0 mt-0.5" />
|
|
<p className="text-[11px] text-[#185FA5] font-bold leading-relaxed uppercase tracking-tight">
|
|
Once you send this offer, the worker will be notified immediately. You can track the status in your Hired Workers page.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#185FA5] text-white py-4 rounded-xl 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"
|
|
>
|
|
<Send className="w-5 h-5" />
|
|
<span>Send Offer to {worker.name}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|