300 lines
17 KiB
JavaScript
300 lines
17 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
LayoutDashboard,
|
|
Search,
|
|
Bookmark,
|
|
MessageSquare,
|
|
CreditCard,
|
|
User,
|
|
LogOut,
|
|
Bell,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
ArrowRight,
|
|
UserCheck,
|
|
Megaphone,
|
|
Briefcase
|
|
} from 'lucide-react';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
export default function EmployerLayout({ children, title, fullPage = false }) {
|
|
const { url, props } = usePage();
|
|
const { auth, unread_messages_count, flash } = props;
|
|
|
|
useEffect(() => {
|
|
if (flash?.success) {
|
|
toast.success(flash.success);
|
|
}
|
|
if (flash?.error) {
|
|
toast.error(flash.error);
|
|
}
|
|
if (flash?.first_login) {
|
|
// Elegant first login celebratory alert
|
|
toast.success('🎉 Welcome to Marketplace!', {
|
|
description: 'Your employer profile is verified and active with 30 days of Premium Access.',
|
|
duration: 6000,
|
|
});
|
|
}
|
|
}, [flash]);
|
|
|
|
const user = auth?.user || {
|
|
name: 'John Doe',
|
|
company_name: 'Al Mansoor Household',
|
|
email: 'employer@example.com',
|
|
subscription_status: 'active',
|
|
subscription_expires_at: '2026-12-31',
|
|
};
|
|
|
|
const isSubActive = user.subscription_status === 'active';
|
|
|
|
const navItems = [
|
|
{ name: 'Dashboard', href: '/employer/dashboard', icon: LayoutDashboard },
|
|
{ name: 'Find Workers', href: '/employer/workers', icon: Search },
|
|
{ name: 'My Jobs', href: '/employer/jobs', icon: Briefcase },
|
|
{ name: 'Shortlist', href: '/employer/shortlist', icon: Bookmark },
|
|
{ name: 'Candidates', href: '/employer/candidates', icon: UserCheck },
|
|
{ name: 'Messages', href: '/employer/messages', icon: MessageSquare, badge: unread_messages_count },
|
|
{ name: 'Announcements', href: '/employer/announcements', icon: Megaphone },
|
|
{ name: 'Subscription', href: '/employer/subscription', icon: CreditCard },
|
|
{ name: 'My Profile', href: '/employer/profile', icon: User },
|
|
];
|
|
|
|
const mobileTabs = [
|
|
{ name: 'Search', href: '/employer/workers', icon: Search },
|
|
{ name: 'Shortlist', href: '/employer/shortlist', icon: Bookmark },
|
|
{ name: 'Candidates', href: '/employer/candidates', icon: UserCheck },
|
|
{ name: 'Messages', href: '/employer/messages', icon: MessageSquare, badge: unread_messages_count },
|
|
{ name: 'Profile', href: '/employer/profile', icon: User },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-slate-50 font-sans select-none">
|
|
{/* Top Subscription Gate Banner */}
|
|
{!isSubActive && !fullPage && (
|
|
<div className="bg-[#185FA5] text-white px-4 py-2.5 text-xs sm:text-sm font-medium flex items-center justify-between shadow-sm z-50">
|
|
<div className="flex items-center space-x-2 truncate">
|
|
<AlertCircle className="w-4 h-4 text-amber-300 flex-shrink-0 animate-bounce" />
|
|
<span className="truncate">You need an active subscription to contact workers.</span>
|
|
</div>
|
|
<Link
|
|
href="/employer/subscription"
|
|
className="bg-white text-[#185FA5] hover:bg-slate-100 px-3 py-1 rounded-lg text-xs font-bold transition-colors inline-flex items-center space-x-1 flex-shrink-0 shadow-sm"
|
|
>
|
|
<span>Subscribe now</span>
|
|
<ArrowRight className="w-3 h-3" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Header Navbar */}
|
|
{!fullPage && (
|
|
<header className="lg:hidden sticky top-0 z-40 bg-white border-b border-slate-200 px-4 h-14 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2.5">
|
|
<div className="w-8 h-8 bg-[#185FA5] text-white rounded-lg flex items-center justify-center font-bold text-base shadow-sm">
|
|
M
|
|
</div>
|
|
<span className="font-bold text-lg text-slate-800 tracking-tight truncate">Employer Portal</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3">
|
|
<Link href="/employer/messages" className="relative p-2 text-slate-600 hover:bg-slate-100 rounded-lg">
|
|
<Bell className="w-5 h-5" />
|
|
{unread_messages_count > 0 && (
|
|
<span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full animate-ping" />
|
|
)}
|
|
</Link>
|
|
|
|
<div className="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center font-bold text-xs text-[#185FA5]">
|
|
{user.name.charAt(0)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)}
|
|
|
|
<div className="flex flex-1 flex-col lg:flex-row h-screen overflow-hidden">
|
|
{/* Desktop Sidebar (lg+) */}
|
|
<aside className="hidden lg:flex w-64 bg-white border-r border-slate-200 flex-col justify-between flex-shrink-0 sticky top-0 h-screen">
|
|
<div>
|
|
{/* Top Section */}
|
|
<div className="p-6 border-b border-slate-100 space-y-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-[#185FA5] text-white rounded-xl flex items-center justify-center font-bold text-xl shadow-md">
|
|
M
|
|
</div>
|
|
<span className="font-bold text-xl text-slate-800 tracking-tight">Employer Portal</span>
|
|
</div>
|
|
|
|
{/* Subscription Status Pill */}
|
|
<Link href="/employer/subscription" className="block">
|
|
{isSubActive ? (
|
|
<div className="flex items-center justify-between px-3 py-1.5 bg-emerald-50 border border-emerald-200 rounded-lg text-xs font-semibold text-emerald-700 hover:bg-emerald-100 transition-colors">
|
|
<div className="flex items-center space-x-1.5 truncate">
|
|
<CheckCircle className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" />
|
|
<span className="truncate">Active until {user.subscription_expires_at || 'Dec 31'}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between px-3 py-1.5 bg-red-50 border border-red-200 rounded-lg text-xs font-semibold text-red-700 hover:bg-red-100 transition-colors">
|
|
<div className="flex items-center space-x-1.5 truncate">
|
|
<AlertCircle className="w-3.5 h-3.5 text-red-600 flex-shrink-0" />
|
|
<span className="truncate">Expired — Renew now</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation Items */}
|
|
<nav className="p-4 space-y-1">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = url.startsWith(item.href);
|
|
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`flex items-center justify-between px-4 py-3 rounded-xl text-sm transition-all duration-200 group ${
|
|
isActive
|
|
? 'bg-[#185FA5] text-white font-bold shadow-lg shadow-blue-900/20 scale-[1.02]'
|
|
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Icon className={`w-5 h-5 transition-colors ${isActive ? 'text-white' : 'text-slate-400 group-hover:text-slate-900'}`} />
|
|
<span className="tracking-tight">{item.name}</span>
|
|
</div>
|
|
|
|
{item.badge > 0 && (
|
|
<span className={`text-[10px] font-black px-2 py-0.5 rounded-full ${isActive ? 'bg-white text-[#185FA5]' : 'bg-[#185FA5] text-white'}`}>
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 flex flex-col min-w-0 h-screen relative overflow-hidden bg-[#FAFBFF]">
|
|
{/* Top Desktop Header */}
|
|
{!fullPage && (
|
|
<header className="hidden lg:flex h-16 bg-white border-b border-slate-200 items-center justify-between px-8 shrink-0 sticky top-0 z-30 shadow-sm">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="text-xs font-bold text-slate-400 uppercase tracking-widest">
|
|
{title || 'Overview'}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-6">
|
|
{/* Language Switcher */}
|
|
<div className="flex items-center bg-slate-50 border border-slate-200 rounded-xl p-1">
|
|
<button className="px-3 py-1 text-[10px] font-black bg-white text-[#185FA5] rounded-lg shadow-sm border border-slate-100">EN</button>
|
|
<button className="px-3 py-1 text-[10px] font-black text-slate-400 hover:text-slate-600">AR</button>
|
|
</div>
|
|
|
|
{/* Chat/Notifications */}
|
|
<Link href="/employer/messages" className="relative p-2.5 text-slate-500 hover:text-[#185FA5] hover:bg-blue-50 rounded-xl transition-all group">
|
|
<MessageSquare className="w-5 h-5" />
|
|
<span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white group-hover:scale-110 transition-transform" />
|
|
</Link>
|
|
|
|
{/* Profile Section with Dropdown */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="flex items-center space-x-3 pl-6 border-l border-slate-200 group outline-none">
|
|
<div className="text-right hidden sm:block">
|
|
<div className="text-xs font-black text-slate-900 group-hover:text-[#185FA5] transition-colors">{user.name}</div>
|
|
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Employer Account</div>
|
|
</div>
|
|
<div className="w-10 h-10 rounded-xl bg-blue-100 text-[#185FA5] flex items-center justify-center font-black text-xs border border-blue-200 shadow-sm transition-transform group-hover:scale-105">
|
|
{user.name.charAt(0)}
|
|
</div>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56 mt-2">
|
|
<DropdownMenuLabel className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 py-1.5">My Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/employer/profile" className="flex items-center space-x-2 text-xs font-bold text-slate-600 cursor-pointer">
|
|
<User className="w-4 h-4" />
|
|
<span>Profile Settings</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/employer/subscription" className="flex items-center space-x-2 text-xs font-bold text-slate-600 cursor-pointer">
|
|
<CreditCard className="w-4 h-4" />
|
|
<span>Subscription</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={route('employer.logout')}
|
|
method="post"
|
|
as="button"
|
|
className="w-full flex items-center space-x-2 text-xs font-bold text-rose-600 cursor-pointer"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
<span>Sign Out</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</header>
|
|
)}
|
|
|
|
<div className={`flex-1 overflow-y-auto ${fullPage ? 'p-0' : 'p-4 sm:p-8 pb-24 lg:pb-8'}`}>
|
|
{title && !fullPage && (
|
|
<h1 className="text-2xl font-black text-slate-900 mb-6 tracking-tight lg:hidden">{title}</h1>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Mobile Bottom Tab Bar */}
|
|
{!fullPage && (
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 h-16 px-4 flex items-center justify-around z-40">
|
|
{mobileTabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = url.startsWith(tab.href);
|
|
|
|
return (
|
|
<Link
|
|
key={tab.name}
|
|
href={tab.href}
|
|
className={`flex flex-col items-center justify-center space-y-1 w-16 h-full ${
|
|
isActive ? 'text-[#185FA5]' : 'text-slate-400 hover:text-slate-600'
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<Icon className="w-5 h-5" />
|
|
{tab.badge > 0 && (
|
|
<span className="absolute -top-1 -right-2 w-3.5 h-3.5 bg-red-500 text-white rounded-full flex items-center justify-center text-[8px] font-bold">
|
|
{tab.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-[10px] font-bold">{tab.name}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|