Feat(Dashboard): The seller and admin dashboard

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev ",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -29,15 +29,16 @@
     "npx": "^10.2.2",
     "react": "^18",
     "react-dom": "^18",
+    "react-google-charts": "^4.0.1",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.2.1",
     "react-query": "^3.39.3",
     "react-rating": "^2.0.5",
     "react-rating-stars-component": "^2.2.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
-    "react-toastify": "^10.0.5",
     "react-slick": "^0.30.2",
+    "react-toastify": "^10.0.5",
     "redux-mock-store": "^1.5.4",
     "redux-thunk": "^3.1.0",
     "slick-carousel": "^1.8.1",
@@ -97,8 +98,8 @@
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.4",
-    "msw": "^2.3.1",
     "match-media-mock": "^0.1.1",
+    "msw": "^2.3.1",
     "postcss": "^8",
     "prettier": "^3.2.5",
     "react-test-renderer": "^18.3.1",
@@ -109,4 +110,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   }
-}
+}

src/app/admin/categories/page.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import request from '@/utils/axios';
+
+function page() {
+  const [user, setUser] = useState<any>(null);
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = JSON.parse(user);
+
+      setUser(finalUser.User);
+    };
+    categ();
+  }, []);
+
+  if (!user) {
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex sm:flex-row flex-col">
+      <div>
+        <DashNavbar />
+      </div>
+      <div className="flex-1 sm:pt-5 sm:px-7 ">
+        <div>
+          <HeaderDash pageName="Categories Page" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;

src/app/admin/home/page.tsx

@@ -0,0 +1,89 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import { unstable_noStore as noStore } from 'next/cache';
+import SellerSummary from '@/components/SellerSummary';
+import Chartssection from '@/components/chartssection';
+import request from '@/utils/axios';
+import { useQuery } from '@tanstack/react-query';
+
+function page() {
+  const [categories, setcategoris] = useState([]);
+  const [user, setUser] = useState<any>();
+  const [users, setUsers] = useState<any>();
+
+  const { data, isLoading, error } = useQuery<any>({
+    queryKey: ['data'],
+    queryFn: async () => {
+      noStore();
+      let data;
+      const date = new Date();
+      const dataDateNow = date
+        .toLocaleDateString()
+        .replaceAll('/', '-')
+        .split('-');
+
+      const response: any = await request.get(
+        `http://localhost:5500/api/stats?start=2023-02-06&end=${dataDateNow[2]}-${dataDateNow[0].length > 1 ? dataDateNow[0] : '0' + dataDateNow[0]}-${dataDateNow[1]}`,
+      );
+      data = response.data;
+
+      return data;
+    },
+  });
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = JSON.parse(user);
+
+      setUser(finalUser.User);
+      if (finalUser.User.Role.name === 'admin') {
+        const responseUsers: any = await request.get('/users');
+        setUsers(responseUsers.users);
+      }
+      setcategoris(responsecat.categories);
+    };
+    categ();
+  }, []);
+  if (isLoading) {
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex sm:flex-row flex-col fixed ">
+      <div className="z-10  ">
+        <DashNavbar role={user.Role.name} />
+      </div>
+      <div className="flex-1 sm:pt-5   sm:px-7  w-full   z-10 ">
+        <div className="mb-3">
+          <HeaderDash pageName="Dashboard" />
+        </div>
+        {/* body section  */}
+        <div className="flex justify-center sm:justify-start sm:items-center items-start w-full overflow-auto h-[90vh] fixed sm:relative sm:pb-10  pb-20   z-0">
+          {/* Statistic section  */}
+          <div className="w-full flex flex-col gap-5 justify-center items-center sm:justify-start sm:items-start">
+            <SellerSummary
+              user={user}
+              data={data}
+              categories={categories}
+              users={users}
+            />
+            <Chartssection
+              user={user}
+              data={data}
+              categories={categories}
+              users={users}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;

src/app/admin/product/page.tsx

@@ -0,0 +1,45 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import request from '@/utils/axios';
+import ProductsTable from '@/components/Table';
+
+function page() {
+  const [user, setUser] = useState<any>(null);
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = JSON.parse(user);
+
+      setUser(finalUser.User);
+    };
+    categ();
+  }, []);
+
+  if (!user) {
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex sm:flex-row flex-col">
+      <div>
+        <DashNavbar role={user?.Role?.name} />
+      </div>
+      <div className="flex-1 sm:pt-5 sm:px-7 ">
+        <div>
+          <HeaderDash pageName="Products Page" />
+        </div>
+        <div>
+          <ProductsTable />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;

src/app/admin/productcreate/page.tsx

@@ -0,0 +1,57 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import request from '@/utils/axios';
+import ProductPopup from '@/components/AddProducts';
+import { useRouter } from 'next/navigation';
+
+function page() {
+  const [user, setUser] = useState<any>();
+  const router = useRouter();
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = JSON.parse(user);
+
+      setUser(finalUser.User);
+      if (finalUser?.User.Role.name !== 'seller') {
+        router.push('/');
+      }
+    };
+    categ();
+  }, []);
+
+  if (!user) {
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex sm:flex-row flex-col fixed">
+      <div className="z-10">
+        <DashNavbar role={user.Role.name} />
+      </div>
+      <div className="flex-1 sm:pt-5  sm:px-7  h-screen fixed sm:relative w-full   z-10 ">
+        <div className="mb-1">
+          <HeaderDash pageName="Create Product Page" />
+        </div>
+        {/* body section  */}
+        <div className="flex justify-center sm:justify-start sm:items-center items-start  overflow-auto h-[90vh] fixed sm:relative w-full sm:pb-10  pb-20   z-0">
+          {/* Statistic section  */}
+          <div className="w-full  relative flex flex-col gap-5 justify-center items-center sm:justify-start sm:items-start">
+            <ProductPopup
+              isOpen={true}
+              onClose={() => console.log('nothing')}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;

src/app/admin/profile/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import request from '@/utils/axios';
+
+function page() {
+  const [user, setUser] = useState<any>();
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = await JSON.parse(user);
+
+      setUser(finalUser.User);
+    };
+    categ();
+  }, []);
+  if (!user) {
+    return (
+      <div className="min-h-screen w-full justify-center items-center flex">
+        <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+      </div>
+    );
+  }
+  return (
+    <div className="w-full flex sm:flex-row flex-col">
+      <div>
+        <DashNavbar role={user?.Role.name} />
+      </div>
+      <div className="flex-1 sm:pt-5 sm:px-7 ">
+        <div>
+          <HeaderDash pageName="Profile page" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;

src/app/admin/users/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+import React, { use, useEffect, useState } from 'react';
+import DashNavbar from '@/components/DashNavbar';
+import HeaderDash from '@/components/headerDash';
+import request from '@/utils/axios';
+
+function page() {
+  const [user, setUser] = useState<any>();
+  useEffect(() => {
+    const categ = async () => {
+      const responsecat: any = await request.get('/categories');
+      const user = localStorage.getItem('profile') || 'no';
+      const finalUser = JSON.parse(user);
+
+      setUser(finalUser.User);
+    };
+  }, []);
+  return (
+    <div className="w-full flex sm:flex-row flex-col">
+      <div>
+        <DashNavbar role={user.Role.name} />
+      </div>
+      <div className="flex-1 sm:pt-5 sm:px-7 ">
+        <div>
+          <HeaderDash pageName="Dashboard" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default page;