Adding the first Dashboard page

Mohamed-Ramadan1 · May 3, 2024 · 8536eea · 8536eea
1 parent ee8e3e4
commit 8536eea
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 415 deletions.
diff --git a/src/components/Admin/DashboardFooter.jsx b/src/components/Admin/DashboardFooter.jsx
@@ -1,22 +1,24 @@
 function DashboardFooter() {
   return (
     <>
-      <footer className="flex items-center justify-between flex-wrap p-3 bg-gray-800 text-white">
+      <footer className="flex items-center justify-between flex-wrap p-3 bg-gray-800 text-white w-[100%]">
         <div className="container mx-auto">
           <div className="flex flex-col md:flex-row md:justify-between">
             <div className="text-center md:text-left">
-              <p className="text-sm">© 2021 All rights reserved.</p>
+              <p className="text-sm">
+                © 2024 All rights reserved for MOhamed Ramadan.
+              </p>
             </div>
             <div className="text-center md:text-right">
               <p className="text-sm">
-                Made with ❤️ by{" "}
+                Made with ❤️
                 <a
-                  href="
-            https://www.creative-tim.com"
+                  href="https://www.linkedin.com/in/mohamed-ramadan-758555236/"
                   target="_blank"
                   rel="noreferrer"
+                  className="text-blue-500 hover:underline ml-3"
                 >
-                  Creative Tim
+                  Mohamed Ramadan
                 </a>
               </p>
             </div>

diff --git a/src/components/Admin/SideBar.jsx b/src/components/Admin/SideBar.jsx
@@ -1,26 +1,26 @@
-import React from "react";
 import { Link } from "react-router-dom";
+import Logo from "./../../assets/LOGO.png";
+
 function SideBar() {
   return (
     <div className="px-5">
       <div className="flex flex-col h-screen w-72.5 bg-black dark:bg-boxdark">
         <div className="flex flex-col items-center justify-center h-20 w-full border-b border-gray-600">
           <div className="flex gap-5">
-            <img
-              src="https://www.pngkey.com/png/full/114-1149878_setting-user-avatar-in-specific-size-without-breaking.png"
-              alt="avatar"
-              className="w-12 h-12 rounded-full"
-            />
-            <h1 className="text-2xl text-white">
-              Admin Panel <span className="text-blue-700">Link</span>{" "}
-            </h1>
+            <img src={Logo} alt="avatar" className=" h-[22px]rounded-full" />
+            {/* <h1 className="text-2xl text-white">
+              <span className="text-blue-700">Lin</span>{" "}
+            </h1> */}
           </div>
         </div>
-        <div className=" p-3 rounded mt-3">
-          <h2> MENU</h2>
+        <div className=" p-3 rounded mt-3  ">
+          <h2 className="text-white "> MENU</h2>
         </div>
         {/* dashboard home */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             <svg
@@ -37,11 +37,14 @@ function SideBar() {
                 d="M4 6h16M4 10h16M4 14h16M4 18h16"
               />
             </svg>
-            <a href="/admin/dashboard">Dashboard</a>
+            <a href="/admin/dashboard">Statics</a>
           </div>
         </Link>
         {/* free courses management link */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard/freeCourses'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard/freeCourses"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             {/* courses svg icon */}
@@ -54,7 +57,6 @@ function SideBar() {
               stroke-linecap="round"
               stroke-linejoin="round"
             >
-              {" "}
               <circle cx="18" cy="5" r="3" /> <circle cx="6" cy="12" r="3" />{" "}
               <circle cx="18" cy="19" r="3" />{" "}
               <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />{" "}
@@ -65,7 +67,10 @@ function SideBar() {
           </div>
         </Link>
         {/* paied Courses */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard/paiedCourses'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard/paiedCourses"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             {/* courses svg icon */}
@@ -87,7 +92,10 @@ function SideBar() {
           </div>
         </Link>
         {/* manage users link */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard/users'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard/users"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             {/* users svg icon */}
@@ -109,7 +117,10 @@ function SideBar() {
           </div>
         </Link>
         {/* reseved courses */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard/reservations'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard/reservations"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             {/* courses svg icon */}
@@ -130,7 +141,10 @@ function SideBar() {
           </div>
         </Link>
         {/* settings  */}
-        <Link className="hover:bg-gray-800 p-3 rounded mt-3 text-white" to={'/dashboard/settings'}>
+        <Link
+          className="hover:bg-gray-800 p-3 rounded mt-3 text-white"
+          to={"/dashboard/settings"}
+        >
           {/* icons and link and arrow*/}
           <div className="flex gap-5">
             {/* settings svg icon */}

diff --git a/src/components/TestComponent.jsx b/src/components/TestComponent.jsx
diff --git a/src/layout/dashboard/StatsBox.jsx b/src/layout/dashboard/StatsBox.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+const StatsBox = ({ statsText, statsValue }) => {
+  return (
+    <div class="rounded-lg p-5 rounded-5 shadow rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
+      <div class="flex items-center justify-between">
+        <div>
+          <span class="text-sm font-medium">{statsText}</span>
+        </div>
+        <span class="text-sm font-medium text-meta-3 undefined ">
+          {statsValue}
+          <svg
+            class="fill-meta-3"
+            width="10"
+            height="11"
+            viewBox="0 0 10 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4.35716 2.47737L0.908974 5.82987L5.0443e-07 4.94612L5 0.0848689L10 4.94612L9.09103 5.82987L5.64284 2.47737L5.64284 10.0849L4.35716 10.0849L4.35716 2.47737Z"
+              fill=""
+            ></path>
+          </svg>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default StatsBox;
diff --git a/src/layout/dashboard/StatsContainer.jsx b/src/layout/dashboard/StatsContainer.jsx
@@ -0,0 +1,9 @@
+import React, { Children } from "react";
+
+const StatsContainer = ({ children }) => {
+  return (
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 mt-5">{children}</div>
+  );
+};
+
+export default StatsContainer;