From b0b9327c9e21317e7816e71074eb1e465bfb181e Mon Sep 17 00:00:00 2001
From: Oussama El Benney <oussema.elbenney@teamwillgroup.com>
Date: Tue, 16 Jul 2024 15:03:53 +0100
Subject: [PATCH] fixed booked users tables and login ui

---
 .../(dashboard)/assign-zone-project/page.jsx  |  2 +-
 .../BookedUsersTable.jsx                      |  4 +-
 .../consultation-reservations/page.jsx        | 77 +++++++++++--------
 src/app/auth/login/page.jsx                   | 15 ++--
 4 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/src/app/(dashboard)/assign-zone-project/page.jsx b/src/app/(dashboard)/assign-zone-project/page.jsx
index c9484c0..f3e0a85 100644
--- a/src/app/(dashboard)/assign-zone-project/page.jsx
+++ b/src/app/(dashboard)/assign-zone-project/page.jsx
@@ -309,7 +309,7 @@ const AffectingZoneProject = () => {
             }</>}
             {
                 (listProjectsSemiAffected && listProjectsSemiAffected.length) ? <div onClick={handleOpenCompleteAffectation} className='fixed bottom-3 right-5'>
-                    <button className="h-9 px-5 disabled:opacity-60 space-x-2 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-blue-400/70 bg-blue-400 rounded-full text-white flex items-center justify-center">
+                    <button className="h-9 px-5 disabled:opacity-60 space-x-2 disabled:cursor-not-allowed enabled:hover:-translate-y-1 duration-200 delay-75 enabled:hover:shadow-lg will-change-transform enabled:hover:shadow-blue-400/70 bg-blue-400 rounded-md text-white flex items-center justify-center">
                         <p>Compléter l'affectation</p>
                     </button>
                 </div>
diff --git a/src/app/(dashboard)/consultation-reservations/BookedUsersTable.jsx b/src/app/(dashboard)/consultation-reservations/BookedUsersTable.jsx
index f16e486..ad6fc10 100644
--- a/src/app/(dashboard)/consultation-reservations/BookedUsersTable.jsx
+++ b/src/app/(dashboard)/consultation-reservations/BookedUsersTable.jsx
@@ -9,12 +9,12 @@ const BookedUsersTable = ({bookedPlaces, presence}) => {
             <div className="w-full bg-white flex flex-col justify-center p-5 rounded-xl border border-neutral-300">
                 {presence &&
                     <ul className="list-outside text-orange-400 list-disc px-4">
-                    <li className='text-neutral-700 font-medium w-3/4'>Liste des collaborateurs ayant confirmé
+                    <li className='text-neutral-700 text-sm md:text-base font-medium md:w-3/4'>Liste des collaborateurs ayant confirmé
                     leur présence :</li>
                     </ul>}
                 {!presence &&
                     <ul className="list-outside text-sky-400 list-disc px-4">
-                        <li className='text-neutral-700 font-medium w-3/4'>Liste des collaborateurs ayant réservé
+                        <li className='text-neutral-700 text-sm md:text-base font-medium md:w-3/4'>Liste des collaborateurs ayant réservé
                             sans être présents :</li>
                     </ul>}
                 <table className="min-w-full bg-white border-collapse border border-white text-sm">
diff --git a/src/app/(dashboard)/consultation-reservations/page.jsx b/src/app/(dashboard)/consultation-reservations/page.jsx
index e56a7da..a1ce7ba 100644
--- a/src/app/(dashboard)/consultation-reservations/page.jsx
+++ b/src/app/(dashboard)/consultation-reservations/page.jsx
@@ -331,7 +331,7 @@ const Reservation = () => {
                         onClick={() => {
                             setSelectedZone({floorId: null, zoneId: null})
                             setNameProjectFilter("")
-                        } }
+                        }}
                     >
                         <ArrowUturnLeft className=" h-5 w-5"/>
                         <p>Réinitialiser</p>
@@ -362,40 +362,49 @@ const Reservation = () => {
                 {(selectedZone.floorId && !isLoadingData) &&
                     <div
                         className='h-100 overflow-hidden w-full mb-7 flex flex-col items-center pt-2 px-5 pb-7 rounded-xl border border-neutral-300 relative'>
-                        {!(floors.find((element) => element.id == selectedZone.floorId).image) ? <div role="status" class="w-full rounded shadow p-2">
-                            <div class="flex items-center justify-center h-48 mb-4 bg-gray-200 rounded ">
-                                <div className='flex flex-col justify-center items-center gap-3'>
-                                <svg class="w-10 h-10 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
-                                    <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-                                    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-                                </svg>
-                                <span className='text-white font-medium'>Aucune Illustration fournie pour cet étage</span>
+                        {!(floors.find((element) => element.id == selectedZone.floorId).image) ?
+                            <div role="status" class="w-full rounded shadow p-2">
+                                <div class="flex items-center justify-center h-48 mb-4 bg-gray-200 rounded ">
+                                    <div className='flex flex-col justify-center items-center gap-3'>
+                                        <svg class="w-10 h-10 text-white" aria-hidden="true"
+                                             xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                                            <path
+                                                d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+                                            <path
+                                                d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+                                        </svg>
+                                        <span className='text-white font-medium'>Aucune Illustration fournie pour cet étage</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        :
-                        <div role="status" class="w-ful rounded shadow p-2">
-                            <img src={floors.find((element) => element.id == selectedZone.floorId).image} className='w-full [aspect-ratio:2.5]'></img>
-                        </div>
+                            :
+                            <div role="status" class="w-ful rounded shadow p-2">
+                                <img src={floors.find((element) => element.id == selectedZone.floorId).image}
+                                     className='w-full [aspect-ratio:2.5]'></img>
+                            </div>
                         }
-                        {(!isLoadingData) && <div className='flex items-center w-full overflow-x-auto absolute -bottom-px left-0'>
-                            {/*selectedZone.floorId*/}
-                            {floors.filter((element) => element.id == selectedZone.floorId).map((floor, index) => {
-                                return floor.zones?.map((zone, index) => {
-                                    if (selectedZone.zoneId == zone.id && selectedZone.floorId == floor.id) return <div
-                                        onClick={() => setSelectedZone({floorId: floor.id, zoneId: zone.id})}
-                                        key={index}
-                                        className='rounded-md not-first:-left-2 text-white relative whitespace-nowrap flex items-center justify-center border border-[#B2CEDE] text-xs md:text-sm lg:text-base px-5 lg:px-10 h-9 bg-[#B2CEDE]'>
-                                        <p>Etage {floor.numero} - Zone {zone.nom}</p>
-                                    </div>
-                                    return <div key={index}
-                                                onClick={() => setSelectedZone({floorId: floor.id, zoneId: zone.id})}
-                                                className='cursor-pointer not-first:-left-2 hover:bg-neutral-100 duration-300 rounded-md text-[#8E8D8D] relative whitespace-nowrap border flex items-center justify-center border-[#D9D9D9] text-xs md:text-sm lg:text-base lg:px-10 px-5 h-9 bg-white'>
-                                        <p>Etage {floor.numero} - Zone {zone.nom}</p>
-                                    </div>
-                                })
-                            })}
-                        </div>}
+                        {(!isLoadingData) &&
+                            <div className='flex items-center w-full overflow-x-auto absolute -bottom-px left-0'>
+                                {/*selectedZone.floorId*/}
+                                {floors.filter((element) => element.id == selectedZone.floorId).map((floor, index) => {
+                                    return floor.zones?.map((zone, index) => {
+                                        if (selectedZone.zoneId == zone.id && selectedZone.floorId == floor.id) return <div
+                                            onClick={() => setSelectedZone({floorId: floor.id, zoneId: zone.id})}
+                                            key={index}
+                                            className='rounded-md not-first:-left-2 text-white relative whitespace-nowrap flex items-center justify-center border border-[#B2CEDE] text-xs md:text-sm lg:text-base px-5 lg:px-10 h-9 bg-[#B2CEDE]'>
+                                            <p>Etage {floor.numero} - Zone {zone.nom}</p>
+                                        </div>
+                                        return <div key={index}
+                                                    onClick={() => setSelectedZone({
+                                                        floorId: floor.id,
+                                                        zoneId: zone.id
+                                                    })}
+                                                    className='cursor-pointer not-first:-left-2 hover:bg-neutral-100 duration-300 rounded-md text-[#8E8D8D] relative whitespace-nowrap border flex items-center justify-center border-[#D9D9D9] text-xs md:text-sm lg:text-base lg:px-10 px-5 h-9 bg-white'>
+                                            <p>Etage {floor.numero} - Zone {zone.nom}</p>
+                                        </div>
+                                    })
+                                })}
+                            </div>}
                     </div>}
                 <div
                     className="w-full bg-white mb-7 flex flex-col items-center flex-1 h-full p-5 rounded-xl border border-neutral-300">
@@ -436,9 +445,9 @@ const Reservation = () => {
                         </div>
                     }
                 </div>
-                <div className='flex flex-row gap-x-4 w-full'>
+                <div className='flex flex-row flex-wrap md:flex-nowrap gap-4 w-full'>
                     <BookedUsersTable bookedPlaces={bookedPlaces} presence={true}/>
-                <BookedUsersTable bookedPlaces={bookedPlaces} presence={false}/>
+                    <BookedUsersTable bookedPlaces={bookedPlaces} presence={false}/>
                 </div>
             </div>
         </>
diff --git a/src/app/auth/login/page.jsx b/src/app/auth/login/page.jsx
index 62afb33..690dcca 100644
--- a/src/app/auth/login/page.jsx
+++ b/src/app/auth/login/page.jsx
@@ -17,6 +17,11 @@ const LoginPage = () => {
     const [messages, setMessages] = useState('');
     const [isLoading, setIsLoading] = useState(false)
     const router = useRouter();
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
 
     const handleSubmit = (event) => {
         event.preventDefault();
@@ -62,8 +67,6 @@ const LoginPage = () => {
                     className="w-full md:min-h-0 min-h-screen md:justify-start items-center justify-center py-14 rounded-lg flex flex-col">
                     <Image src={TeambookVertical} alt={TeambookVertical} width={250} height={70}/>
                     <h1 className="text-2xl font-semibold text-sushi-500 mt-8">Connectez-vous à notre plateforme</h1>
-                    <h2 className="text-chicago-700">Vous n avez pas de compte ?<span className="text-sushi-500"> Créer un compte </span>
-                    </h2>
                     <div className="flex flex-col md:w-2/3 sm:w-9/12 w-11/12 mt-16">
                         <label htmlFor="username" className="text-chicago-700 mb-0.5">Email</label>
                         <div className="relative">
@@ -85,15 +88,17 @@ const LoginPage = () => {
                         <div className="relative">
                             <input
                                 className="w-full py-6 rounded-md px-3 duration-150 delay-75 focus:ring ring-offset-1 ring-sushi-200 border h-10 border-neutral-300 outline-none"
-                                type="password"
+                                type={isPasswordVisible ? 'text' : 'password'}
                                 name="password"
                                 id="password"
                                 placeholder="Mot de passe"
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
                             />
-                            <VisibilityIcon
-                                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-chicago-700 h-6 w-6"/>
+                                <VisibilityIcon
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-chicago-700 h-6 w-6 cursor-pointer"
+                                    onClick={togglePasswordVisibility}
+                                />
                         </div>
                     </div>
                     <div className="flex flex-col items-end md:w-2/3 sm:w-9/12 w-11/12">
-- 
GitLab