add error toasts

src/views/home/rightpanel/group/Group.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment, useEffect, useState } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import { fetchGroupById, GroupMember } from '../../../../redux/slices/groups';
 import { Edit } from '../../../../assets/icons/input';
@@ -13,6 +13,7 @@ export const GroupRightPanel: FC = () => {
         return <Navigate to="/home/groups" replace />;
     }
 
+    const navigate = useNavigate();
     const dispatch = useAppDispatch();
 
     const [user, setUser] = useState<GroupMember | undefined>();
@@ -56,7 +57,14 @@ export const GroupRightPanel: FC = () => {
                 return (
                     <Fragment key={i}>
                         {
-                            <div className="text-liquid-light text-[16px] grid grid-cols-[40px,1fr] gap-[10px] items-center cursor-pointer hover:bg-liquid-lighter transition-all duration-300 rounded-[10px] p-[5px] group">
+                            <div
+                                className="text-liquid-light text-[16px] grid grid-cols-[40px,1fr] gap-[10px] items-center cursor-pointer hover:bg-liquid-lighter transition-all duration-300 rounded-[10px] p-[5px] group"
+                                onClick={() => {
+                                    navigate(
+                                        `/home/account/missions?username=${v.username}`,
+                                    );
+                                }}
+                            >
                                 <div className="h-[40px] w-[40px] rounded-[10px] bg-[#D9D9D9]"></div>
                                 <div className="flex flex-col">
                                     <div className="text-liquid-white font-bold text-[16px] leading-5">
@@ -73,7 +81,8 @@ export const GroupRightPanel: FC = () => {
                                     !v.role.includes('Creator') && (
                                         <div
                                             className="h-[34px] w-[34px] absolute right-[34px] opacity-0 group-hover:opacity-100 transition-all duration-300 hover:bg-liquid-light rounded-[10px] p-[5px] active:scale-90"
-                                            onClick={() => {
+                                            onClick={(e) => {
+                                                e.stopPropagation();
                                                 if (
                                                     Number(userId) == v.userId
                                                 ) {