fix: lint errors

Author: sonylomo

src/components/admin/shop/orders/Columns.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable linebreak-style */
 /* eslint-disable no-nested-ternary */
 const Columns = (handleViewClick) => [
   {

src/components/admin/shop/orders/OrdersInvoiceModal.jsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from "react";
 import axios from "axios";
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
 import { IoCloseOutline } from "react-icons/io5";
 // import html2canvas from "html2canvas";
 // import jsPDF from "jspdf";
@@ -14,6 +15,7 @@ export default function OrdersInvoiceModal({ orderId, onClose }) {
         setOrderDetails(response.data);
       })
       .catch((error) => {
+        // eslint-disable-next-line no-console
         console.error("Error fetching order details", error);
       });
   }, [orderId]);
@@ -39,7 +41,12 @@ export default function OrdersInvoiceModal({ orderId, onClose }) {
         <div id="invoice">
           <div className="mt-6 flex justify-between">
             <p>{orderDetails.status}</p>
-            <button onClick={onClose} className="text-5xl">
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-5xl"
+              aria-label="Close"
+            >
               <IoCloseOutline />
             </button>
           </div>
@@ -107,6 +114,7 @@ export default function OrdersInvoiceModal({ orderId, onClose }) {
           <p>Order Date: {new Date(orderDetails.created_at).toLocaleDateString()}</p> */}
         <div className=" bottom-0 right-0 flex flex-col justify-end items-end py-6">
           <button
+            type="button"
             // onClick={downloadInvoice}
             className="w-fit border-2 border-primary text-primary text-xs font-semibold rounded-lg px-8 py-3"
           >
@@ -117,3 +125,8 @@ export default function OrdersInvoiceModal({ orderId, onClose }) {
     </div>
   );
 }
+
+OrdersInvoiceModal.propTypes = {
+  orderId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

src/components/admin/shop/orders/OrdersTrends.jsx

@@ -1,8 +1,7 @@
-import React from "react";
-import { AreaChart, Area, CartesianGrid, Tooltip } from "recharts";
 import { FaArrowUp } from "react-icons/fa";
+import { Area, AreaChart, CartesianGrid, Tooltip } from "recharts";
 
-const OrdersTrends = () => {
+function OrdersTrends() {
   const trends = [
     {
       metric: "All Orders",
@@ -46,11 +45,12 @@ const OrdersTrends = () => {
       <div className="flex flex-col sm:flex-row items-center gap-2 p-4">
         {trends.map((trend, index) => (
           <div
+            key={crypto.randomUUID()}
             className={`flex flex-row items-center gap-2 ${
               index !== trends.length - 1 && "border-b sm:border-r"
             } py-10 sm:px-5`}
           >
-            <div key={index} className="flex flex-col justify-center my-4 px-2">
+            <div className="flex flex-col justify-center my-4 px-2">
               <p className="text-base font-medium">{trend.metric}</p>
               <p className="text-4xl font-bold">{trend.value}</p>
               <div className="flex flex-row items-center gap-1 mt-6 -mb-4 text-sm">
@@ -77,6 +77,6 @@ const OrdersTrends = () => {
       </div>
     </div>
   );
-};
+}
 
 export default OrdersTrends;

src/pages/admin/shop/OrdersPage.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable linebreak-style */
-import React from "react";
 import { IoFilter } from "react-icons/io5";
 import columns from "../../../components/admin/shop/orders/Columns";
 import Orders from "../../../components/admin/shop/orders/Orders";