Order Confirmation - Copy this React, Tailwind Component to your project

import { useEffect, useState } from "react"; import { useRouter } from 'next/router'; import Table from "../../Components/admin/comp/Table/Table"; import AdminresNew from "../../layouts/newretab"; import { MdEdit, MdVisibility } from "react-icons/md"; import FetchApiMethod from "../../Components/Helpers/FetchApiMethod"; import styles from './Form.module.css'; import Swal from 'sweetalert2'; import { useSession } from 'next-auth/react'; import Form from 'react-bootstrap/Form'; export default function SaleInvoices() { const { data: sessionData } = useSession(); const [data, setData] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [filteredData, setFilteredData] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [lastPage, setLastPage] = useState(1); const [editOrgModal, setEditOrgModal] = useState(false); const [pageData, setPageData] = useState(10); const router = useRouter(); const [selectedOrg, setSelectedOrg] = useState({ orgName: '', email: '', phoneNo: '', panNumber: '', gstNumber: '', headOfficeAdd: '' }); const handleClick = () => { router.push('/admin/CreateNewSaleInvoices'); }; const handleView = (orgData) => { router.push({ pathname: '/admin/ViewOrg', query: orgData, }); }; // Fetch data using FetchApiMethod useEffect(() => { const fetchData = async () => { try { const GetOrgDetailsReqData = { pagination: { page: currentPage, perPage: pageData }, }; const response = await FetchApiMethod("GetOrgDetails", GetOrgDetailsReqData); if (response?.status) { setLastPage(response.data.last_page); const adaptedData = response.data.data.map((GetOrgData) => ({ orgName: GetOrgData.org_name ?? 'NA', email: GetOrgData.send_email ?? 'NA', phoneNo: GetOrgData.contact_no1 ?? 'NA', panNumber: GetOrgData.pan ?? 'NA', gstNumber: GetOrgData.vatno ?? 'NA', headOfficeAdd: GetOrgData.headoffice_add ?? 'NA', createdAt: new Date(GetOrgData.created_at).toLocaleString('en-GB', { timeZone: 'UTC', hour12: false }).replace(',', '').replace(/\//g, '-'), updatedBy: GetOrgData.updated_by ?? 'NA', updatedAt: new Date(GetOrgData.updated_at).toLocaleString('en-GB', { timeZone: 'UTC', hour12: false }).replace(',', '').replace(/\//g, '-'), action: ( <div> <MdEdit title="Edit Details" size={24} onClick={() => { setSelectedOrg({ id: GetOrgData.id, orgName: GetOrgData.org_name, email: GetOrgData.send_email, phoneNo: GetOrgData.contact_no1, panNumber: GetOrgData.pan, gstNumber: GetOrgData.vatno, headOfficeAdd: GetOrgData.headoffice_add, }); setEditOrgModal(true); }} style={{ cursor: "pointer", marginRight: "10px" }} /> <MdVisibility title="View Info" size={24} onClick={() => handleView({ orgName: GetOrgData.org_name, panNumber: GetOrgData.pan, gstNumber: GetOrgData.vatno, pinCode: GetOrgData.pin_code, email: GetOrgData.send_email, phoneNo: GetOrgData.contact_no1, headOfficeAdd: GetOrgData.headoffice_add, stateCode: GetOrgData.state_code })} style={{ cursor: "pointer", marginRight: "10px" }} /> </div> ), })); setData(adaptedData); setFilteredData(adaptedData); } } catch (error) { console.error("Error fetching data:", error); Swal.fire({ icon: 'error', title: 'Error', text: 'Failed to fetch data. Please try again later.', }); } }; fetchData(); }, [currentPage, pageData]); // Filter data when searchTerm changes useEffect(() => { const filtered = data.filter((org) => ["orgName", "phoneNo", "email"].some((key) => org[key].toLowerCase().includes(searchTerm.toLowerCase()) ) ); setFilteredData(filtered); }, [searchTerm, data]); const columns = [ { header: "Action", accessor: "action", headerStyle: { textAlign: "center" }, cellStyle: { textAlign: "center" } }, { header: "SaleInvoices Name", accessor: "orgName" }, { header: "E-mail", accessor: "email" }, { header: "Contact Number", accessor: "phoneNo" }, { header: "Headoffice Address", accessor: "headOfficeAdd" }, { header: "Created By", accessor: "createdBy" }, { header: "Created At", accessor: "createdAt" }, { header: "Updated By", accessor: "updatedBy"}, { header: "Updated At", accessor: "updatedAt" }, ]; return ( <AdminresNew> <div className="content-container"> <div className="card mt-5"> <div className="heading-container card-header"> <span className="headingTitle d-flex align-items-center justify-content-between flex-wrap"> SaleInvoices </span> <Form.Select id="pagedata" className="border-0 ms-2 page-select" value={pageData} onChange={(e) => setPageData(e.target.value)} > <option value={10}>10</option> <option value={25}>25</option> <option value={50}>50</option> <option value={100}>100</option> </Form.Select> <div className="search-container mt-2 mt-md-0" style={{ display: "flex", alignItems: "center", flex: 1 }} > <input type="text" placeholder="Search..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="searchInputStyle" /> </div> </div> {/* <div className="table-responsive"> <Table setLastPage={setLastPage} lastPage={lastPage} currentPage={currentPage} setCurrentPage={setCurrentPage} responsive columns={columns} data={filteredData} itemsPerPage={pageData} /> </div> */} <div class="overflow-x-auto"> <table class="min-w-full border-collapse border border-gray-200"> <thead class="bg-gray-100"> <tr> <th class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"> Invoice # </th> <th class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"> Customer Name </th> <th class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"> Amount </th> <th class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"> Status </th> <th class="border border-gray-300 px-4 py-2 text-left text-sm font-medium text-gray-700"> Date </th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 px-4 py-2 text-sm text-gray-700">#1001</td> <td class="border border-gray-300 px-4 py-2 text-sm text-gray-700">John Doe</td> <td class="border border-gray-300 px-4 py-2 text-sm text-gray-700">$150.00</td> <td class="border border-gray-300 px-4 py-2 text-sm text-gray-700"> <span class="inline-block rounded bg-green-100 px-2 py-1 text-xs font-semibold text-green-600"> Paid </span> </td> <td class="border border-gray-300 px-4 py-2 text-sm text-gray-700">2024-11-07</td> </tr> </tbody> </table> </div> </div> </div> </AdminresNew> ); }