Update src/app/dashboard/page.tsx
This commit is contained in:
@@ -1,151 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import { Zap, TrendingUp, Clock, AlertCircle, CheckCircle, Mail } from "lucide-react";
|
||||
import { BarChart3, Users, TrendingUp, Activity } from "lucide-react";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Security", id: "security" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
items: [
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Pricing", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "HIPAA Compliance", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple brandName="HealthCare Hub" navItems={navItems} />
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
features={[
|
||||
{
|
||||
id: "records",
|
||||
label: "Records",
|
||||
title: "Complete Patient History & Medical Records",
|
||||
items: [
|
||||
"Digital patient profiles with complete medical history",
|
||||
"Appointment and consultation logs",
|
||||
"Prescription tracking and medication management",
|
||||
"Lab results and diagnostic reports",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "monitoring",
|
||||
label: "Monitoring",
|
||||
title: "Real-Time Patient Vital Signs Tracking",
|
||||
items: [
|
||||
"Live vital signs monitoring and alerts",
|
||||
"Automated abnormality detection",
|
||||
"Historical trend analysis",
|
||||
"Emergency notification system",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "scheduling",
|
||||
label: "Scheduling",
|
||||
title: "Intelligent Appointment Management",
|
||||
items: [
|
||||
"Automated appointment scheduling",
|
||||
"Conflict prevention and optimization",
|
||||
"Patient reminders and confirmations",
|
||||
"Resource allocation and staff management",
|
||||
],
|
||||
},
|
||||
<NavbarStyleApple
|
||||
brandName="HealthCare Hub"
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Login", id: "/login" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Dashboard Features Overview"
|
||||
description="Access comprehensive patient management tools designed for modern healthcare providers"
|
||||
tag="Key Capabilities"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
title="Dashboard Performance Metrics"
|
||||
description="Real-time analytics showing system effectiveness and patient care improvements"
|
||||
metrics={[
|
||||
{ id: "1", icon: TrendingUp, title: "Patient Satisfaction", value: "96%" },
|
||||
{ id: "2", icon: Clock, title: "Time Saved Daily", value: "4.5 hrs" },
|
||||
{ id: "3", icon: AlertCircle, title: "Error Reduction", value: "87%" },
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-[calc(100vh-80px)] bg-background p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">Dashboard</h1>
|
||||
<p className="text-foreground/70">Welcome back! Here's your patient management overview.</p>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
title="Ready to Access Your Dashboard?"
|
||||
description="Get started with HealthCare Hub today. Schedule a personalized onboarding session with our support team."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Get Started"
|
||||
termsText="We respect your privacy. Your information is secure and HIPAA-compliant. We'll follow up within 24 hours."
|
||||
/>
|
||||
</div>
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
{[
|
||||
{ icon: Users, label: "Active Patients", value: "1,234", change: "+12%" },
|
||||
{ icon: Activity, label: "Appointments Today", value: "42", change: "+5%" },
|
||||
{ icon: TrendingUp, label: "System Uptime", value: "99.9%", change: "Stable" },
|
||||
{ icon: BarChart3, label: "Data Processed", value: "2.5 TB", change: "+8%" },
|
||||
].map((stat, idx) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary-cta/10 flex items-center justify-center">
|
||||
<Icon className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-accent">{stat.change}</span>
|
||||
</div>
|
||||
<h3 className="text-sm text-foreground/70 mb-1">{stat.label}</h3>
|
||||
<p className="text-2xl font-bold text-foreground">{stat.value}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis logoText="HealthCare Hub" columns={footerColumns} />
|
||||
{/* Main Content Area */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Chart Section */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
|
||||
<h2 className="text-xl font-bold text-foreground mb-4">Patient Activity Trend</h2>
|
||||
<div className="h-64 flex items-end justify-around gap-2">
|
||||
{[65, 78, 90, 85, 92, 88, 75, 82].map((height, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex-1 bg-gradient-to-t from-primary-cta to-primary-cta/60 rounded-t-lg opacity-80 hover:opacity-100 transition-opacity"
|
||||
style={{ height: `${height}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 flex justify-between text-xs text-foreground/50">
|
||||
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Today"].map((day) => (
|
||||
<span key={day}>{day}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
|
||||
<h2 className="text-xl font-bold text-foreground mb-4">Quick Actions</h2>
|
||||
<div className="space-y-3">
|
||||
{[
|
||||
"Add New Patient", "Schedule Appointment", "View Reports", "Export Data"].map((action, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className="w-full py-2 px-4 rounded-lg border border-accent/30 hover:border-primary-cta/50 text-foreground text-sm font-medium transition-all hover:bg-accent/5"
|
||||
>
|
||||
{action}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Patients */}
|
||||
<div className="mt-8 rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
|
||||
<h2 className="text-xl font-bold text-foreground mb-4">Recent Patients</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="border-b border-accent/20">
|
||||
<tr>
|
||||
<th className="text-left py-3 px-4 text-foreground/70 font-semibold">Patient Name</th>
|
||||
<th className="text-left py-3 px-4 text-foreground/70 font-semibold">ID</th>
|
||||
<th className="text-left py-3 px-4 text-foreground/70 font-semibold">Last Visit</th>
|
||||
<th className="text-left py-3 px-4 text-foreground/70 font-semibold">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ name: "John Smith", id: "#PAT-001", visit: "Today", status: "Active" },
|
||||
{ name: "Emma Johnson", id: "#PAT-002", visit: "Yesterday", status: "Follow-up" },
|
||||
{ name: "Michael Chen", id: "#PAT-003", visit: "2 days ago", status: "Stable" },
|
||||
].map((patient, idx) => (
|
||||
<tr key={idx} className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
|
||||
<td className="py-3 px-4 text-foreground">{patient.name}</td>
|
||||
<td className="py-3 px-4 text-foreground/70">{patient.id}</td>
|
||||
<td className="py-3 px-4 text-foreground/70">{patient.visit}</td>
|
||||
<td className="py-3 px-4">
|
||||
<span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary-cta/20 text-primary-cta">
|
||||
{patient.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user