-
-
-
{navLinkDisplayed && (
-
-
+ <>
+
+
+
+
+
)}
diff --git a/react-app/src/components/navigation/UserMenu.tsx b/react-app/src/components/navigation/UserMenu.tsx
index 2357f64..a6f2703 100644
--- a/react-app/src/components/navigation/UserMenu.tsx
+++ b/react-app/src/components/navigation/UserMenu.tsx
@@ -40,6 +40,13 @@ import {
} from "@/components/ui/alert-dialog";
import { useCurrentUser } from "@/common/hooks/useCurrentUser.ts";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar.js";
+import io from "socket.io-client";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+const socket = io("http://localhost:4000", {
+ query: { token: localStorage.accessToken },
+});
export function UserMenu() {
const { setSystemTheme, setDarkTheme, setLightTheme } = useTheme();
@@ -54,18 +61,41 @@ export function UserMenu() {
setSystemTheme();
};
const localTheme = localStorage.theme || "dark";
+
+ const [notifications, setNotifications] = useState(0);
+
+ useEffect(() => {
+ //TODO Initial call for notifications count
+ }, []);
+
+ useEffect(() => {
+ socket.on("notification", ({ data }) => {
+ if (data !== notifications) {
+ toast.message(`Vous avez reçu une nouvelle notification`);
+ setNotifications(Math.min(data, 99));
+ }
+ });
+
+ return () => {
+ socket.off("notification");
+ };
+ }, []);
+
return (
- - SIRH -
+
+ 
+
+ + SIRH +
+
+
-
- {currentUser.firstname} {currentUser.lastname}
-
-
-
-
- Mon profil
-
-
-
-
-
-
- Notifications
-
-
-
-
-
-
- Nouveau mot de passe
-
-
-
-
-
-
-
- Thème
-
-
-
- Système
-
-
-
-
-
-
-
-
-
+
+
+
+
+
);
}
diff --git a/react-app/src/components/ui/avatar.tsx b/react-app/src/components/ui/avatar.tsx
index 45cc746..7623948 100644
--- a/react-app/src/components/ui/avatar.tsx
+++ b/react-app/src/components/ui/avatar.tsx
@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
+
+
-
-
-
-
- Clair
-
-
-
+
+
+
+ {currentUser.firstname} {currentUser.lastname}
+
+
+
+
+ Mon profil
+
+
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ Nouveau mot de passe
+
+
+
+
+
+
+
+ Thème
+
+
+
- Foncé
+ Système
-
-
-
+ {notifications}
+
+ )}
+
+
+ Clair
+
+
+
+
+ Foncé
+
+
+
+
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef {
+ if (disabled) return;
+ inputRef.current?.focus();
+ }}
+ >
+
+
+ {selected.map((option) => {
+ return (
+
+ {option.label}
+
+
+ );
+ })}
+ {/* Avoid having the "Search" Icon */}
+ {
+ setInputValue(value);
+ inputProps?.onValueChange?.(value);
+ }}
+ onBlur={(event) => {
+ if (!onScrollbar) {
+ setOpen(false);
+ }
+ inputProps?.onBlur?.(event);
+ }}
+ onFocus={(event) => {
+ setOpen(true);
+ triggerSearchOnFocus && onSearch?.(debouncedSearchTerm);
+ inputProps?.onFocus?.(event);
+ }}
+ placeholder={
+ hidePlaceholderWhenSelected && selected.length !== 0
+ ? ""
+ : placeholder
+ }
+ className={cn(
+ "placeholder:text-muted-foreground flex-1 bg-transparent outline-none",
+ {
+ "w-full": hidePlaceholderWhenSelected,
+ "px-3 py-2": selected.length === 0,
+ "ml-1": selected.length !== 0,
+ },
+ inputProps?.className,
+ )}
+ />
+
+
+
+ {open && (
+ {
+ setOnScrollbar(false);
+ }}
+ onMouseEnter={() => {
+ setOnScrollbar(true);
+ }}
+ onMouseUp={() => {
+ inputRef.current?.focus();
+ }}
+ >
+ {isLoading ? (
+ <>{loadingIndicator}
+ ) : (
+ <>
+ {EmptyItem()}
+ {CreatableItem()}
+ {!selectFirstItem && (
+
+ <>
+ {dropdowns.map((option) => {
+ return (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ onSelect={() => {
+ if (selected.length >= maxSelected) {
+ onMaxSelected?.(selected.length);
+ return;
+ }
+ setInputValue("");
+ const newOptions = [...selected, option];
+ setSelected(newOptions);
+ onChange?.(newOptions);
+ }}
+ className={cn(
+ "cursor-pointer",
+ option.disable &&
+ "text-muted-foreground cursor-default",
+ )}
+ >
+ {option.label}
+
+ );
+ })}
+
+
+ ))}
+
+ )}
+
+ )}
+
+
+
>(({ className, ...props }, ref) => (
-
+
));
TableHeader.displayName = "TableHeader";
@@ -73,7 +80,7 @@ const TableHead = React.forwardRef<
| [role=checkbox]]:translate-y-[2px]",
+ "h-10 p-2 text-left align-middle text-sm font-semibold text-gray-600 dark:text-gray-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className,
)}
{...props}
diff --git a/react-app/src/components/ui/tabs.tsx b/react-app/src/components/ui/tabs.tsx
index b62a23a..97d01ca 100644
--- a/react-app/src/components/ui/tabs.tsx
+++ b/react-app/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -262,7 +262,7 @@ export function Demand() {
- {`${1 + pageSize * (pageNumber - 1)} - ${demandList.length + pageSize * (pageNumber - 1)} sur ${totalData}`}
+ {`${demandList.length === 0 ? 0 : 1 + pageSize * (pageNumber - 1)} - ${demandList.length + pageSize * (pageNumber - 1)} sur ${totalData}`}
|
|---|