added export to excel

src/index.js

@@ -14,8 +14,8 @@ import { cibGmail } from "@coreui/icons";
 import { createRoot } from "react-dom/client";
 
 const setupAxios = () => {
-  axios.defaults.baseURL = "http://localhost:5000";
-  // axios.defaults.baseURL = "https://api.smellika.com";
+  // axios.defaults.baseURL = "http://localhost:5000";
+  axios.defaults.baseURL = "https://api.smellika.com";
 
   axios.defaults.headers = {
     "Cache-Control": "no-cache,no-store",

src/views/orders/NewOrders.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
 
 import { isAutheticated } from "src/auth";
 import Button from "@material-ui/core/Button";
@@ -53,6 +55,64 @@ function NewOrders() {
     getNewOrder();
   }, [token]);
 
+  // Export to excel
+  const exportToExcel = () => {
+    const flattenedData = newOrdersData.map((order) => ({
+      "Order ID": order?.orderID,
+      Customer: order?.user?.name,
+      "Order value": `₹${order?.total_amount}`,
+      "Order At": new Date(order?.paidAt).toLocaleString("en-IN", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "numeric",
+        hour12: true,
+      }),
+      Status: order?.orderStatus,
+    }));
+
+    const worksheet = XLSX.utils.json_to_sheet(flattenedData);
+
+    // Apply styles to header row
+    const headerStyle = {
+      font: { bold: true },
+      fill: { fgColor: { rgb: "CCCCFF" } }, // Light blue background
+      alignment: { horizontal: "center" },
+      border: { top: { style: "thin" }, bottom: { style: "thin" } },
+    };
+    Object.keys(worksheet).forEach((cell) => {
+      const cellRef = worksheet[cell];
+      if (cellRef.t === "s" && cellRef.s) {
+        cellRef.s = headerStyle;
+      }
+    });
+
+    // Apply styles to data rows
+    const dataStyle = {
+      border: { bottom: { style: "thin" } },
+    };
+    Object.keys(worksheet).forEach((cell) => {
+      const cellRef = worksheet[cell];
+      if (cellRef.t !== "s" && cellRef.s) {
+        cellRef.s = dataStyle;
+      }
+    });
+
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: "xlsx",
+      type: "array",
+    });
+    const blob = new Blob([excelBuffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+    });
+
+    saveAs(blob, "exportedData.xlsx");
+  };
+
   const handleDelete = (id) => {
     console.log(id);
     swal({
@@ -242,7 +302,10 @@ function NewOrders() {
                         </div>
                       </div>
                     </div>
-                    <div className="ml-5 mt-2" style={{ display: "flex" }}>
+                    <div
+                      className="ml-5 mt-2"
+                      style={{ display: "flex", flex: 1 }}
+                    >
                       <div
                         style={{
                           display: "flex",
@@ -318,6 +381,7 @@ function NewOrders() {
                           </Select>
                         </FormControl>
                       </div>
+
                       {/* <div>
                         {searchValue === "OrderDate" && (
                           <DatePicker
@@ -347,6 +411,14 @@ function NewOrders() {
                         <CIcon icon={cilSearch} size="xl" />
                       </div>
                     </div>
+                    <Button
+                      // color="primary"
+                      variant="contained"
+                      style={{ background: "green", color: "white" }}
+                      onClick={exportToExcel}
+                    >
+                      Export as excel
+                    </Button>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">