myRegisters

src/App.css

@@ -19,17 +19,18 @@ input::-webkit-inner-spin-button {
 ::-webkit-scrollbar {
   width: 5px;
   background: #dbdbdb;
+  border-radius: 20px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  border-radius: 10px;
+  border-radius: 20px;
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #df1452; 
-  border-radius: 10px;
+  border-radius: 20px;
 }
 
 /* Handle on hover */

src/view/my-services/FutureExams.js

@@ -74,7 +74,8 @@ const FutureExams = () => {
   };
   
   return (
-    <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-4 pt-4 overflow-y-auto">
+    <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1">
+      <div className="w-full h-full overflow-y-auto px-4 pt-4">
         {/* ----title-------- */}
         <Title titleText="آزمون‌های پیش‌رو" />
         {/* ----body-------- */}
@@ -129,6 +130,7 @@ const FutureExams = () => {
           ))}
         </div>
       </div>
+    </div>
   );
 };
 

src/view/my-services/MyRegisters.js

@@ -0,0 +1,86 @@
+import Title from "./Title";
+
+let data = [
+  {
+    id: 1,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 1,
+  },
+  {
+    id: 2,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 2,
+  },
+  {
+    id: 3,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 3,
+  },
+  {
+    id: 4,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 4,
+  },
+  {
+    id: 5,
+    factorId: "ABC12345",
+    name: "کلاس حضوری فیزیک کوآنتوم",
+    date: "1401/3/3",
+    type: 1,
+  },
+];
+const MyRegisters = () => {
+  return (
+    <div className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1">
+      <div className="w-full h-full overflow-y-auto px-4 pt-4">
+        {/* ----title-------- */}
+        <Title titleText="پنل هوشمند ثبت‌نام‌های من" />
+        {/* ----body-------- */}
+        <div className="w-full mt-4">
+          {data.map((item, index) => (
+            <div key={index} className="w-full border-t border-[#E0E0E0] mb-5">
+              <div className="w-full py-1" style={{ direction: "rtl" }}>
+                <div className="w-fit pl-3 border-l border-[#E0E0E0] text-xs text-right">
+                  {item.factorId}
+                </div>
+              </div>
+              {/* ------ */}
+              <div className="w-full py-1 flex flex-row-reverse items-center justify-between border-t border-[#E0E0E0]">
+                <div
+                  className="w-1/2 text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap"
+                  style={{ fontFamily: "IRANSansXFaNum-Medium" }}
+                >
+                  {item.name}
+                </div>
+                {/* -- */}
+                <div className="w-[30%] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]">
+                  {item.date}
+                </div>
+                {/* -- */}
+                <div className="w-1/4 h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer">
+                  {item.type === 1
+                    ? "شرکت در دوره"
+                    : item.type === 2
+                    ? "مکان برگزاری"
+                    : item.type === 3
+                    ? "دریافت قرارداد"
+                    : "شرکت در آزمون"}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyRegisters;

src/view/my-services/MyServices.js

@@ -1,14 +1,19 @@
 import Exams from "./Exams";
+import MyRegisters from "./MyRegisters";
 
 
 
 const MyServices=()=>{
   return (
-    <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] px-4 flex flex-col justify-between">
+    <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 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 className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
+        <div className="w-[70%] h-full flex flex-row-reverse justify-between">
+          <MyRegisters/>
+        </div>
+      </div>
     </div>
   );
 }

src/view/my-services/ResultExams.js

@@ -60,9 +60,10 @@ const ResultExams = () => {
   ];
   return (
     <div
-      className="ResultExams w-[45%] h-full px-4 pt-4 overflow-y-auto"
+      className="ResultExams w-[45%] h-full px-1 pt-1"
       style={{ direction: "rtl" }}
     >
+      <div className="w-full h-full px-4 pt-4 overflow-y-auto">
         {/* ----title-------- */}
         <div style={{ direction: "ltr" }}>
           <Title titleText="نتایج آزمون‌های من" />
@@ -102,6 +103,7 @@ const ResultExams = () => {
           ))}
         </div>
       </div>
+    </div>
   );
 };