+
= ({ searchQuery, setSearchQuery }) => {
New Arrival
+
+ Orders
+
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
index a6b1980..5bdd87d 100644
--- a/src/components/dashboard/SideBar.tsx
+++ b/src/components/dashboard/SideBar.tsx
@@ -4,7 +4,7 @@ import { IoBriefcaseOutline, IoSettingsOutline } from "react-icons/io5";
import { AiFillProduct } from "react-icons/ai";
import { MdInsertChartOutlined } from "react-icons/md";
import { FiLogOut } from "react-icons/fi";
-import { NavLink, useLocation } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
import { FaCircle } from "react-icons/fa";
interface SidebarProps {
@@ -14,7 +14,8 @@ interface SidebarProps {
const SideBar: React.FC = ({ isOpen }) => {
const location = useLocation();
- const getLinkClass = (path: string) => (location.pathname === path ? "text-primary" : "text-dark-gray");
+ const getLinkClass = (path: string) =>
+ (location.pathname === path ? "text-primary" : "text-dark-gray");
return (
+
+);
+
+export default SignupVerification;
diff --git a/src/redux/api/api.ts b/src/redux/api/api.ts
index e21cbcc..bc0c55d 100644
--- a/src/redux/api/api.ts
+++ b/src/redux/api/api.ts
@@ -34,7 +34,6 @@ api.interceptors.response.use(
return Promise.reject(error);
},
);
-
export default api;
export const setNavigate = (navigate) => {
diff --git a/src/redux/reducers/ordersSlice.ts b/src/redux/reducers/ordersSlice.ts
new file mode 100644
index 0000000..bc41571
--- /dev/null
+++ b/src/redux/reducers/ordersSlice.ts
@@ -0,0 +1,101 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import axios from "../api/api";
+import { orders } from "../../../type";
+
+export const fetchOrders = createAsyncThunk<
+orders,
+void,
+{ rejectValue: string }
+>("orders/fetchOrders", async (_, { rejectWithValue }) => {
+ try {
+ const response = await axios.get("/orders", {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ });
+
+ return response.data.orders as orders;
+ } catch (error: any) {
+ return rejectWithValue(error.data.message);
+ }
+});
+
+export const updateOrderStatus = createAsyncThunk<
+any,
+{ orderId: number; status: string },
+{ rejectValue: string }
+>(
+ "orders/updateOrderStatus",
+ async ({ orderId, status }, { rejectWithValue }) => {
+ try {
+ const response = await axios.patch(
+ `/orders/${orderId}/status`,
+ { status },
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+ },
+ },
+ );
+ console.log(response.data.updatedItems);
+ return response.data.updatedItems;
+ } catch (error: any) {
+ if (
+ error.response
+ && error.response.data
+ && error.response.data.message
+ ) {
+ return rejectWithValue(error.response.data.message);
+ }
+ return rejectWithValue("An unexpected error occurred.");
+ }
+ },
+);
+
+const ordersSlice = createSlice({
+ name: "orders",
+ initialState: {
+ isLoading: false,
+ data: [] as unknown as orders,
+ error: false,
+ },
+ reducers: {},
+ extraReducers(builder) {
+ builder
+ .addCase(fetchOrders.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(fetchOrders.fulfilled, (state, action) => {
+ state.isLoading = false;
+ state.data = action.payload;
+ })
+ .addCase(fetchOrders.rejected, (state, action) => {
+ state.isLoading = false;
+ state.error = true;
+ })
+ .addCase(updateOrderStatus.pending, (state) => {
+ state.isLoading = true;
+ })
+ .addCase(updateOrderStatus.fulfilled, (state, action) => {
+ const { orderId, productId, status } = action.payload;
+ const orderIndex = state.data.findIndex(
+ (order) => order.order.id === orderId,
+ );
+ if (orderIndex !== -1) {
+ const productIndex = state.data[orderIndex].products.findIndex(
+ (product) => product.id === productId,
+ );
+ if (productIndex !== -1) {
+ state.data[orderIndex].products[productIndex].status = status;
+ }
+ }
+ })
+ .addCase(updateOrderStatus.rejected, (state, action) => {
+ state.isLoading = false;
+ state.error = true;
+ });
+ },
+});
+
+export default ordersSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 94c266b..b85a3de 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -14,6 +14,7 @@ import cartsReducer from "./reducers/cartSlice";
import reviewSlice from "./reducers/reviewSlice";
import chatSlice from "./reducers/chatSlice";
import authReducer from "./reducers/authSlice";
+import ordersReducer from "./reducers/ordersSlice";
const store = configureStore({
reducer: {
@@ -31,6 +32,7 @@ const store = configureStore({
review: reviewSlice,
chats: chatSlice,
auth: authReducer,
+ order: ordersReducer,
},
});
export type RootState = ReturnType;
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index fa07270..998fff3 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -23,6 +23,10 @@ import Dashboard from "../dashboard/admin/Dashboard";
import CartManagement from "../pages/CartManagement";
import { setNavigate } from "../redux/api/api";
import ChatPage from "../pages/ChatPage";
+// import { setNavigateFunction } from "../redux/api/api";
+import SellerOrder from "../components/dashboard/orders/SellerOrder";
+import BuyerOrders from "../pages/BuyerOrders";
+import SignupVerification from "../pages/SignupVerification";
const AppRoutes = () => {
const navigate = useNavigate();
@@ -53,11 +57,14 @@ const AppRoutes = () => {
{
= ({ isOpen }) => {
Add product
(
+ null,
+ );
+ const [isLoading, setIsLoading] = useState(true);
+
+ const openModal = (product: ProductOrders) => {
+ setSelectedProduct(product);
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setSelectedProduct(null);
+ setIsModalOpen(false);
+ };
+
+ const dispatch = useAppDispatch();
+ const { data, error } = useSelector((state: RootState) => state.order);
+ const loading = useSelector((state: RootState) => state.order.isLoading);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setIsLoading(false);
+ }, 2000);
+ dispatch(fetchOrders());
+ }, [dispatch]);
+
+ if (error) {
+ return (
+
+
+ );
+};
+
+export default SellerOrder;
diff --git a/src/index.css b/src/index.css
index 4c36632..19f6dfa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,3 +56,7 @@
height: 100%;
object-fit: cover;
}
+
+.hide::-webkit-scrollbar {
+ display: none;
+}
diff --git a/src/pages/BuyerOrders.tsx b/src/pages/BuyerOrders.tsx
new file mode 100644
index 0000000..132f163
--- /dev/null
+++ b/src/pages/BuyerOrders.tsx
@@ -0,0 +1,266 @@
+import { useEffect, useState } from "react";
+import moment from "moment";
+import { useSelector } from "react-redux";
+import { jwtDecode } from "jwt-decode";
+import { NumericFormat } from "react-number-format";
+import { Link } from "react-router-dom";
+
+import { ProductOrders } from "../../type";
+import { useAppDispatch } from "../redux/hooks";
+import { RootState } from "../redux/store";
+import Spinner from "../components/common/auth/Loader";
+import Warning from "../components/common/notify/Warning";
+import { fetchOrders } from "../redux/reducers/ordersSlice";
+
+const SellerOrder = () => {
+ const token: any = localStorage.getItem("accessToken");
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedProduct, setSelectedProduct] = useState(
+ null,
+ );
+
+ const openModal = (product: ProductOrders) => {
+ setSelectedProduct(product);
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setSelectedProduct(null);
+ setIsModalOpen(false);
+ };
+
+ const dispatch = useAppDispatch();
+ const {
+ data = [],
+ isLoading,
+ error,
+ } = useSelector((state: RootState) => state.order);
+
+ let decoded;
+ try {
+ decoded = jwtDecode(token);
+ } catch (e) {
+ return = () => {
);
}
+ console.log(userCart);
const handleDelete = async () => {
await dispatch(cartDelete());
diff --git a/src/pages/ProductPage.tsx b/src/pages/ProductPage.tsx
index 4144080..1413246 100644
--- a/src/pages/ProductPage.tsx
+++ b/src/pages/ProductPage.tsx
@@ -61,7 +61,7 @@ const ProductPage = () => {
}),
);
} catch (error: any) {
- alert("error");
+ alert("error"); // eslint-disable-line no-alert
}
};
fetchFilteredProducts();
@@ -78,7 +78,8 @@ const ProductPage = () => {
const category = searchParams.get("category") || "";
if (name) {
- filtered = filtered.filter((product) => product.name.toLowerCase().includes(name.toLowerCase()));
+ filtered = filtered.filter((product) =>
+ product.name.toLowerCase().includes(name.toLowerCase()));
}
// if (category) {
diff --git a/src/pages/SignupVerification.tsx b/src/pages/SignupVerification.tsx
new file mode 100644
index 0000000..ca0883b
--- /dev/null
+++ b/src/pages/SignupVerification.tsx
@@ -0,0 +1,23 @@
+import { Link } from "react-router-dom";
+
+const SignupVerification = () => (
+
+
+ );
+ }
+
+ let decoded;
+ try {
+ decoded = jwtDecode(token);
+ } catch (e) {
+ return + Cannot get orders for you, unknow error occured. + + {" "} + check your network or server error 😓 + +
+
+
+ );
+ }
+
+ const handleStatusChange = (orderId: number, status: string) => {
+ setTimeout(() => {
+ dispatch(fetchOrders());
+ dispatch(fetchOrders());
+ }, 1000);
+ dispatch(updateOrderStatus({ orderId, status }));
+ toast.success("status updated successfully");
+ };
+
+ return (
+ + You're not allowed to perform this action 🚫 +
+
+
+ )}
+
+
+ Orders
+
+ {!Array.isArray(data) && data.length !== 0 ? (
+
+
+
+ )}
+ {isModalOpen && selectedProduct && (
+
+
+
+ ) : (
+ Oops, you have no order yet 😢
+Add products to attract more clients
+ + + +| + Customer Name + | ++ Email + | ++ Last Order + | ++ Spent + | ++ Status + | ++ Action + | +|
|---|---|---|---|---|---|---|
|
+
+
+ {order.order?.buyer.name}+ |
+
+ {order.order?.buyer.email} + |
+
+ + {moment(order.order?.deliveryDate).format( + "DD MMM, YYYY", + )} + + |
+
+
+ |
+
+ {order.products && order.products.length > 0 ? (
+ + {order.products[0].status} + + ) : ( +No Products + )} + |
+ + + | ++ openModal(order.products)} + > + View + + | +
+
+ )}
+ e.stopPropagation()}
+ >
+
+
+
+
+
+ Product Details
+| + Product Name + | ++ Price + | ++ Quantity + | ++ Total + | +
|---|---|---|---|
| + {productItem.product.name} + | +
+ |
+ + {productItem.quantity} + | +
+ |
+
+
+ );
+ }
+
+ useEffect(() => {
+ dispatch(fetchOrders());
+ }, [dispatch]);
+
+ const getOrderStatus = (products: any[]) => {
+ if (products.some((product) => product.status === "Pending")) {
+ return "Pending";
+ }
+ if (products.some((product) => product.status === "Cancelled")) {
+ return "Cancelled";
+ }
+ if (products.every((product) => product.status === "Delivered")) {
+ return "Complete";
+ }
+ return "Pending";
+ };
+
+ if (isLoading) {
+ return + You're not allowed to perform this action 🚫 +
+
+
+ );
+ }
+
+ return (
+ + Cannot get orders for you, an unknown error occurred. + + {" "} + Check your network or server error 😓 + +
+
+
+ );
+};
+
+export default SellerOrder;
diff --git a/src/pages/CartManagement.tsx b/src/pages/CartManagement.tsx
index ea182d8..ed1af86 100644
--- a/src/pages/CartManagement.tsx
+++ b/src/pages/CartManagement.tsx
@@ -50,6 +50,7 @@ const CartManagement: React.FC
+
+ Orders
+
+ {!Array.isArray(data) && data.length !== 0 ? (
+
+
+
+ )}
+ {isModalOpen && selectedProduct && (
+
+
+
+ ) : (
+ Oops, you have no order yet 😢
+Place your order now click below button
+ + + +| Name | ++ Delivery Date + | ++ Status + | ++ Details + | +|
|---|---|---|---|---|
|
+
+
+ {order.order.buyer.name}+ |
+
+ {order.order.buyer.email} + |
+
+ + {moment(order.order.deliveryDate).format( + "DD MMM, YYYY", + )} + + |
+ + {getOrderStatus(order.products)} + | ++ openModal(order.products)} + > + View + + | +
+
+ )}
+ e.stopPropagation()}
+ >
+
+
+
+
+
+ Product Details
+| + Product Name + | ++ Price + | ++ Quantity + | ++ Total + | ++ Status + | +
|---|---|---|---|---|
|
+
+
+ + {productItem.product.name} + + |
+
+ |
+ + {productItem.quantity} + | +
+ |
+
+ + {productItem.status} + + |
+
+
+ Email Verified!
++ Thank you for verifying your email address. Your registration is now + complete. +
++ You can now log in to your account and start using our services. +
+ + + +