Merge: fix conflicts, add auth system with PostgreSQL, seed data, and 4 demo users

src/components/layout/topbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
@@ -36,9 +36,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
   const { user, logout } = useUser()
+  const [mounted, setMounted] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
   if (!user) return null
-  const initials = user.name.split(" ").map((n) => n[0]).join("")
+  const initials = (user.firstName[0] + user.lastName[0]).toUpperCase()
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
@@ -74,7 +77,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
         </Button>
 
         {/* Notifications */}
@@ -116,13 +119,13 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                 <AvatarImage src={user.avatar} />
                 <AvatarFallback>{initials}</AvatarFallback>
               </Avatar>
-              <span className="hidden text-sm font-medium md:inline-block">{user.name}</span>
+              <span className="hidden text-sm font-medium md:inline-block">{user.firstName} {user.lastName}</span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
             <DropdownMenuLabel className="font-normal">
               <div className="flex flex-col space-y-1">
-                <p className="text-sm font-medium">{user.name}</p>
+                <p className="text-sm font-medium">{user.firstName} {user.lastName}</p>
                 <p className="text-xs text-muted-foreground">{user.email}</p>
                 <Badge variant="secondary" className="mt-1 w-fit text-xs capitalize">{user.role}</Badge>
               </div>