234 lines
15 KiB
JavaScript
234 lines
15 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import {
|
|
Bookmark,
|
|
MessageSquare,
|
|
CalendarDays,
|
|
CreditCard,
|
|
Search,
|
|
ArrowRight,
|
|
CheckCircle2,
|
|
Info,
|
|
Clock,
|
|
ChevronRight,
|
|
UserCircle2
|
|
} from 'lucide-react';
|
|
|
|
export default function Dashboard({ employer, stats, shortlisted_workers, recent_messages, announcements }) {
|
|
return (
|
|
<EmployerLayout title="Employer Dashboard">
|
|
<Head title="Employer Dashboard - Marketplace Portal" />
|
|
|
|
<div className="space-y-8">
|
|
{/* Section 1: Welcome Banner */}
|
|
<div className="bg-gradient-to-r from-[#185FA5] to-blue-700 rounded-2xl p-6 sm:p-8 text-white shadow-sm flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 relative overflow-hidden select-none">
|
|
<div className="absolute -right-10 -bottom-10 w-48 h-48 bg-white/10 rounded-full blur-2xl pointer-events-none" />
|
|
|
|
<div className="space-y-3 z-10">
|
|
<div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold backdrop-blur-sm border border-white/10">
|
|
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
|
<span>Subscription Active</span>
|
|
<span className="text-blue-200">|</span>
|
|
<span>{stats.days_remaining} days left</span>
|
|
</div>
|
|
|
|
<h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
|
|
Good morning, {employer.name}
|
|
</h1>
|
|
|
|
<p className="text-blue-100 text-sm max-w-xl font-medium">
|
|
Welcome to your employer control center. You have {stats.days_remaining} days remaining on your {employer.plan_name}.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="z-10 flex-shrink-0">
|
|
<Link
|
|
href="/employer/workers"
|
|
className="bg-white text-[#185FA5] hover:bg-slate-100 px-6 py-3 rounded-xl font-bold text-sm shadow-md transition-all flex items-center justify-center space-x-2 group w-full sm:w-auto"
|
|
>
|
|
<Search className="w-4 h-4 text-[#185FA5] group-hover:scale-110 transition-transform" />
|
|
<span>Find Workers</span>
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 2: Stat Cards */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{/* Shortlisted */}
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
|
|
<div className="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0">
|
|
<Bookmark className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-slate-800">{stats.shortlisted_count}</div>
|
|
<div className="text-xs text-slate-500 font-medium">Workers Shortlisted</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages Sent */}
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
|
|
<div className="w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0">
|
|
<MessageSquare className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-slate-800">{stats.messages_sent}</div>
|
|
<div className="text-xs text-slate-500 font-medium">Messages Sent</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Days Remaining */}
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
|
stats.days_remaining < 7 ? 'bg-red-50 text-red-600' : 'bg-amber-50 text-amber-600'
|
|
}`}>
|
|
<CalendarDays className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className={`text-2xl font-bold ${stats.days_remaining < 7 ? 'text-red-600' : 'text-slate-800'}`}>
|
|
{stats.days_remaining}
|
|
</div>
|
|
<div className="text-xs text-slate-500 font-medium">Days Remaining</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Plan Name */}
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4">
|
|
<div className="w-12 h-12 rounded-xl bg-slate-100 text-slate-600 flex items-center justify-center flex-shrink-0">
|
|
<CreditCard className="w-6 h-6" />
|
|
</div>
|
|
<div className="truncate">
|
|
<div className="text-lg font-bold text-slate-800 truncate">{employer.plan_name}</div>
|
|
<div className="text-xs text-slate-500 font-medium">Current Plan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
|
{/* Main Content Column (Col 8) */}
|
|
<div className="lg:col-span-8 space-y-8">
|
|
{/* Section 3: My Shortlist */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<Bookmark className="w-5 h-5 text-[#185FA5]" />
|
|
<h2 className="text-lg font-bold text-slate-800">My Shortlist</h2>
|
|
</div>
|
|
<Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1">
|
|
<span>View all</span>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
|
|
{shortlisted_workers?.length > 0 ? (
|
|
<div className="flex space-x-4 overflow-x-auto pb-2 scrollbar-thin">
|
|
{shortlisted_workers.map((worker) => (
|
|
<div key={worker.id} className="w-56 bg-slate-50 rounded-xl p-4 border border-slate-200 flex-shrink-0 space-y-3">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-lg flex-shrink-0 border border-blue-200">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<div className="truncate">
|
|
<div className="font-bold text-sm text-slate-800 truncate flex items-center space-x-1">
|
|
<span>{worker.name}</span>
|
|
{worker.verified && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" />}
|
|
</div>
|
|
<div className="text-xs text-slate-500 truncate">{worker.nationality}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="text-[11px] font-semibold text-slate-500">Top Skill:</div>
|
|
<div className="inline-block px-2.5 py-1 bg-white border border-slate-200 rounded-lg text-xs font-medium text-slate-700">
|
|
{worker.skills[0] || 'General Work'}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-2 border-t border-slate-200 flex items-center justify-between text-xs">
|
|
<span className="text-slate-500 font-medium">Availability:</span>
|
|
<span className="font-bold text-[#185FA5] bg-blue-50 px-2 py-0.5 rounded border border-blue-100">
|
|
{worker.availability}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200 space-y-2">
|
|
<Bookmark className="w-8 h-8 text-slate-300 mx-auto" />
|
|
<div className="text-sm font-semibold text-slate-600">Shortlist workers to see them here</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Section 4: Recent Messages */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<MessageSquare className="w-5 h-5 text-[#185FA5]" />
|
|
<h2 className="text-lg font-bold text-slate-800">Recent Messages</h2>
|
|
</div>
|
|
<Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1">
|
|
<span>View all messages</span>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100">
|
|
{recent_messages?.map((msg) => (
|
|
<Link
|
|
key={msg.id}
|
|
href={`/employer/messages/${msg.id}`}
|
|
className="flex items-start space-x-4 py-4 hover:bg-slate-50 px-3 rounded-xl transition-colors group"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold text-sm flex-shrink-0 border border-blue-100">
|
|
{msg.worker_name.charAt(0)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="font-bold text-sm text-slate-800 group-hover:text-[#185FA5] transition-colors truncate">
|
|
{msg.worker_name}
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-[10px] font-medium text-slate-400">{msg.sent_at}</span>
|
|
{msg.unread && <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />}
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-slate-600 truncate mt-0.5">{msg.last_message}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column (Col 4) */}
|
|
<div className="lg:col-span-4 space-y-8">
|
|
{/* Section 5: Announcements */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6 space-y-6">
|
|
<div className="flex items-center space-x-2">
|
|
<Info className="w-5 h-5 text-[#185FA5]" />
|
|
<h2 className="text-lg font-bold text-slate-800">Announcements</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{announcements?.map((ann) => (
|
|
<div key={ann.id} className="p-4 bg-blue-50/70 border border-blue-100 rounded-xl space-y-2">
|
|
<div className="flex items-center justify-between text-[10px] font-bold text-blue-600 uppercase tracking-wider">
|
|
<span>System Alert</span>
|
|
<span>{ann.created_at}</span>
|
|
</div>
|
|
<h3 className="font-bold text-xs text-slate-900 tracking-tight">{ann.title}</h3>
|
|
<p className="text-xs text-slate-600 leading-relaxed">{ann.body}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|