added axios package

package.json

@@ -3,12 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.5.1",
+    "@tanstack/react-query": "^5.66.0",
+    "axios": "^1.7.9",
     "cra-template": "1.2.0",
+    "formik": "^2.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.5",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+button, a {
+  cursor: pointer;
+}

src/MyRoutes.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import {Routes, Route} from 'react-router-dom'
 
+import UserExists from './authorization/UserExists'
+
 import GetStartedPage from './pages/GetStartedPage'
 import LoginPage from './pages/LoginPage'
 import HomePage from './pages/HomePage'
@@ -11,7 +13,10 @@ export default function MyRoutes() {
     <Routes>
         <Route path={myLinks.getStarted} element={<GetStartedPage />} />
         <Route path={myLinks.login} element={<LoginPage />} />
-        <Route path={myLinks.home} element={<HomePage />} />
+        
+        <Route element={<UserExists />}>
+          <Route path={myLinks.home} element={<HomePage />} />
+        </Route>
     </Routes>
   )
 }

src/authorization/UserExists.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import { useLocation, useNavigate, Outlet } from 'react-router-dom'
+
+import myLinks from '../myLinks'
+import PageLoader from '../components/PageLoader'
+
+export default function UserExists() {
+
+    const {state} = useLocation()
+
+    const navigate = useNavigate()
+  
+    const [loading, setLoading] = useState(true)
+  
+    useEffect(()=>{
+      if(state?.proceed != 'true'){
+        return navigate(myLinks.getStarted, {replace:true})
+      }
+      setTimeout(()=>{
+        setLoading(false)
+      },2000)
+    },[])
+
+  return (
+    <>
+    {
+    loading ? 
+        <PageLoader />
+        :
+        <Outlet />
+    }
+    </>
+  )
+}

src/components/HomeCom.jsx

@@ -8,31 +8,31 @@ export default function HomeCom() {
   return (
     <div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black bg-slate-100 p-5 sm:p-[40px]">
       <div className="py-4 text-3xl text-black font-bold">Users</div>
-      <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 
         {data.map((item, index) => {
           let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
           return (
-            <div key={index} className="w-full p-3 sm:p-5 bg-white shadow flex flex-col gap-5">
+            <div key={index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
               <div className="mb-5 card-title w-[70%] mx-auto">
                 <h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
                 <span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
               </div>
               <div className="card-body flex flex-col gap-2">
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <IoIosPhonePortrait />
                   </span>
                   <span>{item.contact}</span>
                 </div>
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <CiPhone />
                   </span>
                   <span>{item.contact}</span>
                 </div>
-                <div className="contact text-slate-400 flex gap-3 items-center">
-                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-400">
+                <div className="contact text-slate-700 flex gap-3 items-center">
+                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                     <MdOutlineEmail />
                   </span>
                   <span>{item.email}</span>
@@ -59,4 +59,18 @@ const data = [
   {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
   {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
 
+  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
+  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
+  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
+  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
+  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
+  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
+
+  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
+  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
+  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
+  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
+  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
+  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},
+
 ]

src/index.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+*{
+  transition: all .3s;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/pages/HomePage.jsx

@@ -1,37 +1,9 @@
-import React, { useEffect, useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
-
-import myLinks from '../myLinks'
 import HomeCom from '../components/HomeCom'
-import PageLoader from '../components/PageLoader'
 
 export default function HomePage() {
-  
-
-  const {state} = useLocation()
-
-  const navigate = useNavigate()
-
-  const [loading, setLoading] = useState(true)
-
-  useEffect(()=>{
-    if(state?.proceed != 'true'){
-      return navigate(myLinks.getStarted, {replace:true})
-    }
-    setTimeout(()=>{
-      setLoading(false)
-    },2000)
-  },[])
-
-
   return (
     <>
-      {
-        loading ? 
-        <PageLoader />
-        :
-        <HomeCom />
-      }
+      <HomeCom />
     </>
   )
 }

src/services/queryKeys.js

@@ -0,0 +1,5 @@
+const queryKeys = {
+    dummy: ['dummy']
+}
+
+export default queryKeys

src/services/siteServices.js

@@ -0,0 +1,51 @@
+import axios from "axios"
+
+
+axios.interceptors.request.use(
+    config => {
+        config.headers = {
+            // Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
+            // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
+            // "Content-Type": "application/json;charset=UTF-8",
+            'Authorization': `Bearer ${localStorage.getItem('token')}`
+          };
+    // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
+    // config.baseURL = process.env.REACT_APP_MAIN_API
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+const postAuxEnd = (path, postData, media=false) => {
+    const basePath = media ? process.env.REACT_APP_MAIN_API : process.env.REACT_APP_MAIN_API
+    return axios.post(`${basePath}${path}`, postData).then(res => {
+        return res
+    }).catch(err => {
+        throw new Error(err.response.data.message);
+    })
+}
+
+const getAuxEnd = (path, reqData= null) => {
+    const basePath = process.env.REACT_APP_MAIN_API
+    return axios.get(`${basePath}${path}`,{ params: reqData }).then(res => {
+        return res
+        // localStorage.clear();
+        // window.location.href = `/login?sessionExpired=true`;
+    }).catch(err => {
+        throw new Error(err);
+        // throw new Error(err.response.data.message);
+        // return err
+    })
+}
+
+// FUNCTION TO LOGIN USER IN
+export const loginUser = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/auth/login', postData, false)
+}

src/store/UserDetails.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  userDetails: {},
+};
+
+export const userSlice = createSlice({
+  name: "userDetails",
+  initialState,
+  reducers: {
+    updateUserDetails: (state, action) => {
+      state.userDetails = { ...action.payload };
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { updateUserDetails } = userSlice.actions;
+
+export default userSlice.reducer;

src/store/store.js

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+import userDetailReducer from "./UserDetails";
+
+
+export default configureStore({
+  reducer: {
+    userDetails: userDetailReducer,
+  },
+});