84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import SideNav from "@/components/side-nav";
|
||
|
|
import { Notifications, Notification } from "@/components/notifications";
|
||
|
|
|
||
|
|
export default function NotificationsPage() {
|
||
|
|
const [notifications, setNotifications] = useState<Notification[]>([
|
||
|
|
{
|
||
|
|
id: "1",
|
||
|
|
type: "appointment",
|
||
|
|
title: "New Appointment Request",
|
||
|
|
message: "Sarah Johnson requested an appointment for tomorrow at 2:00 PM",
|
||
|
|
time: "2 minutes ago",
|
||
|
|
read: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "2",
|
||
|
|
type: "success",
|
||
|
|
title: "Appointment Confirmed",
|
||
|
|
message: "Your appointment with Michael Chen has been confirmed for today at 10:00 AM",
|
||
|
|
time: "1 hour ago",
|
||
|
|
read: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "3",
|
||
|
|
type: "warning",
|
||
|
|
title: "Appointment Reminder",
|
||
|
|
message: "You have an appointment in 30 minutes with Emily Davis",
|
||
|
|
time: "3 hours ago",
|
||
|
|
read: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "4",
|
||
|
|
type: "info",
|
||
|
|
title: "New Message",
|
||
|
|
message: "You received a new message from John Smith",
|
||
|
|
time: "5 hours ago",
|
||
|
|
read: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "5",
|
||
|
|
type: "appointment",
|
||
|
|
title: "Appointment Cancelled",
|
||
|
|
message: "Robert Wilson cancelled his appointment scheduled for tomorrow",
|
||
|
|
time: "1 day ago",
|
||
|
|
read: true,
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleMarkAsRead = (id: string) => {
|
||
|
|
setNotifications((prev) =>
|
||
|
|
prev.map((n) => (n.id === id ? { ...n, read: true } : n))
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleDismiss = (id: string) => {
|
||
|
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMarkAllAsRead = () => {
|
||
|
|
setNotifications((prev) => prev.map((n) => ({ ...n, read: true })));
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50">
|
||
|
|
{/* Side Navigation */}
|
||
|
|
<SideNav />
|
||
|
|
|
||
|
|
<div className="md:ml-[250px]">
|
||
|
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<Notifications
|
||
|
|
notifications={notifications}
|
||
|
|
onMarkAsRead={handleMarkAsRead}
|
||
|
|
onDismiss={handleDismiss}
|
||
|
|
onMarkAllAsRead={handleMarkAllAsRead}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|