Merge branch 'admin-dashboard' of https://github.com/atlp-rwanda/e-co…

…mmerce-crafters-fn into demo-fn-19-07

src/Components/dashboard/AdminHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import useAuthUser from "react-auth-kit/hooks/useAuthUser";
-import { useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import Logout from "../../services/Logout";
 import { useTranslation } from "react-i18next";
 
@@ -180,24 +180,24 @@ const AdminHeader = () => {
             <i className="fas fa-times"></i>
           </button>
           <nav className="flex flex-col space-y-4 mt-4">
-            <a href="/admin" className="hover:text-gray-300">
+            <Link to="/admin" className="hover:text-gray-300">
               Administration
-            </a>
-            <a href="/admin/users" className="hover:text-gray-300">
+            </Link>
+            <Link to="/admin/users" className="hover:text-gray-300">
               Users
-            </a>
-            <a href="/admin/sellers" className="hover:text-gray-300">
+            </Link>
+            <Link to="/admin/sellers" className="hover:text-gray-300">
               Sellers
-            </a>
-            <a href="/admin/requests" className="hover:text-gray-300">
+            </Link>
+            <Link to="/admin/requests" className="hover:text-gray-300">
               Applications
-            </a>
-            <a href="/admin/analytics" className="hover:text-gray-300">
+            </Link>
+            <Link to="/admin/analytics" className="hover:text-gray-300">
               Analytics
-            </a>
-            <a href="/admin/settings" className="hover:text-gray-300">
+            </Link>
+            <Link to="/admin/settings" className="hover:text-gray-300">
               Settings
-            </a>
+            </Link>
             <a>
               <button onClick={Logout()}>Sign Out</button>
             </a>

src/Components/dashboard/AdminSettings.tsx

@@ -64,7 +64,7 @@ const AdminSettings = () => {
         handleDiscard();
         setTimeout(() => {
           logout();
-        }, 5000);
+        }, 4000);
       } catch (error) {
         toast.error("Failed to update password");
       }

src/Components/dashboard/UserTable.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useSelectUsersQuery } from "../../Redux/Admin/usersSlice";
 import { Circles } from "react-loader-spinner";
+import { Link } from "react-router-dom";
 
 interface User {
   name: string;
@@ -60,9 +61,9 @@ const UserTable: React.FC = () => {
             Vendors ({sellersCount})
           </span>
         </div>
-        <a href={viewAllUrl}>
+        <Link to={viewAllUrl}>
           <button className="sm:text-sm text-secondary">View all</button>
-        </a>
+        </Link>
       </div>
       <table className="w-full">
         <thead>

src/Components/dashboard/VendorRequestList.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelectRequestsQuery } from "../../Redux/Admin/sellersSlice";
 import { Circles } from "react-loader-spinner";
+import { Link } from "react-router-dom";
 
 interface Seller {
   storeName: string;
@@ -25,9 +26,9 @@ const VendorRequestList: React.FC = () => {
         <span className="px-2 text-sm lg:p-2 lg:px-4 rounded-[6px] bg-secondary text-white">
           Vendor Applications ({sellersCount})
         </span>
-        <a href="/admin/requests">
+        <Link to="/admin/requests">
           <button className="sm:text-sm text-secondary">View all</button>
-        </a>
+        </Link>
       </div>
       <table className="w-full">
         <thead>

src/Redux/OrderSlice.tsx

@@ -12,8 +12,8 @@ const OrderApiSlice = apiSlice.injectEndpoints({
         url: `/orders/`,
         headers: {
           Authorization: `Bearer ${token}`,
-        }, 
-        credentials: 'include'
+        },
+        credentials: "include",
       }),
     }),
     getOrderStatus: builder.query({
@@ -25,23 +25,35 @@ const OrderApiSlice = apiSlice.injectEndpoints({
       }),
     }),
     updateOrderStatus: builder.mutation({
-      query: ({token, orderId, status, userId}) => ({
-        url:`/order/${orderId}/order-status`,
-        method: 'PUT',
+      query: ({ token, orderId, status, userId }) => ({
+        url: `/order/${orderId}/order-status`,
+        method: "PUT",
         headers: {
           Authorization: `Bearer ${token}`,
         },
         body: { status, userId },
-        credentials: 'include'
-      })
+        credentials: "include",
+      }),
     }),
     getUserInfo: builder.query({
       query: ({ userId }) => ({
         url: `/user-info/${userId}`,
-      })
-    })
+      }),
+    }),
+    allOrders: builder.query({
+      query: () => ({
+        url: `/order/getAllOrder`,
+      }),
+    }),
   }),
 });
 
-export const { useGetOrderStatusQuery, useGetOrderQuery, useUpdateOrderStatusMutation, useGetUserInfoQuery, useGetAllOrdersQuery } = OrderApiSlice;
-export default OrderApiSlice;
+export const {
+  useGetOrderStatusQuery,
+  useGetOrderQuery,
+  useUpdateOrderStatusMutation,
+  useGetUserInfoQuery,
+  useGetAllOrdersQuery,
+  useAllOrdersQuery,
+} = OrderApiSlice;
+export default OrderApiSlice;

src/pages/Admin/AdminHome.tsx

@@ -5,27 +5,29 @@ import VendorRequestList from "../../Components/dashboard/VendorRequestList";
 import InteractionCard from "../../Components/dashboard/InteractionCard";
 import { useSelectStoresQuery } from "../../Redux/Admin/sellersSlice";
 import { useSelectUsersQuery } from "../../Redux/Admin/usersSlice";
+import { useAllOrdersQuery } from "../../Redux/OrderSlice";
 
 function AdminHome() {
-   const {
-     data: sellers = [],
-     refetch: refetchSellers,
-   } = useSelectStoresQuery({});
-    const approvedSellers = sellers.filter(
-      (seller:any) => seller.status === "approved"
-    );
+  const { data: sellers = [], refetch: refetchSellers } = useSelectStoresQuery(
+    {}
+  );
+  const approvedSellers = sellers.filter(
+    (seller: any) => seller.status === "approved"
+  );
+
+  const { data: orders = [], refetch: refetchOrders } = useAllOrdersQuery({});
+  const transactions = orders.filter(
+    (order: any) => order.status === "delivered"
+  );
+
+  const { data: users = [], refetch: refetchUsers } = useSelectUsersQuery({});
 
-  const {
-    data: users = [],
-    refetch: refetchUsers,
-  } = useSelectUsersQuery({});
+  useEffect(() => {
+    refetchSellers();
+    refetchUsers();
+    refetchOrders();
+  }, [refetchSellers, refetchUsers, refetchOrders]);
 
-   useEffect(() => {
-     refetchSellers();
-     refetchUsers();
-   }, [refetchSellers, refetchUsers]);
-
-
   const cardData = [
     {
       name: "Vendors",
@@ -137,7 +139,7 @@ function AdminHome() {
     },
     {
       name: "Transactions",
-      numbers: 1500,
+      numbers: transactions.length,
       icon: (
         <svg
           width="20"
@@ -183,7 +185,7 @@ function AdminHome() {
     },
     {
       name: "Orders",
-      numbers: 1500,
+      numbers: orders.length,
       icon: (
         <svg
           width="20"

src/pages/Analytics.tsx

@@ -1,15 +1,37 @@
-import React from "react";
+import React, { useEffect } from "react";
 import WeeklyReport from "../Components/dashboard/analytics/WeeklyReport";
 import OrderStatus from "../Components/dashboard/analytics/OrderStatus";
 import SellingReport from "../Components/dashboard/analytics/SellingReport";
 import TopProduct from "../Components/dashboard/analytics/TopProducts";
 import InteractionCard from "../Components/dashboard/InteractionCard";
+import { useSelectStoresQuery } from "../Redux/Admin/sellersSlice";
+import { useSelectUsersQuery } from "../Redux/Admin/usersSlice";
+import { useAllOrdersQuery } from "../Redux/OrderSlice";
 
 const Analytics = () => {
+  const { data: sellers = [], refetch: refetchSellers } = useSelectStoresQuery(
+    {}
+  );
+  const approvedSellers = sellers.filter(
+    (seller: any) => seller.status === "approved"
+  );
+
+  const { data: orders = [], refetch: refetchOrders } = useAllOrdersQuery({});
+  const transactions = orders.filter(
+    (order: any) => order.status === "delivered"
+  );
+
+  const { data: users = [], refetch: refetchUsers } = useSelectUsersQuery({});
+
+  useEffect(() => {
+    refetchSellers();
+    refetchUsers();
+    refetchOrders();
+  }, [refetchSellers, refetchUsers, refetchOrders]);
   const cardData = [
     {
-      name: "sellers",
-      numbers: 1500,
+      name: "Vendors",
+      numbers: sellers.length,
       icon: (
         <svg
           width="20"
@@ -63,7 +85,7 @@ const Analytics = () => {
     },
     {
       name: "Users",
-      numbers: 1500,
+      numbers: users.length,
       icon: (
         <svg
           width="20"
@@ -117,7 +139,7 @@ const Analytics = () => {
     },
     {
       name: "Transactions",
-      numbers: 1500,
+      numbers: transactions.length,
       icon: (
         <svg
           width="20"
@@ -163,7 +185,7 @@ const Analytics = () => {
     },
     {
       name: "Orders",
-      numbers: 1500,
+      numbers: orders.length,
       icon: (
         <svg
           width="20"