diff --git a/src/app/patients/page.tsx b/src/app/patients/page.tsx index a612b5f..9397361 100644 --- a/src/app/patients/page.tsx +++ b/src/app/patients/page.tsx @@ -1,27 +1,69 @@ "use client"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; -import Link from "next/link"; +import { useState } from "react"; 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 { Search, Users, FileText, Activity, Mail } from "lucide-react"; +import { Search, Users, Calendar, FileText, Phone, Mail, MapPin, Heart, Activity, Clock } from "lucide-react"; + +interface Patient { + id: string; + name: string; + age: number; + gender: string; + email: string; + phone: string; + condition: string; + lastVisit: string; + nextAppointment: string; + status: "active" | "inactive" | "pending"; + avatar: string; +} + +const mockPatients: Patient[] = [ + { + id: "1", name: "Emily Rodriguez", age: 34, + gender: "Female", email: "emily.rodriguez@email.com", phone: "+1 (555) 123-4567", condition: "Hypertension", lastVisit: "2025-01-15", nextAppointment: "2025-02-15", status: "active", avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png"}, + { + id: "2", name: "Michael Thompson", age: 52, + gender: "Male", email: "michael.thompson@email.com", phone: "+1 (555) 234-5678", condition: "Diabetes Type 2", lastVisit: "2025-01-10", nextAppointment: "2025-02-10", status: "active", avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png"}, + { + id: "3", name: "Sarah Johnson", age: 28, + gender: "Female", email: "sarah.johnson@email.com", phone: "+1 (555) 345-6789", condition: "Asthma", lastVisit: "2025-01-20", nextAppointment: "2025-02-20", status: "active", avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"}, + { + id: "4", name: "James Chen", age: 45, + gender: "Male", email: "james.chen@email.com", phone: "+1 (555) 456-7890", condition: "Cardiac Care", lastVisit: "2025-01-12", nextAppointment: "2025-01-29", status: "pending", avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png"}, + { + id: "5", name: "Lisa Martinez", age: 55, + gender: "Female", email: "lisa.martinez@email.com", phone: "+1 (555) 567-8901", condition: "Arthritis", lastVisit: "2024-12-15", nextAppointment: "2025-03-01", status: "inactive", avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"}, +]; + +export default function PatientsPage() { + const [searchTerm, setSearchTerm] = useState(""); + const [selectedPatient, setSelectedPatient] = useState(null); + const [filterStatus, setFilterStatus] = useState("all"); + + const filteredPatients = mockPatients.filter((patient) => { + const matchesSearch = + patient.name.toLowerCase().includes(searchTerm.toLowerCase()) || + patient.email.toLowerCase().includes(searchTerm.toLowerCase()) || + patient.phone.includes(searchTerm); + const matchesStatus = filterStatus === "all" || patient.status === filterStatus; + return matchesSearch && matchesStatus; + }); -export default function PatientDirectoryPage() { return ( -
- -
+
+
+ {/* Header */} +
+

Patient Records Management

+

Search and view patient information, medical history, and appointments

+
-
- -
+
+ {/* Left Column - Search and Filter */} +
+
+ {/* Search Box */} +
+ +
+ + setSearchTerm(e.target.value)} + className="w-full pl-10 pr-4 py-2 bg-background border border-background-accent/30 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta" + /> +
+
-
- + {/* Filter by Status */} +
+ +
+ {["all", "active", "pending", "inactive"].map((status) => ( + + ))} +
+
+
+
+ + {/* Right Column - Patient List and Detail View */} +
+ {!selectedPatient ? ( + // Patient List View +
+ {filteredPatients.length > 0 ? ( + filteredPatients.map((patient) => ( +
setSelectedPatient(patient)} + className="bg-card rounded-xl p-4 border border-background-accent/20 cursor-pointer hover:border-primary-cta/50 hover:shadow-lg transition-all" + > +
+ {patient.name} +
+
+

{patient.name}

+ + {patient.status.charAt(0).toUpperCase() + patient.status.slice(1)} + +
+

{patient.condition}

+
+ Age: {patient.age} + Last Visit: {new Date(patient.lastVisit).toLocaleDateString()} +
+
+
+
+ )) + ) : ( +
+ +

No patients found matching your search

+
+ )} +
+ ) : ( + // Patient Detail View +
+ + + {/* Patient Header */} +
+ {selectedPatient.name} +
+
+

{selectedPatient.name}

+ + {selectedPatient.status.charAt(0).toUpperCase() + selectedPatient.status.slice(1)} + +
+

{selectedPatient.condition}

+
+
+

Age

+

{selectedPatient.age} years old

+
+
+

Gender

+

{selectedPatient.gender}

+
+
+
+
+ + {/* Contact Information */} +
+

Contact Information

+
+
+ +
+

Email

+

{selectedPatient.email}

+
+
+
+ +
+

Phone

+

{selectedPatient.phone}

+
+
+
+
+ + {/* Appointment Information */} +
+

Appointment Schedule

+
+
+
+ +

Last Visit

+
+

{new Date(selectedPatient.lastVisit).toLocaleDateString()}

+
+
+
+ +

Next Appointment

+
+

{new Date(selectedPatient.nextAppointment).toLocaleDateString()}

+
+
+
+ + {/* Medical Information */} +
+

Medical Information

+
+
+ +
+

Primary Condition

+

{selectedPatient.condition}

+
+
+
+ +
+

Health Status

+

{selectedPatient.status}

+
+
+
+
+
+ )} +
+
+
); -} \ No newline at end of file +}