applayout added, sidebar updated

2025-08-26 20:30:00 +05:30
parent 09873596dc
commit ca59f647a2
17 changed files with 1665 additions and 1479 deletions
--- a/apps/Frontend/src/App.tsx
+++ b/apps/Frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import { Switch, Route } from "wouter";
-import React, { Suspense, lazy } from "react";
+import React, { lazy } from "react";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
 import { queryClient } from "./lib/queryClient";
@@ -9,7 +9,6 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { ProtectedRoute } from "./lib/protected-route";
 import { AuthProvider } from "./hooks/use-auth";
 import Dashboard from "./pages/dashboard";
-import LoadingScreen from "./components/ui/LoadingScreen";

 const AuthPage = lazy(() => import("./pages/auth-page"));
 const AppointmentsPage = lazy(() => import("./pages/appointments-page"));
@@ -24,6 +23,7 @@ const DocumentPage = lazy(() => import("./pages/documents-page"));
 const DatabaseManagementPage = lazy(
  () => import("./pages/database-management-page")
 );
+const ReportsPage = lazy(() => import("./pages/reports-page"));
 const NotFound = lazy(() => import("./pages/not-found"));

 function Router() {
@@ -47,6 +47,7 @@ function Router() {
        path="/database-management"
        component={() => <DatabaseManagementPage />}
      />
+      <ProtectedRoute path="/reports/" component={() => <ReportsPage />} />
      <Route path="/auth" component={() => <AuthPage />} />
      <Route component={() => <NotFound />} />
    </Switch>
@@ -60,9 +61,7 @@ function App() {
        <AuthProvider>
          <TooltipProvider>
            <Toaster />
-            <Suspense fallback={<LoadingScreen />}>
            <Router />
-            </Suspense>
          </TooltipProvider>
        </AuthProvider>
      </QueryClientProvider>
--- a/apps/Frontend/src/components/layout/app-layout.tsx
+++ b/apps/Frontend/src/components/layout/app-layout.tsx
@@ -0,0 +1,25 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { Sidebar } from "@/components/layout/sidebar";
+import { TopAppBar } from "@/components/layout/top-app-bar";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider defaultOpen>
+      <div className="flex flex-col h-screen">
+        {/* Fixed top bar */}
+        <TopAppBar />
+
+        {/* Main content area */}
+        <div className="flex flex-1 pt-16 min-h-0 bg-gray-100">
+          {/* Sidebar (collapsible on mobile) */}
+          <Sidebar />
+
+          {/* Page content */}
+          <main className="flex-1 min-w-0 min-h-0 overflow-y-auto p-4">
+            {children}
+          </main>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}
--- a/apps/Frontend/src/components/layout/sidebar.tsx
+++ b/apps/Frontend/src/components/layout/sidebar.tsx
@@ -9,19 +9,38 @@ import {
  CreditCard,
  FolderOpen,
  Database,
+  FileText,
 } from "lucide-react";
-
 import { cn } from "@/lib/utils";
+import { useEffect, useMemo, useState } from "react";
+import { useSidebar } from "@/components/ui/sidebar";

-interface SidebarProps {
-  isMobileOpen: boolean;
-  setIsMobileOpen: (open: boolean) => void;
-}
+const WIDTH_ANIM_MS = 100;

-export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
+export function Sidebar() {
  const [location] = useLocation();
+  const { state, openMobile, setOpenMobile } = useSidebar(); // "expanded" | "collapsed"

-  const navItems = [
+  // Delay label visibility until the width animation completes
+  const [showLabels, setShowLabels] = useState(state !== "collapsed");
+  useEffect(() => {
+    let timer: number | undefined;
+
+    if (state === "expanded") {
+      timer = window.setTimeout(() => setShowLabels(true), WIDTH_ANIM_MS);
+    } else {
+      setShowLabels(false);
+    }
+
+    return () => {
+      if (timer !== undefined) {
+        window.clearTimeout(timer);
+      }
+    };
+  }, [state]);
+
+  const navItems = useMemo(
+    () => [
      {
        name: "Dashboard",
        path: "/",
@@ -57,6 +76,11 @@ export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
        path: "/documents",
        icon: <FolderOpen className="h-5 w-5" />,
      },
+      {
+        name: "Reports",
+        path: "/reports",
+        icon: <FileText className="h-5 w-5" />,
+      },
      {
        name: "Backup Database",
        path: "/database-management",
@@ -67,38 +91,33 @@ export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
        path: "/settings",
        icon: <Settings className="h-5 w-5" />,
      },
-  ];
+    ],
+    []
+  );

  return (
    <div
      className={cn(
-        "bg-white w-64 border-r border-gray-200 shadow-sm z-10 fixed h-full md:static",
-        isMobileOpen ? "block" : "hidden md:block"
+        // original look
+        "bg-white border-r border-gray-200 shadow-sm z-20",
+        // clip during width animation to avoid text peeking
+        "overflow-hidden will-change-[width]",
+        // animate width only
+        "transition-[width] duration-200 ease-in-out",
+        // MOBILE: overlay below topbar (h = 100vh - 4rem)
+        openMobile
+          ? "fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 block md:hidden"
+          : "hidden md:block",
+        // DESKTOP: participates in row layout
+        "md:static md:top-auto md:h-auto md:flex-shrink-0",
+        state === "collapsed" ? "md:w-16" : "md:w-64"
      )}
    >
-      <div className="p-4 border-b border-gray-200 flex items-center space-x-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className="h-5 w-5 text-primary"
-        >
-          <path d="M12 14c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3s3 1.35 3 3v6c0 1.65-1.35 3-3 3Z" />
-          <path d="M19 14v-4a7 7 0 0 0-14 0v4" />
-          <path d="M12 19c-5 0-8-2-9-5.5m18 0c-1 3.5-4 5.5-9 5.5Z" />
-        </svg>
-        <h1 className="text-lg font-medium text-primary">DentalConnect</h1>
-      </div>
-
      <div className="p-2">
-        <nav>
+        <nav role="navigation" aria-label="Main">
          {navItems.map((item) => (
            <div key={item.path}>
-              <Link to={item.path} onClick={() => setIsMobileOpen(false)}>
+              <Link to={item.path} onClick={() => setOpenMobile(false)}>
                <div
                  className={cn(
                    "flex items-center space-x-3 p-2 rounded-md pl-3 mb-1 transition-colors cursor-pointer",
@@ -108,7 +127,12 @@ export function Sidebar({ isMobileOpen, setIsMobileOpen }: SidebarProps) {
                  )}
                >
                  {item.icon}
-                  <span>{item.name}</span>
+                  {/* show label only after expand animation completes */}
+                  {showLabels && (
+                    <span className="whitespace-nowrap select-none">
+                      {item.name}
+                    </span>
+                  )}
                </div>
              </Link>
            </div>
--- a/apps/Frontend/src/components/layout/top-app-bar.tsx
+++ b/apps/Frontend/src/components/layout/top-app-bar.tsx
@@ -1,4 +1,3 @@
-import { Bell, Menu } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useAuth } from "@/hooks/use-auth";
@@ -11,47 +10,45 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useLocation } from "wouter";
 import { NotificationsBell } from "@/components/layout/notification-bell";
+import { SidebarTrigger } from "@/components/ui/sidebar";

-interface TopAppBarProps {
-  toggleMobileMenu: () => void;
-}
-
-export function TopAppBar({ toggleMobileMenu }: TopAppBarProps) {
+export function TopAppBar() {
  const { user, logoutMutation } = useAuth();
  const [location, setLocation] = useLocation();

-  const handleLogout = () => {
-    logoutMutation.mutate();
-  };
-
-  const getInitials = (username: string) => {
-    return username.substring(0, 2).toUpperCase();
-  };
+  const handleLogout = () => logoutMutation.mutate();
+  const getInitials = (username: string) =>
+    username.substring(0, 2).toUpperCase();

  return (
-    <header className="bg-white shadow-sm z-10">
+    <header className="bg-white shadow-sm z-30 fixed top-0 left-0 right-0">
      <div className="flex items-center justify-between h-16 px-4">
        <div className="flex items-center">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden mr-2"
-            onClick={toggleMobileMenu}
-          >
-            <Menu className="h-5 w-5" />
-          </Button>
-          <h1 className="md:hidden text-lg font-medium text-primary">
-            DentalConnect
-          </h1>
-        </div>
+          {/* both desktop + mobile triggers */}
+          <SidebarTrigger className="mr-2" />

-        <div className="hidden md:flex md:flex-1 items-center justify-center">
-          {/* Search bar removed */}
+          <div className="p-4 border-gray-200 flex items-center space-x-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-5 w-5 text-primary"
+            >
+              <path d="M12 14c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3s3 1.35 3 3v6c0 1.65-1.35 3-3 3Z" />
+              <path d="M19 14v-4a7 7 0 0 0-14 0v4" />
+              <path d="M12 19c-5 0-8-2-9-5.5m18 0c-1 3.5-4 5.5-9 5.5Z" />
+            </svg>
+
+            <h1 className="text-lg font-medium text-primary">DentalConnect</h1>
+          </div>
        </div>

        <div className="flex items-center space-x-3">
          <NotificationsBell />
-
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
--- a/apps/Frontend/src/components/ui/sidebar.tsx
+++ b/apps/Frontend/src/components/ui/sidebar.tsx
@@ -1,62 +1,69 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
-} from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";

-const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";

 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};

-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);

 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error("useSidebar must be used within a SidebarProvider.");
  }

-  return context
+  return context;
+}
+
+function readSidebarCookie(): boolean | undefined {
+  if (typeof document === "undefined") return undefined; // SSR safety
+  const m = document.cookie.match(
+    new RegExp(`(?:^|; )${SIDEBAR_COOKIE_NAME}=([^;]*)`)
+  );
+  return m ? m[1] === "true" : undefined;
 }

 const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
  }
 >(
  (
@@ -71,54 +78,35 @@ const SidebarProvider = React.forwardRef<
    },
    ref
  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);

-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
+    const cookieOpen = readSidebarCookie();
+    const [_open, _setOpen] = React.useState<boolean>(
+      cookieOpen !== undefined ? cookieOpen : defaultOpen
+    );
+
+    const open = openProp ?? _open;
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
+        const openState = typeof value === "function" ? value(open) : value;
        if (setOpenProp) {
-          setOpenProp(openState)
+          setOpenProp(openState);
        } else {
-          _setOpen(openState)
+          _setOpen(openState);
        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
      },
      [setOpenProp, open]
-    )
+    );

-    // Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
+        : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);

-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
-        }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
+    const state = open ? "expanded" : "collapsed";

    const contextValue = React.useMemo<SidebarContextProps>(
      () => ({
@@ -131,11 +119,12 @@ const SidebarProvider = React.forwardRef<
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
+    );

    return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
+          {/* FIX: remove flex + w-full wrapper */}
          <div
            style={
              {
@@ -144,10 +133,7 @@ const SidebarProvider = React.forwardRef<
                ...style,
              } as React.CSSProperties
            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
+            className={cn("group/sidebar-wrapper min-h-svh", className)}
            ref={ref}
            {...props}
          >
@@ -155,17 +141,18 @@ const SidebarProvider = React.forwardRef<
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
-    )
+    );
  }
-)
-SidebarProvider.displayName = "SidebarProvider"
+);
+
+SidebarProvider.displayName = "SidebarProvider";

 const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
  }
 >(
  (
@@ -179,7 +166,7 @@ const Sidebar = React.forwardRef<
    },
    ref
  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();

    if (collapsible === "none") {
      return (
@@ -193,7 +180,7 @@ const Sidebar = React.forwardRef<
        >
          {children}
        </div>
-      )
+      );
    }

    if (isMobile) {
@@ -217,7 +204,7 @@ const Sidebar = React.forwardRef<
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
-      )
+      );
    }

    return (
@@ -262,16 +249,16 @@ const Sidebar = React.forwardRef<
          </div>
        </div>
      </div>
-    )
+    );
  }
-)
-Sidebar.displayName = "Sidebar"
+);
+Sidebar.displayName = "Sidebar";

 const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
 >(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();

  return (
    <Button
@@ -281,23 +268,23 @@ const SidebarTrigger = React.forwardRef<
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";

 const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
 >(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();

  return (
    <button
@@ -318,9 +305,9 @@ const SidebarRail = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarRail.displayName = "SidebarRail"
+  );
+});
+SidebarRail.displayName = "SidebarRail";

 const SidebarInset = React.forwardRef<
  HTMLDivElement,
@@ -336,9 +323,9 @@ const SidebarInset = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
+  );
+});
+SidebarInset.displayName = "SidebarInset";

 const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
@@ -354,9 +341,9 @@ const SidebarInput = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
+  );
+});
+SidebarInput.displayName = "SidebarInput";

 const SidebarHeader = React.forwardRef<
  HTMLDivElement,
@@ -369,9 +356,9 @@ const SidebarHeader = React.forwardRef<
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";

 const SidebarFooter = React.forwardRef<
  HTMLDivElement,
@@ -384,9 +371,9 @@ const SidebarFooter = React.forwardRef<
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";

 const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
@@ -399,9 +386,9 @@ const SidebarSeparator = React.forwardRef<
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";

 const SidebarContent = React.forwardRef<
  HTMLDivElement,
@@ -417,9 +404,9 @@ const SidebarContent = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
+  );
+});
+SidebarContent.displayName = "SidebarContent";

 const SidebarGroup = React.forwardRef<
  HTMLDivElement,
@@ -432,15 +419,15 @@ const SidebarGroup = React.forwardRef<
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";

 const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : "div";

  return (
    <Comp
@@ -453,15 +440,15 @@ const SidebarGroupLabel = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";

 const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";

  return (
    <Comp
@@ -476,9 +463,9 @@ const SidebarGroupAction = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";

 const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
@@ -490,8 +477,8 @@ const SidebarGroupContent = React.forwardRef<
    className={cn("w-full text-sm", className)}
    {...props}
  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";

 const SidebarMenu = React.forwardRef<
  HTMLUListElement,
@@ -503,8 +490,8 @@ const SidebarMenu = React.forwardRef<
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
-))
-SidebarMenu.displayName = "SidebarMenu"
+));
+SidebarMenu.displayName = "SidebarMenu";

 const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
@@ -516,8 +503,8 @@ const SidebarMenuItem = React.forwardRef<
    className={cn("group/menu-item relative", className)}
    {...props}
  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";

 const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
@@ -539,14 +526,14 @@ const sidebarMenuButtonVariants = cva(
      size: "default",
    },
  }
-)
+);

 const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
  } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
  (
@@ -561,8 +548,8 @@ const SidebarMenuButton = React.forwardRef<
    },
    ref
  ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state } = useSidebar();

    const button = (
      <Comp
@@ -573,16 +560,16 @@ const SidebarMenuButton = React.forwardRef<
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
-    )
+    );

    if (!tooltip) {
-      return button
+      return button;
    }

    if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
-      }
+      };
    }

    return (
@@ -595,19 +582,19 @@ const SidebarMenuButton = React.forwardRef<
          {...tooltip}
        />
      </Tooltip>
-    )
+    );
  }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";

 const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
+    asChild?: boolean;
+    showOnHover?: boolean;
  }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";

  return (
    <Comp
@@ -627,9 +614,9 @@ const SidebarMenuAction = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";

 const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
@@ -649,19 +636,19 @@ const SidebarMenuBadge = React.forwardRef<
    )}
    {...props}
  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";

 const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
-    showIcon?: boolean
+    showIcon?: boolean;
  }
 >(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);

  return (
    <div
@@ -686,9 +673,9 @@ const SidebarMenuSkeleton = React.forwardRef<
        }
      />
    </div>
-  )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";

 const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
@@ -704,24 +691,24 @@ const SidebarMenuSub = React.forwardRef<
    )}
    {...props}
  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";

 const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";

 const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
  }
 >(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";

  return (
    <Comp
@@ -739,9 +726,9 @@ const SidebarMenuSubButton = React.forwardRef<
      )}
      {...props}
    />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";

 export {
  Sidebar,
@@ -768,4 +755,4 @@ export {
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
-}
+};
--- a/apps/Frontend/src/lib/protected-route.tsx
+++ b/apps/Frontend/src/lib/protected-route.tsx
@@ -1,33 +1,37 @@
+import AppLayout from "@/components/layout/app-layout";
+import LoadingScreen from "@/components/ui/LoadingScreen";
 import { useAuth } from "@/hooks/use-auth";
-import { Loader2 } from "lucide-react";
+import { Suspense } from "react";
 import { Redirect, Route } from "wouter";

+type ComponentLike = React.ComponentType; // works for both lazy() and regular components
+
 export function ProtectedRoute({
  path,
  component: Component,
 }: {
  path: string;
-  component: () => React.JSX.Element;
+  component: ComponentLike;
 }) {
  const { user, isLoading } = useAuth();

-  if (isLoading) {
-    return (
-      <Route path={path}>
-        <div className="flex items-center justify-center min-h-screen">
-          <Loader2 className="h-8 w-8 animate-spin text-border" />
-        </div>
-      </Route>
-    );
-  }
-
-  if (!user) {
  return (
    <Route path={path}>
+      {/* While auth is resolving: keep layout visible and show a small spinner in the content area */}
+      {isLoading ? (
+        <AppLayout>
+          <LoadingScreen />
+        </AppLayout>
+      ) : !user ? (
        <Redirect to="/auth" />
+      ) : (
+        // Authenticated: render page inside layout. Lazy pages load with an in-layout spinner.
+        <AppLayout>
+          <Suspense fallback={<LoadingScreen />}>
+            <Component />
+          </Suspense>
+        </AppLayout>
+      )}
    </Route>
  );
-  }
-
-  return <Route path={path} component={Component} />;
 }
--- a/apps/Frontend/src/pages/appointments-page.tsx
+++ b/apps/Frontend/src/pages/appointments-page.tsx
@@ -2,8 +2,6 @@ import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { format, addDays, startOfToday, addMinutes } from "date-fns";
 import { parseLocalDate, formatLocalDate } from "@/utils/dateUtils";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { AddAppointmentModal } from "@/components/appointments/add-appointment-modal";
 import { Button } from "@/components/ui/button";
 import {
@@ -625,16 +623,7 @@ export default function AppointmentsPage() {
  }

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
-        <main className="flex-1 overflow-y-auto p-4">
+    <div className="">
      <div className="container mx-auto">
        <div className="flex justify-between items-center mb-6">
          <div>
@@ -697,9 +686,7 @@ export default function AppointmentsPage() {
                  <Button
                    variant="outline"
                    size="icon"
-                        onClick={() =>
-                          setSelectedDate(addDays(selectedDate, -1))
-                        }
+                    onClick={() => setSelectedDate(addDays(selectedDate, -1))}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
@@ -707,9 +694,7 @@ export default function AppointmentsPage() {
                  <Button
                    variant="outline"
                    size="icon"
-                        onClick={() =>
-                          setSelectedDate(addDays(selectedDate, 1))
-                        }
+                    onClick={() => setSelectedDate(addDays(selectedDate, 1))}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
@@ -723,9 +708,7 @@ export default function AppointmentsPage() {
                <table className="w-full border-collapse min-w-[800px]">
                  <thead>
                    <tr>
-                          <th className="p-2 border bg-gray-50 w-[100px]">
-                            Time
-                          </th>
+                      <th className="p-2 border bg-gray-50 w-[100px]">Time</th>
                      {staffMembers.map((staff) => (
                        <th
                          key={staff.id}
@@ -814,9 +797,7 @@ export default function AppointmentsPage() {
                    </span>
                  </div>
                  <div className="flex justify-between items-center">
-                        <span className="text-sm text-gray-500">
-                          With doctors:
-                        </span>
+                    <span className="text-sm text-gray-500">With doctors:</span>
                    <span className="font-semibold">
                      {
                        processedAppointments.filter(
@@ -849,8 +830,6 @@ export default function AppointmentsPage() {
          </div>
        </div>
      </div>
-        </main>
-      </div>

      {/* Add/Edit Appointment Modal */}
      <AddAppointmentModal
--- a/apps/Frontend/src/pages/claims-page.tsx
+++ b/apps/Frontend/src/pages/claims-page.tsx
@@ -1,7 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
 import { useMutation } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import {
  Card,
  CardHeader,
@@ -410,15 +408,7 @@ export default function ClaimsPage() {
  };

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
+    <div>
      <SeleniumTaskBanner
        status={status}
        message={message}
@@ -426,7 +416,6 @@ export default function ClaimsPage() {
        onClear={() => dispatch(clearTaskStatus())}
      />

-        <main className="flex-1 overflow-y-auto p-4">
      <div className="container mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
@@ -459,8 +448,6 @@ export default function ClaimsPage() {
          />
        </CardContent>
      </Card>
-        </main>
-      </div>

      {/* Claim Form Modal */}
      {isClaimFormOpen && selectedPatientId !== null && (
--- a/apps/Frontend/src/pages/dashboard.tsx
+++ b/apps/Frontend/src/pages/dashboard.tsx
@@ -1,8 +1,6 @@
 import { useState, useRef } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { format, parse, isValid, parseISO } from "date-fns";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { StatCard } from "@/components/ui/stat-card";
 import { PatientTable } from "@/components/patients/patient-table";
 import { AddPatientModal } from "@/components/patients/add-patient-modal";
@@ -14,8 +12,6 @@ import { useAuth } from "@/hooks/use-auth";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { AppointmentsByDay } from "@/components/analytics/appointments-by-day";
 import { NewPatients } from "@/components/analytics/new-patients";
-import { AppointmentUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
-import { PatientUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
 import {
  Users,
  Calendar,
@@ -25,7 +21,6 @@ import {
  Clock,
 } from "lucide-react";
 import { Link } from "wouter";
-import { z } from "zod";
 import { formatLocalDate, parseLocalDate } from "@/utils/dateUtils";
 import {
  Appointment,
@@ -220,16 +215,7 @@ export default function Dashboard() {
  }).length;

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
-        <main className="flex-1 overflow-y-auto p-4">
+    <div>
      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard
@@ -407,13 +393,7 @@ export default function Dashboard() {
        </div>

        {/* Patient Table */}
-            <PatientTable
-              allowDelete={true}
-              allowEdit={true}
-              allowView={true}
-            />
-          </div>
-        </main>
+        <PatientTable allowDelete={true} allowEdit={true} allowView={true} />
      </div>

      {/* Add/Edit Patient Modal */}
--- a/apps/Frontend/src/pages/database-management-page.tsx
+++ b/apps/Frontend/src/pages/database-management-page.tsx
@@ -1,6 +1,4 @@
 import { useState } from "react";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
@@ -76,19 +74,8 @@ export default function DatabaseManagementPage() {
  });

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar
-          toggleMobileMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-        />
-
-        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-6">
-          <div className="max-w-6xl mx-auto space-y-6">
+    <div>
+      <div className="container mx-auto space-y-6">
        {/* Page Header */}
        <div className="bg-white rounded-lg shadow-sm p-6 border">
          <h1 className="text-2xl font-bold text-gray-900 flex items-center space-x-3">
@@ -112,8 +99,7 @@ export default function DatabaseManagementPage() {
          <CardContent className="space-y-4">
            <p className="text-gray-600">
              Create a complete backup of your dental practice database
-                  including patients, appointments, claims, and all related
-                  data.
+              including patients, appointments, claims, and all related data.
            </p>

            <div className="flex items-center space-x-4">
@@ -160,9 +146,7 @@ export default function DatabaseManagementPage() {
                <div className="p-4 bg-green-50 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <div className="w-3 h-3 bg-green-500 rounded-full"></div>
-                        <span className="font-medium text-green-800">
-                          Status
-                        </span>
+                    <span className="font-medium text-green-800">Status</span>
                  </div>
                  <p className="text-green-600 mt-1">
                    {dbStatus?.connected ? "Connected" : "Disconnected"}
@@ -182,9 +166,7 @@ export default function DatabaseManagementPage() {
                <div className="p-4 bg-purple-50 rounded-lg">
                  <div className="flex items-center space-x-2">
                    <Cloud className="h-4 w-4 text-purple-500" />
-                        <span className="font-medium text-purple-800">
-                          Records
-                        </span>
+                    <span className="font-medium text-purple-800">Records</span>
                  </div>
                  <p className="text-purple-600 mt-1">
                    {dbStatus?.patients
@@ -197,8 +179,6 @@ export default function DatabaseManagementPage() {
          </CardContent>
        </Card>
      </div>
-        </main>
-      </div>
    </div>
  );
 }
--- a/apps/Frontend/src/pages/documents-page.tsx
+++ b/apps/Frontend/src/pages/documents-page.tsx
@@ -13,8 +13,6 @@ import { apiRequest, queryClient } from "@/lib/queryClient";
 import { Eye, Trash, Download, FolderOpen } from "lucide-react";
 import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
 import { PatientTable } from "@/components/patients/patient-table";
-import { Sidebar } from "@/components/layout/sidebar";
-import { TopAppBar } from "@/components/layout/top-app-bar";
 import { Patient, PdfFile } from "@repo/db/types";

 export default function DocumentsPage() {
@@ -117,16 +115,7 @@ export default function DocumentsPage() {
  };

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
-        <main className="flex-1 overflow-y-auto p-4">
+    <div>
      <div className="container mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
@@ -201,9 +190,7 @@ export default function DocumentsPage() {
                      <Button
                        variant="ghost"
                        size="sm"
-                            onClick={() =>
-                              handleDownloadPdf(pdf.id, pdf.filename)
-                            }
+                        onClick={() => handleDownloadPdf(pdf.id, pdf.filename)}
                      >
                        <Download className="w-4 h-4 text-blue-600" />
                      </Button>
@@ -275,8 +262,6 @@ export default function DocumentsPage() {
          entityName={`PDF #${currentPdf?.id}`}
        />
      </div>
-        </main>
-      </div>
    </div>
  );
 }
--- a/apps/Frontend/src/pages/insurance-eligibility-page.tsx
+++ b/apps/Frontend/src/pages/insurance-eligibility-page.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
@@ -210,15 +208,7 @@ export default function InsuranceEligibilityPage() {
  };

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
+    <div>
      <SeleniumTaskBanner
        status={status}
        message={message}
@@ -226,7 +216,6 @@ export default function InsuranceEligibilityPage() {
        onClear={() => dispatch(clearTaskStatus())}
      />

-        <main className="flex-1 overflow-y-auto p-4">
      <div className="container mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
@@ -328,8 +317,6 @@ export default function InsuranceEligibilityPage() {
          </CardContent>
        </Card>
      </div>
-        </main>
-      </div>
    </div>
  );
 }
--- a/apps/Frontend/src/pages/patients-page.tsx
+++ b/apps/Frontend/src/pages/patients-page.tsx
@@ -1,7 +1,5 @@
 import { useState, useRef } from "react";
 import { useMutation } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { PatientTable } from "@/components/patients/patient-table";
 import { AddPatientModal } from "@/components/patients/add-patient-modal";
 import { FileUploadZone } from "@/components/file-upload/file-upload-zone";
@@ -137,16 +135,7 @@ export default function PatientsPage() {
  };

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
-        <main className="flex-1 overflow-y-auto p-4">
+    <div>
      <div className="container mx-auto space-y-6">
        <div className="flex justify-between items-center">
          <div>
@@ -237,8 +226,6 @@ export default function PatientsPage() {
          patient={currentPatient}
        />
      </div>
-        </main>
-      </div>
    </div>
  );
 }
--- a/apps/Frontend/src/pages/payments-page.tsx
+++ b/apps/Frontend/src/pages/payments-page.tsx
@@ -1,6 +1,4 @@
 import { useState } from "react";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import {
  Card,
  CardHeader,
@@ -10,12 +8,7 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
-import {
-  DollarSign,
-  Upload,
-  Image,
-  X,
-} from "lucide-react";
+import { DollarSign, Upload, Image, X } from "lucide-react";
 import {
  Select,
  SelectContent,
@@ -116,16 +109,7 @@ export default function PaymentsPage() {
  };

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
-        <main className="flex-1 overflow-y-auto p-4">
+    <div>
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <div>
@@ -335,9 +319,7 @@ export default function PaymentsPage() {
      </Card>

      {/* Recent Payments by Patients*/}
-          <PaymentsOfPatientModal/>
-        </main>
-      </div>
+      <PaymentsOfPatientModal />
    </div>
  );
 }
--- a/apps/Frontend/src/pages/preauthorizations-page.tsx
+++ b/apps/Frontend/src/pages/preauthorizations-page.tsx
@@ -1,7 +1,5 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
@@ -104,13 +102,7 @@ export default function PreAuthorizationsPage() {
  ];

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar isMobileOpen={isMobileMenuOpen} setIsMobileOpen={setIsMobileMenuOpen} />
-      
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-        
-        <main className="flex-1 overflow-y-auto p-4">
+    <div>
          {/* Header */}
          <div className="mb-6">
            <h1 className="text-2xl font-semibold text-gray-800">Pre-authorizations</h1>
@@ -342,8 +334,6 @@ export default function PreAuthorizationsPage() {
              </CardContent>
            </Card>
          </div>
-        </main>
-      </div>
    </div>
  );
 }
--- a/apps/Frontend/src/pages/reports-page.tsx
+++ b/apps/Frontend/src/pages/reports-page.tsx
@@ -0,0 +1,304 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Search,
+  Edit,
+  Eye,
+  ChevronLeft,
+  ChevronRight,
+  Settings,
+} from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Patient } from "@repo/db/types";
+import { formatDateToHumanReadable } from "@/utils/dateUtils";
+
+export default function ReportsPage() {
+  const { user } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchField, setSearchField] = useState("all");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5;
+
+  // Fetch patients
+  const { data: patients = [], isLoading: isLoadingPatients } = useQuery<
+    Patient[]
+  >({
+    queryKey: ["/api/patients"],
+    enabled: !!user,
+  });
+
+  // Filter patients based on search
+  const filteredPatients = patients.filter((patient) => {
+    if (!searchTerm) return true;
+
+    const searchLower = searchTerm.toLowerCase();
+    const fullName = `${patient.firstName} ${patient.lastName}`.toLowerCase();
+    const patientId = `PID-${patient?.id?.toString().padStart(4, "0")}`;
+
+    switch (searchField) {
+      case "name":
+        return fullName.includes(searchLower);
+      case "id":
+        return patientId.toLowerCase().includes(searchLower);
+      case "phone":
+        return patient.phone?.toLowerCase().includes(searchLower) || false;
+      case "all":
+      default:
+        return (
+          fullName.includes(searchLower) ||
+          patientId.toLowerCase().includes(searchLower) ||
+          patient.phone?.toLowerCase().includes(searchLower) ||
+          patient.email?.toLowerCase().includes(searchLower) ||
+          false
+        );
+    }
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(filteredPatients.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentPatients = filteredPatients.slice(startIndex, endIndex);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const getPatientInitials = (firstName: string, lastName: string) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+  };
+
+  return (
+    <div>
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-6">
+          <h1 className="text-2xl font-semibold text-gray-900 mb-2">Reports</h1>
+          <p className="text-gray-600">
+            View and manage all patient information
+          </p>
+        </div>
+
+        {/* Search and Filters */}
+        <Card className="mb-6">
+          <CardContent className="p-4">
+            <div className="flex flex-col md:flex-row gap-4">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                <Input
+                  placeholder="Search patients..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+              <div className="flex gap-2">
+                <Select value={searchField} onValueChange={setSearchField}>
+                  <SelectTrigger className="w-32">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Fields</SelectItem>
+                    <SelectItem value="name">Name</SelectItem>
+                    <SelectItem value="id">Patient ID</SelectItem>
+                    <SelectItem value="phone">Phone</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button variant="outline" size="sm">
+                  <Settings className="h-4 w-4 mr-2" />
+                  Advanced
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Patient List */}
+        <Card>
+          <CardContent className="p-0">
+            {isLoadingPatients ? (
+              <div className="text-center py-8">Loading patients...</div>
+            ) : (
+              <>
+                {/* Table Header */}
+                <div className="grid grid-cols-12 gap-4 p-4 bg-gray-50 border-b text-sm font-medium text-gray-600">
+                  <div className="col-span-3">Patient</div>
+                  <div className="col-span-2">DOB / Gender</div>
+                  <div className="col-span-2">Contact</div>
+                  <div className="col-span-2">Insurance</div>
+                  <div className="col-span-2">Status</div>
+                  <div className="col-span-1">Actions</div>
+                </div>
+
+                {/* Table Rows */}
+                {currentPatients.length === 0 ? (
+                  <div className="text-center py-8 text-gray-500">
+                    {searchTerm
+                      ? "No patients found matching your search."
+                      : "No patients available."}
+                  </div>
+                ) : (
+                  currentPatients.map((patient) => (
+                    <div
+                      key={patient.id}
+                      className="grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors"
+                    >
+                      {/* Patient Info */}
+                      <div className="col-span-3 flex items-center space-x-3">
+                        <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-sm font-medium text-gray-600">
+                          {getPatientInitials(
+                            patient.firstName,
+                            patient.lastName
+                          )}
+                        </div>
+                        <div>
+                          <div className="font-medium text-gray-900">
+                            {patient.firstName} {patient.lastName}
+                          </div>
+                          <div className="text-sm text-gray-500">
+                            PID-{patient.id?.toString().padStart(4, "0")}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* DOB / Gender */}
+                      <div className="col-span-2">
+                        <div className="text-sm text-gray-900">
+                          {formatDateToHumanReadable(patient.dateOfBirth)}
+                        </div>
+                        <div className="text-sm text-gray-500 capitalize">
+                          {patient.gender}
+                        </div>
+                      </div>
+
+                      {/* Contact */}
+                      <div className="col-span-2">
+                        <div className="text-sm text-gray-900">
+                          {patient.phone || "Not provided"}
+                        </div>
+                        <div className="text-sm text-gray-500">
+                          {patient.email || "No email"}
+                        </div>
+                      </div>
+
+                      {/* Insurance */}
+                      <div className="col-span-2">
+                        <div className="text-sm text-gray-900">
+                          {patient.insuranceProvider
+                            ? `${patient.insuranceProvider.charAt(0).toUpperCase()}${patient.insuranceProvider.slice(1)}`
+                            : "Not specified"}
+                        </div>
+                        <div className="text-sm text-gray-500">
+                          ID: {patient.insuranceId || "N/A"}
+                        </div>
+                      </div>
+
+                      {/* Status */}
+                      <div className="col-span-2">
+                        <span
+                          className={cn(
+                            "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
+                            patient.status === "active"
+                              ? "bg-green-100 text-green-800"
+                              : "bg-gray-100 text-gray-800"
+                          )}
+                        >
+                          {patient.status === "active" ? "Active" : "Inactive"}
+                        </span>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="col-span-1">
+                        <div className="flex space-x-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                          >
+                            <Edit className="h-4 w-4 text-blue-600" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                          >
+                            <Eye className="h-4 w-4 text-gray-600" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+
+                {/* Pagination */}
+                {totalPages > 1 && (
+                  <div className="flex items-center justify-between p-4 border-t bg-gray-50">
+                    <div className="text-sm text-gray-700">
+                      Showing {startIndex + 1} to{" "}
+                      {Math.min(endIndex, filteredPatients.length)} of{" "}
+                      {filteredPatients.length} results
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          setCurrentPage(Math.max(1, currentPage - 1))
+                        }
+                        disabled={currentPage === 1}
+                      >
+                        <ChevronLeft className="h-4 w-4 mr-1" />
+                        Previous
+                      </Button>
+
+                      {/* Page Numbers */}
+                      {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+                        (page) => (
+                          <Button
+                            key={page}
+                            variant={
+                              currentPage === page ? "default" : "outline"
+                            }
+                            size="sm"
+                            onClick={() => setCurrentPage(page)}
+                            className="w-8 h-8 p-0"
+                          >
+                            {page}
+                          </Button>
+                        )
+                      )}
+
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          setCurrentPage(Math.min(totalPages, currentPage + 1))
+                        }
+                        disabled={currentPage === totalPages}
+                      >
+                        Next
+                        <ChevronRight className="h-4 w-4 ml-1" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/apps/Frontend/src/pages/settings-page.tsx
+++ b/apps/Frontend/src/pages/settings-page.tsx
@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { TopAppBar } from "@/components/layout/top-app-bar";
-import { Sidebar } from "@/components/layout/sidebar";
 import { StaffTable } from "@/components/staffs/staff-table";
 import { useToast } from "@/hooks/use-toast";
 import { Card, CardContent } from "@/components/ui/card";
@@ -259,14 +257,7 @@ export default function SettingsPage() {
  });

  return (
-    <div className="flex h-screen overflow-hidden bg-gray-100">
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-        <main className="flex-1 overflow-y-auto p-2">
+    <div>
          <Card>
            <CardContent>
              <div className="mt-8">
@@ -371,8 +362,6 @@ export default function SettingsPage() {
          <div className="mt-6">
            <CredentialTable />
          </div>
-        </main>
-      </div>
    </div>
  );
 }