116 lines
7.7 KiB
JavaScript
116 lines
7.7 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '../../../Layouts/EmployerLayout';
|
|
import { MessageSquare, CheckCircle2, ChevronRight, Search, Plus } from 'lucide-react';
|
|
|
|
export default function Index({ conversations }) {
|
|
return (
|
|
<EmployerLayout title="Candidate Messages">
|
|
<Head title="Messages - Employer Portal" />
|
|
|
|
<div className="max-w-5xl mx-auto space-y-6 select-none">
|
|
{/* Header Actions */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search conversations..."
|
|
className="w-full pl-10 pr-4 py-2.5 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] shadow-sm transition-all bg-white/80 backdrop-blur-sm"
|
|
/>
|
|
</div>
|
|
<Link
|
|
href="/employer/workers"
|
|
className="bg-white hover:bg-slate-50 border border-slate-200 text-[#185FA5] px-4 py-2.5 rounded-2xl text-sm font-bold shadow-sm transition-all flex items-center justify-center space-x-2 whitespace-nowrap"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>New Conversation</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="bg-white/80 backdrop-blur-xl rounded-3xl border border-slate-200 shadow-xl shadow-blue-900/5 overflow-hidden">
|
|
<div className="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
|
<div className="flex items-center space-x-2">
|
|
<MessageSquare className="w-5 h-5 text-[#185FA5]" />
|
|
<h2 className="font-extrabold text-lg text-slate-800 tracking-tight">Active Threads</h2>
|
|
</div>
|
|
<span className="px-3 py-1 bg-white border border-slate-200 rounded-full text-xs text-slate-600 font-bold shadow-sm">
|
|
{conversations?.length || 0} Total
|
|
</span>
|
|
</div>
|
|
|
|
{conversations?.length > 0 ? (
|
|
<div className="divide-y divide-slate-100/80">
|
|
{conversations.map((thread) => (
|
|
<Link
|
|
key={thread.id}
|
|
href={`/employer/messages/${thread.id}`}
|
|
className={`flex items-center space-x-4 p-5 sm:p-6 transition-all duration-300 group hover:bg-slate-50/80 ${
|
|
thread.unread ? 'bg-blue-50/30' : 'bg-white'
|
|
}`}
|
|
>
|
|
<div className="relative flex-shrink-0">
|
|
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#185FA5] to-blue-400 text-white flex items-center justify-center font-bold text-xl shadow-md group-hover:scale-105 transition-transform duration-300">
|
|
{thread.worker_name.charAt(0)}
|
|
</div>
|
|
{thread.online && (
|
|
<span className="absolute -bottom-1 -right-1 w-3.5 h-3.5 bg-emerald-400 border-2 border-white rounded-full shadow-sm animate-pulse" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0 pr-4">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="flex items-center space-x-2 font-bold text-base text-slate-900 group-hover:text-[#185FA5] transition-colors truncate">
|
|
<span>{thread.worker_name}</span>
|
|
<span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded-md text-[10px] font-bold uppercase tracking-wider hidden sm:inline-block">
|
|
{thread.category}
|
|
</span>
|
|
</div>
|
|
<span className={`text-xs font-semibold whitespace-nowrap ${thread.unread ? 'text-[#185FA5]' : 'text-slate-400'}`}>
|
|
{thread.sent_at}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<p className={`text-sm truncate flex-1 ${thread.unread ? 'font-semibold text-slate-800' : 'text-slate-500'}`}>
|
|
{thread.last_message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center justify-center space-y-2 flex-shrink-0">
|
|
{thread.unread ? (
|
|
<span className="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shadow-sm shadow-red-500/50" />
|
|
) : (
|
|
<span className="w-2.5 h-2.5 opacity-0" />
|
|
)}
|
|
<div className="w-8 h-8 rounded-full bg-slate-50 group-hover:bg-[#185FA5] flex items-center justify-center transition-colors shadow-sm">
|
|
<ChevronRight className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20 space-y-4 bg-slate-50/30">
|
|
<div className="w-16 h-16 bg-white rounded-3xl shadow-sm border border-slate-100 flex items-center justify-center mx-auto mb-2">
|
|
<MessageSquare className="w-8 h-8 text-slate-300" />
|
|
</div>
|
|
<div className="text-lg font-extrabold text-slate-800">No active messages</div>
|
|
<p className="text-sm text-slate-500 max-w-sm mx-auto leading-relaxed">
|
|
When you message workers or schedule interviews, your conversation threads will appear here.
|
|
</p>
|
|
<Link
|
|
href="/employer/workers"
|
|
className="inline-block mt-4 bg-[#185FA5] text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-md shadow-blue-900/20 hover:-translate-y-0.5 active:translate-y-0 transition-all"
|
|
>
|
|
Find Workers
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|