changed login type tab and made login route to home page without loading again once user logs in

src/components/AuthPages/Login/index.jsx

@@ -108,7 +108,7 @@ export default function Login() {
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
         // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails(res.data));
+        dispatch(updateUserDetails({...res.data, loggedIn:true}));
         setTimeout(() => {
           navigate("/", { replace: true });
           setLoginLoading(false);
@@ -207,11 +207,11 @@ export default function Login() {
               </div>
 
               {/* switch login component */}
-              <div className="flex justify-start items-end">
+              <div className="flex justify-start items-center gap-3">
                 <button
                   name="full"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
-                    loginType=='full' && "border-r-2 h-[45px]"
+                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                    loginType=='full' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -219,8 +219,8 @@ export default function Login() {
                 </button>
                 <button
                   name="family"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
-                    loginType=='family' && "border-l-2 h-[45px]"
+                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                    loginType=='family' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -66,12 +66,12 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
                                 </p>
                               </div>
                             </div>
-                            <div className="px-2">
+                            <div className="px-2 flex flex-col items-center justify-center">
                               <p className="text-sm font-bold text-dark-gray dark:text-white">
                                 {addedDate}
                               </p>
-                              <p className="text-sm text-dark-gray dark:text-white">
-                                Status: {value.status_text}
+                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                {value.status_text}
                               </p>
                             </div>
                           </div>
@@ -79,7 +79,10 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
                         <td className="text-right py-4 px-2">
                           <button
                             onClick={() =>
-                              setPopUp({ show: true, data: {...value, selectedImage} })
+                              setPopUp({
+                                show: true,
+                                data: { ...value, selectedImage },
+                              })
                             }
                             className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >

src/components/FamilyPopup/SuggestTask.jsx

@@ -4,6 +4,7 @@ import ModalCom from "../Helpers/ModalCom";
 import { Form, Formik } from "formik";
 import InputCom from "../Helpers/Inputs/InputCom";
 import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 
 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
 const SuggestTask = ({ details, onClose, situation }) => {
@@ -13,7 +14,12 @@ const SuggestTask = ({ details, onClose, situation }) => {
     msg: "",
     state: "",
   });
-  // default image
+  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+
+  const switchNextStep = (value) => {
+    setSuggestedNextStep(value);
+  };
+
   const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
   const initialValues = {
     title: details?.title || "",
@@ -79,16 +85,19 @@ const SuggestTask = ({ details, onClose, situation }) => {
             </svg>
           </button>
         </div>
-        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={pathname !== "/manage-family" && handleSubmit}
+        >
           {(props) => {
             return (
               <Form>
                 <div className="p-5 w-full bg-white rounded-md flex justify-between">
+                  {/* Image Section */}
                   <div className="p-4 w-full md:w-2/4 md:border-r-2">
                     <div
                       className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
                       style={{
-                        // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
                         background: `url(${selectedImage}) center / contain no-repeat`,
                       }}
                     ></div>
@@ -141,10 +150,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
                       <textarea
                         id="description"
                         rows="5"
-                        className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
+                        className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
                           pathname === "/manage-family"
-                            ? "px-2"
-                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
+                            ? "px-2 h-[110px]"
+                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
                         }`}
                         style={{ resize: "none" }}
                         name="description"
@@ -153,6 +162,53 @@ const SuggestTask = ({ details, onClose, situation }) => {
                         onBlur={props.handleBlur}
                       />
                     </div>
+
+                    {/* Radio buttons for family */}
+                    {pathname === "/manage-family" && (
+                      <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
+                        <div id="my-radio-group" className="sr-only">
+                          Parent suggested next step
+                        </div>
+                        <div
+                          role="group"
+                          className="flex items-center justify-between py-2"
+                          aria-labelledby="parent-suggested-radio-group"
+                        >
+                          {[
+                            { title: "Send Task" },
+                            { title: "Duplicate" },
+                            { title: "Not Now" },
+                          ].map(({ title }, idx) => (
+                            <label
+                              role="group"
+                              key={idx}
+                              htmlFor="parent-suggested"
+                            >
+                              <input
+                                type="radio"
+                                name="parent-suggested"
+                                value={title}
+                                checked={title == suggestedNextStep}
+                                onChange={switchNextStep}
+                                className={`transition duration-150 ease-in-out parent-suggest`}
+                              />
+                              <span
+                                onClick={switchNextStep}
+                                className={`ml-1 ${
+                                  title == "Not Now"
+                                    ? "text-red-500"
+                                    : title == "Duplicate"
+                                    ? "text-purple"
+                                    : "text-black"
+                                } font-semibold`}
+                              >
+                                {title}
+                              </span>
+                            </label>
+                          ))}
+                        </div>
+                      </div>
+                    )}
                   </div>
                 </div>
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
@@ -164,11 +220,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
                     >
                       <span className="text-gradient"> Cancel</span>
                     </button>
-                    {pathname !== "/manage-family" && (
+                    {pathname !== "/manage-family" ? (
                       <button
                         type="submit"
                         disabled={props.isSubmitting}
-                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
                       >
                         {submitTask.loading
                           ? "Submitting Task"
@@ -178,6 +234,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
                           ? "An Error Occurred"
                           : "Send to Parents"}
                       </button>
+                    ) : (
+                      <button className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full flex items-center transition duration-150 ease-in-out">
+                        {suggestedNextStep == "Send Task" ? (
+                          <>
+                            Continue <Icons name="chevron-right" />
+                          </>
+                        ) : (
+                          "Complete"
+                        )}
+                      </button>
                     )}
                   </div>
                 </div>

src/components/Helpers/Icons.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import ATMCard from '../../assets/images/card.svg'
-import VisaCard from '../../assets/images/visa.svg'
-import MasterCard from '../../assets/images/master.svg'
+import ATMCard from "../../assets/images/card.svg";
+import VisaCard from "../../assets/images/visa.svg";
+import MasterCard from "../../assets/images/master.svg";
 
 export default function Icons({ name }) {
   return (
@@ -472,6 +472,21 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
+      ) : name === "chevron-right" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8.25 4.5l7.5 7.5-7.5 7.5"
+          />
+        </svg>
       ) : name === "right-arrow" ? (
         <svg
           width="24"

src/index.css

@@ -830,16 +830,22 @@ TODO: Responsive ===========================
   background-size: contain;
   background-position-y: bottom;
   background-repeat: no-repeat;
+
 }
 
 .layout-wrapper.login{
   background: rgb(236,237,241);
   background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+  font-family: Circular, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 1.125rem;
+  line-height: 1.56;
 }
 
 .content-wrapper.login{
   --bg-color: 255,255,255;
   background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
+
 }
 
 .content-wrapper select {
@@ -931,4 +937,8 @@ TODO: Responsive ===========================
 /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */
 .slider-left .slick-slider .slick-track{
   margin: 0;
+}
+
+.login-type-btn{
+  box-shadow: 0 0 0.8rem #00000080;
 }

src/middleware/AuthRoute.jsx

@@ -18,6 +18,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   const { jobListTable } = useSelector((state) => state.tableReload);
 
+  const { userDetails:{loggedIn} } = useSelector((state) => state?.userDetails); // CHECKS IF LOGGEDIN IS TRUE
+
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
     const expireSession = () => {
@@ -68,7 +70,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [resetTime]);
 
   useEffect(() => {
-    if (!isLogin.status) {
+    if (!loggedIn) {
       const loadProfile = () => {
         // function to load user profile
         setIsLogin({ loading: true, status: false });
@@ -80,7 +82,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               return;
             }
             setLoadProfileDetails(res.data);
-            dispatch(updateUserDetails(res.data));
+            dispatch(updateUserDetails({...res.data, loggedIn:true}));
             setIsLogin({ loading: false, status: true });
           })
           .catch((error) => {
@@ -134,13 +136,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     });
   },[])
 
-  return isLogin.loading ? (
+  return isLogin.loading && !loggedIn ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
-  ) : // Stills needs fixing
-  // <div className="h-screen m-auto">
-  //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
-  // </div>
-  !isLogin.status ? (
+  ) : 
+  !isLogin.status && !loggedIn ? (
     <Navigate to={redirectPath} replace />
   ) : (
     children || <Outlet />