game management pages

haiderBukhari · May 7, 2024 · a8ba6b5 · a8ba6b5
1 parent 2368b1f
commit a8ba6b5
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 1 deletion.
diff --git a/src/components/AsideHeader.jsx b/src/components/AsideHeader.jsx
@@ -86,13 +86,21 @@ const AsideHeader = () => {
                                     />
                                     <div className="my-auto">User Management</div>
                                 </div>
-                                <div onClick={() => { Navigate('/subscription') }} className={`flex gap-3 p-2.5 mt-3.5 cursor-pointer ${Location.pathname === '/subscription' && 'bg-[#8497FC] bg-opacity-25'}`}>
+                                {/* <div onClick={() => { Navigate('/subscription') }} className={`flex gap-3 p-2.5 mt-3.5 cursor-pointer ${Location.pathname === '/subscription' && 'bg-[#8497FC] bg-opacity-25'}`}>
                                     <img
                                         loading="lazy"
                                         src="https://cdn.builder.io/api/v1/image/assets/TEMP/fedb3eb9f42b1aa7e1799b755edfbce7a8fba5a9e2f4cede826619c6d84b2589?apiKey=cf358c329e0d49a792d02d32277323ef&"
                                         className="shrink-0 aspect-square w-[18px]"
                                     />
                                     <div className="my-auto">Subscription</div>
+                                </div> */}
+                                <div onClick={() => { Navigate('/trial-management') }} className={`flex gap-3 p-2.5 mt-3.5 cursor-pointer ${Location.pathname === '/trial-management' && 'bg-[#8497FC] bg-opacity-25'}`}>
+                                    <img
+                                        loading="lazy"
+                                        src="https://cdn.builder.io/api/v1/image/assets/TEMP/fedb3eb9f42b1aa7e1799b755edfbce7a8fba5a9e2f4cede826619c6d84b2589?apiKey=cf358c329e0d49a792d02d32277323ef&"
+                                        className="shrink-0 aspect-square w-[18px]"
+                                    />
+                                    <div className="my-auto">Trial Management</div>
                                 </div>
                                 {/* <div onClick={() => { Navigate('/user-management') }} className={`flex gap-3 p-2.5 mt-3.5 cursor-pointer ${Location.pathname === '/user-management' && 'bg-[#8497FC] bg-opacity-25'}`}>
                                     <img

diff --git a/src/pages/TrialManagement/index.jsx b/src/pages/TrialManagement/index.jsx
@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import AsideHeader from "../../components/AsideHeader";
+import axios from "axios";
+
+function Index() {
+    // Sample data object with row names and corresponding values
+
+    const [data, setData] = useState(null);
+    const [fetchUser, setFetchUser] = useState(false);
+
+    const columns = [
+        "Name",
+        "Email Address",
+        "Resturant Name",
+        "Request Date",
+    ];
+
+    useEffect(() => {
+        try {
+            axios.get(`${process.env.REACT_APP_BACKEND_PORT}/auth/trial`, {
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+            }).then((res) => {
+                setData(res.data);
+                // console.log(res.data);
+            })
+        } catch (error) {
+            console.error("error");
+        }
+    }, [fetchUser])
+
+
+    // // State to store the checked state for each row
+    // const [checkedStates, setCheckedStates] = useState(data?.map(() => true));
+
+    // const handleChange = (index) => {
+    //     setCheckedStates(prevStates => {
+    //         const newStates = [...prevStates];
+    //         newStates[index] = !newStates[index];
+    //         return newStates;
+    //     });
+    // };
+
+    const approveUser = async (id) => {
+        try {
+            axios.patch(`${process.env.REACT_APP_BACKEND_PORT}/auth/trial?id=${id}`, {
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+            }).then((res) => {
+                setFetchUser(!fetchUser)
+                // console.log(res.data);
+            })
+        } catch (error) {
+            console.error("error");
+        }
+    }
+
+    return (
+        <div className="flex mb-20">
+            <AsideHeader />
+            <div className="w-full mt-6 mx-5">
+                <div className="flex items-end justify-between">
+                    <div className="justify-center self-start p-2.5 mt-6 text-lg font-medium tracking-wide leading-6 text-blue-950">
+                        User Management
+                    </div>
+                </div>
+                <div className="flex gap-5 mt-10 justify-between items-center p-5 bg-white shadow-[0px_5px_10px_1px_rgba(0,0,0,0.3)] max-md:flex-wrap">
+                    {columns.map((key, idx) => (
+                        <div key={idx} className="font-bold">{key}</div>
+                    ))}
+                    <div className="w-[60px]"></div>
+                </div>
+
+                {data?.map((item, index) => (
+                    <div key={index} className="flex gap-5 justify-between items-center p-5 mt-5 bg-white max-md:flex-wrap shadow-[0px_5px_10px_1px_rgba(0,0,0,0.3)]">
+                        <div className="flex justify-between w-full pr-20">
+                            <div>{item.name}</div>
+                            <div>{item.email}</div>
+                            <div>{'-'}</div>
+                            <div>{item.createdAt.slice(0, 10)}</div>
+                        </div>
+                        {
+                            item.isVerified ? <div className="flex">
+                                <button className="justify-center self-stretch p-2.5 font-semibold text-center text-white whitespace-nowrap bg-indigo-400 rounded-xl border-2 border-indigo-400 border-solid">
+                                    Approved
+                                </button>
+                            </div> : <div onClick={() => {approveUser(item._id)}} className="flex">
+                                <button className="justify-center self-stretch p-2.5 font-semibold text-center text-black whitespace-nowrap rounded-xl border-2 border-indigo-400 border-solid bg-white">
+                                    Approve
+                                </button>
+                            </div>
+                        }
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default Index;
diff --git a/src/routes/HomeRoutes.jsx b/src/routes/HomeRoutes.jsx
@@ -17,6 +17,7 @@ import PaymentHistory from '../components/PaymentHistory';
 import { useSelector } from 'react-redux'
 import VerifyAuth from '../components/VerifyAuth';
 import UserManagement from '../pages/UserManagement'
+import TrialManagement from '../pages/TrialManagement'
 import Subscription from '../pages/Subscription'
 
 const Index = () => {
@@ -42,6 +43,7 @@ const Index = () => {
         <Route path="/wheel" element={<SpinningWheel />} />
 
         <Route path="/user-management" element={userId ? <UserManagement /> : <Home/>} />
+        <Route path="/trial-management" element={userId ? <TrialManagement /> : <Home/>} />
         <Route path="/subscription" element={userId ? <Subscription /> : <Home/>} />
       </Routes>
       {!userId && <Footer />}