Merge branch 'family-header' of WrenchBoard/Users-Wrench into master

src/components/Home/FamilyDash.jsx

@@ -18,6 +18,8 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   
   const { familyBannersList } = useSelector((state) => state.familyBannersList);
 
+  const { userDetails } = useSelector((state) => state?.userDetails);
+
   let [reloadBanner, setReloadBanner] = useState(0)
 
   // DO NOT UNCOMMENT THE CODE BELOW
@@ -58,6 +60,20 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
+        {/* Header */}
+        <div className="text-white mb-4 p-2 w-full rounded-lg grid grid-cols-1 sm:grid-cols-2 bg-sky-blue place-content-center">
+          <div className="w-full flex gap-4">
+            <p className="text-lg font-normal">Welcome</p>
+            <div className="self-center">
+              <h1 className="m-0 text-lg font-normal">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+              <p className="-mt-1 text-sm">Email</p>
+            </div>
+          </div>
+          <div className="w-full text-sm flex justify-end items-end">
+            <p>Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+          </div>
+        </div>
+
         {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
         <>
           {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
@@ -67,23 +83,25 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
                 let content = familyBannersList?.result_list[item]
                 let action = item == 'recommend' ? 'familymarket' : 'mytask'
                 return (
-                  <Link key={item} to={`/${action}`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item} to={`/${action}`} className={`h-[300px] rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                     <div className="h-full w-full">
-                      <img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
-                      <div className="px-2 py-1">
-                        <h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
-                        <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
-                      </div>
-                      {/* Horizontal Line */}
-                      <div className="w-full h-[1px] bg-slate-300"></div>
+                      <img className="w-full h-2/3 object-cover object-left rounded-t-lg" src={content.banner.image} alt='banner image' />
+                      <div className="h-1/3 flex flex-col justify-between">
+                        <div className="px-2 py-1">
+                          <h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
+                          <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
+                        </div>
+                        {/* Horizontal Line */}
+                        <div className="w-full h-[1px] bg-slate-300"></div>
 
-                      <div className="px-2 py-1 flex justify-between items-center">
-                        <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                        {/* Dots */}
-                        <div className="flex justify-center gap-1">
-                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                        <div className="px-2 py-1 flex justify-between items-center">
+                          <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
+                          {/* Dots */}
+                          <div className="flex justify-center gap-1">
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -97,23 +115,25 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
             <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
             <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
               {[1,2,3,4,5].map((item, index) => (
-                  <Link key={item} to={`/`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                  <Link key={item} to={`/`} className={`h-[300px] rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
                   <div className="h-full w-full">
-                    <img className="w-full h-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
-                    <div className="px-2 py-1">
-                      <h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
-                      <p className="text-sm text-black dark:text-white">{'Description'}</p>
-                    </div>
-                    {/* Horizontal Line */}
-                    <div className="w-full h-[1px] bg-slate-300"></div>
+                    <img className="w-full h-2/3 object-cover object-left rounded-t-lg" src={''} alt='banner image' />
+                    <div className="h-1/3 flex flex-col justify-between">
+                      <div className="px-2 py-1">
+                        <h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
+                        <p className="text-sm text-black dark:text-white">{'Description'}</p>
+                      </div>
+                      {/* Horizontal Line */}
+                      <div className="w-full h-[1px] bg-slate-300"></div>
 
-                    <div className="px-2 py-1 flex justify-between items-center">
-                      <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-                      {/* Dots */}
-                      <div className="flex justify-center gap-1">
-                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                      <div className="px-2 py-1 flex justify-between items-center">
+                        <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
+                        {/* Dots */}
+                        <div className="flex justify-center gap-1">
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                        </div>
                       </div>
                     </div>
                   </div>