Merge pull request #77 from atlp-rwanda/ft-seller-export-stats

Ft seller export stats

Author: ProgrammerDATCH

Diff for: package-lock.json

@@ -27,6 +27,7 @@
     "html-webpack-plugin": "^5.6.0",
     "jwt-decode": "^4.0.0",
     "mini-css-extract-plugin": "^2.9.0",
+    "papaparse": "^5.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
@@ -40,6 +41,7 @@
     "recharts": "^2.12.7",
     "save-dev": "0.0.1-security",
     "socket.io-client": "^4.7.5",
+    "xlsx": "^0.18.5",
     "yup": "^1.4.0"
   },
   "devDependencies": {
@@ -67,6 +69,7 @@
     "@types/jest": "^29.5.12",
     "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/node": "^20.14.9",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",

Diff for: package.json

@@ -341,21 +341,37 @@
           }
         }
 
-        .monthDropDown {
-          .dropdown-button {
-            background-color: #ff7300;
-            color: #fff;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-
-            .arrow-down {
-              margin-left: 5px;
+        .export-section{
+          display: flex;
+          gap: 10px;
+          .monthDropDown {
+            .dropdown-button {
+              background-color: #ff7300;
+              color: #fff;
+              border: none;
+              padding: 5px 10px;
+              border-radius: 5px;
+              cursor: pointer;
+              font-size: 14px;
+  
+              .arrow-down {
+                margin-left: 5px;
+              }
             }
           }
+          .export-btn{
+            background-color: #0f8615;
+              color: #fff;
+              border: none;
+              padding: 5px 10px;
+              border-radius: 5px;
+              cursor: pointer;
+              font-size: 14px;
+              display: flex;
+              gap: 4px;
+          }
         }
+
       }
     }
 }

Diff for: src/assets/styles/SellerLayout.scss

@@ -18,6 +18,9 @@ import {
 } from "../../store/features/product/sellerCollectionProductsSlice";
 import { useNavigate } from "react-router-dom";
 import productSlice from "../../store/features/product/productSlice";
+import { FaFileExcel } from "react-icons/fa";
+import exportToCSV from "../../utils/excel/exportToCSV";
+import exportToExcel from "../../utils/excel/exportToExcel";
 
 const SellerDashboard = () => {
   const { OrderHistory, message, data, isError } = useAppSelector(
@@ -52,7 +55,7 @@ const SellerDashboard = () => {
   const [revenue, setRevenue] = useState(0);
   const [percentage, setPercentage] = useState(0);
   const [orderPercentage, setOrderPercentage] = useState(0);
-  const [productPercentage,SetProductPercentage] = useState(0);
+  const [productPercentage, SetProductPercentage] = useState(0);
 
   useEffect(() => {
     dispatch(sellerGetOrderHistory());
@@ -88,7 +91,7 @@ const SellerDashboard = () => {
           setOrderPercentage(80)
           SetProductPercentage(76)
         }
-        if ( isError && OrderHistory == null && message === "No shop found"){
+        if (isError && OrderHistory == null && message === "No shop found") {
           setNumberOfOrders(0);
           setNumberOfProducts(0);
           setOrderStats(predefinedMonths);
@@ -103,7 +106,7 @@ const SellerDashboard = () => {
     } catch (error) {
       console.error("Failed to fetch data:", error);
     }
-  }, [OrderHistory,isError,message]);
+  }, [OrderHistory, isError, message]);
 
   const MonthDropDown = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -158,8 +161,12 @@ const SellerDashboard = () => {
     selectedMonth === "All"
       ? orderStats
       : orderStats.filter(
-          (stat) => stat.name === selectedMonth.substring(0, 3)
-        );
+        (stat) => stat.name === selectedMonth.substring(0, 3)
+      );
+
+  const exportStats = () => {
+    exportToExcel(OrderHistory)
+  }
 
   return (
     <>
@@ -174,7 +181,7 @@ const SellerDashboard = () => {
           <Card
             title="Total Revenue"
             value={`${revenue} RWF`}
-            percentage= {`${percentage}`}
+            percentage={`${percentage}`}
             isPositive={false}
           />
           <Card
@@ -194,7 +201,10 @@ const SellerDashboard = () => {
                 <span className="dot cancelled"></span> Cancelled
               </div>
             </div>
-            <MonthDropDown />
+            <div className="export-section">
+              <MonthDropDown />
+              <button type="button" className="export-btn" onClick={exportStats}><FaFileExcel /> EXPORT</button>
+            </div>
           </div>
           <ResponsiveContainer width="99%" height={250}>
             <BarChart