myServices(ResultExams,FutureExams)

src/App.js

@@ -1,17 +1,22 @@
-import logo from './logo.svg';
-import './App.css';
-import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
-import Dashboard2 from './view/dashboard2/Dashboard2';
-import Header from './components/header/Header';
-import Nav from './components/nav/Nav';
-import Dashboard from './view/dashboard/Dashboard';
-import Accounting from './view/accounting/Accounting';
-import Messages from './view/messages/Messages';
+import logo from "./logo.svg";
+import "./App.css";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useNavigate,
+} from "react-router-dom";
+import Dashboard2 from "./view/dashboard2/Dashboard2";
+import Header from "./components/header/Header";
+import Nav from "./components/nav/Nav";
+import Dashboard from "./view/dashboard/Dashboard";
+import Accounting from "./view/accounting/Accounting";
+import Messages from "./view/messages/Messages";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 // import "react-modern-drawer/dist/index.css";
-import Login from './view/login/Login';
-import { useEffect, useState } from 'react';
+import Login from "./view/login/Login";
+import { useEffect, useState } from "react";
 // import {useParams} from 'react-router-dom';
 
 import avatar1 from "./assets/img/avatar/080cd026ce8cd30f68acfa086ebde7fb.jpg";
@@ -21,21 +26,22 @@ import avatar4 from "./assets/img/avatar/alexander-hipp-iEEBWgY_6lA-unsplash.jpg
 import avatar5 from "./assets/img/avatar/julian-wan-WNoLnJo7tS8-unsplash.jpg";
 import avatar6 from "./assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
 import avatar7 from "./assets/img/avatar/pexels-yuri-manei-2690323.jpg";
-import LoginSignUp from './view/LoginSignUp';
-import Register from './view/register'
-import Services from './view/services';
+import LoginSignUp from "./view/LoginSignUp";
+import Register from "./view/register";
+import Services from "./view/services";
 
-import {Provider, provider} from 'react-redux';
-import store from './redux/store';
-import ContactUs from './view/contact';
-import ENTER_EXAM from './view/Exam/EnterExam/index'
-import EXAM from './view/Exam'
-import CallBack from './view/CallBack';
-import AdminPanel from './view/admin';
-import AddProduct from './view/addProduct';
-import AddExam from './view/addExam';
-import ChatPage from './view/chatPage';
-import ShoppingCart from './components/ShoppingCart';
+import { Provider, provider } from "react-redux";
+import store from "./redux/store";
+import ContactUs from "./view/contact";
+import ENTER_EXAM from "./view/Exam/EnterExam/index";
+import EXAM from "./view/Exam";
+import CallBack from "./view/CallBack";
+import AdminPanel from "./view/admin";
+import AddProduct from "./view/addProduct";
+import AddExam from "./view/addExam";
+import ChatPage from "./view/chatPage";
+import ShoppingCart from "./components/ShoppingCart";
+import MyServices from "./view/my-services/MyServices";
 
 let data = [
   {
@@ -619,46 +625,43 @@ let data = [
 ];
 
 function App() {
- 
   let location = window.location.pathname;
-  // const {id} = useParams(); 
+  // const {id} = useParams();
   console.log(location);
-  let buyPackagesData=null;
-  if(location.includes("buy-packages")){
+  let buyPackagesData = null;
+  if (location.includes("buy-packages")) {
     let pathList = location.split("/");
-    let id = pathList[pathList.length-1];
-    for(let i=0;i<data.length;i++){
-      if(data[i].id===Number(id)){
-        buyPackagesData=data[i];
+    let id = pathList[pathList.length - 1];
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].id === Number(id)) {
+        buyPackagesData = data[i];
         break;
       }
     }
   }
-  let loginStorage = localStorage.getItem('userData');
+  let loginStorage = localStorage.getItem("userData");
   let userData = JSON.parse(loginStorage);
   console.log(loginStorage == null);
-  console.log(userData)
-  const [LOGIN,setLOGIN]=useState(loginStorage == undefined ? false : true);
-  const activeLogin=()=>{
-    setLOGIN(true)
-    localStorage.setItem('login', true)
-   
-    
-  }
+  console.log(userData);
+  const [LOGIN, setLOGIN] = useState(loginStorage == undefined ? false : true);
+  const activeLogin = () => {
+    setLOGIN(true);
+    localStorage.setItem("login", true);
+  };
 
   const logOut = () => {
-    setLOGIN(false)
-    localStorage.setItem('login', false)
+    setLOGIN(false);
+    localStorage.setItem("login", false);
   };
 
-  if(location==="/"){
+  if (location === "/") {
     window.location.replace("/services");
   }
 
   // useEffect(() => {
   //   setLOGIN(true);
   // }, [loginStorage])
-  
+
   //--UserFullInfo---------------------
   const [ActiveUserFullInfo, setActiveUserFullInfo] = useState(false);
   const [UserFullInfoData, setUserFullInfoData] = useState(buyPackagesData);
@@ -673,72 +676,100 @@ function App() {
 
   return (
     <Provider store={store}>
-    <div>
-    <Router>
-      <div className="App">
-        {LOGIN &&  <Header logOut={logOut} />}
-        {LOGIN && <Nav  />}
-        <Routes>
-          <Route path='/' element={LOGIN ? (
-        window.innerWidth <= 1024 &&  <Dashboard
-                ActiveUserFullInfo={ActiveUserFullInfo}
-                UserFullInfoData={UserFullInfoData}
-                showUserFullInfo={showUserFullInfo}
-                hideUserFullInfo={hideUserFullInfo}
-              />)
-              : <LoginSignUp  activeLogin={activeLogin}/>
-              } />
-          <Route path="/myServices" element={LOGIN ? 
-          <Dashboard
-                ActiveUserFullInfo={ActiveUserFullInfo}
-                UserFullInfoData={UserFullInfoData}
-                showUserFullInfo={showUserFullInfo}
-                hideUserFullInfo={hideUserFullInfo}
+      <div>
+        <Router>
+          <div className="App">
+            {LOGIN && <Header logOut={logOut} />}
+            {LOGIN && <Nav />}
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  LOGIN ? (
+                    window.innerWidth <= 1024 && (
+                      <Dashboard
+                        ActiveUserFullInfo={ActiveUserFullInfo}
+                        UserFullInfoData={UserFullInfoData}
+                        showUserFullInfo={showUserFullInfo}
+                        hideUserFullInfo={hideUserFullInfo}
+                      />
+                    )
+                  ) : (
+                    <LoginSignUp activeLogin={activeLogin} />
+                  )
+                }
               />
-              : <LoginSignUp  activeLogin={activeLogin}/>} />
-        
-         {
-           LOGIN ? <>
-            <Route
-            path="/buy-packages/:id"
-            element={
-              <Dashboard2
-                ActiveUserFullInfo={ActiveUserFullInfo}
-                UserFullInfoData={UserFullInfoData}
-                showUserFullInfo={showUserFullInfo}
-                hideUserFullInfo={hideUserFullInfo}
+              <Route
+                path="/myServices"
+                element={
+                  LOGIN ? (
+                    <MyServices />
+                  ) : (
+                    <LoginSignUp activeLogin={activeLogin} />
+                  )
+                }
               />
-            }
-          />
-          <Route path="/adminpanel" element={<AdminPanel />} />
-          <Route path="/adminpanel/add-product" element={<AddProduct />} />
-          <Route path="/adminpanel/add-exam" element={<AddExam />} />
-          
-          <Route path="/register" element={<Register  activeLogin={activeLogin}/>}/>
-          <Route path="/accounting" element={<Accounting />} />
-          <Route path="/messages" element={<Messages />} />
-          <Route path="/messages/:id" element={<ChatPage />} />
-          <Route path="/services" element={<Services />} />
-          <Route path='shoppingCart' element={<ShoppingCart />} />
-          {/* <Route path="/dashboard" element={ <Dashboard
+
+              {LOGIN ? (
+                <>
+                  <Route
+                    path="/buy-packages/:id"
+                    element={
+                      <Dashboard2
+                        ActiveUserFullInfo={ActiveUserFullInfo}
+                        UserFullInfoData={UserFullInfoData}
+                        showUserFullInfo={showUserFullInfo}
+                        hideUserFullInfo={hideUserFullInfo}
+                      />
+                    }
+                  />
+                  <Route path="/adminpanel" element={<AdminPanel />} />
+                  <Route
+                    path="/adminpanel/add-product"
+                    element={<AddProduct />}
+                  />
+                  <Route path="/adminpanel/add-exam" element={<AddExam />} />
+
+                  <Route
+                    path="/register"
+                    element={<Register activeLogin={activeLogin} />}
+                  />
+                  <Route path="/accounting" element={<Accounting />} />
+                  <Route path="/messages" element={<Messages />} />
+                  <Route path="/messages/:id" element={<ChatPage />} />
+                  <Route path="/services" element={<Services />} />
+                  <Route path="shoppingCart" element={<ShoppingCart />} />
+                  {/* <Route path="/dashboard" element={ <Dashboard
                 ActiveUserFullInfo={ActiveUserFullInfo}
                 UserFullInfoData={UserFullInfoData}
                 showUserFullInfo={showUserFullInfo}
                 hideUserFullInfo={hideUserFullInfo}
               />} /> */}
 
-          <Route path='/callBack' element={<CallBack />} />  
-            
-          <Route path='/contacts' element={<ContactUs />} />
-          <Route exact path="/azmoon_list/enter_exam/:id" element={<ENTER_EXAM />}/>
-          <Route exact path="/dashboard/azmoon_list/exam/:id" element={<EXAM />} />
-           </>
-           : <Route path='*' element={<LoginSignUp  activeLogin={activeLogin}/>} />
-         }
-        </Routes>
-      </div>
-    </Router>
-    <ToastContainer
+                  <Route path="/callBack" element={<CallBack />} />
+
+                  <Route path="/contacts" element={<ContactUs />} />
+                  <Route
+                    exact
+                    path="/azmoon_list/enter_exam/:id"
+                    element={<ENTER_EXAM />}
+                  />
+                  <Route
+                    exact
+                    path="/dashboard/azmoon_list/exam/:id"
+                    element={<EXAM />}
+                  />
+                </>
+              ) : (
+                <Route
+                  path="*"
+                  element={<LoginSignUp activeLogin={activeLogin} />}
+                />
+              )}
+            </Routes>
+          </div>
+        </Router>
+        <ToastContainer
           position="top-right"
           theme="colored"
           autoClose={5000}
@@ -750,7 +781,7 @@ function App() {
           draggable
           pauseOnHover
         />
-        </div>
+      </div>
     </Provider>
   );
 }

src/assets/img/vuesax-linear-clock.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_clock" data-name="vuesax/linear/clock" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="clock">
+    <path id="Vector" d="M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10Z" transform="translate(2 2)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M4.08,7.67.98,5.82A2.215,2.215,0,0,1,0,4.1V0" transform="translate(11.63 7.51)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/index.css

@@ -12,6 +12,11 @@
   src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff);
 }
 
+@font-face {
+  font-family: IRANSansXFaNum-Medium;
+  src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Medium.woff);
+}
+
 .BuyInfo-footer-text-box {
   @apply w-full flex items-center justify-between flex-row-reverse mb-4;
 }

src/view/my-services/Exams.js

@@ -0,0 +1,20 @@
+
+
+import FutureExams from "./FutureExams";
+import ResultExams from "./ResultExams";
+
+
+const Exams = () => {
+  return (
+    <div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]">
+      <FutureExams />
+      <ResultExams />
+    </div>
+  );
+};
+
+export default Exams;
+
+
+
+

src/view/my-services/FutureExams.js

@@ -0,0 +1,135 @@
+import img1 from "../../assets/img/bia-andrade-PO8Woh4YBD8-unsplash.jpg";
+import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
+import stickynote from "../../assets/img/stickynote.svg";
+import clockIcon from "../../assets/img/vuesax-linear-clock.svg";
+import Title from "./Title";
+
+const FutureExams = () => {
+  let data = [
+    {
+      id: 1,
+      img: img1,
+      title: "آزمون فلسفه مدرن",
+      date: "1400/3/3",
+      time: "21:00",
+      description:
+        "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
+    },
+    {
+      id: 2,
+      img: img2,
+      title: "آزمون فلسفه مدرن فراشناختی اجتماعی",
+      date: "1400/3/3",
+      time: "21:00",
+      description:
+        "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
+    },
+    {
+      id: 3,
+      img: img1,
+      title: "آزمون فلسفه مدرن",
+      date: "1400/3/3",
+      time: "21:00",
+      description:
+        "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
+    },
+    {
+      id: 4,
+      img: img2,
+      title: "آزمون فلسفه مدرن",
+      date: "1400/3/3",
+      time: "21:00",
+      description:
+        "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
+    },
+    {
+      id: 5,
+      img: img1,
+      title: "آزمون فلسفه مدرن",
+      date: "1400/3/3",
+      time: "21:00",
+      description:
+        "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
+    },
+  ];
+
+  //hoverHandler--------------
+  const hoverHandler=(index)=>{
+    let frontBox = document.querySelectorAll(".frontBox");
+    let description = document.querySelectorAll(".frontBox-description");
+    frontBox[index].style.transform="translateY(0px)";
+    frontBox[index].style.background = "rgba(223,20,82,0.7)";
+    description[index].style.display="block";
+    // rgba(223,20,82,0.7)
+  }
+
+  const hoverHandle2 = (index) => {
+    let frontBox = document.querySelectorAll(".frontBox");
+    let description = document.querySelectorAll(".frontBox-description");
+    frontBox[index].style.transform = "translateY(60%)";
+    frontBox[index].style.background =
+      "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
+    description[index].style.display = "none";
+    // rgba(223,20,82,0.7)
+  };
+  
+  return (
+    <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-4 pt-4 overflow-y-auto">
+      {/* ----title-------- */}
+      <Title titleText="آزمون‌های پیش‌رو" />
+      {/* ----body-------- */}
+      <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
+        {data?.map((item, index) => (
+          <div
+            key={index}
+            className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
+            onMouseEnter={() => hoverHandler(index)}
+            onMouseLeave={() => hoverHandle2(index)}
+          >
+            {/* -----back-img------ */}
+            <img src={item.img} className="w-full" alt="back-img" />
+            {/* -----front-data------ */}
+            <div
+              className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
+              style={{
+                background:
+                  "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
+              }}
+            >
+              <div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white">
+                <img src={stickynote} alt="stickynote" className="h-5 ml-1" />
+                <div
+                  className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap"
+                  style={{ direction: "rtl" }}
+                >
+                  {item.title}
+                </div>
+              </div>
+              {/* ----------- */}
+              <div className="w-full flex flex-row-reverse items-center justify-between py-1">
+                <div className="flex flex-row-reverse items-center">
+                  <img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
+                  <div className="text-xs text-white text-right">
+                    {item.date}
+                  </div>
+                </div>
+                <div className="text-xs text-white text-right">
+                  ساعت {item.time}
+                </div>
+              </div>
+              {/* ----------- */}
+              <div
+                className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden"
+                style={{ direction: "rtl" }}
+              >
+                {item.description}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FutureExams;

src/view/my-services/MyServices.js

@@ -0,0 +1,16 @@
+import Exams from "./Exams";
+
+
+
+const MyServices=()=>{
+  return (
+    <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] px-4 flex flex-col justify-between">
+      <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
+        <Exams/>
+      </div>
+      <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"></div>
+    </div>
+  );
+}
+
+export default MyServices;

src/view/my-services/ResultExams.js

@@ -0,0 +1,108 @@
+
+import Title from "./Title";
+
+//colorList------------------
+  let colorList = [
+    {
+      bg: "rgba(228,126,48,0.1)",
+      line: "#E47E30",
+    },
+    {
+      bg: "rgba(230,212,51,0.1)",
+      line: "#E6D433",
+    },
+    {
+      bg: "rgba(31,96,18,0.1)",
+      line: "#1F6012",
+    },
+    {
+      bg: "rgba(35,227,175,0.1)",
+      line: "#23E3AF",
+    },
+    {
+      bg: "rgba(35,86,227,0.1)",
+      line: "#2356E3",
+    },
+  ];
+
+const ResultExams = () => {
+  let data = [
+    {
+      id: 1,
+      title: "آزمون شیمی عالی",
+      date: "1400/3/3",
+      status: 1,
+    },
+    {
+      id: 2,
+      title: "آزمون شیمی عالی",
+      date: "1400/3/3",
+      status: 2,
+    },
+    {
+      id: 3,
+      title: "آزمون شیمی عالی",
+      date: "1400/3/3",
+      status: 1,
+    },
+    {
+      id: 4,
+      title: "آزمون شیمی عالی",
+      date: "1400/3/3",
+      status: 2,
+    },
+    {
+      id: 5,
+      title: "آزمون شیمی عالی",
+      date: "1400/3/3",
+      status: 1,
+    },
+  ];
+  return (
+    <div
+      className="ResultExams w-[45%] h-full px-4 pt-4 overflow-y-auto"
+      style={{ direction: "rtl" }}
+    >
+      {/* ----title-------- */}
+      <div style={{ direction: "ltr" }}>
+        <Title titleText="نتایج آزمون‌های من" />
+      </div>
+      {/* ----body-------- */}
+      <div className="w-full mt-4">
+        {data?.map((item, index) => (
+          <div
+            key={index}
+            className="w-full h-14 rounded px-3 flex  items-center justify-between mb-2 cursor-pointer"
+            style={{ backgroundColor: `${colorList[index % 5].bg}` }}
+          >
+            <div
+              className="w-1 h-9 rounded-lg"
+              style={{ backgroundColor: `${colorList[index % 5].line}` }}
+            ></div>
+            {/* --------- */}
+            <div className="w-[70%]">
+              <div
+                className="w-full text-sm text-right"
+                style={{ fontFamily: "IRANSansXFaNum-Medium" }}
+              >
+                {item?.title}
+              </div>
+              <div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
+                {item?.date}
+              </div>
+            </div>
+            {/* --------- */}
+            <div
+              className="w-[15%] h-9 text-center border-r text-xs flex items-center"
+              style={{ borderColor: `${colorList[index % 5].line}` }}
+            >
+              {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ResultExams;

src/view/my-services/Title.js

@@ -0,0 +1,21 @@
+
+
+import { IoIosArrowBack } from "react-icons/io";
+const Title=({titleText})=>{
+  return (
+    <div className="w-full h-10 flex flex-row-reverse items-center justify-between">
+      <div
+        className="text-xl text-right text-[#DF1452]"
+        style={{ fontFamily: "IRANSansXFaNum-Medium" }}
+      >
+        {titleText}
+      </div>
+      <div className="flex items-center cursor-pointer">
+        <IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
+        <div className="text-[#504F4F]">مشاهده بیشتر</div>
+      </div>
+    </div>
+  );
+}
+
+export default Title;