manage family icon adjusted

src/assets/images/icons/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" id="Account"><path fill="#4687ba" d="M19 36.5c-5.8 0-10.6 4.7-10.6 10.6S13.1 57.6 19 57.6 29.5 52.9 29.5 47 24.8 36.5 19 36.5zm0 19.6c-5 0-9.1-4.1-9.1-9.1s4.1-9 9.1-9 9 4 9 9-4 9.1-9 9.1z" class="color000100 svgShape"></path><path fill="#4687ba" d="M65.7 49.6l-.9-5.4c-1.2-8-7.4-14.3-15.1-15.9 1.3-1.6 2.7-3.9 3.3-7.1.5-.8 2.1-3.5 1.5-5.3-.1-.3-.3-.6-.6-.9.7-2 2.3-9-4.8-12.6C38-3.9 28.7 4.7 30.8 14.6c-.2.3-.5.6-.6 1.1-.3 1.3.1 3 1.3 4.9.2.8 1.5 5 3.9 7.9-3.2.8-6 2.4-8.4 4.6-1.2-.7-2.5-1.2-3.8-1.6l-.8-3.3h-6.8l-.8 3.3c-1.3.4-2.6.9-3.8 1.6l-2.8-1.8-4.8 4.8L5.1 39c-.7 1.2-1.2 2.5-1.6 3.8l-3.3.8v6.8l3.3.8c.4 1.3.9 2.6 1.6 3.8l-1.8 2.9 4.8 4.8 2.8-1.8c1.2.7 2.5 1.2 3.8 1.6l.8 3.3h6.8l.8-3.3c1.3-.4 2.6-.9 3.8-1.6l2.8 1.8 4.8-4.8-.3-.5H59c2 0 3.8-.9 5.1-2.4 1.3-1.4 1.9-3.4 1.6-5.4zM32.9 20.1l-.1-.2c-1.7-2.8-1.3-4.2-.8-4.5l.5-.3c-1.8-6 1.4-11.4 5.6-12.9C43.4.5 57 4.1 52 15.9c.3.1 1 .3 1 .6.3 1-.9 3.3-1.5 4.3-1.1 5.3-4.3 9.7-9.2 9.8-5.1 0-8.1-5.5-9.4-10.5zm-3.3 40.7L27 59.2c-1.1.7-2.4 1.5-5.1 2.1l-.7 3h-4.4l-.7-3c-2.3-.5-3.4-1.1-5.1-2.1l-2.6 1.6-3.1-3.1 1.6-2.6C5.7 53.2 5.2 52 4.7 50l-3-.7v-4.4l3-.7c.3-1.4.7-2.9 2.1-5.2l-1.6-2.6 3.1-3.1 2.6 1.6c1.1-.7 2.4-1.5 5.1-2.1l.7-3h4.4l.7 3c2.3.5 3.4 1.1 5.1 2.1l2.6-1.6 3.1 3.1-1.5 2.6c1.2 1.9 1.6 3.1 2.1 5.1l3 .7v4.4l-3 .7c-.3 1.2-.6 2.8-2.1 5.1l1.6 2.6-3.1 3.2zM63 54.1c-1 1.2-2.4 1.8-4 1.8H33.4l-.5-.9c.7-1.2 1.2-2.5 1.6-3.8l3.3-.8v-6.8l-3.3-.8c-.4-1.3-.9-2.6-1.6-3.8l1.8-2.8-4-4c1.8-1.1 3.8-1.9 6-2.4 1.7 1.5 3.8 2.4 6.2 2.2 2.7-.2 4.4-1.2 5.7-2.4 7.6 1.1 13.7 7.1 14.9 14.8l.8 5.4c.2 1.6-.3 3.1-1.3 4.3z" class="color000100 svgShape"></path></svg>

src/assets/images/icons/dashboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="dashboard"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/family.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" id="Family"><path d="M26.305 22.723a4.972 4.972 0 0 0-3.176-8.71 9.917 9.917 0 0 0-3.438-2.292 6 6 0 1 0-7.382 0 9.917 9.917 0 0 0-3.438 2.292 4.972 4.972 0 0 0-3.171 8.71A8.005 8.005 0 0 0 1 30a1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 8.005 8.005 0 0 0-4.695-7.277ZM26 19a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM12 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4ZM6 19a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm10 7.136a8.04 8.04 0 0 0-3.695-3.413 4.949 4.949 0 0 0-1.05-8.16 7.984 7.984 0 0 1 9.49 0 4.949 4.949 0 0 0-1.05 8.16A8.04 8.04 0 0 0 16 26.136Z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Logout"><path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" fill="#e07c8a" class="color000000 svgShape"></path></svg>

src/assets/images/icons/market.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="FindJobs"><path d="M499.22 437.51 433.68 372a23.19 23.19 0 0 0-26.63-4.41l-22.18-22.18A214.71 214.71 0 0 0 62.78 62.78a214.72 214.72 0 0 0 282.6 322.09l22.18 22.18a23.19 23.19 0 0 0 4.44 26.63l65.54 65.54a43.64 43.64 0 0 0 61.71-61.71ZM341.29 369l-.2.18A199.71 199.71 0 0 1 73.39 73.39a199.71 199.71 0 0 1 295.76 267.67l-.22.26q-6.18 7.5-13.14 14.47T341.29 369Zm15.71 6.26c3.21-2.86 6.36-5.8 9.42-8.86s6-6.21 8.86-9.42l20.29 20.3-18.27 18.27Zm131.61 113.35a28.65 28.65 0 0 1-40.49 0l-65.54-65.54a8.22 8.22 0 0 1 0-11.61l28.88-28.88a8.22 8.22 0 0 1 11.61 0l65.54 65.54a28.65 28.65 0 0 1 0 40.49ZM296.08 161h-31v-11.53A21.13 21.13 0 0 0 244 128.36h-58.8a21.13 21.13 0 0 0-21.11 21.11V161h-31a19.82 19.82 0 0 0-19.81 19.81V281a19.83 19.83 0 0 0 19.81 19.82h163A19.84 19.84 0 0 0 315.9 281V180.81A19.83 19.83 0 0 0 296.08 161Zm-117-11.53a6.12 6.12 0 0 1 6.11-6.11H244a6.12 6.12 0 0 1 6.11 6.11V161h-71ZM300.9 281a4.82 4.82 0 0 1-4.82 4.82h-163a4.82 4.82 0 0 1-4.81-4.82v-63.6l63.8 27.77v4.88a14.52 14.52 0 0 0 14.5 14.5h16a14.52 14.52 0 0 0 14.5-14.5v-4.88l63.83-27.77Zm-93.81-31.45v-15h15v15ZM300.9 201l-64.67 28.14a14.5 14.5 0 0 0-13.64-9.63h-16a14.52 14.52 0 0 0-13.59 9.67L128.29 201v-20.19a4.82 4.82 0 0 1 4.81-4.81h163a4.82 4.82 0 0 1 4.82 4.81Zm36.89-109.61c-67.93-67.93-178.47-67.93-246.4 0a174.23 174.23 0 0 0 246.4 246.4 174.23 174.23 0 0 0 0-246.4Zm-10.6 235.8a159.25 159.25 0 1 1 46.63-112.6 158.76 158.76 0 0 1-46.63 112.6Z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/my-task.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 9362 9362" id="jobsact"><path d="M8967 8103l-423 0 0 -856 423 0c181,0 329,193 329,428l0 0c0,235 -148,428 -329,428zm-4636 0l4066 0 0 -856 -4066 0 0 856zm-139 0l-738 -327 -268 0c-43,0 -138,-45 -138,-101 0,-56 95,-101 138,-101l268 0 738 -327 0 428 0 428zm-3982 -8103l6388 0 210 0 0 210 0 809 -420 0 0 -600 -5969 0 0 8523 5969 0 0 -551 420 0 0 761 0 210 -210 0 -6388 0 -210 0 0 -210 0 -8942 0 -210 210 0zm6598 6523l0 436 -420 0 0 -436 420 0zm2554 -3158l0 2557c0,175 -143,317 -317,317l-5224 0c-174,0 -317,-142 -317,-317l0 -2557 2486 0 0 491c0,244 199,443 443,443 244,0 443,-199 443,-443l0 -491 2486 0zm-3843 -2062l1827 0c121,0 219,98 219,219l0 626 -340 0 0 -506 -1585 0 0 506 -340 0 0 -626c0,-121 99,-219 219,-219zm-1698 1011l5224 0c174,0 317,143 317,317l0 568 -2650 0 0 657c0,154 -126,279 -279,279l0 0c-154,0 -280,-125 -280,-279l0 -657 -2649 0 0 -568c0,-174 143,-317 317,-317zm2612 1387c74,0 134,60 134,134 0,74 -60,134 -134,134 -74,0 -134,-60 -134,-134 0,-74 60,-134 134,-134zm-4430 -2741l2801 0 0 420 -2801 0 0 -420zm-806 4786l2023 0 0 176c0,87 19,170 52,244l-2075 0 0 -420zm0 -3657l2366 0c-167,80 -292,235 -330,421l-2036 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 915l2023 0 0 420 -2023 0 0 -420zm0 1828l1371 0 0 421 -1371 0 0 -421z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="Profile"><path fill="#ffffff" d="M108 124H20c-8.8 0-16-7.2-16-16V20c0-8.8 7.2-16 16-16h88c8.8 0 16 7.2 16 16v88c0 8.8-7.2 16-16 16z" class="colorffffff svgShape"></path><path fill="#d2d4d6" d="M4 18.1v21.2h120V18.1c0-7.8-6.3-14.1-14.1-14.1H18.1C10.3 4 4 10.3 4 18.1z" class="colord2d5d6 svgShape"></path><circle cx="20.5" cy="21.1" r="7.1" fill="#7bbaec" class="colorec7bb0 svgShape"></circle><circle cx="59.5" cy="21.1" r="7.1" fill="#4687ba" class="color82cfcd svgShape"></circle><path fill="#57636d" d="M59.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1z" class="color6a576d svgShape"></path><circle cx="40" cy="21.1" r="7.1" fill="#7bbdf1" class="colorf1ed7b svgShape"></circle><path fill="#57636d" d="M20.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.7-6.1-6.1-6.1zm39 14.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1zM40 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zM40 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1S43.3 15 40 15zM4 38.3h120v2H4zM108 104.3H20c-.6 0-1-.4-1-1s.4-1 1-1h88c.6 0 1 .4 1 1s-.4 1-1 1zm-48-48H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1z" class="color6a576d svgShape"></path><path fill="#57636d" d="M108 125H20c-9.4 0-17-7.6-17-17V20c0-9.4 7.6-17 17-17h88c9.4 0 17 7.6 17 17v88c0 9.4-7.6 17-17 17zM20 5C11.7 5 5 11.7 5 20v88c0 8.3 6.7 15 15 15h88c8.3 0 15-6.7 15-15V20c0-8.3-6.7-15-15-15H20z" class="color6a576d svgShape"></path><path fill="#ffffff" d="M108.9 28.1H79.6c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1h29.3c3.9 0 7.1 3.2 7.1 7.1 0 4-3.2 7.1-7.1 7.1z" class="colorffffff svgShape"></path><path fill="#57636d" d="M108.9 29.1H79.6c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1h29.3c4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zM79.6 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1h29.3c3.3 0 6.1-2.7 6.1-6.1s-2.7-6.1-6.1-6.1H79.6z" class="color6a576d svgShape"></path><path fill="#5587af" d="M76 55.3h32v32H76z" class="coloraf5655 svgShape"></path><path fill="#57636d" d="M104.8 88.3H79.2c-2.3 0-4.2-1.9-4.2-4.2V58.5c0-2.3 1.9-4.2 4.2-4.2h25.6c2.3 0 4.2 1.9 4.2 4.2v25.6c0 2.3-1.9 4.2-4.2 4.2zm-25.6-32c-1.2 0-2.2 1-2.2 2.2v25.6c0 1.2 1 2.2 2.2 2.2h25.6c1.2 0 2.2-1 2.2-2.2V58.5c0-1.2-1-2.2-2.2-2.2H79.2z" class="color6a576d svgShape"></path></svg>

src/components/AddJob/AddJob.jsx

@@ -78,7 +78,6 @@ function AddJob({ popUpHandler, categories }) {
           setCurrency({ loading: false, status: true, data: [] });
           return;
         }
-        console.log("Res for currency >> ", res);
 
         setCurrency({
           loading: false,
@@ -221,7 +220,6 @@ function AddJob({ popUpHandler, categories }) {
                   </div>
 
                   {/* Title  */}
-
                   <div className="field w-full mb-[5px]">
                     <InputCom
                       fieldClass="px-6"
@@ -421,10 +419,3 @@ const publicArray = [
   { duration: 21, name: "3 weeks" },
   { duration: 28, name: "4 weeks" },
 ];
-
-// .test("no-e", "Invalid number", (value) => {
-//   if (value && /\d+e/.test(value)) {
-//     return false;
-//   }
-//   return true;
-// })

src/components/AuthPages/AuthLayout.jsx

@@ -38,8 +38,8 @@ export default function LoginLayout({ slogan, children }) {
             </div>
           </div>
           <div className="flex-1 flex justify-center items-center px-10 py-1">
-            <p className="text-black text-[15px] px-2 font-medium flex items-center">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
-             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <span className="">&copy; {new Date().getFullYear()} -</span>
               <Link to="/" className="text-[#009ef7] ml-1">
                 WrenchBoard
               </Link>{" "}

src/components/AuthPages/Login/index.jsx

@@ -207,11 +207,11 @@ export default function Login() {
               </div>
 
               {/* switch login component */}
-              <div className="flex justify-start items-center gap-3">
+              <div className="ml-7 flex justify-start items-center gap-3">
                 <button
                   name="full"
-                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='full' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
+                    loginType=='full' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -219,12 +219,12 @@ export default function Login() {
                 </button>
                 <button
                   name="family"
-                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='family' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
+                    loginType=='family' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >
-                  Family
+                  Family Account
                 </button>
               </div>
 
@@ -234,7 +234,7 @@ export default function Login() {
               {
                 loginType == 'full' ? (
                   //user login component
-                  <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
@@ -322,7 +322,7 @@ export default function Login() {
                 ) : (
                   // END of user login compoenent
                   // family login compoenent
-                  <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"

src/components/AuthPages/SignUp/index.jsx

@@ -4,6 +4,7 @@ import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
   const [signUpLoading, setSignUpLoading] = useState(false);
@@ -64,6 +65,13 @@ export default function SignUp() {
         last_name !== "" &&
         country !== ""
       ) {
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (regEx.test(email) == false) {
+          setMsgError("Invalid Email");
+          return setTimeout(()=>{setMsgError("");},3000)
+        }
+
         setSignUpLoading(true);
         const reqData = {
           country: country,
@@ -112,12 +120,9 @@ export default function SignUp() {
 
   return (
     <>
-      <div className="layout-wrapper login">
+      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="main-wrapper login-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
-          <div className=" h-full">
-            <div className="flex-1 flex justify-center items-center">
         <div className="w-full">
-                <div className="mb-12">
+          <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -126,7 +131,7 @@ export default function SignUp() {
               />
             </Link>
           </div>
-                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-7">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5 mb-0">
             <div>
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
@@ -142,17 +147,6 @@ export default function SignUp() {
                   </Link>
                 </span>
               </div>
-                    <button
-                      type="button"
-                      className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
-                    >
-                      <img
-                        className="mr-3 h-6"
-                        src={facebookLogo}
-                        alt="logo-icon(s)"
-                      />
-                      Sign in with Facebook
-                    </button>
               <div className="w-full flex items-center gap-2">
                 <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
                 <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
@@ -278,46 +272,7 @@ export default function SignUp() {
             </div>
           </div>
         </div>
-            </div>
+      </AuthLayout>
-            <div className="flex-1 flex justify-center items-center p-10">
-              <div className="flex items-center">
-                <a
-                  href="https://www.wrenchboard.com/about-us"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  About
-                </a>
-                <a
-                  href="https://www.wrenchboard.com/service"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Services
-                </a>
-                <a
-                  href="https://www.wrenchboard.com/contact"
-                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Contact Us
-                </a>
-              </div>
-            </div>
-            <div className="flex-1 flex justify-center items-center p-10">
-              <p className="text-black text-[15px] px-2 font-medium flex items-center">
-                <span className="text-3xl mt-2 mr-1">©</span> 2023 -{" "}
-                <Link to="/" className="text-[#009ef7] ml-1">
-                  WrenchBoard
-                </Link>{" "}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
     </>
   );
 }

src/components/AuthPages/VerifyLink/index.jsx

@@ -90,7 +90,7 @@ export default function VerifyLink() {
         if (
           data &&
           data.internal_return >= 0 &&
-          data.status_text === "Link Verfied"
+          data.status_text === "Link Verified"
         ) {
           setPageLoader(false);
         } else {

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -19,6 +19,7 @@ import {
   ProfileInfo,
   FamilyPending,
 } from "./Tabs";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function FamilyManageTabs({
   className,
@@ -118,9 +119,7 @@ export default function FamilyManageTabs({
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
-    { id: 3, name: "Pending" },
+    { id: 3, name: "Pending" }
-    { id: 4, name: "Account" },
-    { id: 5, name: "Profile" },
   ];
 
   const [tab, setTab] = useState(tabs[0].name);
@@ -193,7 +192,7 @@ export default function FamilyManageTabs({
           }
         >
           <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
-            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full">
+            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
               <ProfileInfo
                 profileImg={profileImg}
                 profileImgInput={profileImgInput}
@@ -201,6 +200,20 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
+              <div className="mt-4 flex justify-center items-center gap-2">
+                <button
+                  onClick={() => tabHandler('Account')} 
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  <img src={localImgLoad('images/icons/account.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
+                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                </button>
+                <button
+                  onClick={() => tabHandler('Profile')} 
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  <img src={localImgLoad('images/icons/profile.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
+                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                </button>
+              </div>
             </div>
             <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,95 +1,189 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from "react";
-import ModalCom from '../../Helpers/ModalCom'
+import ModalCom from "../../Helpers/ModalCom";
-import Detail from '../../jobPopout/popoutcomponent/Detail'
+import Detail from "../../jobPopout/popoutcomponent/Detail";
-import usersService from '../../../services/UsersService'
+import usersService from "../../../services/UsersService";
-import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import { PriceFormatter } from '../../Helpers/PriceFormatter'
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { NewTasks } from "./forms";
 
 function AssignTaskPopout({ action, situation, familyDetails }) {
-    const apiCall = new usersService()
+  const apiCall = new usersService();
 
-    let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''}) // HOLDS RESPONSE FOR SENDING API REQUEST
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
-    let [familyTask, setFamilyTask] = useState({loading: true, data: []})
+  let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });
 
-    let [taskType, setTaskType] = useState('select')  // SWITCHES BTW SELECT TASK AND NEW TASK
+  let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
-    let [activeTask, setActiveTask] = useState({id: 0, data: {}}) // HOLDS SELECTED TASK
+  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
 
-    const switchTaskType = ({target:{value}}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+  const switchTaskType = ({ target: { value } }) => {
-      setTaskType(value)
+    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    }
+    setTaskType(value);
+  };
 
-    const handleActiveTask = (id=0, data={}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+  const handleActiveTask = (id = 0, data = {}) => {
-      setActiveTask({id, data})
+    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    }
+    setActiveTask({ id, data });
+  };
+
+  // New Task
+  const [formState, setFormState] = useState({
+    // Initialize form state with desired fields
+    banner: "" || "default.jpg",
+    country: "" || "",
+    price: "" || "",
+    title: "" || "",
+    description: "" || "",
+    job_detail: "" || "",
+    timeline_days: "" || "",
+    category: [] || "",
+  });
 
   const assignFamilyTask = () => {
-      setRequestStatus({loading: true, status: false, message: ''})
+    setRequestStatus({ loading: true, status: false, message: "" });
-      let reqData = {}
+    let reqData = {};
-      if(taskType == 'select'){ // RUNS HERE IF TASK TYPE IS SELECT
+    if (taskType == "select") {
+      // RUNS HERE IF TASK TYPE IS SELECT
       if (!Object.keys(activeTask.data).length) {
-          setRequestStatus({loading: false, status: false, message: 'No Task is seleted'})
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "No Task is seleted",
+        });
         return setTimeout(() => {
-            setRequestStatus({loading: false, status: false, message: ''})
+          setRequestStatus({ loading: false, status: false, message: "" });
-          }, 3000)
+        }, 3000);
       }
-        reqData = { // API PAYLOADS
+      reqData = {
+        // API PAYLOADS
         job_id: activeTask.data?.job_id,
         job_uid: activeTask.data?.job_uid,
         family_uid: familyDetails.uid,
         job_description: activeTask.data?.description,
         assign_mode: 110011,
+      };
     }
 
-        apiCall.assignFamilyTask(reqData).then(res => {
+    if (taskType === "new") {
+      const {
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price,
+        timeline_days,
+        title,
+      } = formState;
+
+      const requiredFields = [
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price,
+        timeline_days,
+        title,
+      ];
+
+      if (requiredFields.some((field) => !field)) {
+        const emptyField = requiredFields.find((field) => !field);
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: `${emptyField} Empty`,
+        });
+
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000);
+
+        return;
+      }
+
+      reqData = {
+        banner,
+        category,
+        country,
+        description,
+        job_detail,
+        price: price * 100,
+        timeline_days,
+        title,
+        assign_mode: 110055,
+        family_uid: familyDetails.uid,
+      };
+    }
+
+    apiCall
+      .assignFamilyTask(reqData)
+      .then((res) => {
         if (res.status != 200 || res.data.internal_return < 0) {
-            setRequestStatus({loading: false, status: false, message: 'failed to assign task'})
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "failed to assign task",
+          });
           return setTimeout(() => {
-              setRequestStatus({loading: false, status: false, message: ''})
+            setRequestStatus({ loading: false, status: false, message: "" });
-            }, 5000)
+          }, 5000);
         }
-          setRequestStatus({loading: false, status: true, message: 'action successful'})
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "action successful",
+        });
         setTimeout(() => {
-            setRequestStatus({loading: false, status: false, message: ''})
+          setRequestStatus({ loading: false, status: false, message: "" });
-            action() // FUNCTION THAT CLOSES THE MODAL BOX
+          action(); // FUNCTION THAT CLOSES THE MODAL BOX
-          }, 5000)
+        }, 5000);
-        }).catch(err => {
-          setRequestStatus({loading: false, status: false, message: 'An Error occured, try again'})
-          setTimeout(()=>{
-            setRequestStatus({loading: false, status: false, message: ''})
-          }, 5000)
       })
-      }
+      .catch((err) => {
-
+        setRequestStatus({
-      if(taskType == 'new'){ // RUNS HERE IF TASK TYPE IS NEW TASK
+          loading: false,
-        console.log('TESTING')
+          status: false,
-      }
+          message: "An Error occured, try again",
-    }
+        });
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
 
   useEffect(() => {
     const reqData = {
       limit: 30,
       offset: 0,
-            job_type: 'FAMILY',
+      job_type: "FAMILY",
-            action: 13005
+      action: 13005,
-        }
+    };
-        apiCall.getMyJobList(reqData).then(res => {
+    apiCall
-            setFamilyTask({loading: false, data: res?.data?.result_list})
+      .getMyJobList(reqData)
+      .then((res) => {
+        setFamilyTask({ loading: false, data: res?.data?.result_list });
         if (res?.data?.result_list?.length) {
-              setActiveTask(prev => ({...prev, data:res?.data?.result_list[0]}))
+          setActiveTask((prev) => ({
+            ...prev,
+            data: res?.data?.result_list[0],
+          }));
         }
-        }).catch(err => {
-            setFamilyTask({loading: false, data: []})
-            console.log('Error', err)
       })
-    },[])
+      .catch((err) => {
+        setFamilyTask({ loading: false, data: [] });
+        console.log("Error", err);
+      });
+  }, []);
+
+  console.log("Trying to see form data >>", formState);
   return (
     <>
-        <ModalCom
+      <ModalCom action={action} situation={situation} className="assign-task-popup">
-        action={action}
-        situation={situation}
-        >
         <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
           <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
@@ -121,64 +215,120 @@ function AssignTaskPopout({action, situation, familyDetails}) {
               </svg>
             </button>
           </div>
-              {familyTask.loading ?
+          {familyTask.loading ? (
-              <div className='h-[100px] w-full flex justify-center items-center'>
+            <div className="h-[100px] w-full flex justify-center items-center">
-                <LoadingSpinner color='sky-blue' size='16' />
+              <LoadingSpinner color="sky-blue" size="16" />
             </div>
-              :
+          ) : (
             <>
-                <div className="job-action-modal-body w-full md:grid md:grid-cols-2"> 
+              <div
+                className={`job-action-modal-body w-full md:grid ${
+                  taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                }`}
+              >
                 <div className="p-4">
                   <div className="mb-2 w-full flex items-center gap-4">
                     <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input type="radio" name='task-type' value='select' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='select'} onChange={switchTaskType}/>
+                      <input
+                        type="radio"
+                        name="task-type"
+                        value="select"
+                        className="w-[20px] h-[20px] cursor-pointer"
+                        checked={taskType == "select"}
+                        onChange={switchTaskType}
+                      />
                       <span>Select Task</span>
                     </div>
                     <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input type="radio" name='task-type' value='new' className="w-[20px] h-[20px] cursor-pointer" checked={taskType=='new'} onChange={switchTaskType}/>
+                      <input
+                        type="radio"
+                        name="task-type"
+                        value="new"
+                        className="w-[20px] h-[20px] cursor-pointer"
+                        checked={taskType == "new"}
+                        onChange={switchTaskType}
+                      />
                       <span>New Task</span>
                     </div>
                   </div>
-                    <div className='p-4 w-full h-[400px] overflow-y-auto bg-slate-100'>
+                  {/* Task Type === select */}
-                      {
+                  {taskType == "select" && (
-                        taskType == 'select' ? 
+                    <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100">
-                        familyTask?.data?.length ?
+                      {familyTask?.data?.length ? (
                         familyTask?.data?.map((item, index) => (
-                          <div key={item.job_uid} className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer" onClick={()=>handleActiveTask(item.job_uid, item)}>
+                          <div
+                            key={item.job_uid}
+                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                            onClick={() => handleActiveTask(item.job_uid, item)}
+                          >
                             <input
                               type="radio"
-                              name='task-list'
+                              name="task-list"
-                              checked={(activeTask.id == item.job_uid) || (activeTask.id==index)&& true} 
+                              checked={
-                              onChange={()=>handleActiveTask(item.job_uid, item)}
+                                activeTask.id == item.job_uid ||
+                                (activeTask.id == index && true)
+                              }
+                              onChange={() =>
+                                handleActiveTask(item.job_uid, item)
+                              }
                               className="w-[15px] h-[15px] cursor-pointer"
                             />
-                            <p className="w-full text-dark-gray tracking-wide">{item?.title}</p>
+                            <p className="w-full text-dark-gray tracking-wide">
+                              {item?.title}
+                            </p>
                           </div>
                         ))
-                          :
+                      ) : (
-                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">No Task found!</p>
+                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                        :
+                          No Task found!
-                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center">SPACE FOR NEW TASK</p>
+                        </p>
-                      }
+                      )}
                     </div>
+                  )}
+                  {taskType == "new" && (
+                    <div className="p-4 w-full h-[400px]">
+                      <NewTasks
+                        formState={formState}
+                        setFormState={setFormState}
+                      />
+                    </div>
+                  )}
                 </div>
 
-                  {familyTask?.data?.length > 0 ?
+                {/*Right Hand Side for details && Task Type === select */}
+                {taskType == "select" && (
+                  <>
+                    {familyTask?.data?.length > 0 ? (
                       <div className="p-4">
                         <div className="w-full">
-                      <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">{activeTask?.data?.title}</p>
+                          <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                            {activeTask?.data?.title}
+                          </p>
                           <div className="my-3">
-                        <Detail label="Description" value={activeTask?.data?.description} />
+                            <Detail
+                              label="Description"
+                              value={activeTask?.data?.description}
+                            />
                           </div>
-                      <div className='flex items-center'>
+                          <div className="flex items-center">
                             <div className="my-3 w-full flex items-center gap-1">
-                          <label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Price</label>
+                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                          <p className='p-1 text-sm text-slate-900 dark:text-white'>{PriceFormatter(activeTask?.data?.price*0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code)}</p>
+                                Price
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                {PriceFormatter(
+                                  activeTask?.data?.price * 0.01,
+                                  activeTask?.data?.currency,
+                                  activeTask?.data?.curreny_code
+                                )}
+                              </p>
                             </div>
 
                             <div className="my-3 w-full flex items-center gap-1">
-                          <label className='text-slate-900 dark:text-white tracking-wide font-semibold'>Timeline</label>
+                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                          <p className='p-1 text-sm text-slate-900 dark:text-white'>{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                                Timeline
+                              </label>
+                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
                             </div>
                           </div>
 
@@ -201,17 +351,18 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                               readOnly
                               // onChange={handleInputChange}
                             />
-                        {/* <p>{}</p> */}
                           </div>
                         </div>
                       </div>
-                  :
+                    ) : (
                       <></>
-                  }                   
+                    )}
+                  </>
+                )}
               </div>
 
               {/* BTN */}
-                <div className='p-2 border-t-2 flex justify-end items-center gap-3'>
+              <div className="p-2 border-t-2 flex justify-end items-center gap-3">
                 {/* error or success display */}
                 {requestStatus.message != "" &&
                   (!requestStatus.status ? (
@@ -232,15 +383,16 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                 {/* End of error or success display */}
                 <button
                   disabled={requestStatus.loading}
-                    onClick={action} type="button" 
+                  onClick={action}
+                  type="button"
                   className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
                 >
-                      <span className='text-gradient'>Close</span>
+                  <span className="text-gradient">Close</span>
                 </button>
-                  <div className=''>
+                <div className="">
-                    {requestStatus.loading ?
+                  {requestStatus.loading ? (
-                    <LoadingSpinner color='sky-blue' size='8' />
+                    <LoadingSpinner color="sky-blue" size="8" />
-                    :
+                  ) : taskType == "select" ? (
                     <button
                       type="button"
                       disabled={requestStatus.loading}
@@ -249,15 +401,24 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                     >
                       Assign
                     </button>
-                    }
+                  ) : (
+                    <button
+                      type="button"
+                      disabled={requestStatus.loading}
+                      onClick={assignFamilyTask}
+                      className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                    >
+                      {`Assign to ${familyDetails?.firstname}`}
+                    </button>
+                  )}
                 </div>
               </div>
             </>
-              }
+          )}
         </div>
       </ModalCom>
     </>
-  )
+  );
 }
 
-export default AssignTaskPopout
+export default AssignTaskPopout;

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+import usersService from "../../../../services/UsersService";
+import InputCom from "../../../Helpers/Inputs/InputCom";
+import debounce from "../../../../hooks/debounce";
+
+const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg");
+export default function NewTasks({ formState, setFormState }) {
+  let [currency, setCurrency] = useState({
+    loading: true,
+    status: false,
+    data: null,
+  });
+
+  const ApiCall = new usersService();
+
+  // FUNCTION TO GET Currency
+  const getUserCurrency = () => {
+    setCurrency((prev) => ({ ...prev, loading: true }));
+    ApiCall.getUserWallets()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setCurrency({ loading: false, status: true, data: [] });
+          return;
+        }
+
+        setCurrency({
+          loading: false,
+          status: true,
+          data: res.data.result_list,
+        });
+      })
+      .catch((err) => {
+        setCurrency({ loading: false, status: false, data: [] });
+      });
+  };
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    setFormState((prevState) => ({
+      ...prevState,
+      [name]: value,
+    }));
+  };
+
+  useEffect(() => {
+    getUserCurrency();
+  }, []);
+
+  return (
+    <form className="w-full flex justify-between items-center">
+      <div className="flex flex-col gap-3 max-w-[77%]">
+        {/* inputs starts here */}
+        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
+          {/* Currency */}
+          <div className="field w-full mb-6 xl:mb-0">
+            <label
+              htmlFor="country"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+            >
+              Currency
+              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+            </label>
+            <select
+              id="country"
+              name="country"
+              value={formState.country}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            >
+              {currency.loading ? (
+                <option className="text-slate-500 text-[13.975px]" value="">
+                  Loading...
+                </option>
+              ) : currency.data.length ? (
+                <>
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Currency
+                  </option>
+                  {currency.data?.map((item, index) => (
+                    <option
+                      key={index}
+                      className="text-slate-500 text-lg"
+                      value={item?.country}
+                    >
+                      {item?.description}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option className="text-slate-500 text-lg" value="">
+                  No Options Found! Try Again
+                </option>
+              )}
+            </select>
+          </div>
+
+          {/* Price */}
+          <div className="field w-full">
+            <InputCom
+              fieldClass="px-6 text-right"
+              label="Price"
+              labelClass="tracking-wide"
+              inputBg="bg-slate-100"
+              type="number"
+              name="price"
+              placeholder="0"
+              value={formState.price}
+              inputHandler={handleInputChange}
+              // blurHandler={props.handleBlur}
+              // error={props.errors.price && props.touched.price && props.errors.price}
+            />
+          </div>
+
+          {/* Duration */}
+          <div className="field w-full mb-6 xl:mb-0">
+            <label
+              htmlFor="timeline_days"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+            >
+              Timeline
+              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+            </label>
+            <select
+              id="timeline_days"
+              name="timeline_days"
+              value={formState.timeline_days}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            >
+              {publicArray.length && (
+                <>
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Duration
+                  </option>
+                  {publicArray.map(({ name, duration }, idx) => (
+                    <option
+                      className="text-slate-500 text-[13.975px]"
+                      value={duration}
+                    >
+                      {name}
+                    </option>
+                  ))}
+                </>
+              )}
+            </select>
+          </div>
+        </div>
+
+        {/* Title  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Title"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="title"
+            value={formState.title}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.title && props.touched.title && props.errors.title}
+          />
+        </div>
+
+        {/* Description  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Description"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="description"
+            value={formState.description}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.description && props.touched.description && props.errors.description}
+          />
+        </div>
+
+        {/* Details */}
+        <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+          <div className="w-full">
+            <label
+              htmlFor="Job Delivery Details"
+              className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+            >
+              Job Delivery Details
+              {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
+            </label>
+            <textarea
+              id="Job Delivery Details"
+              rows="5"
+              className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+              style={{ resize: "none" }}
+              name="job_detail"
+              value={formState.job_detail}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            />
+          </div>
+        </div>
+      </div>
+      {/* Banner Image */}
+      <div className="max-w-[20%] w-full">
+        <div className="h-32 w-full">
+          <img
+            src={DEFAULT_IMAGE}
+            alt="task_banner_img"
+            className="w-full h-full object-contain"
+          />
+        </div>
+      </div>
+    </form>
+  );
+}
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/FamilyAcc/FamilyPopout/forms/index.js

@@ -0,0 +1,3 @@
+import NewTasks from "./NewTasks";
+
+export {NewTasks}

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -3,6 +3,7 @@ import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import dataImage2 from "../../../assets/images/data-table-user-2.png";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import localImgLoad from "../../../lib/localImgLoad";
 
 export default function FamilyPending({
   familyData,
@@ -50,6 +51,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
+                      let image = value.banner ? value.banner : 'default.jpg'
                       return (
                         <tr
                           key={index}
@@ -57,11 +59,11 @@ export default function FamilyPending({
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${image}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -8,6 +8,7 @@ import Icons from "../../Helpers/Icons";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import ModalCom from "../../Helpers/ModalCom";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
+import localImgLoad from "../../../lib/localImgLoad";
 
 
 export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
@@ -55,6 +56,7 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                             value?.currency_code,
                             value?.currency
                           );
+                          let image = value.banner ? value.banner : 'default.jpg'
                           return (
                             <tr
                               key={index}
@@ -62,11 +64,11 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                             >
                               <td className=" py-4">
                                 <div className="flex space-x-2 items-center w-full">
-                                  <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px] min-w-[60px]">
+                                  <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                     <img
-                                      src={dataImage2}
+                                      src={localImgLoad(`images/taskbanners/${image}`)}
                                       alt="data"
-                                      className="w-full h-full"
+                                      className="w-full h-full rounded-full"
                                     />
                                   </div>
                                   <div className="flex flex-col flex-[0.9]">

src/components/Helpers/Icons.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import localImgLoad from "../../lib/localImgLoad";
 
 import ATMCard from "../../assets/images/card.svg";
 import VisaCard from "../../assets/images/visa.svg";
@@ -508,6 +509,16 @@ export default function Icons({ name }) {
         <img className="w-[20px]" src={VisaCard} alt="card" />
       ) : name === "master-card" ? (
         <img className="w-[20px]" src={MasterCard} alt="card" />
+      ) : name === "new-dashboard" ? (
+        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/dashboard.svg')} alt="dashboard" />
+      ) : name === "new-family" ? (
+        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/family.svg')} alt="family" />
+      ) : name === "new-logout" ? (
+        <img className="w-[45px] rounded-full bg-white p-1" src={localImgLoad('images/icons/logout.svg')} alt="logout" />
+      ) : name === "new-market" ? (
+        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/market.svg')} alt="market" />
+      ) : name === "new-mytask" ? (
+        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/my-task.svg')} alt="task" />
       ) : (
         ""
       )}

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -4,6 +4,7 @@ import dataImage2 from "../../assets/images/data-table-user-2.png";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
   const navigate = useNavigate();
@@ -56,11 +57,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/MyJobs/MyJobTable.jsx

@@ -13,6 +13,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 import EditIcon from '../../assets/images/icon-edit.svg'
 import DeleteIcon from '../../assets/images/icon-delete.svg'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   // Getting the categories
@@ -114,8 +115,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
         <td className="py-9">
           <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
             <div className="flex space-x-2 items-center job-items w-full">
-              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
-                <img src={dataImage2} alt="data" className="w-full h-full" />
+                <img src={localImgLoad(`images/taskbanners/${value.banner}`)} alt="data" className="w-full h-full rounded-full" />
               </div>
               <div className="flex flex-col flex-[0.9]">
                 <h1 className="font-bold text-xl text-dark-gray dark:text-white">

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyPendingJobTable({ MyJobList, className }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -55,11 +56,11 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${value.banner}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/MyWaitingJobs/MyWaitingJobTable.jsx

@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function MyWaitingJobTable({ MyJobList, className }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
@@ -43,6 +44,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
+                      let image = value.banner ? value.banner : 'default.jpg'
                       return (
                         <tr
                           key={index}
@@ -50,11 +52,11 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]">
+                              <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={dataImage2}
+                                  src={localImgLoad(`images/taskbanners/${image}`)}
                                   alt="data"
-                                  className="w-full h-full"
+                                  className="w-full h-full rounded-full"
                                 />
                               </div>
                               <div className="flex flex-col flex-[0.9]">

src/components/OffersInterest/OffersInterestTable.jsx

@@ -8,6 +8,7 @@ import PaginatedList from "../Pagination/PaginatedList";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 import familyImage from '../../assets/images/no-family-side.png'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function OffersInterestTable({offerInterestList, className}) {
 
@@ -53,15 +54,16 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </thead>
                             <tbody className="h-full">
                             {currentOfferInterestList?.map((item, index) => {
+                                let image = item.banner ? item.banner : 'default.jpg'
                                 return (
                                 <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
-                                            <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                            <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                                 <img
-                                                    src={dataImage1}
+                                                    src={localImgLoad(`images/taskbanners/${image}`)}
                                                     alt="data"
-                                                    className="w-full h-full"
+                                                    className="w-full h-full rounded-full"
                                                 />
                                             </div>
                                             <div className="flex flex-col">

src/index.css

@@ -939,6 +939,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.login-type-btn{
+.assign-task-popup{
-  box-shadow: 0 0 0.8rem #00000080;
+  top: 75px;
 }