Update src/app/admin/page.tsx
This commit is contained in:
@@ -2,54 +2,60 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import {
|
||||
Users,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Activity,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { BarChart3, Users, Briefcase, FileText, TrendingUp, LogOut } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "/admin" },
|
||||
{ name: "Jobs", id: "/admin#jobs" },
|
||||
{ name: "Users", id: "/admin#users" },
|
||||
{ name: "Moderation", id: "/admin#moderation" },
|
||||
{ name: "Analytics", id: "/admin#analytics" },
|
||||
{ name: "Search Jobs", id: "" },
|
||||
{ name: "Post a Job", id: "" },
|
||||
{ name: "Admin", id: "/admin" },
|
||||
{ name: "Browse", id: "" },
|
||||
{ name: "Contact", id: "" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Settings", href: "/admin#settings" },
|
||||
{ label: "Reports", href: "/admin#reports" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Help", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
type TabType = "jobs" | "applications" | "users" | "analytics";
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [activeTab, setActiveTab] = useState<TabType>("jobs");
|
||||
const [jobs] = useState([
|
||||
{ id: 1, title: "Senior Developer", company: "Tech Corp", status: "Active", applications: 12, posted: "2 days ago" },
|
||||
{ id: 2, title: "Product Manager", company: "Startup Inc", status: "Active", applications: 8, posted: "5 days ago" },
|
||||
{ id: 3, title: "Designer", company: "Creative Agency", status: "Inactive", applications: 5, posted: "10 days ago" },
|
||||
]);
|
||||
|
||||
const [applications] = useState([
|
||||
{ id: 1, candidate: "John Smith", position: "Senior Developer", status: "Under Review", appliedDate: "2025-01-20" },
|
||||
{ id: 2, candidate: "Sarah Johnson", position: "Product Manager", status: "Interview", appliedDate: "2025-01-19" },
|
||||
{ id: 3, candidate: "Mike Davis", position: "Senior Developer", status: "Rejected", appliedDate: "2025-01-18" },
|
||||
]);
|
||||
|
||||
const [users] = useState([
|
||||
{ id: 1, name: "Alice Chen", email: "alice@example.com", role: "Job Seeker", joined: "2025-01-10", status: "Active" },
|
||||
{ id: 2, name: "Bob Wilson", email: "bob@example.com", role: "Employer", joined: "2025-01-05", status: "Active" },
|
||||
{ id: 3, name: "Carol White", email: "carol@example.com", role: "Job Seeker", joined: "2024-12-20", status: "Inactive" },
|
||||
]);
|
||||
|
||||
const [analytics] = useState({
|
||||
totalJobs: 284,
|
||||
activeApplications: 156,
|
||||
totalUsers: 2341,
|
||||
avgTimeToHire: "18 days", monthlyGrowth: "+12.5%", conversionRate: "8.3%"});
|
||||
|
||||
const handleLogout = () => {
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
export default function AdminPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
@@ -57,180 +63,271 @@ export default function AdminPage() {
|
||||
brandName="Jobee Admin"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Logout", onClick: () => console.log("logout"),
|
||||
text: "Logout", onClick: handleLogout,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="jobs" data-section="jobs" className="pt-20">
|
||||
<MetricCardTen
|
||||
title="Job Management"
|
||||
description="Monitor and manage all job postings across the platform"
|
||||
tag="Active Jobs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Senior Software Engineer, Backend", subtitle: "Amsterdam, Netherlands · Full-time · Remote eligible", category: "Engineering", value: "Posted 2 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Product Manager, Enterprise", subtitle: "Rotterdam, Netherlands · Full-time", category: "Product", value: "Posted 5 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", title: "UX Designer, B2B", subtitle: "Utrecht, Netherlands · Full-time", category: "Design", value: "Posted 1 week ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", title: "Data Scientist, ML Platform", subtitle: "Remote · Full-time", category: "Data", value: "Posted 10 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5", title: "DevOps Engineer, Infrastructure", subtitle: "Amsterdam, Netherlands · Full-time · Remote", category: "Infrastructure", value: "Posted 3 weeks ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "6", title: "Marketing Manager, Growth", subtitle: "The Hague, Netherlands · Full-time", category: "Marketing", value: "Posted 1 month ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-screen bg-slate-50 pt-24 pb-12">
|
||||
<div className="mx-auto max-w-7xl px-4">
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-8">Admin Dashboard</h1>
|
||||
|
||||
<div id="users" data-section="users">
|
||||
<MetricCardTen
|
||||
title="User Management"
|
||||
description="Overview of registered users, job seekers, and employers"
|
||||
tag="Active Users"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Sarah van der Berg", subtitle: "Amsterdam, Netherlands · Software Developer", category: "Job Seeker", value: "Active", buttons: [
|
||||
{ text: "View Profile", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", title: "Acme Corporation", subtitle: "Rotterdam, Netherlands · Tech Company", category: "Employer", value: "Verified", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Jan Pieterzoon", subtitle: "Utrecht, Netherlands · HR Manager", category: "Employer", value: "Active", buttons: [
|
||||
{ text: "View Profile", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "4", title: "Emma Dijkstra", subtitle: "The Hague, Netherlands · Marketing Specialist", category: "Job Seeker", value: "Active", buttons: [
|
||||
{ text: "View Profile", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Tab Navigation */}
|
||||
<div className="flex gap-4 mb-8 border-b border-slate-200">
|
||||
<button
|
||||
onClick={() => setActiveTab("jobs")}
|
||||
className={`pb-4 px-4 font-semibold transition-colors ${
|
||||
activeTab === "jobs"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-slate-600 hover:text-slate-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Briefcase size={20} />
|
||||
Job Management
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("applications")}
|
||||
className={`pb-4 px-4 font-semibold transition-colors ${
|
||||
activeTab === "applications"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-slate-600 hover:text-slate-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText size={20} />
|
||||
Applications
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("users")}
|
||||
className={`pb-4 px-4 font-semibold transition-colors ${
|
||||
activeTab === "users"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-slate-600 hover:text-slate-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users size={20} />
|
||||
User Management
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("analytics")}
|
||||
className={`pb-4 px-4 font-semibold transition-colors ${
|
||||
activeTab === "analytics"
|
||||
? "text-blue-600 border-b-2 border-blue-600"
|
||||
: "text-slate-600 hover:text-slate-900"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 size={20} />
|
||||
Analytics
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="analytics" data-section="analytics">
|
||||
<FeatureBento
|
||||
title="Platform Analytics & Insights"
|
||||
description="Monitor key metrics and platform performance across all regions"
|
||||
tag="Real-time Data"
|
||||
tagIcon={Activity}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
features={[
|
||||
{
|
||||
title: "Job Applications Trend", description: "Track weekly application volume and trends", bentoComponent: "line-chart"},
|
||||
{
|
||||
title: "Revenue by Province", description: "Revenue distribution across Dutch provinces", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "User Growth Metrics", description: "Active users and engagement statistics", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Users, label: "Total Users", value: "24,500+" },
|
||||
{ icon: Activity, label: "Job Postings", value: "3,240" },
|
||||
{ icon: TrendingUp, label: "Monthly Growth", value: "12.5%" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Geographic Distribution", description: "Job seeker and employer locations worldwide", bentoComponent: "map"},
|
||||
{
|
||||
title: "Popular Job Categories", description: "Most sought-after job positions and skills", bentoComponent: "marquee", centerIcon: Activity,
|
||||
variant: "text", texts: [
|
||||
"Software Engineering", "Product Management", "Data Science", "UX Design", "Marketing", "Sales"],
|
||||
},
|
||||
{
|
||||
title: "System Status Overview", description: "Platform health and service monitoring", bentoComponent: "3d-stack-cards", items: [
|
||||
{
|
||||
icon: Activity,
|
||||
title: "API Health", subtitle: "99.9% Uptime", detail: "All systems operational"},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Database", subtitle: "256 GB", detail: "45% capacity used"},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Security", subtitle: "Secure", detail: "No active threats"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Job Management Tab */}
|
||||
{activeTab === "jobs" && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Job Listings</h2>
|
||||
<button className="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
|
||||
+ New Job
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-100 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Job Title</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Company</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applications</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Posted</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{jobs.map((job) => (
|
||||
<tr key={job.id} className="border-b border-slate-200 hover:bg-slate-50">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{job.title}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{job.company}</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
job.status === "Active"
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{job.applications}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{job.posted}</td>
|
||||
<td className="px-6 py-4 text-sm space-x-2">
|
||||
<button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
|
||||
<button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="moderation" data-section="moderation">
|
||||
<MetricCardTen
|
||||
title="Content Moderation"
|
||||
description="Review and manage flagged content, reports, and user complaints"
|
||||
tag="Flagged Content"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Job Post: Suspicious Salary Offer", subtitle: "Posted by Employer XYZ · Flag reason: Unusually high salary", category: "Review", value: "Pending", buttons: [
|
||||
{ text: "Review", href: "#" },
|
||||
{ text: "Action", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2", title: "User Report: Inappropriate Profile", subtitle: "Report from user about profile content violation", category: "Report", value: "2 days ago", buttons: [
|
||||
{ text: "Investigate", href: "#" },
|
||||
{ text: "Resolve", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3", title: "Automated Alert: Spam Job Posting", subtitle: "System detected duplicate job posts from same employer", category: "Alert", value: "Flagged", buttons: [
|
||||
{ text: "Review", href: "#" },
|
||||
{ text: "Remove", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{/* Applications Management Tab */}
|
||||
{activeTab === "applications" && (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Application Management</h2>
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-100 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Candidate</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Position</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applied Date</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((app) => (
|
||||
<tr key={app.id} className="border-b border-slate-200 hover:bg-slate-50">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{app.candidate}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{app.position}</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
app.status === "Interview"
|
||||
? "bg-blue-100 text-blue-700"
|
||||
: app.status === "Under Review"
|
||||
? "bg-yellow-100 text-yellow-700"
|
||||
: "bg-red-100 text-red-700"
|
||||
}`}>
|
||||
{app.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{app.appliedDate}</td>
|
||||
<td className="px-6 py-4 text-sm space-x-2">
|
||||
<button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">View</button>
|
||||
<button className="px-3 py-1 text-green-600 hover:bg-green-50 rounded transition">Approve</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Jobee Admin"
|
||||
copyrightText="© 2025 Jobee Admin Portal"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
{/* User Management Tab */}
|
||||
{activeTab === "users" && (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">User Management</h2>
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-100 border-b border-slate-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Email</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Role</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Joined</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="border-b border-slate-200 hover:bg-slate-50">
|
||||
<td className="px-6 py-4 text-sm text-slate-900 font-medium">{user.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{user.email}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{user.role}</td>
|
||||
<td className="px-6 py-4 text-sm text-slate-600">{user.joined}</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
user.status === "Active"
|
||||
? "bg-green-100 text-green-700"
|
||||
: "bg-gray-100 text-gray-700"
|
||||
}`}>
|
||||
{user.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm space-x-2">
|
||||
<button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
|
||||
<button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Analytics Tab */}
|
||||
{activeTab === "analytics" && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Analytics Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Jobs</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalJobs}</p>
|
||||
</div>
|
||||
<Briefcase className="text-blue-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Active Applications</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.activeApplications}</p>
|
||||
</div>
|
||||
<FileText className="text-green-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-purple-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Total Users</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalUsers}</p>
|
||||
</div>
|
||||
<Users className="text-purple-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Avg Time to Hire</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.avgTimeToHire}</p>
|
||||
</div>
|
||||
<TrendingUp className="text-yellow-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Monthly Growth</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.monthlyGrowth}</p>
|
||||
</div>
|
||||
<BarChart3 className="text-red-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-600">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-slate-600 text-sm font-medium">Conversion Rate</p>
|
||||
<p className="text-3xl font-bold text-slate-900 mt-2">{analytics.conversionRate}</p>
|
||||
</div>
|
||||
<BarChart3 className="text-indigo-600" size={40} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user