admin contact up leads

components/admin/ContactUsleads.js

+import { Table } from 'antd';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react'
+
+export const ContactUsleads = () => {
+    const [contactLeads, setContactLeads] = useState([]);
+    useEffect(() => {
+        axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/contact-uses`).then((res) => {
+            let contactLeadsData =
+                res.data &&
+                res.data.data.map((data) => {
+                    return {
+                        key: data.id,
+                        name: data?.attributes?.name,
+                        email: data?.attributes?.email,
+                        number: data?.attributes?.number,
+                        zip: data?.attributes?.zip,
+                        message: data?.attributes?.message,
+                        publishedAt: data?.attributes?.publishedAt,
+                    }
+                })
+            console.log("contactLeadsData :", contactLeadsData);
+            setContactLeads(contactLeadsData)
+        }).catch((err) => {
+            console.log(err)
+        })
+    }, [])
+    const transformDateTime = (rawDate) => {
+        const date = new Date(rawDate);
+    
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
+        const day = String(date.getDate()).padStart(2, "0");
+    
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        const seconds = String(date.getSeconds()).padStart(2, "0");
+    
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    };
+    const columns = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+            width :300,
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Email",
+            dataIndex: "email",
+            key: "email",
+            width:300,
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Zip",
+            dataIndex: "zip",
+            key: "zip",
+            width:  100,
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Message",
+            dataIndex: "message",
+            key: "message",
+            render: text => <a>{text}</a>
+        },
+        {
+            title: "Date & Time",
+            dataIndex: "publishedAt",
+            key: "publishedAt",
+            width : 200,
+            render: text => <a>{transformDateTime(text)}</a>
+        },
+    ]
+    return (
+        <div className="p-5 h-100">
+            <Table columns={columns} dataSource={contactLeads} />
+        </div>
+    )
+}
\ No newline at end of file

components/layout/Generics/GenericSidebar.js

@@ -113,6 +113,16 @@ export const GenericSidebar = ({isRoute}) => {
                         </span>
                     </Link>
                 </li>
+                <li className={router.pathname === "/admin/contact-us-leads" ? "active" : ""}>
+                    <Link href="/admin/contact-us-leads">
+                        <span className="d-flex cursor-pointer">
+                            <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
+                            <div className="mx-2">
+                                Contact Us Leads
+                            </div>
+                        </span>
+                    </Link>
+                </li>
             </ul>
         )
     }

pages/admin/contact-us-leads/index.js

+import { ContactUsleads } from "../../../components/admin/ContactUsleads";
+import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";
+export default function ContactUsLeadsPage() {
+    return (
+        <GenericLayout>
+            <ContactUsleads />
+        </GenericLayout>
+    )
+}
\ No newline at end of file