feat(classes): optimize teacher dashboard ui and implement grade management

src/modules/layout/components/site-header.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import Link from "next/link"
+import { usePathname } from "next/navigation"
 import { Bell, Menu, Search } from "lucide-react"
 import { signOut, useSession } from "next-auth/react"
 
@@ -27,8 +28,21 @@ import {
 } from "@/shared/components/ui/dropdown-menu"
 
 import { useSidebar } from "./sidebar-provider"
+import { NAV_CONFIG } from "../config/navigation"
+
+// Build lookup map for breadcrumbs
+const BREADCRUMB_MAP = new Map<string, string>()
+Object.values(NAV_CONFIG).forEach((items) => {
+  items.forEach((item) => {
+    BREADCRUMB_MAP.set(item.href, item.title)
+    item.items?.forEach((subItem) => {
+      BREADCRUMB_MAP.set(subItem.href, subItem.title)
+    })
+  })
+})
 
 export function SiteHeader() {
+  const pathname = usePathname()
   const { toggleSidebar, isMobile } = useSidebar()
   const { data: session, status } = useSession()
 
@@ -44,6 +58,16 @@ export function SiteHeader() {
     .map((p) => p[0]?.toUpperCase())
     .join("")
 
+  // Generate breadcrumbs
+  const segments = pathname.split("/").filter(Boolean)
+  const breadcrumbs = segments
+    .map((segment, index) => {
+      const href = `/${segments.slice(0, index + 1).join("/")}`
+      const title = BREADCRUMB_MAP.get(href) || segment.charAt(0).toUpperCase() + segment.slice(1)
+      return { href, title, isLast: index === segments.length - 1 }
+    })
+    .filter((b) => !["admin", "teacher", "student", "parent"].includes(b.title.toLowerCase()))
+
   return (
     <header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex h-16 items-center border-b px-4 backdrop-blur-sm">
       <div className="flex flex-1 items-center gap-4">
@@ -60,13 +84,26 @@ export function SiteHeader() {
         {/* Breadcrumbs */}
         <Breadcrumb className="hidden md:flex">
           <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Overview</BreadcrumbPage>
-            </BreadcrumbItem>
+            {breadcrumbs.length > 0 ? (
+              breadcrumbs.map((crumb) => (
+                <React.Fragment key={crumb.href}>
+                  <BreadcrumbItem>
+                    {crumb.isLast ? (
+                      <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink asChild>
+                        <Link href={crumb.href}>{crumb.title}</Link>
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                  {!crumb.isLast && <BreadcrumbSeparator />}
+                </React.Fragment>
+              ))
+            ) : (
+              <BreadcrumbItem>
+                <BreadcrumbPage>Home</BreadcrumbPage>
+              </BreadcrumbItem>
+            )}
           </BreadcrumbList>
         </Breadcrumb>
       </div>