Pending Clients Screen - Copy this React, Tailwind Component to your project

Import React, { useState } from "react"; import { FaCheck, FaTimes, FaChevronDown, FaChevronUp } from "react icons/fa"; const PendingClientsScreen = () => { const [expandedClient, setExpandedClient] = useState(null); const [clients, setClients] = useState([ { id: 1, name: "John Anderson", email: "john.anderson@example.com", status: "Pending", phone: "+1 (555) 123 4567", company: "Tech Solutions Inc.", address: "123 Business Ave, New York, NY 10001", notes: "Interested in enterprise package" }, { id: 2, name: "Sarah Williams", email: "sarah.w@example.com", status: "Pending", phone: "+1 (555) 987 6543", company: "Digital Innovations Ltd", address: "456 Tech Street, San Francisco, CA 94105", notes: "Requires immediate follow up" }, { id: 3, name: "Michael Chen", email: "m.chen@example.com", status: "Pending", phone: "+1 (555) 246 8135", company: "Global Systems Corp", address: "789 Innovation Blvd, Austin, TX 78701", notes: "Potential high value client" } ]); const handleApprove = (id) => { setClients(clients.map(client => client.id === id ? { ...client, status: "Approved" } : client )); }; const handleReject = (id) => { setClients(clients.map(client => client.id === id ? { ...client, status: "Rejected" } : client )); }; const toggleExpand = (id) => { setExpandedClient(expandedClient === id ? null : id); }; return ( <div className="container mx auto px 4 py 8"> <h1 className="text 3xl font bold text gray 800 mb 6">Pending Clients</h1> <div className="bg white shadow lg rounded lg overflow hidden"> <div className="overflow x auto"> <table className="min w full table auto"> <thead className="bg gray 100"> <tr> <th className="px 6 py 4 text left text sm font semibold text gray 600">Client Name</th> <th className="px 6 py 4 text left text sm font semibold text gray 600">Email</th> <th className="px 6 py 4 text left text sm font semibold text gray 600">Status</th> <th className="px 6 py 4 text left text sm font semibold text gray 600">Actions</th> </tr> </thead> <tbody className="divide y divide gray 200"> {clients.map((client) => ( <React.Fragment key={client.id}> <tr className={`hover:bg gray 50 ${client.status === "Approved" ? "bg green 50" : client.status === "Rejected" ? "bg red 50" : ""}`}> <td className="px 6 py 4"> <button onClick={() => toggleExpand(client.id)} className="flex items center text blue 600 hover:text blue 800" > {client.name} {expandedClient === client.id ? ( <FaChevronUp className="ml 2" /> ) : ( <FaChevronDown className="ml 2" /> )} </button> </td> <td className="px 6 py 4 text gray 700">{client.email}</td> <td className="px 6 py 4"> <span className={`px 3 py 1 rounded full text sm font medium ${client.status === "Pending" ? "bg yellow 100 text yellow 800" : client.status === "Approved" ? "bg green 100 text green 800" : "bg red 100 text red 800"}`} > {client.status} </span> </td> <td className="px 6 py 4"> <div className="flex space x 3"> <button onClick={() => handleApprove(client.id)} disabled={client.status !== "Pending"} className={`flex items center px 3 py 1 rounded md text sm ${client.status === "Pending" ? "bg green 500 text white hover:bg green 600" : "bg gray 300 text gray 500 cursor not allowed"}`} > <FaCheck className="mr 1" /> Approve </button> <button onClick={() => handleReject(client.id)} disabled={client.status !== "Pending"} className={`flex items center px 3 py 1 rounded md text sm ${client.status === "Pending" ? "bg red 500 text white hover:bg red 600" : "bg gray 300 text gray 500 cursor not allowed"}`} > <FaTimes className="mr 1" /> Reject </button> </div> </td> </tr> {expandedClient === client.id && ( <tr> <td colSpan="4" className="px 6 py 4 bg gray 50"> <div className="grid grid cols 2 gap 4"> <div> <p className="text sm font semibold text gray 600">Phone:</p> <p className="text sm text gray 800">{client.phone}</p> </div> <div> <p className="text sm font semibold text gray 600">Company:</p> <p className="text sm text gray 800">{client.company}</p> </div> <div> <p className="text sm font semibold text gray 600">Address:</p> <p className="text sm text gray 800">{client.address}</p> </div> <div> <p className="text sm font semibold text gray 600">Notes:</p> <p className="text sm text gray 800">{client.notes}</p> </div> </div> </td> </tr> )} </React.Fragment> ))} </tbody> </table> </div> </div> </div> ); }; export default PendingClientsScreen; Este codigo transformalo para que en vez de pending diga semana 1, 2 etc