Added a badge with the amount of pending tickets assigned to the user

src/components/Sidebar.tsx

@@ -24,6 +24,7 @@ import { preventNavigation } from "@/utils/navigation.disabled";
 import { useState } from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
 import { Type } from "@/interfaces/user";
+import useTicketsListener from '@/hooks/useTicketsListener';
 interface Props {
   path: string;
   navDisabled?: boolean;
@@ -31,6 +32,7 @@ interface Props {
   onFocusLayerMouseEnter?: () => void;
   className?: string;
   userType?: Type;
+  userId?: string;
 }
 
 interface NavProps {
@@ -40,6 +42,7 @@ interface NavProps {
   keyPath: string;
   disabled?: boolean;
   isMinimized?: boolean;
+  badge?: number;
 }
 
 const Nav = ({
@@ -49,7 +52,10 @@ const Nav = ({
   keyPath,
   disabled = false,
   isMinimized = false,
-}: NavProps) => (
+  badge,
+}: NavProps) => {
+  const displayBadge = badge && badge > 0 ? true : false;
+  return (
   <Link
     href={!disabled ? keyPath : ""}
     className={clsx(
@@ -64,8 +70,10 @@ const Nav = ({
   >
     <Icon size={24} />
     {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+    {displayBadge && <div className="badge badge-primary badge-sm">{badge}</div>}
   </Link>
 );
+    }
 
 export default function Sidebar({
   path,
@@ -74,6 +82,7 @@ export default function Sidebar({
   userType,
   onFocusLayerMouseEnter,
   className,
+  userId,
 }: Props) {
   const router = useRouter();
 
@@ -82,6 +91,8 @@ export default function Sidebar({
     state.toggleSidebarMinimized,
   ]);
 
+  const {totalAssignedTickets } = useTicketsListener(userId);
+
   const logout = async () => {
     axios.post("/api/logout").finally(() => {
       setTimeout(() => router.reload(), 500);
@@ -177,6 +188,7 @@ export default function Sidebar({
             path={path}
             keyPath="/tickets"
             isMinimized={isMinimized}
+            badge={totalAssignedTickets}
           />
         )}
         {userType === "developer" && (