119 lines
8.0 KiB
JavaScript
119 lines
8.0 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';
|
|
import { useTranslation } from '../../../lib/LanguageContext';
|
|
|
|
export default function Index({ conversations }) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<EmployerLayout title={t('candidate_messages', 'Candidate Messages')}>
|
|
<Head title={t('messages_employer_portal', '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={t('search_conversations_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>{t('new_conversation', '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">{t('active_threads', '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">
|
|
{t('total_count', '{count} Total').replace('{count}', conversations?.length || 0)}
|
|
</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">{t('no_active_messages', 'No active messages')}</div>
|
|
<p className="text-sm text-slate-500 max-w-sm mx-auto leading-relaxed">
|
|
{t('no_active_messages_desc', '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"
|
|
>
|
|
{t('find_workers', 'Find Workers')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|