added: initial dashboard structure

frontend/app/(dashboard)/(routes)/appointments/page.tsx

@@ -0,0 +1,9 @@
+import AppointmentsPage from "@/features/dashboard/pages/AppointmentsPage";
+
+export default function Appointments() {
+	return (
+		<div className="flex flex-col gap-4">
+			<AppointmentsPage />
+		</div>
+	);
+}

frontend/app/(dashboard)/(routes)/calendar/page.tsx

@@ -0,0 +1,9 @@
+import CalendarPage from "@/features/dashboard/pages/CalendarPage";
+
+export default function Calendar() {
+	return (
+		<div className="flex flex-col gap-4">
+			<CalendarPage />
+		</div>
+	);
+}

frontend/app/(dashboard)/(routes)/dashboard/page.tsx

@@ -0,0 +1,9 @@
+import DashboardPage from "@/features/dashboard/pages/DashboardPage";
+
+export default function Dashboard() {
+	return (
+		<div className="flex flex-col gap-4">
+			<DashboardPage />
+		</div>
+	);
+}

frontend/app/(dashboard)/(routes)/notifications/page.tsx

@@ -0,0 +1,9 @@
+import NotificationsPage from "@/features/dashboard/pages/NotificationsPage";
+
+export default function Notifications() {
+	return (
+		<div className="flex flex-col gap-4">
+			<NotificationsPage />
+		</div>
+	);
+}

frontend/app/(dashboard)/layout.tsx

@@ -0,0 +1,15 @@
+import DashboardHeader from "@/features/dashboard/components/DashboardHeader";
+
+const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
+	return (
+		<div className="h-full relative">
+			<main>
+				<DashboardHeader />
+				<div className="h-16 max-sm:h-12" />
+				{children}
+			</main>
+		</div>
+	);
+};
+
+export default DashboardLayout;

frontend/src/features/dashboard/components/AppointmentList.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const AppointmentList = () => {
+	return (
+		<div className="appointment-list">
+			<h2>Appointments</h2>
+		</div>
+	);
+};
+
+export default AppointmentList;

frontend/src/features/dashboard/components/CalendarView.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const CalendarView = () => {
+	return (
+		<div className="calendar-view">
+			<h2>Calendar</h2>
+		</div>
+	);
+};
+
+export default CalendarView;

frontend/src/features/dashboard/components/DashboardHeader.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, CalendarIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { OneClickModeToggle } from "@/features/theme/OneClickModeToggle";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { cn } from "@/lib/utils";
+
+const routes = [
+	{
+		label: "Dashboard",
+		href: "/dashboard",
+	},
+	{
+		label: "Calendar",
+		href: "/calendar",
+	},
+	{
+		label: "Appointments",
+		href: "/appointments",
+	},
+	{
+		label: "Notifications",
+		href: "/notifications",
+	},
+];
+
+const DashboardHeader = () => {
+	const pathname = usePathname();
+
+	return (
+		<header className="fixed inset-x-0 z-50 flex h-20 max-sm:h-16 items-center justify-between px-4 shadow-lg bg-background">
+			<nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+				<Link
+					href="/"
+					className="flex items-center gap-2 text-lg font-semibold md:text-base"
+				>
+					<CalendarIcon className="h-6 w-6" />
+					<span className="sr-only">ShowCalendar</span>
+				</Link>
+				{routes.map((route) => (
+					<Link
+						key={route.href}
+						href={route.href}
+						className={cn(
+							"transition-colors hover:text-foreground",
+							pathname === route.href
+								? "text-foreground font-bold"
+								: "text-muted-foreground"
+						)}
+					>
+						{route.label}
+					</Link>
+				))}
+			</nav>
+			<Sheet>
+				<SheetTrigger asChild>
+					<Button variant="outline" size="icon" className="shrink-0 md:hidden">
+						<Menu className="h-5 w-5" />
+						<span className="sr-only">Toggle navigation menu</span>
+					</Button>
+				</SheetTrigger>
+				<SheetContent side="left">
+					<nav className="grid gap-6 text-lg font-medium">
+						<Link href="/" className="flex items-center gap-2 text-lg font-semibold">
+							<CalendarIcon className="h-6 w-6" />
+							<span className="sr-only">ShowCalendar</span>
+						</Link>
+						{routes.map((route) => (
+							<Link
+								key={route.href}
+								href={route.href}
+								className={cn(
+									"hover:text-foreground",
+									pathname === route.href
+										? "text-foreground font-bold"
+										: "text-muted-foreground"
+								)}
+							>
+								{route.label}
+							</Link>
+						))}
+					</nav>
+				</SheetContent>
+			</Sheet>
+			<div className="flex w-full items-center justify-end gap-4 md:ml-auto md:gap-2 lg:gap-4">
+				<OneClickModeToggle />
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="secondary" size="icon" className="rounded-full">
+							<Avatar>
+								<AvatarImage src="" alt="@username" />
+								<AvatarFallback>UN</AvatarFallback>
+							</Avatar>
+							<span className="sr-only">Toggle user menu</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuLabel>My Account</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem>Settings</DropdownMenuItem>
+						<DropdownMenuItem>Support</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem>Logout</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</header>
+	);
+};
+
+export default DashboardHeader;

frontend/src/features/dashboard/components/DashboardSection.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+
+const DashboardSection = ({
+	sidebarContent,
+	content,
+	sidebarSize = 25,
+	contentSize = 75,
+	direction = "horizontal",
+}: {
+	sidebarContent: React.ReactNode;
+	content: React.ReactNode;
+	sidebarSize?: number;
+	contentSize?: number;
+	direction?: "horizontal" | "vertical";
+}) => {
+	return (
+		<div className="dashboard-container">
+			<div className="main-content w-full h-screen">
+				<ResizablePanelGroup direction={direction}>
+					<ResizablePanel defaultSize={sidebarSize}>
+						<div className="flex h-full items-center justify-center p-6">
+							{sidebarContent}
+						</div>
+					</ResizablePanel>
+					<ResizableHandle withHandle />
+					<ResizablePanel defaultSize={contentSize}>
+						<div className="flex h-full items-center justify-center p-6">{content}</div>
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</div>
+		</div>
+	);
+};
+
+export default DashboardSection;

frontend/src/features/dashboard/components/NotificationList.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const NotificationList = () => {
+	return (
+		<div className="notification-list">
+			<h2>Notifications</h2>
+		</div>
+	);
+};
+
+export default NotificationList;

frontend/src/features/dashboard/hooks/useAppointments.ts

@@ -0,0 +1,25 @@
+/*
+   INFO: THIS CUSTOM HOOK, `USEAPPOINTMENTS`, IS DESIGNED TO MANAGE APPOINTMENTS DATA AND STATE.
+   IT PROVIDES FUNCTIONALITY TO FETCH, ADD, UPDATE, AND DELETE APPOINTMENTS FOR THE USER.
+
+   INFO: KEY FEATURES:
+   - FETCHING APPOINTMENTS FROM THE API.
+   - MANAGING LOCAL STATE FOR APPOINTMENTS.
+   - FUNCTIONS FOR ADDING, UPDATING, AND DELETING APPOINTMENTS.
+   - ERROR HANDLING FOR API CALLS.
+   - CONFLICT MANAGEMENT FOR SCHEDULING.
+
+   WARN: ENSURE THAT API ENDPOINTS ARE CORRECTLY CONFIGURED AND ACCESSIBLE.
+   WARN: PROPER ERROR HANDLING MUST BE IN PLACE TO MANAGE API CALL FAILURES GRACEFULLY.
+
+   TODO: IMPLEMENT CACHING STRATEGIES TO MINIMIZE REDUNDANT API CALLS.
+   TODO: INTEGRATE NOTIFICATIONS FOR APPOINTMENT REMINDERS.
+   TODO: ADD MORE DETAILED ERROR MESSAGES FOR DIFFERENT FAILURE SCENARIOS.
+
+   USAGE:
+      CONST { APPOINTMENTS, ADDAPPOINTMENT, UPDATEAPPOINTMENT, DELETEAPPOINTMENT } = USEAPPOINTMENTS();
+
+   DEPENDENCIES:
+   - REACT FOR STATE MANAGEMENT.
+   - TANSTACK QUERY FOR HANDLING ASYNCHRONOUS DATA FETCHING.
+ */

frontend/src/features/dashboard/hooks/useCalendar.ts

@@ -0,0 +1,25 @@
+/*
+   INFO: THE `USECALENDAR` CUSTOM HOOK IS RESPONSIBLE FOR MANAGING CALENDAR DATA AND STATE.
+   IT FACILITATES THE RETRIEVAL, MANAGEMENT, AND UPDATING OF CALENDARS FOR THE APPLICATION.
+
+   INFO: KEY FEATURES:
+   - FETCHING CALENDARS FROM THE API.
+   - HANDLING LOCAL STATE FOR THE CALENDAR DATA.
+   - FUNCTIONS TO ADD, UPDATE, AND DELETE CALENDARS.
+   - ERROR HANDLING FOR NETWORK REQUESTS.
+   - ENSURING DATA SYNCHRONIZATION WITH THE BACKEND.
+
+   WARN: NETWORK ERRORS AND API FAILURES SHOULD BE HANDLED TO PROVIDE A SMOOTH USER EXPERIENCE.
+   WARN: AVOID LARGE STATE UPDATES TO PREVENT PERFORMANCE ISSUES.
+
+   TODO: ADD FUNCTIONALITY FOR SHARING CALENDARS WITH OTHER USERS.
+   TODO: IMPLEMENT ADDITIONAL FEATURES FOR CALENDAR COLOR CUSTOMIZATION.
+   TODO: OPTIMIZE DATA FETCHING TO REDUCE LOAD TIMES.
+
+   USAGE:
+      CONST { CALENDARS, ADDCALENDAR, UPDATECALENDAR, DELETECALENDAR } = USECALENDAR();
+
+   DEPENDENCIES:
+   - REACT FOR MANAGING COMPONENT STATE.
+   - TANSTACK QUERY FOR ASYNCHRONOUS DATA OPERATIONS.
+*/

frontend/src/features/dashboard/hooks/useNotifications.ts

@@ -0,0 +1,25 @@
+/*
+   INFO: THE `USENOTIFICATIONS` HOOK IS USED TO MANAGE USER NOTIFICATIONS WITHIN THE APPLICATION.
+   IT PROVIDES MECHANISMS TO FETCH, DISPLAY, AND MARK NOTIFICATIONS AS READ OR DELETE THEM.
+
+   INFO: KEY FEATURES:
+   - FETCHING NOTIFICATIONS FROM THE SERVER.
+   - MANAGING LOCAL STATE FOR NOTIFICATIONS.
+   - FUNCTIONS TO MARK NOTIFICATIONS AS READ AND DELETE THEM.
+   - HANDLING NOTIFICATION DISPLAY AND INTERACTIONS.
+   - PROVIDING A WAY TO FILTER AND SORT NOTIFICATIONS.
+
+   WARN: HANDLE NOTIFICATION DATA CAREFULLY TO ENSURE NO LOSS OF IMPORTANT USER INFORMATION.
+   WARN: ENSURE THE UI IS RESPONSIVE WHEN DISPLAYING A LARGE NUMBER OF NOTIFICATIONS.
+
+   TODO: IMPLEMENT PUSH NOTIFICATIONS FOR REAL-TIME UPDATES.
+   TODO: ALLOW USERS TO CUSTOMIZE NOTIFICATION PREFERENCES.
+   TODO: ENHANCE THE UI FOR NOTIFICATION DISPLAY, INCLUDING GROUPED NOTIFICATIONS.
+
+   USAGE:
+      CONST { NOTIFICATIONS, MARKASREAD, DELETENOTIFICATION } = USENOTIFICATIONS();
+
+   DEPENDENCIES:
+   - REACT FOR MANAGING COMPONENT STATE.
+   - TANSTACK QUERY FOR FETCHING AND UPDATING NOTIFICATION DATA.
+*/

frontend/src/features/dashboard/pages/AppointmentsPage.tsx

@@ -0,0 +1,20 @@
+import AppointmentList from "../components/AppointmentList";
+import DashboardSection from "../components/DashboardSection";
+
+const AppointmentsPage = () => {
+	return (
+		<div className="Appointment-container">
+			<div className="main-content">
+				<DashboardSection
+					sidebarContent={"Sidebar"}
+					content={<AppointmentList />}
+					sidebarSize={25}
+					contentSize={75}
+					direction="horizontal"
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default AppointmentsPage;

frontend/src/features/dashboard/pages/CalendarPage.tsx

@@ -0,0 +1,20 @@
+import CalendarView from "../components/CalendarView";
+import DashboardSection from "../components/DashboardSection";
+
+const CalendarPage = () => {
+	return (
+		<div className="Calendar-container">
+			<div className="main-content">
+				<DashboardSection
+					sidebarContent={"Sidebar"}
+					content={<CalendarView />}
+					sidebarSize={25}
+					contentSize={75}
+					direction="horizontal"
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default CalendarPage;