feature fix [home]: now redirects based on profile role (manager), toasts added for status updates

Author: phillipnguyenn

client/package-lock.json

@@ -29,8 +29,10 @@
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.516.0",
     "next": "^15.5.9",
+    "next-themes": "^0.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/package.json

@@ -0,0 +1,43 @@
+import {
+  CircleCheck,
+  Info,
+  LoaderCircle,
+  OctagonX,
+  TriangleAlert,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheck className="h-4 w-4" />,
+        info: <Info className="h-4 w-4" />,
+        warning: <TriangleAlert className="h-4 w-4" />,
+        error: <OctagonX className="h-4 w-4" />,
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />,
+      }}
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

client/src/components/ui/sonner.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 
+import { Toaster } from "@/components/ui/sonner";
 import { AuthProvider } from "@/context/AuthContext";
 
 const queryClient = new QueryClient();
@@ -14,6 +15,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools initialIsOpen={false} />
         <Component {...pageProps} />
+        <Toaster position="top-center" />
       </QueryClientProvider>
     </AuthProvider>
   );

client/src/pages/_app.tsx

@@ -1,21 +1,37 @@
 import { useRouter } from "next/router";
+import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import EventCard from "@/components/ui/event-card";
+import { useAuth } from "@/context/AuthContext";
 import { useEvents } from "@/hooks/events";
 import { useMe } from "@/hooks/me";
-import { clearTokens } from "@/lib/auth";
 
 import SearchDock from "../components/ui/search-dock";
 import DockLayout from "./layouts/docklayout";
 
 export default function Home() {
-  const { data: events, isLoading } = useEvents();
-  const { data: me } = useMe();
+  const { data: events, isLoading: eventsLoading } = useEvents();
+  const { logout } = useAuth();
   const router = useRouter();
+  const { data: me, isLoading: meLoading } = useMe();
 
-  const logout = () => {
-    clearTokens();
+  if (me?.profile.role === "manager") {
+    router.replace("/manager/dashboard");
+    return null;
+  }
+
+  if (meLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        Loading…
+      </div>
+    );
+  }
+
+  const handleLogout = () => {
+    logout();
+    toast("Logged out successfully");
     router.push("/login");
   };
 
@@ -28,10 +44,10 @@ export default function Home() {
               <p>
                 Hello {me.first_name} ({me.username} {me.profile.role})
               </p>
-              <Button onClick={logout}>Logout</Button>
+              <Button onClick={handleLogout}>Logout</Button>
             </div>
           )}
-          {!isLoading &&
+          {!eventsLoading &&
             events?.map((event) => (
               <EventCard key={event.id} event={event}></EventCard>
             ))}