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/components/HomeCom.jsx

@@ -8,7 +8,7 @@ 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'
@@ -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/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,
+  },
+});