User page

app/dashboard/layout.jsx

@@ -0,0 +1,21 @@
+import Navbar from "../ui/dashboard/navbar/navbar"
+import Sidebar from "../ui/dashboard/sidebar/sidebar"
+import styles from "../ui/dashboard/dashboard.module.css"
+import Footer from "../ui/dashboard/footer/footer"
+
+const Layout = ({children}) => {
+  return (
+    <div className={styles.container}>
+        <div className={styles.menu}>
+            <Sidebar/>
+        </div>
+        <div className={styles.content}>
+            <Navbar/>
+            {children}
+            <Footer/>
+        </div>
+    </div>
+  )
+}
+
+export default Layout

app/dashboard/page.jsx

@@ -0,0 +1,26 @@
+import Card from "../ui/dashboard/card/card";
+import Chart from "../ui/dashboard/chart/chart";
+import styles from "../ui/dashboard/dashboard.module.css";
+import Rightbar from "../ui/dashboard/rightbar/rightbar";
+import Transactions from "../ui/dashboard/transactions/transactions";
+
+const Dashboard = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.main}>
+        <div className={styles.cards}>
+          <Card/>
+          <Card/>
+          <Card/>
+        </div>
+        <Transactions />
+        <Chart />
+      </div>
+      <div className={styles.side}>
+        <Rightbar />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

app/dashboard/products/page.jsx

@@ -0,0 +1,65 @@
+import styles from "@/app/ui/dashboard/products/products.module.css";
+import Search from "@/app/ui/dashboard/search/search";
+import Link from "next/link";
+import Image from "next/image";
+import Pagination from "@/app/ui/dashboard/pagination/pagination";
+
+const ProductsPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.top}>
+        <Search placeholder="Search for a product..." />
+        <Link href="/dashboard/products/add">
+          <button className={styles.addButton}>Add New</button>
+        </Link>
+      </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td>Title</td>
+            <td>Description</td>
+            <td>Price</td>
+            <td>Created At</td>
+            <td>Stock</td>
+            <td>Action</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div className={styles.product}>
+                <Image
+                  src="/noproduct.jpg"
+                  alt=""
+                  width={40}
+                  height={40}
+                  className={styles.productImage}
+                ></Image>
+                Iphone
+              </div>
+            </td>
+            <td>Description</td>
+            <td>$900</td>
+            <td>8-09-2024</td>
+            <td>72</td>
+            <td>
+              <div className={styles.buttons}>
+                <Link href="/">
+                  <button className={`${styles.button} ${styles.view}`}>
+                    View
+                  </button>
+                </Link>
+                <button className={`${styles.button} ${styles.delete}`}>
+                  Delete
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <Pagination />
+    </div>
+  );
+};
+
+export default ProductsPage;

app/dashboard/users/page.jsx

@@ -0,0 +1,64 @@
+import styles from "@/app/ui/dashboard/users/users.module.css";
+import Search from "@/app/ui/dashboard/search/search";
+import Link from "next/link";
+import Image from "next/image";
+import Pagination from "@/app/ui/dashboard/pagination/pagination";
+
+const UsersPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.top}>
+        <Search placeholder="Search for a user..." />
+        <Link href="/dashboard/users/add">
+          <button className={styles.addButton}>Add New</button>
+        </Link>
+      </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td>Name</td>
+            <td>Email</td>
+            <td>Created At</td>
+            <td>Role</td>
+            <td>Status</td>
+            <td>Action</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div className={styles.user}>
+                <Image
+                  src="/noavatar.png"
+                  alt=""
+                  width={40}
+                  height={40}
+                  className={styles.userImage}
+                ></Image>
+              </div>
+            </td>
+            <td>shaheer@gmail.com</td>
+            <td>8-09-2024</td>
+            <td>Admin</td>
+            <td>active</td>
+            <td>
+              <div className={styles.buttons}>
+                <Link href="/">
+                  <button className={`${styles.button} ${styles.view}`}>
+                    View
+                  </button>
+                </Link>
+                <button className={`${styles.button} ${styles.delete}`}>
+                  Delete
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <Pagination />
+    </div>
+  );
+};
+
+export default UsersPage;

app/layout.js

@@ -1,5 +1,5 @@
 import { Inter } from 'next/font/google'
-import './globals.css'
+import './ui/globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 

app/login/page.jsx

@@ -0,0 +1,9 @@
+
+
+function LoginPage() {
+  return (
+    <div>LoginPage</div>
+  )
+}
+
+export default LoginPage

app/ui/dashboard/card/card.jsx

@@ -0,0 +1,19 @@
+import styles from './card.module.css'
+import { MdSupervisedUserCircle } from "react-icons/md";
+
+const Card = () => {
+  return (
+    <div className={styles.container}>
+        <MdSupervisedUserCircle size={24}/>
+        <div className={styles.texts}>
+            <span className={styles.title}>Total user</span>
+            <span className={styles.number}>10.273</span>
+            <span className={styles.detail}>
+                <span className={styles.positive}>12%</span> more than previous week
+            </span>
+        </div>
+    </div>
+  )
+}
+
+export default Card;

app/ui/dashboard/card/card.module.css

@@ -0,0 +1,37 @@
+.container {
+    background-color: var(--bgSoft);
+    padding: 20px;
+    border-radius: 10px;
+    display: flex;
+    gap: 20px;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .container:hover{
+    background-color: #2e374a;
+  }
+
+  .texts {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .number {
+    font-size: 24px;
+    font-weight: 500;
+  }
+
+  .detail {
+    font-size: 14px;
+    font-weight: 300;
+  }
+
+  .positive {
+    color: lime;
+  }
+
+  .negative {
+    color: red;
+  }

app/ui/dashboard/chart/chart.jsx

@@ -0,0 +1,73 @@
+"use client"
+import styles from './chart.module.css'
+
+import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const data = [
+  {
+    name: "Sun",
+    visit: 4000,
+    click: 2400,
+  },
+  {
+    name: "Mon",
+    visit: 3000,
+    click: 1398,
+  },
+  {
+    name: "Tue",
+    visit: 2000,
+    click: 3800,
+  },
+  {
+    name: "Wed",
+    visit: 2780,
+    click: 3908,
+  },
+  {
+    name: "Thu",
+    visit: 1890,
+    click: 4800,
+  },
+  {
+    name: "Fri",
+    visit: 2390,
+    click: 3800,
+  },
+  {
+    name: "Sat",
+    visit: 3490,
+    click: 4300,
+  },
+];
+
+
+const Chart = () => {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>Weekly Recap</h2>
+      <ResponsiveContainer width="100%" height="90%">
+        <LineChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip contentStyle={{background:"#151c2c", border:"none"}}/>
+          <Legend />
+          <Line type="monotone" dataKey="visit" stroke="#8884d8" strokeDasharray="5 5" />
+          <Line type="monotone" dataKey="click" stroke="#82ca9d" strokeDasharray="3 4 5 2" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+export default Chart;

app/ui/dashboard/chart/chart.module.css

@@ -0,0 +1,12 @@
+.container {
+    height: 450px;
+    background-color: var(--bgSoft);
+    padding: 20px;
+    border-radius: 10px;
+  }
+
+  .title{
+    font-weight: 200;
+    color: var(--textSoft);
+    margin-bottom: 20px;
+  }

app/ui/dashboard/dashboard.module.css

@@ -0,0 +1,38 @@
+.container {
+    display: flex;
+  }
+
+  .menu {
+    flex: 1;
+    background-color: var(--bgSoft);
+    padding: 20px;
+    min-height: 100vh;
+  }
+
+  .content {
+    flex: 4;
+    padding: 20px;
+  }
+
+  .wrapper {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
+  }
+
+  .main {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .cards {
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+  }
+
+  .side {
+    flex: 1;
+  }