applayout added, sidebar updated

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>

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>
+  );
+}

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 {
+const WIDTH_ANIM_MS = 100;
-  isMobileOpen: boolean;
-  setIsMobileOpen: (open: boolean) => void;
-}
 
-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",
+        // original look
-        isMobileOpen ? "block" : "hidden md:block"
+        "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>

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 {
+export function TopAppBar() {
-  toggleMobileMenu: () => void;
-}
-
-export function TopAppBar({ toggleMobileMenu }: TopAppBarProps) {
   const { user, logoutMutation } = useAuth();
   const [location, setLocation] = useLocation();
 
-  const handleLogout = () => {
+  const handleLogout = () => logoutMutation.mutate();
-    logoutMutation.mutate();
+  const getInitials = (username: string) =>
-  };
+    username.substring(0, 2).toUpperCase();
-
-  const getInitials = (username: string) => {
-    return 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
+          {/* both desktop + mobile triggers */}
-            variant="ghost"
+          <SidebarTrigger className="mr-2" />
-            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>
 
-        <div className="hidden md:flex md:flex-1 items-center justify-center">
+          <div className="p-4 border-gray-200 flex items-center space-x-2">
-          {/* Search bar removed */}
+            <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

apps/Frontend/src/components/ui/sidebar.tsx

@@ -1,62 +1,69 @@
-import * as React from "react"
+import * as React from "react";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react"
+import { PanelLeft } from "lucide-react";
-
+import { useIsMobile } from "@/hooks/use-mobile";
-import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils";
-import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button";
-import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input";
-import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator";
-import { Separator } from "@/components/ui/separator"
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet"
+} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton"
+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_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
+  state: "expanded" | "collapsed";
-  open: boolean
+  open: boolean;
-  setOpen: (open: boolean) => void
+  setOpen: (open: boolean) => void;
-  openMobile: boolean
+  openMobile: boolean;
-  setOpenMobile: (open: boolean) => void
+  setOpenMobile: (open: boolean) => void;
-  isMobile: boolean
+  isMobile: boolean;
-  toggleSidebar: () => void
+  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
+    defaultOpen?: boolean;
-    open?: boolean
+    open?: boolean;
-    onOpenChange?: (open: boolean) => void
+    onOpenChange?: (open: boolean) => void;
   }
 >(
   (
@@ -71,54 +78,35 @@ const SidebarProvider = React.forwardRef<
     },
     ref
   ) => {
-    const isMobile = useIsMobile()
+    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false)
+    const [openMobile, setOpenMobile] = React.useState(false);
 
-    // This is the internal state of the sidebar.
+    const cookieOpen = readSidebarCookie();
-    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState<boolean>(
-    const [_open, _setOpen] = React.useState(defaultOpen)
+      cookieOpen !== undefined ? cookieOpen : defaultOpen
-    const open = openProp ?? _open
+    );
+
+    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);
         }
-
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-        // This sets the cookie to keep the sidebar state.
-        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)
+        : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile])
+    }, [isMobile, setOpen, setOpenMobile]);
 
-    // Adds a keyboard shortcut to toggle the sidebar.
+    const state = open ? "expanded" : "collapsed";
-    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 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(
+            className={cn("group/sidebar-wrapper min-h-svh", className)}
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              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"
+    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset"
+    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none"
+    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)
+        onClick?.(event);
-        toggleSidebar()
+        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
+    asChild?: boolean;
-    isActive?: boolean
+    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
   } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
   (
@@ -561,8 +548,8 @@ const SidebarMenuButton = React.forwardRef<
     },
     ref
   ) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
-    const { isMobile, state } = useSidebar()
+    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
+    asChild?: boolean;
-    showOnHover?: 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} />)
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 
 const SidebarMenuSubButton = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentProps<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
-    size?: "sm" | "md"
+    size?: "sm" | "md";
-    isActive?: boolean
+    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,
-}
+};

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} />;
 }

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">
+    <div className="">
-      <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="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={() =>
+                    onClick={() => setSelectedDate(addDays(selectedDate, -1))}
-                          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={() =>
+                    onClick={() => setSelectedDate(addDays(selectedDate, 1))}
-                          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]">
+                      <th className="p-2 border bg-gray-50 w-[100px]">Time</th>
-                            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">
+                    <span className="text-sm text-gray-500">With doctors:</span>
-                          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

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">
+    <div>
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
       <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 && (

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">
+    <div>
-      <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">
       {/* 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
+        <PatientTable allowDelete={true} allowEdit={true} allowView={true} />
-              allowDelete={true}
-              allowEdit={true}
-              allowView={true}
-            />
-          </div>
-        </main>
       </div>
 
       {/* Add/Edit Patient Modal */}

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">
+    <div>
-      <Sidebar
+      <div className="container mx-auto space-y-6">
-        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">
         {/* 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
+              including patients, appointments, claims, and all related data.
-                  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">
+                    <span className="font-medium text-green-800">Status</span>
-                          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">
+                    <span className="font-medium text-purple-800">Records</span>
-                          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>
   );
 }

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">
+    <div>
-      <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="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={() =>
+                        onClick={() => handleDownloadPdf(pdf.id, pdf.filename)}
-                              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>
   );
 }

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">
+    <div>
-      <Sidebar
-        isMobileOpen={isMobileMenuOpen}
-        setIsMobileOpen={setIsMobileMenuOpen}
-      />
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <TopAppBar toggleMobileMenu={toggleMobileMenu} />
-
       <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>
   );
 }

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">
+    <div>
-      <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="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>
   );
 }

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 {
+import { DollarSign, Upload, Image, X } from "lucide-react";
-  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">
+    <div>
-      <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">
       {/* 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/>
+      <PaymentsOfPatientModal />
-        </main>
-      </div>
     </div>
   );
 }

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">
+    <div>
-      <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">
           {/* 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>
   );
 }

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>
+  );
+}

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">
+    <div>
-      <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">
           <Card>
             <CardContent>
               <div className="mt-8">
@@ -371,8 +362,6 @@ export default function SettingsPage() {
           <div className="mt-6">
             <CredentialTable />
           </div>
-        </main>
-      </div>
     </div>
   );
 }