Merge branch 'main' of https://git.coastit.co.za/caitlin/CRM_ENVR

src/components/layout/topbar.tsx

@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useUser } from "@/providers/user-provider";
 import { useNotifications } from "@/providers/notification-provider";
+import { BugReportModal } from "@/components/shared/bug-report-modal";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,6 +28,7 @@ import {
   LogOut,
   User,
   Settings,
+  Bug,
   CheckCheck,
   Trash2,
 } from "lucide-react";
@@ -47,6 +49,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
     useNotifications();
   const [mounted, setMounted] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
+  const [bugModalOpen, setBugModalOpen] = useState(false);
 
   useEffect(() => {
     setMounted(true);
@@ -128,6 +131,17 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           )}
         </Button>
 
+        {/* Report a Bug */}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setBugModalOpen(true)}
+          className="text-muted-foreground"
+          title="Report a Bug"
+        >
+          <Bug className="h-5 w-5" />
+        </Button>
+
         {/* Notifications */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -244,6 +258,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+      <BugReportModal open={bugModalOpen} onClose={() => setBugModalOpen(false)} />
     </header>
   );
 }