Add Toaster and useToast for notifications

Author: rickkoh

frontend/src/app/signin/layout.tsx

@@ -1,9 +1,11 @@
+import { Toaster } from "@/components/ui/toaster";
 import { ReactNode } from "react";
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <main>{children}</main>
+      <Toaster />
     </>
   );
 }

frontend/src/app/signin/page.tsx

@@ -15,6 +15,7 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { login } from "@/services/authService";
 import { useRouter } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
 
 const FormSchema = z.object({
   email: z.string(),
@@ -24,6 +25,8 @@ const FormSchema = z.object({
 export default function DashboardPage() {
   const router = useRouter();
 
+  const { toast } = useToast();
+
   const methods = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
   });
@@ -42,12 +45,20 @@ export default function DashboardPage() {
           "access_token",
           accessTokenResponse.data.access_token
         );
+        toast({
+          title: "Successfully Logged in!",
+          description: "You should be redirect to /dashboard",
+        });
         router.push("/dashboard");
       } else {
+        toast({
+          title: "Error!",
+          description: accessTokenResponse.message,
+        });
         // TODO: Display error message
       }
     },
-    [router]
+    [router, toast]
   );
 
   return (