Added in Logo's and worked on Avatars and Chats

src/components/layout/sidebar.tsx

@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation"
 import { motion, AnimatePresence } from "framer-motion"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import {
   LayoutDashboard,
@@ -15,12 +16,18 @@ import {
   ChevronRight,
   Building2,
   PanelLeftClose,
+  MessageSquare,
 } from "lucide-react"
 import { COMPANY_NAME } from "@/lib/constants"
+import { useUser } from "@/providers/user-provider"
+import { conversations as conversationsData } from "@/data/chats"
+
+const totalUnread = conversationsData.reduce((sum, c) => sum + c.unread, 0)
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { href: "/leads", label: "Leads", icon: Users },
+  { href: "/chats", label: "Chats", icon: MessageSquare },
   { href: "/users", label: "Users", icon: Building2 },
   { href: "/settings", label: "Settings", icon: Settings },
 ]
@@ -34,6 +41,8 @@ interface SidebarProps {
 
 export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
   const pathname = usePathname()
+  const { user } = useUser()
+  const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   const sidebarContent = (
     <div
@@ -45,9 +54,11 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
       {/* Logo */}
       <div className={cn("flex h-16 items-center border-b border-sidebar-border px-4", collapsed ? "justify-center" : "justify-between")}>
         <Link href="/" className="flex items-center gap-3 overflow-hidden">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary">
-            <span className="text-sm font-bold text-primary-foreground">C</span>
-          </div>
+          <img
+            src="/logo/CompanyLogo.png"
+            alt={COMPANY_NAME}
+            className="h-8 w-8 shrink-0 rounded-lg object-contain"
+          />
           <AnimatePresence mode="wait">
             {!collapsed && (
               <motion.span
@@ -85,13 +96,18 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
                   <Link
                     href={item.href}
                     className={cn(
-                      "flex h-10 w-10 items-center justify-center rounded-lg transition-colors",
+                      "relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors",
                       isActive
                         ? "bg-sidebar-primary text-sidebar-primary-foreground"
                         : "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                     )}
                   >
                     <item.icon className="h-5 w-5" />
+                    {item.label === "Chats" && totalUnread > 0 && (
+                      <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-medium text-destructive-foreground">
+                        {totalUnread}
+                      </span>
+                    )}
                   </Link>
                 </TooltipTrigger>
                 <TooltipContent side="right" className="ml-2">
@@ -141,17 +157,19 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
       {/* User info */}
       <div className={cn("border-t border-sidebar-border p-3", collapsed && "flex justify-center")}>
         {collapsed ? (
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-sidebar-accent">
-            <span className="text-sm font-medium text-sidebar-accent-foreground">SC</span>
-          </div>
+          <Avatar className="h-10 w-10">
+            <AvatarImage src={user.avatar} />
+            <AvatarFallback className="text-sm font-medium">{initials}</AvatarFallback>
+          </Avatar>
         ) : (
           <div className="flex items-center gap-3">
-            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-sidebar-accent">
-              <span className="text-sm font-medium text-sidebar-accent-foreground">SC</span>
-            </div>
+            <Avatar className="h-9 w-9">
+              <AvatarImage src={user.avatar} />
+              <AvatarFallback className="text-sm font-medium">{initials}</AvatarFallback>
+            </Avatar>
             <div className="flex-1 overflow-hidden">
-              <p className="text-sm font-medium truncate">Sarah Chen</p>
-              <p className="text-xs text-sidebar-foreground/60 truncate">Admin</p>
+              <p className="text-sm font-medium truncate">{user.name}</p>
+              <p className="text-xs text-sidebar-foreground/60 truncate capitalize">{user.role}</p>
             </div>
           </div>
         )}

src/components/layout/topbar.tsx

@@ -1,11 +1,13 @@
 "use client"
 
 import { useState } from "react"
+import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { useUser } from "@/providers/user-provider"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -31,8 +33,11 @@ interface TopbarProps {
 }
 
 export function Topbar({ onMenuClick }: TopbarProps) {
+  const router = useRouter()
   const { theme, setTheme } = useTheme()
+  const { user } = useUser()
   const [searchOpen, setSearchOpen] = useState(false)
+  const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
@@ -107,26 +112,26 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="relative h-9 gap-2 pl-2 pr-3">
               <Avatar className="h-7 w-7">
-                <AvatarImage src="https://ui-avatars.com/api/?name=Sarah+Chen&background=1d4ed8&color=fff&size=64" />
-                <AvatarFallback>SC</AvatarFallback>
+                <AvatarImage src={user.avatar} />
+                <AvatarFallback>{initials}</AvatarFallback>
               </Avatar>
-              <span className="hidden text-sm font-medium md:inline-block">Sarah Chen</span>
+              <span className="hidden text-sm font-medium md:inline-block">{user.name}</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">Sarah Chen</p>
-                <p className="text-xs text-muted-foreground">sarah@coastalit.com</p>
-                <Badge variant="secondary" className="mt-1 w-fit text-xs">Admin</Badge>
+                <p className="text-sm font-medium">{user.name}</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>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={() => router.push("/profile")}>
               <User className="mr-2 h-4 w-4" />
               Profile
             </DropdownMenuItem>
-            <DropdownMenuItem>
+            <DropdownMenuItem onClick={() => router.push("/settings")}>
               <Settings className="mr-2 h-4 w-4" />
               Settings
             </DropdownMenuItem>