PaymentNavigator Copy this Tailwind ViewAllPaymentsto Your Project

Generate the fully professional ViewAllPayments page to show all these data import React from 'react' function ViewAllPayments() { return ( <> {/* Table Section */} <div className="max w [85rem] px 4 py 10 sm:px 6 lg:px 8 lg:py 14 mx auto"> {/* Card */} <div className="flex flex col"> <div className=" m 1.5 overflow x auto"> <div className="p 1.5 min w full inline block align middle"> <div className="bg white border border gray 200 rounded xl shadow 2xs overflow hidden"> {/* Header and Collapse sections remain unchanged */} {/* Table */} <table className="min w full divide y divide gray 200"> <thead className="bg gray 50"> {/* Table headers remain unchanged */} </thead> <tbody className="divide y divide gray 200"> {/* Existing rows... */} {/* New Payment Row */} <tr className="bg white hover:bg gray 50"> <td className="size px whitespace nowrap"> <button type="button" className="block" aria haspopup="dialog" aria expanded="false" aria controls="hs ai invoice modal" data hs overlay="#hs ai invoice modal"> <span className="block px 6 py 2"> <span className="font mono text sm text blue 600">INV004</span> </span> </button> </td> <td className="size px whitespace nowrap"> <button type="button" className="block" aria haspopup="dialog" data hs overlay="#hs ai invoice modal"> <span className="block px 6 py 2"> <span className="text sm text gray 600">$1,800.00</span> </span> </button> </td> <td className="size px whitespace nowrap"> <button type="button" className="block" data hs overlay="#hs ai invoice modal"> <span className="block px 6 py 2"> <span className="py 1 px 1.5 inline flex items center gap x 1 text xs font medium bg purple 100 text purple 800 rounded full"> <svg className="size 2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1 1 0v 4A.5.5 0 0 1 8 5zm .5 1.5a.5.5 0 0 0 .5.5v2a.5.5 0 0 0 1 0v 2a.5.5 0 0 0 .5 .5z"/> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5A.5.5 0 0 0 4 8v1.5a.5.5 0 0 0 1 0V8a.5.5 0 0 0 .5 .5z"/> </svg> Refunded </span> </span> </button> </td> <td className="size px whitespace nowrap"> <button type="button" className="block" data hs overlay="#hs ai invoice modal"> <span className="block px 6 py 2"> <span className="text sm text gray 600">N/A</span> </span> </button> </td> <td className="size px whitespace nowrap"> <button type="button" className="block" data hs overlay="#hs ai invoice modal"> <span className="block px 6 py 2"> <span className="text sm text gray 600">10 Jul, 11:45</span> </span> </button> </td> <td className="size px whitespace nowrap"> <button type="button" className="block" data hs overlay="#hs ai invoice modal"> <span className="px 6 py 1.5"> <span className="py 1 px 2 inline flex justify center items center gap 2 rounded lg border border gray 200 font medium bg white text gray 700 shadow 2xs align middle hover:bg gray 50 focus:outline hidden focus:ring 2 focus:ring offset 2 focus:ring offset white focus:ring blue 600 transition all text sm"> <svg className="shrink 0 size 4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> {/* View icon */} </svg> View </span> </span> </button> </td> </tr> </tbody> </table> {/* Footer remains unchanged */} </div> </div> </div> </div> {/* End Card */} </div> {/* Updated Modal */} <div id="hs ai invoice modal" className="hs overlay hidden size full fixed top 0 start 0 z 80 overflow x hidden overflow y auto pointer events none"> <div className="hs overlay open:mt 7 hs overlay open:opacity 100 hs overlay open:duration 500 mt 0 opacity 0 ease out transition all sm:max w lg sm:w full m 3 sm:mx auto"> <div className="relative flex flex col bg white shadow lg rounded xl pointer events auto"> {/* Modal header remains unchanged */} <div className="p 4 sm:p 7 overflow y auto"> <div className="text center"> <h3 className="text lg font semibold text gray 800"> Payment Details for Project D </h3> <p className="text sm text gray 500"> Transaction ID: TX123459 </p> </div> <div className="mt 5 grid gap 4"> <div className="space y 1"> <span className="block text xs uppercase text gray 500">Freelancer:</span> <span className="block text sm font medium text gray 800">Emily Davis (emily@example.com)</span> </div> <div className="grid grid cols 2 gap 4"> <div> <span className="block text xs uppercase text gray 500">Payment Date:</span> <span className="block text sm font medium text gray 800">July 10, 2023 11:45 AM</span> </div> <div> <span className="block text xs uppercase text gray 500">Payment Method:</span> <span className="block text sm font medium text gray 800">Credit Card (Stripe)</span> </div> </div> <div className="grid grid cols 2 gap 4"> <div> <span className="block text xs uppercase text gray 500">Payment Type:</span> <span className="block text sm font medium text gray 800">Bonus</span> </div> <div> <span className="block text xs uppercase text gray 500">Invoice Number:</span> <span className="block text sm font medium text gray 800">INV004</span> </div> </div> <div className="space y 1"> <span className="block text xs uppercase text gray 500">Description:</span> <span className="block text sm font medium text gray 800">Payment for Project D</span> </div> <div className="space y 1"> <span className="block text xs uppercase text gray 500">Notes:</span> <span className="block text sm font medium text gray 800">No notes</span> </div> </div> <div className="mt 6 flex justify end gap x 2"> <button className="py 2 px 3 inline flex items center gap x 2 text sm font medium rounded lg border border gray 200 bg white text gray 800 shadow 2xs hover:bg gray 50"> <svg className="shrink 0 size 4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m 6 4h6m2 5H7a2 2 0 01 2 2V5a2 2 0 012 2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01 2 2z" /> </svg> Download Receipt </button> </div> </div> </div> </div> </div> </> ) } export default ViewAllPayments