90 lines
4.9 KiB
JavaScript
90 lines
4.9 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import {
|
|
Bookmark,
|
|
MessageSquare,
|
|
Calendar,
|
|
CreditCard,
|
|
ArrowRight,
|
|
TrendingUp,
|
|
Users
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerHome() {
|
|
const stats = [
|
|
{ label: 'Shortlisted', value: 4, icon: Bookmark, color: 'bg-blue-50 text-blue-600' },
|
|
{ label: 'Messages Sent', value: 18, icon: MessageSquare, color: 'bg-emerald-50 text-emerald-600' },
|
|
{ label: 'Days Remaining', value: 24, icon: Calendar, color: 'bg-amber-50 text-amber-500' },
|
|
{ label: 'Total Hires', value: 12, icon: Users, color: 'bg-indigo-50 text-indigo-600' },
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="Dashboard" />
|
|
|
|
<div className="p-6 space-y-8">
|
|
{/* Welcome Section */}
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h1>
|
|
<p className="text-sm text-slate-500 font-medium">Welcome back, John Doe</p>
|
|
</div>
|
|
|
|
{/* Plan Status Card */}
|
|
<div className="bg-[#141B34] rounded-[32px] p-8 text-white relative overflow-hidden shadow-2xl">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl" />
|
|
<div className="space-y-6 relative z-10">
|
|
<div className="inline-flex items-center space-x-2 bg-white/10 px-3 py-1.5 rounded-full border border-white/10 text-[10px] font-bold uppercase tracking-widest">
|
|
<div className="w-1.5 h-1.5 bg-emerald-400 rounded-full" />
|
|
<span>Premium Employer Pass</span>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h2 className="text-3xl font-bold">24 Days</h2>
|
|
<p className="text-slate-400 text-xs font-medium uppercase tracking-widest">Remaining in your plan</p>
|
|
</div>
|
|
<Link href="/mobile/employer/subscription" className="w-full h-14 bg-white text-[#141B34] rounded-2xl font-bold flex items-center justify-center space-x-2 shadow-xl active:scale-[0.98] transition-all text-xs uppercase tracking-widest">
|
|
<span>Upgrade Plan</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Stacked */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Key Statistics</h3>
|
|
<div className="space-y-3">
|
|
{stats.map((stat, i) => (
|
|
<div key={i} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${stat.color}`}>
|
|
<stat.icon className="w-6 h-6" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{stat.label}</div>
|
|
<div className="text-xl font-bold text-slate-900">{stat.value}</div>
|
|
</div>
|
|
</div>
|
|
<TrendingUp className="w-5 h-5 text-emerald-500 opacity-20" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Placeholder for Analytics Chart (Full Width) */}
|
|
<div className="space-y-4 pb-10">
|
|
<h3 className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Recruitment Analytics</h3>
|
|
<div className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm h-64 flex flex-col items-center justify-center text-center space-y-4">
|
|
<div className="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center text-slate-200">
|
|
<TrendingUp className="w-8 h-8" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-bold text-slate-900">Activity Chart</p>
|
|
<p className="text-xs text-slate-400 font-medium">Visualizing your hiring trends over 30 days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|