[finishes #187943570] buyer dashboard

src/App.tsx

@@ -21,6 +21,7 @@ import Messages from './pages/admin/Messages';
 import Settings from './pages/admin/Settings';
 
 import CategoriesPage from './pages/CategoriesPage';
+import BuyerProfile from './pages/BuyerProfile';
 const App = () => {
   const { data, error, isLoading } = useGetProductsQuery();
   const dispatch = useDispatch();
@@ -69,7 +70,11 @@ const App = () => {
         {
           path: 'categories/:categoryId',
           element: <CategoriesPage />,
-        }
+        },
+        {
+          path: 'buyer-profile',
+          element: <BuyerProfile />,
+        },
       ],
     },
     {

src/containers/buyer/Account.tsx

@@ -0,0 +1,78 @@
+// components/menu/Menu1.jsx
+import { FaUserEdit, FaHourglassHalf } from "react-icons/fa";
+import {  FaTruckFast } from "react-icons/fa6";
+import { MdOutlineFeedback } from "react-icons/md";
+import { PiKeyReturn } from "react-icons/pi";
+import { useDispatch } from "react-redux";
+import { setActiveMenu } from "../../redux/slices/buyerDashboard";
+
+
+const image: string = 'https://images.unsplash.com/photo-1533636721434-0e2d61030955?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+
+const Account = () => {
+    const dispatch = useDispatch();
+  return (
+    <div className="p-6">
+      {/* User Profile Section */}
+      <div className="flex justify-between items-center bg-white shadow-md p-4 rounded-lg mb-6" onClick={() => dispatch(setActiveMenu(""))}>
+        <div className="flex items-center">
+          <img src={image} alt="Buyer Profile" className="rounded-full mr-4 w-16 h-16 object-cover" />
+          <div>
+            <h2 className="text-xl font-semibold">NP Leon</h2>
+            <p className="text-gray-600">Buyer</p>
+          </div>
+        </div>
+        <FaUserEdit className="text-2xl text-gray-600 cursor-pointer" />
+      </div>
+
+      {/* Cards Section */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 py-10">
+        {/* Pending Card */}
+        <div className="bg-whiteColor cursor-pointer shadow-md p-8 rounded-lg flex flex-col items-center transform transition duration-300 hover:scale-105 relative" onClick={() => dispatch(setActiveMenu("pendingpayments"))}>
+            <div className="absolute top-2 right-2 bg-red-500 text-white text-sm rounded-full w-8 h-8 flex items-center justify-center">
+                5
+            </div>
+            <FaHourglassHalf className="text-6xl text-greenColor mb-4 w-full text-center" />
+            <div className="text-center">
+                <h3 className="text-lg font-semibold">Pending Payments</h3>
+            </div>
+        </div>
+
+        {/* All Card */}
+        <div className="bg-whiteColor cursor-pointer shadow-md p-8 rounded-lg flex flex-col items-center transform transition duration-300 hover:scale-105 relative"
+          onClick={() => dispatch(setActiveMenu("intransit"))}
+        >
+            <div className="absolute top-2 right-2 bg-red-500 text-white text-sm rounded-full w-8 h-8 flex items-center justify-center">
+                5
+            </div>
+            <FaTruckFast className="text-6xl text-greenColor mb-4 w-full text-center" />
+            <div className="text-center">
+                <h3 className="text-lg font-semibold">In Transit</h3>
+            </div>
+        </div>
+
+        {/* Feedback Card */}
+        <div className="bg-whiteColor cursor-pointer shadow-md p-8 rounded-lg flex flex-col items-center transform transition duration-300 hover:scale-105 relative"
+          onClick={() => dispatch(setActiveMenu("feedback"))}
+        >
+            <MdOutlineFeedback className="text-6xl text-greenColor mb-4 w-full text-center" />
+            <div className="text-center">
+                <h3 className="text-lg font-semibold">Feedback</h3>
+            </div>
+        </div>
+
+        {/* Refund & Return Card */}
+        <div className="bg-whiteColor cursor-pointer shadow-md p-8 rounded-lg flex flex-col items-center transform transition duration-300 hover:scale-105 relative"
+           onClick={() => dispatch(setActiveMenu("returnrefund"))}
+        >
+            <PiKeyReturn className="text-6xl text-greenColor mb-4 w-full text-center" />
+            <div className="text-center">
+                <h3 className="text-lg font-semibold">Return & Refund</h3>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;

src/containers/buyer/FeedBack.tsx

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

src/containers/buyer/InTransit.tsx

@@ -0,0 +1,7 @@
+function InTransit() {
+  return (
+    <div>In Transit</div>
+  )
+}
+
+export default InTransit

src/containers/buyer/Orders.tsx

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

src/containers/buyer/PendingPayments.tsx

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

src/containers/buyer/ResetPassword.tsx

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

src/containers/buyer/ReturnRefund.tsx

@@ -0,0 +1,7 @@
+function ReturnRefund() {
+  return (
+    <div>Return and Refund</div>
+  )
+}
+
+export default ReturnRefund

src/containers/buyer/Shipping.tsx

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

src/pages/BuyerProfile.tsx

@@ -0,0 +1,86 @@
+import Footer from "../components/footer/Footer";
+import Navbar from "../components/navbar/Navbar";
+import Account from "../containers/buyer/Account";
+import Shipping from "../containers/buyer/Shipping";
+import ResetPassword from "../containers/buyer/ResetPassword";
+import Orders from "../containers/buyer/Orders";
+import { setActiveMenu } from "../redux/slices/buyerDashboard";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import PendingPayments from "../containers/buyer/PendingPayments";
+import FeedBack from "../containers/buyer/FeedBack";
+import InTransit from "../containers/buyer/InTransit";
+import ReturnRefund from "../containers/buyer/ReturnRefund";
+
+
+function BuyerProfile() {
+const activeMenu = useSelector((state:any) => state.activeMenu.activeMenu);
+const dispatch = useDispatch(); 
+
+  const renderContent = () => {
+    switch (activeMenu) {
+      case "account":
+        return <Account />;
+      case "orders":
+        return <Orders />;
+      case "shipping":
+        return <Shipping />;
+        case "shipping":
+            return <Shipping />;
+        case "pendingpayments":
+            return <PendingPayments />;
+        case "returnrefund":
+            return <ReturnRefund />;
+        case "feedback":
+            return <FeedBack />;
+        case "intransit":
+            return <InTransit />;
+      case "reset":
+        return <ResetPassword />;
+      default:
+        return <div>Select a menu item</div>;
+    }
+  };
+
+  return (
+    <div>
+      <Navbar />
+      <div className="grid grid-cols-5 min-h-screen px-32">
+        <div className="col-span-1 bg-gray-100 p-4 sticky top-16">
+          <ul>
+            <li
+              className={`py-2 rounded-md pl-5 cursor-pointer ${activeMenu === "account" ? "bg-greenColor text-whiteColor" : ""}`}
+              onClick={() => dispatch(setActiveMenu("account"))}
+            >
+              My Account
+            </li>
+            <li
+              className={`py-2 pl-5 rounded-md cursor-pointer ${activeMenu === "orders" ? "bg-greenColor text-whiteColor" : ""}`}
+              onClick={() => dispatch(setActiveMenu("orders"))}
+            >
+              My Orders
+            </li>
+            <li
+              className={`py-2 pl-5 rounded-md cursor-pointer ${activeMenu === "shipping" ? "bg-greenColor text-whiteColor" : ""}`}
+              onClick={() => dispatch(setActiveMenu("shipping"))}
+            >
+              Shipping Address
+            </li>
+            <li
+              className={`py-2 pl-5 rounded-md cursor-pointer ${activeMenu === "reset" ? "bg-greenColor text-whiteColor" : ""}`}
+              onClick={() => dispatch(setActiveMenu("reset"))}
+            >
+              Reset Password
+            </li>
+          </ul>
+        </div>
+        <div className="col-span-4 p-4">
+          {renderContent()}
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default BuyerProfile;

src/redux/slices/buyerDashboard.tsx

@@ -0,0 +1,19 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  activeMenu: "account",
+};
+
+const activeMenuSlice = createSlice({
+  name: "activeMenu",
+  initialState,
+  reducers: {
+    setActiveMenu: (state, action) => {
+      state.activeMenu = action.payload;
+    },
+  },
+});
+
+export const { setActiveMenu } = activeMenuSlice.actions;
+
+export default activeMenuSlice.reducer;

src/redux/store.ts

@@ -6,13 +6,15 @@ import registerReducer from './slices/registerSlice';
 import userReducer from './slices/userSlice';
 import productReducer from './slices/productsSlice';
 import categoriesReducer from './slices/categorySlice';
+import activeMenuReducer from './slices/buyerDashboard';
 
 export const store = configureStore({
   reducer: {
     products: productReducer,
     user: userReducer,
     register: registerReducer,
     category: categoriesReducer,
+    activeMenu: activeMenuReducer,
     [mavericksApi.reducerPath]: mavericksApi.reducer,
   },
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(mavericksApi.middleware),