gift card

components/admin/GiftcardListing.js

-import { Fragment, useState } from "react";
-import { Button, Image, Table } from "react-bootstrap";
+import { Fragment, useEffect, useState } from "react";
+import { Button, Image } from "react-bootstrap";
+import { getGiftCard } from "../../redux/actions/giftCardAction";
+import { useDispatch, useSelector } from "react-redux";
+import { Empty, Table } from "antd";
+import axios from "axios";
 
 const GiftcardListing = () => {
-    const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-    const [showMenuIndex, setShowMenuIndex] = useState(null);
-
-    const toggleMenu = (index) => {
-        setShowMenuIndex(index === showMenuIndex ? null : index);
-    };
-
+    const [giftData, setGiftData] = useState([]);
+    useEffect(() => {
+        axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/gift-cards`).then((res) => {
+            let giftDatas =
+                res.data &&
+                res.data.data.map((data) => {
+                    return {
+                        key: data.id,
+                        amount: data?.attributes?.amount,
+                        senderEmail: data?.attributes?.senderEmail,
+                        receiverEmail: data?.attributes?.receiverEmail,
+                        status: data?.attributes?.status,
+                    }
+                })
+            setGiftData(giftDatas)
+        }).catch((err) => {
+            console.log(err)
+        })
+    }, [])
+    const columns = [
+        {
+            title: "Sender Email Address",
+            dataIndex: "senderEmail",
+            key: "senderEmail",
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Receiver Email Address",
+            dataIndex: "receiverEmail",
+            key: "receiverEmail",
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Amount",
+            dataIndex: "amount",
+            key: "amount",
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Status",
+            dataIndex: "status",
+            key: "status",
+            render: text => <a>{text}</a>
+        },
+    ]
     return (
         <Fragment>
-            <div className="p-5">
+            <div className="p-5 h-100">
                 <div className="d-flex align-items-center justify-content-between px-2 mb-2">
                     <div>
                         <h2 style={{ fontSize: 28 }}>Gift Card Requests</h2>
@@ -23,66 +65,7 @@ const GiftcardListing = () => {
                         </Button>
                     </div>
                 </div>
-                <Table responsive className="listingTable">
-                    <thead>
-                        <tr>
-                            <th>
-                                <label className="check-container mb-0 ps-2" htmlFor="checkh">
-                                    <input
-                                        type="checkbox"
-                                        id="checkh"
-                                        className="check-box"
-                                    />
-                                    <span className="checkmark"></span>
-                                </label>
-                            </th>
-                            <th>Name</th>
-                            <th>Amount</th>
-                            <th>Phone Number</th>
-                            <th>Sender Email Address</th>
-                            <th>Receiver Email Address</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {array.map((data, index) => (
-                            <tr key={index}>
-                                <td>
-                                    <label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
-                                        <input
-                                            type="checkbox"
-                                            id={`check${index}`}
-                                            className="check-box"
-                                        />
-                                        <span className="checkmark"></span>
-                                    </label>
-                                </td>
-                                <td>Michael Anderson</td>
-                                <td>$ 499</td>
-                                <td>+91 9865 43210</td>
-                                <td>adventuretrails@example.com</td>
-                                <td>john@example.com</td>
-                                <td>
-                                    <div className="actions">
-                                        <div className="ellipse" onClick={() => toggleMenu(index)}>
-                                            <Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
-                                        </div>
-                                        {showMenuIndex === index && (
-                                            <div className="menu">
-                                                <ul>
-                                                    <li>Delete</li>
-                                                </ul>
-                                            </div>
-                                        )}
-                                    </div>
-                                </td>
-                            </tr>
-                        ))}
-                        <tr>
-                            <td colSpan={7}>Showing Results 10 of 1567</td>
-                        </tr>
-                    </tbody>
-                </Table>
+                <Table columns={columns} dataSource={giftData} />
             </div>
         </Fragment>
     );