import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import {
Bookmark,
MessageSquare,
CalendarDays,
CreditCard,
Search,
ArrowRight,
CheckCircle2,
Info,
Clock,
ChevronRight,
UserCircle2
} from 'lucide-react';
export default function Dashboard({ employer, stats, shortlisted_workers, recent_messages, announcements }) {
return (
{/* Section 1: Welcome Banner */}
Subscription Active
|
{stats.days_remaining} days left
Good morning, {employer.name}
Welcome to your employer control center. You have {stats.days_remaining} days remaining on your {employer.plan_name}.
{/* Section 2: Stat Cards */}
{/* Shortlisted */}
{stats.shortlisted_count}
Workers Shortlisted
{/* Messages Sent */}
{stats.messages_sent}
Messages Sent
{/* Days Remaining */}
{stats.days_remaining}
Days Remaining
{/* Plan Name */}
{employer.plan_name}
Current Plan
{/* Main Content Column (Col 8) */}
{/* Section 3: My Shortlist */}
{shortlisted_workers?.length > 0 ? (
{shortlisted_workers.map((worker) => (
{worker.name.charAt(0)}
{worker.name}
{worker.verified && }
{worker.nationality}
Top Skill:
{worker.skills[0] || 'General Work'}
Availability:
{worker.availability}
))}
) : (
Shortlist workers to see them here
)}
{/* Section 4: Recent Messages */}
Recent Messages
View all messages
{recent_messages?.map((msg) => (
{msg.worker_name.charAt(0)}
{msg.worker_name}
{msg.sent_at}
{msg.unread && }
{msg.last_message}
))}
{/* Right Column (Col 4) */}
{/* Section 5: Announcements */}
Announcements
{announcements?.map((ann) => (
System Alert
{ann.created_at}
{ann.title}
{ann.body}
))}
);
}