Added in Logo's and worked on Avatars and Chats

2026-06-17 16:26:32 +02:00
parent 4898bf7142
commit d6d784cef3
19 changed files with 1135 additions and 35 deletions
@@ -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>
        )}
@@ -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>
@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Button } from "@/components/ui/button"
 import { COMPANY_NAME } from "@/lib/constants"
+import { toast } from "sonner"

 export function CompanySettingsForm() {
  return (
@@ -39,7 +40,7 @@ export function CompanySettingsForm() {
          </div>
        </div>
        <div className="flex justify-end pt-4">
-          <Button>Save Changes</Button>
+          <Button onClick={() => toast.success("Company settings saved")}>Save Changes</Button>
        </div>
      </CardContent>
    </Card>
@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import { Button } from "@/components/ui/button"
+import { toast } from "sonner"

 const notifications = [
  {
@@ -63,7 +64,7 @@ export function NotificationSettings() {
          </div>
        ))}
        <div className="flex justify-end pt-4">
-          <Button>Save Preferences</Button>
+          <Button onClick={() => toast.success("Notification preferences saved")}>Save Preferences</Button>
        </div>
      </CardContent>
    </Card>
@@ -3,6 +3,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
 import {
  Select,
  SelectContent,
@@ -65,7 +66,7 @@ export function UserPreferencesForm() {
          </div>
        </div>
        <div className="flex justify-end pt-4">
-          <Button>Save Preferences</Button>
+          <Button onClick={() => toast.success("Preferences saved")}>Save Preferences</Button>
        </div>
      </CardContent>
    </Card>