472 lines
34 KiB
JavaScript
472 lines
34 KiB
JavaScript
import React from 'react';
|
||
import { Head, Link } from '@inertiajs/react';
|
||
import EmployerLayout from '../../Layouts/EmployerLayout';
|
||
import { useTranslation } from '../../lib/LanguageContext';
|
||
import {
|
||
Bookmark,
|
||
MessageSquare,
|
||
CalendarDays,
|
||
CreditCard,
|
||
Search,
|
||
ArrowRight,
|
||
Heart,
|
||
CheckCircle2,
|
||
Info,
|
||
Clock,
|
||
ChevronRight,
|
||
UserCircle2,
|
||
Plus,
|
||
Activity,
|
||
TrendingUp,
|
||
ShieldCheck,
|
||
AlertTriangle,
|
||
Star,
|
||
Send,
|
||
HelpCircle,
|
||
UserCheck,
|
||
Lock,
|
||
Users
|
||
} from 'lucide-react';
|
||
|
||
export default function Dashboard({
|
||
employer,
|
||
stats,
|
||
shortlisted_workers,
|
||
recent_messages,
|
||
announcements,
|
||
recommended_workers = [],
|
||
saved_searches = []
|
||
}) {
|
||
const isSubActive = employer.subscription_status === 'active';
|
||
const isExpiringSoon = stats.days_remaining <= 7;
|
||
const { t } = useTranslation();
|
||
|
||
return (
|
||
<EmployerLayout title={t('control_center', 'Sponsor Control Center')}>
|
||
<Head title={t('dashboard_title', 'Sponsor Dashboard - Verified UAE Domestic Workers')} />
|
||
|
||
<div className="space-y-8 pb-12">
|
||
{/* 1. Alerts & Warning Banners */}
|
||
{!isSubActive && (
|
||
<div className="bg-gradient-to-r from-rose-500/10 to-red-500/10 border border-rose-300 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between shadow-sm animate-pulse gap-4">
|
||
<div className="flex items-center space-x-4">
|
||
<div className="w-12 h-12 rounded-2xl bg-rose-500/15 flex items-center justify-center text-rose-600 flex-shrink-0">
|
||
<Lock className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-black text-sm text-slate-900">{t('expired_pass_title', 'Your Sponsor Subscription Pass Has Expired!')}</h4>
|
||
<p className="text-xs text-slate-500 font-bold mt-1">{t('expired_pass_desc', 'Direct communication, candidate dossiers, and messaging are locked. Renew your annual sponsor subscription now to resume hiring.')}</p>
|
||
</div>
|
||
</div>
|
||
<Link
|
||
href="/employer/subscription"
|
||
className="bg-rose-600 hover:bg-rose-700 text-white px-5 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all shadow-md shadow-rose-600/20 flex items-center space-x-1.5 shrink-0"
|
||
>
|
||
<span>{t('renew_sub', 'Renew Subscription')}</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Link>
|
||
</div>
|
||
)}
|
||
|
||
{isExpiringSoon && isSubActive && (
|
||
<div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-300 rounded-2xl p-4 flex items-center justify-between shadow-xs">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center text-amber-600 flex-shrink-0">
|
||
<AlertTriangle className="w-5 h-5 animate-pulse" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold text-sm text-slate-800">{t('expiring_pass_title', 'Your Premium Sponsor Pass is expiring soon!')}</h4>
|
||
<p className="text-xs text-slate-500 font-medium">
|
||
{t('expiring_pass_desc', 'Only {days} days left. Renew now to avoid losing contact access to 500+ verified candidates.').replace('{days}', stats.days_remaining)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<Link
|
||
href="/employer/subscription"
|
||
className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center space-x-1"
|
||
>
|
||
<span>{t('renew_now', 'Renew Now')}</span>
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
)}
|
||
|
||
{/* Welcome Banner */}
|
||
<div className="bg-gradient-to-br from-[#185FA5] via-[#104D89] to-blue-950 rounded-3xl p-6 sm:p-8 text-white shadow-md flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 relative overflow-hidden select-none border border-blue-800">
|
||
<div className="absolute -right-10 -bottom-10 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
|
||
<div className="absolute left-1/3 top-1/4 w-32 h-32 bg-sky-400/10 rounded-full blur-2xl pointer-events-none" />
|
||
|
||
<div className="space-y-4 z-10 max-w-2xl">
|
||
<div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold backdrop-blur-md border border-white/10">
|
||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||
<span>{t('sub_status', 'Subscription Status')}: <span className="text-emerald-300 font-bold uppercase">{employer.subscription_status}</span></span>
|
||
<span className="text-blue-300">|</span>
|
||
<span>{stats.days_remaining} {t('days_left', 'Days Left')}</span>
|
||
</div>
|
||
|
||
<h1 className="text-lg sm:text-xl md:text-2xl font-bold tracking-tight leading-tight text-blue-200">
|
||
{t('welcome_back', 'Welcome Back')}, <span className="text-white font-medium">{employer.name}</span>
|
||
</h1>
|
||
|
||
<p className="text-blue-100 text-sm leading-relaxed font-medium">
|
||
{t('welcome_desc_dash', 'Hire direct, MOHRE-compliant domestic workers with zero middleman commissions. Browse our updated database of candidates with OCR passport checks.')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="z-10 flex flex-wrap gap-3 flex-shrink-0">
|
||
<Link
|
||
href="/employer/workers"
|
||
className="bg-white text-[#185FA5] hover:bg-slate-100 px-6 py-3.5 rounded-xl font-bold text-xs shadow-md transition-all flex items-center justify-center space-x-2 group"
|
||
>
|
||
<Search className="w-4 h-4 text-[#185FA5] group-hover:scale-110 transition-transform" />
|
||
<span>{t('browse_workers', 'Browse 500+ Verified Workers')}</span>
|
||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. Top-level Stats & Analytics Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{/* Subscription Pass status card */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center flex-shrink-0 border border-blue-100 group-hover:scale-105 transition-transform">
|
||
<CreditCard className="w-6 h-6" />
|
||
</div>
|
||
<span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
|
||
ACTIVE BILLING
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('sponsor_pass_tier', 'Sponsor Pass Tier')}</div>
|
||
<div className="text-lg font-bold text-slate-800 mt-1">{employer.plan_name}</div>
|
||
<div className="text-[11px] text-slate-500 font-medium mt-1">{t('renews', 'Renews')}: {employer.subscription_expires_at}</div>
|
||
</div>
|
||
<Link href="/employer/subscription" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
|
||
<span>{t('manage_billing', 'Manage billing & invoices')}</span>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Hired Count Stat Card */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform">
|
||
<UserCheck className="w-5 h-5" />
|
||
</div>
|
||
<span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
|
||
HIRED SECURELY
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('total_hired_workers', 'Total Hired Workers')}</div>
|
||
<div className="text-3xl font-black text-slate-800 mt-1">{stats.hired_count}</div>
|
||
</div>
|
||
<Link href="/employer/candidates" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
|
||
<span>{t('track_active_staff', 'Track active staff')}</span>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Total Worker Profiles Card */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center flex-shrink-0 border border-blue-100 group-hover:scale-105 transition-transform">
|
||
<Users className="w-5 h-5" />
|
||
</div>
|
||
<span className="text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-0.5 rounded-md border border-blue-100">
|
||
PLATFORM SIZE
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('total_worker_profiles', 'Total Worker Profiles')}</div>
|
||
<div className="text-3xl font-black text-slate-800 mt-1">
|
||
{Math.max(3000, stats.total_worker_profiles).toLocaleString()}+
|
||
</div>
|
||
</div>
|
||
<Link href="/employer/workers" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
|
||
<span>{t('browse_all_workers', 'Browse all workers')}</span>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Avg Monthly Hires Card */}
|
||
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform">
|
||
<TrendingUp className="w-5 h-5" />
|
||
</div>
|
||
<span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
|
||
PERFORMANCE
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('avg_monthly_hires', 'Avg Monthly Hires')}</div>
|
||
<div className="text-3xl font-black text-slate-800 mt-1">
|
||
{Math.max(550, stats.avg_monthly_hires).toLocaleString()}+
|
||
</div>
|
||
</div>
|
||
<Link href="/employer/candidates" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
|
||
<span>{t('view_hired_list', 'View hired list')}</span>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 3. Analytics & Quick Action Section */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||
{/* Worker Activity Analytics Module (Col 12) */}
|
||
<div className="lg:col-span-12 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm space-y-6">
|
||
<div className="pb-3 border-b border-slate-100">
|
||
<div className="flex items-center space-x-2">
|
||
<Activity className="w-5 h-5 text-[#185FA5]" />
|
||
<h3 className="font-extrabold text-base text-slate-900">{t('discover_insights', 'Discover Insights & Market Stats')}</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{/* Dubai General Market Stats */}
|
||
<div className="space-y-3">
|
||
<div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t('dubai_insights', 'Dubai General Market Insights')}</div>
|
||
<div className="grid grid-cols-3 gap-4 text-center">
|
||
<div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
|
||
<div className="text-xl font-black text-slate-900">{stats.total_hired_all || 0}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('hired_dubai', 'Hired using app in Dubai')}</div>
|
||
</div>
|
||
<div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
|
||
<div className="text-xs font-black text-[#185FA5] uppercase leading-snug">{t('cooking_care', 'Cooking, Care, Driving')}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('top_skills', 'Top Skills Hired')}</div>
|
||
</div>
|
||
<div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
|
||
<div className="text-xl font-black text-emerald-600">{stats.total_active_workers || 0}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('active_candidates', 'Active Candidates')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Your own activity */}
|
||
<div className="space-y-3">
|
||
<div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t('sponsor_activity', 'Your Sponsor Activity Stats')}</div>
|
||
<div className="grid grid-cols-3 gap-4 text-center">
|
||
<div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
|
||
<div className="text-2xl font-black text-slate-800">{stats.contacted_workers_count || 0}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('workers_contacted', 'Workers Contacted')}</div>
|
||
</div>
|
||
<div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
|
||
<div className="text-2xl font-black text-slate-800">{stats.shortlisted_count}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('shortlist', 'Shortlist')}</div>
|
||
</div>
|
||
<div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
|
||
<div className="text-2xl font-black text-emerald-600">{stats.hired_count}</div>
|
||
<div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('secure_hires', 'Secure Hires')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 4. Detailed Workspace Rows (Col 12 Grid) */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||
{/* Left Column: Recommended Workers, Shortlist, Chats */}
|
||
<div className="lg:col-span-8 space-y-8">
|
||
|
||
{/* My Shortlist Module */}
|
||
<div className="bg-white rounded-3xl border border-slate-200 shadow-xs 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]" />
|
||
<h3 className="font-bold text-base text-slate-900">{t('active_shortlist', 'Active Shortlist')} ({shortlisted_workers.length})</h3>
|
||
</div>
|
||
<Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
|
||
<span>{t('view_book', 'View book')}</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-2xl p-4 border border-slate-200/70 flex-shrink-0 space-y-3 relative hover:border-[#185FA5] hover:bg-white transition-all">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-base 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>
|
||
|
||
</div>
|
||
<div className="text-[10px] text-slate-500 truncate font-semibold flex items-center gap-1.5 flex-wrap">
|
||
<span>{worker.nationality}</span>
|
||
{worker.main_profession && (
|
||
<span className="text-[8px] font-black uppercase text-[#185FA5] bg-blue-50/80 px-1 py-0.2 rounded border border-blue-100/50">
|
||
{worker.main_profession}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Link
|
||
href={`/employer/workers/${worker.id}`}
|
||
className="w-full mt-2 bg-white hover:bg-slate-50 text-[#185FA5] border border-slate-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center transition-colors"
|
||
>
|
||
{t('open_profile', 'Open Profile')}
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-center py-10 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 space-y-2">
|
||
<Bookmark className="w-8 h-8 text-slate-300 mx-auto" />
|
||
<div className="text-xs font-bold text-slate-500">{t('shortlist_candidates_desc', 'Shortlist candidates to compare their documents side-by-side')}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Recent Chats / Message Center */}
|
||
<div className="bg-white rounded-3xl border border-slate-200 shadow-xs 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]" />
|
||
<h3 className="font-bold text-base text-slate-900">{t('recent_chats', 'Recent Chats')}</h3>
|
||
</div>
|
||
<Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
|
||
<span>{t('all_channels', 'All channels')}</span>
|
||
<ChevronRight className="w-4 h-4" />
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="divide-y divide-slate-100">
|
||
{recent_messages?.length > 0 ? (
|
||
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-2xl transition-colors group"
|
||
>
|
||
<div className="w-10 h-10 rounded-xl 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-xs text-slate-800 group-hover:text-[#185FA5] transition-colors truncate flex items-center gap-1.5 flex-wrap">
|
||
<span>{msg.worker_name}</span>
|
||
{msg.worker_nationality && (
|
||
<span className="text-[9px] font-normal text-slate-500 bg-slate-100/80 px-1.5 py-0.5 rounded-md border border-slate-200/50">
|
||
{msg.worker_nationality}
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-[9px] font-semibold text-slate-400">{msg.sent_at}</span>
|
||
{msg.unread && (
|
||
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse border border-white" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-slate-600 truncate mt-1 font-medium">
|
||
{msg.sender_type === 'employer' ? (
|
||
<span className="text-slate-400 font-semibold">{t('you', 'You')}: </span>
|
||
) : (
|
||
<span className="text-[#185FA5] font-semibold">{msg.worker_name}: </span>
|
||
)}
|
||
{msg.last_message}
|
||
</p>
|
||
</div>
|
||
</Link>
|
||
))
|
||
) : (
|
||
<div className="text-center py-8 text-xs text-slate-400">
|
||
{t('no_chats', 'No recent chat logs found. Find workers to start conversing.')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column: Saved Searches, Announcements, Regulatory details */}
|
||
<div className="lg:col-span-4 space-y-8">
|
||
{/* Charity Events Module */}
|
||
<div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-2">
|
||
<Heart className="w-5 h-5 text-rose-500 fill-rose-500/20" />
|
||
<h3 className="font-extrabold text-base text-slate-900">{t('charity_drives', 'Community Charity Drives')}</h3>
|
||
</div>
|
||
<span className="text-[9px] font-black bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full uppercase tracking-wider">
|
||
{t('live_events', 'Live Events')}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{announcements?.map((ann) => (
|
||
<div key={ann.id} className="p-4 bg-rose-50/20 border border-rose-100/70 rounded-2xl space-y-3 relative group hover:border-rose-300 hover:bg-white transition-all">
|
||
<div className="flex items-center justify-between text-[9px] font-bold text-rose-600 uppercase tracking-wider">
|
||
<span>❤️ {t('charity_drive', 'Charity Drive')}</span>
|
||
<span>{ann.created_at}</span>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-black text-xs text-slate-900 tracking-tight group-hover:text-rose-600 transition-colors">{ann.title}</h4>
|
||
<p className="text-[11px] text-slate-500 font-medium leading-relaxed mt-1">{ann.body}</p>
|
||
</div>
|
||
|
||
{/* Metas */}
|
||
<div className="grid grid-cols-2 gap-2 text-[10px] bg-slate-50/60 p-2.5 rounded-xl border border-slate-100 font-bold text-slate-600">
|
||
<div className="flex items-center space-x-1 truncate">
|
||
<span>🎁</span>
|
||
<span className="truncate">{t('provided_items', 'Provided Items')}: {ann.provided_items}</span>
|
||
</div>
|
||
<div className="flex items-center space-x-1 truncate">
|
||
<span>📅</span>
|
||
<span className="truncate">{t('event_date', 'Event Date')}: {ann.event_date}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{ann.location_pin && (
|
||
<a
|
||
href={ann.location_pin}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="w-full bg-white hover:bg-rose-50 text-rose-600 border border-rose-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center space-x-1 transition-colors"
|
||
>
|
||
<span>📍 {t('open_maps', 'Open Google Maps Location Pin')}</span>
|
||
</a>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Direct Sponsorship Compliance card */}
|
||
<div className="bg-gradient-to-br from-indigo-950 to-blue-900 rounded-3xl p-6 text-white border border-indigo-900 shadow-sm relative overflow-hidden space-y-4">
|
||
<div className="absolute right-0 top-0 w-24 h-24 bg-white/5 rounded-full blur-xl pointer-events-none" />
|
||
<div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center border border-white/10 text-white">
|
||
<ShieldCheck className="w-6 h-6 text-emerald-400" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h4 className="font-bold text-sm tracking-tight text-white">{t('mohre_compliant', 'UAE Tadbeer & MOHRE Compliant')}</h4>
|
||
<p className="text-[11px] text-blue-200 leading-relaxed font-medium">
|
||
{t('mohre_desc', 'Our direct contract system aligns automatically with the Ministry of Human Resources and Emiratisation guidelines. Fully legal, zero agent fees, complete transparency.')}
|
||
</p>
|
||
</div>
|
||
<div className="pt-2">
|
||
<a
|
||
href="https://www.mohre.gov.ae/"
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-xs font-bold text-emerald-400 hover:text-emerald-300 flex items-center space-x-1"
|
||
>
|
||
<span>{t('visit_mohre', 'Visit MOHRE UAE website')}</span>
|
||
<ArrowRight className="w-3.5 h-3.5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</EmployerLayout>
|
||
);
|
||
}
|