created admin order list and showing all orders

src/App.js

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { useUserLoggedInQuery } from "./features/auth/userAuthApi";
 import { useAdminAuthChecked } from "./hooks/useAdminAuthChecked";
@@ -19,19 +18,19 @@ import { CheckOut } from "./pages/User/CheckOut/CheckOut";
 import { Home } from "./pages/User/Home/Home";
 import { Order } from "./pages/User/Order/Order";
 import { ProductDetails } from "./pages/User/ProductDetails/ProductDetails";
-import { MyOrder } from "./pages/User/Profile/MyOrder";
+import { MyOrder } from "./pages/User/Profile/MyOrder/MyOrder";
 import { Search } from "./pages/User/Search/Search";
 import { UserLogin } from "./pages/User/UserLogin";
 import { UserRegister } from "./pages/User/UserRegister";
 import { PrivateRoute } from "./routes/admin/PrivateRoute";
 import { PublicRoute } from "./routes/admin/PublicRoute";
 import { UserPrivateRoute } from "./routes/user/UserPrivateRoute";
 import { UserPublicRoute } from "./routes/user/UserPublicRoute";
+import { AllOrder } from "./pages/Order/AllOrder";
 
 function App() {
   const adminAuthChecked = useAdminAuthChecked();
   const userAuthChecked = useUserAuthChecked();
-  const dispatch = useDispatch();
 
   const {} = useUserLoggedInQuery();
 
@@ -158,6 +157,14 @@ function App() {
             </PrivateRoute>
           }
         />
+        <Route
+          path="/admin/orders"
+          element={
+            <PrivateRoute>
+              <AllOrder />
+            </PrivateRoute>
+          }
+        />
       </Route>
       <Route path="/*" element={<NotFound />} />
     </Routes>

src/features/order/orderApi.js

@@ -0,0 +1,13 @@
+import { apiSlice } from "../api/apiSlice";
+
+export const orderApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    getAllOrder: builder.query({
+      query: () => ({
+        url: "/order/all",
+      }),
+    }),
+  }),
+});
+
+export const { useGetAllOrderQuery } = orderApi;

src/pages/Order/AllOrder.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Heading } from "../../components/common/Heading/Heading";
+import { useGetAllOrderQuery } from "../../features/order/orderApi";
+import { setTitle } from "../../utils/setTitle";
+import { OrderTable } from "./OrderTable";
+
+export const AllOrder = () => {
+  const {
+    data: orders,
+    isLoading,
+    isSuccess,
+    isError,
+  } = useGetAllOrderQuery() || {};
+
+  // decide what to render
+  let content;
+
+  if (isLoading)
+    <p className="text-center uppercase font-medium">loading...</p>;
+  if (!isLoading && isError)
+    content = (
+      <h3 className="text-center uppercase font-medium">
+        something went wrong!
+      </h3>
+    );
+
+  if (!isError && !isLoading && isSuccess && orders?.length === 0)
+    content = (
+      <p className="text-center uppercase font-medium">No Orders found!</p>
+    );
+  if (!isError && !isLoading && orders?.length > 0)
+    content = <OrderTable orders={orders} />;
+
+  //set page title
+  setTitle("All Orders");
+  return (
+    <section className="space-y-4">
+      <Heading title="All Orders" />
+      <div className="mt-4" />
+      {/* product table  */}
+      {content}
+    </section>
+  );
+};

src/pages/Order/OrderTable.js

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { FaPencilAlt, FaTrashAlt } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+export const OrderTable = ({ orders }) => {
+  return (
+    <>
+      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-100">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                Picture
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Name
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Price
+              </th>
+              <th scope="col" className="px-6 py-3">
+                quantity
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Status
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {orders?.map((order) => (
+              <React.Fragment key={order._id}>
+                {/* Order row */}
+                <tr className="bg-gray-200">
+                  <th className="px-6 py-3 ">
+                    <span className="capitalize"> transaction Id : </span>
+                    {order.transactionId}
+                  </th>
+                  <td className="px-6 py-3 capitalize"></td>
+                  <td className="px-6 py-3 capitalize">
+                    Total Amount: ${order.totalAmount}
+                  </td>
+                  <td className="px-6 py-3 capitalize">{order.stock}</td>
+                  <td className="px-6 py-3 cursor-pointer">
+                    <select name="orderStatus" id="">
+                      <option value=""> {order.oderStatus}</option>
+                      <option value=""></option>
+                      <option value=""></option>
+                    </select>
+                  </td>
+                  <td className="px-6 py-3 sm:space-x-2 space-x-1">
+                    <Link to="/">Details</Link>
+                  </td>
+                </tr>
+
+                {/* Items rows */}
+                {order?.items?.map((item) => (
+                  <tr className="bg-white border-b">
+                    <th
+                      scope="row"
+                      className="px-6 py-3 font-medium text-gray-900 whitespace-nowrap"
+                    >
+                      <img
+                        src={`${process.env.REACT_APP_BASE_URL}/uploads/${item.picture}`}
+                        alt="brand"
+                        className="w-11 h-11 rounded-full ring-2 ring-green-700 p-1"
+                      />
+                    </th>
+                    <td className="px-6 py-3 capitalize">{item.name}</td>
+                    <td className="px-6 py-3 capitalize">${item.price}</td>
+                    <td className="px-6 py-3 capitalize">
+                      Qty: {item.quantity}
+                    </td>
+                    <td className="px-6 py-3 cursor-pointer"></td>
+                    <td className="px-6 py-3 sm:space-x-2 space-x-1"></td>
+                  </tr>
+                ))}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};

src/pages/User/Profile/MyOrder/MyOrder.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { setTitle } from "../../../../utils/setTitle";
+import { MyOrderList } from "./MyOrderList";
+
+export const MyOrder = () => {
+  //set page title
+  setTitle("My Orders");
+  return (
+    <div className="container mx-auto my-5">
+      <div className="shadow-md py-3 rounded-md">
+        <h1 className="text-3xl capitalize ">My Orders</h1>
+      </div>
+      {/* my orders list */}
+      <div className="py-4">
+        <MyOrderList />
+        <MyOrderList />
+        <MyOrderList />
+        <MyOrderList />
+      </div>
+    </div>
+  );
+};

src/pages/User/Profile/MyOrder/MyOrderList.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export const MyOrderList = () => {
+  return (
+    <div className=" shadow-md rounded-md  py-2 px-4">
+      <h1 className="font-semibold py-2">
+        TrId: <span className="text-orange-600">43534543</span>
+      </h1>
+      <div className="flex justify-between gap-5">
+        <div className="">
+          <img
+            src="http://localhost:5000/api/uploads/d2020h-01-500x500-1692378880168.webp"
+            alt=""
+            className="w-11 h-11 rounded-full ring-2 p-1"
+          />
+        </div>
+        <div>
+          <h1 className="max-w-[500px]">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias
+            accusamus nihil, temporibus aliquid distinctio
+          </h1>
+        </div>
+        <div className="">
+          <span>Quantity: 1</span>
+        </div>
+        <div>
+          <span className="bg-green-600 text-gray-800 p-1 rounded-md">
+            completed
+          </span>
+        </div>
+        <div className="">
+          <span>12 jan 2024</span>
+        </div>
+      </div>
+    </div>
+  );
+};