Mazen-AG · kareem2002-k · May 20, 2023
diff --git a/Geeks code with firebase/geeks/package-lock.json b/Geeks code with firebase/geeks/package-lock.json
diff --git a/Geeks code with firebase/geeks/package.json b/Geeks code with firebase/geeks/package.json
@@ -10,6 +10,7 @@
     "firebase": "^9.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

diff --git a/Geeks code with firebase/geeks/public/favicon.ico b/Geeks code with firebase/geeks/public/favicon.ico
diff --git a/Geeks code with firebase/geeks/public/index.html b/Geeks code with firebase/geeks/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="geeks.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Geeks Hub</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/Geeks code with firebase/geeks/public/logo192.png b/Geeks code with firebase/geeks/public/logo192.png
diff --git a/Geeks code with firebase/geeks/public/logo512.png b/Geeks code with firebase/geeks/public/logo512.png
diff --git a/Geeks code with firebase/geeks/src/ActiveUsers.js b/Geeks code with firebase/geeks/src/ActiveUsers.js
@@ -109,10 +109,10 @@ function ActiveUsers() {
           trial.RemaningHours = 0;
           trial.isSub = false;
 
-          price = Math.round(time * 10) ;
+          price = Math.round(time * 100)/100 ;
         }
       } else {
-        price =  Math.round(time * 10) ;
+        price =  Math.round(time * 100)/100 ;
 
       }
       console.log("price i" + price);

diff --git a/Geeks code with firebase/geeks/src/EmployeesAdmin.js b/Geeks code with firebase/geeks/src/EmployeesAdmin.js
@@ -29,14 +29,14 @@ const{authUserData , setauthUserData, update , setUpdate} = useContext(UserConte
 //this is the state for the modal that shows when the user is is active status is updated
 const [showModal, setShowModal] = useState(false);
 
-// this is the state  shown in the modal of the add employee modal 
-const [showAddEmployeeModal, setShowAddEmployeeModal] = useState(false);
+// show the modal for the add employee
+const [showAddModal, setShowAddModal] = useState(false);
+
+//this is the state for the email of the new employee
+const [email, setEmail] = useState('');
+
 
-//this is for the new employee email
-const [newEmployeeEmail, setNewEmployeeEmail] = useState('');
 
-//this is for the new employee data 
-const [empData,setEmpData] = useState({});
 
 
 
@@ -73,15 +73,63 @@ const [empData,setEmpData] = useState({});
       await updateDoc(userRef, {
           isWorking: false,
           thisMonth : activeShift.thisMonth + 1,
+
 
 
       });
 
       await setUpdate(update + 1);
       setShowModal(true);
+
 
   }
 
+  // this is the function for the admin to add a new employee by search in users collection by emaail an check that the user is not already an employee the add him to emplyee collection
+  const addEmployee = async (email) => {
+    //get all users docs 
+    const users = collection(db, 'users');
+    const data = await getDocs(users);
+    //filter the user by email
+    const filteredData = data.docs.map((doc) => ({
+        id: doc.id,
+
+        ...doc.data()
+    })).filter((user) => user.Email === email);
+    //if the user is found add him to the employee collection
+    if (filteredData.length > 0) {
+      const userRef = doc(db, 'users', filteredData[0].id);
+        const employeeRef = doc(db, 'employees', filteredData[0].id);
+        const employeeDocSnap = await getDoc(employeeRef);
+        if (!employeeDocSnap.exists()) {
+            await setDoc(employeeRef, {
+               name: filteredData[0].Name,
+                email: filteredData[0].Email,
+                isWorking: false,
+                thisMonth: 0,
+                prevMonth: 0,
+            }
+
+
+            );
+
+            await updateDoc(userRef, {
+                isEmployee: true,
+
+            });
+
+            setShowAddModal(false);
+
+
+        }
+        else {
+            alert('this user is already an employee'); 
+        }
+
+
+
+  }
+}
+
 
 
 // this is the function for the admin to add a new employee 
@@ -144,7 +192,47 @@ const [empData,setEmpData] = useState({});
           <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
         </>
       ) : null}
-
+{showAddModal ? (
+        <>
+          <div
+            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
+          >
+            <div className="relative w-auto my-6 mx-auto max-w-3xl">
+              {/*content*/}
+              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                {/*header*/}
+                <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+                  <h3 className="text-3xl font-semibold">
+                    Add New employee
+                  </h3>
+                  <button
+                    className='focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"'
+                    onClick={() => setShowAddModal(false)}
+                  >
+
+                      ×
+                  </button>
+                </div>
+                {/*body*/}
+
+                {/*footer*/}
+                <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
+                  <input type="text" className=' border-1  ' placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
+
+                  <button
+                    className="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                    type="button"
+                    onClick={() => addEmployee(email)}
+                  >
+                    Add Employee
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+        </>
+      ) : null}
 
 
 
@@ -219,7 +307,7 @@ add employee button  */}
 
 
 <div className='  text-right ' >
-<button className="bg-emerald-500 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded" onClick={() => setShowAddEmployeeModal(true)} >Add Employee</button>
+<button className="bg-emerald-500 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded" onClick={() => setShowAddModal(true)} >Add Employee</button>
    </div>
 
 
@@ -257,9 +345,9 @@ add employee button  */}
                 scope="row"
                 class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
               >
-                {employee.Name} 
+                {employee.name  && employee.name }  
               </th>
-              <td class="px-6 py-4"> {employee.Email} </td>
+              <td class="px-6 py-4"> {employee.email} </td>
               <td class="px-6 py-4">{employee.thisMonth}</td>
               <td class="px-6 py-4"> {employee.prevMonth}</td>
 

diff --git a/Geeks code with firebase/geeks/src/LandingPage.js b/Geeks code with firebase/geeks/src/LandingPage.js
@@ -4,9 +4,19 @@ import Header from './components/Header';
 import Footer from './components/Footer';
 import Features from './components/Features';
 import Pricing from './components/Pricing';
+import { Helmet } from 'react-helmet';
+
 
 function LandingPage() {
     return (
+        <>
+        <Helmet
+            title="Geeks Hub"
+
+        >
+            <link rel="canonical" href="http://example.com/example" />
+        </Helmet>
+
         <div className="bg-gray-100">
             <Header />
             <section className="py-16 px-4 bg-gradient-to-br from-indigo-500 to-purple-600 relative z-10">
@@ -61,6 +71,7 @@ function LandingPage() {
             <Pricing />
             <Footer />
         </div>
+        </>
     );
 }
 

diff --git a/Geeks code with firebase/geeks/src/Login.js b/Geeks code with firebase/geeks/src/Login.js
@@ -14,9 +14,15 @@ export default function Login() {
   const { user, setUser } = useContext(AuthContext);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [error, setError] = useState(null);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
+    if (!email || !password) {
+      setError('Please enter email and password');
+      return;
+    }
+    else {
     try {
       const userCredential = await signInWithEmailAndPassword(auth, email, password);
       const user = userCredential.user;
@@ -41,13 +47,16 @@ export default function Login() {
         setUser(null);
       }
     } catch (error) {
-      console.log(error);
+      setError(error.message);
+
+
     }
+  }
   };
 
   return (
-    <div className="gradient-form h-full bg-neutral-200 dark:bg-neutral-700">
-      <div className="container h-full p-10">
+
+      <div className="container h-full flex  justify-center  ml-36 mt-10 items-center p-10">
         <div className="g-6 flex h-full flex-wrap items-center justify-center text-neutral-800 dark:text-neutral-200">
           <div className="w-full">
             <div className="block rounded-lg bg-white shadow-lg dark:bg-neutral-800">
@@ -66,33 +75,26 @@ export default function Login() {
                       {/* Username input */}
                       <div className="relative mb-4" data-te-input-wrapper-init>
                         <input
-                          type="text"
-                          className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                          type="Email"
+                          className="bg-gray-50 border border-black text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           id="exampleFormControlInput1"
-                          placeholder="Username"
+                          placeholder="Email"
+                          onChange={(event) => setEmail(event.target.value)}
                         />
-                        <label
-                          htmlFor="exampleFormControlInput1"
-                          className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-                        >
-                          Username
-                        </label>
+
                       </div>
 
                       {/* Password input */}
                       <div className="relative mb-4" data-te-input-wrapper-init>
                         <input
                           type="password"
-                          className="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:placeholder:text-neutral-200 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
+                          className="bg-gray-50 border border-black text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+
                           id="exampleFormControlInput11"
+                          onChange={(event) => setPassword(event.target.value)}
                           placeholder="Password"
                         />
-                        <label
-                          htmlFor="exampleFormControlInput11"
-                          className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
-                        >
-                          Password
-                        </label>
+
                       </div>
 
                       {/* Submit button */}
@@ -102,6 +104,7 @@ export default function Login() {
                           type="submit"
                           data-te-ripple-init
                           data-te-ripple-color="light"
+                          onClick={handleSubmit}
                           style={{
                             background:
                               "linear-gradient(to right, #4F46E5, #8B55E0, #4338CA)",
@@ -113,7 +116,8 @@ export default function Login() {
                         {/* Forgot password link */}
                         {/* <a href="#!">Forgot password?</a> */}
                       </div>
-
+                      {error && <p className="text-danger text-red-700">{error}</p>
+                        }
                       {/* Register button */}
                       <div className="flex items-center justify-between pb-6">
                         <p className="mb-0 mr-2">Don't have an account?</p>
@@ -126,6 +130,8 @@ export default function Login() {
                         >
                           Register
                         </button>
+
+
                       </div>
                     </form>
                   </div>
@@ -153,6 +159,5 @@ export default function Login() {
         </div>
       </div>
     </div>
-    </div>
   );
 }