Business Context - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from "react"; import { FiEdit, FiTrash2, FiPlus, FiSearch } from "react icons/fi"; const BusinessManagementApp = () => { const [activeTab, setActiveTab] = useState("dashboard"); const [products, setProducts] = useState([ { id: 1, name: "Product A", price: 299.99, quantity: 50 }, { id: 2, name: "Product B", price: 199.99, quantity: 30 }, { id: 3, name: "Product C", price: 399.99, quantity: 20 } ]); const [clients, setClients] = useState([ { id: 1, name: "John Doe", email: "john@example.com", phone: "+1234567890" }, { id: 2, name: "Jane Smith", email: "jane@example.com", phone: "+9876543210" } ]); const [invoices, setInvoices] = useState([ { id: 1, clientId: 1, date: "2024 01 15", total: 599.98 }, { id: 2, clientId: 2, date: "2024 01 16", total: 799.97 } ]); const [orders, setOrders] = useState([ { id: 1, clientId: 1, products: [{ productId: 1, quantity: 2 }], total: 599.98 }, { id: 2, clientId: 2, products: [{ productId: 2, quantity: 4 }], total: 799.96 } ]); const [productForm, setProductForm] = useState({ name: "", price: "", quantity: "" }); const [clientForm, setClientForm] = useState({ name: "", email: "", phone: "" }); const [searchTerm, setSearchTerm] = useState(""); const handleProductSubmit = (e) => { e.preventDefault(); if (!productForm.name || !productForm.price || !productForm.quantity) return; const newProduct = { id: products.length + 1, ...productForm }; setProducts([...products, newProduct]); setProductForm({ name: "", price: "", quantity: "" }); }; const handleClientSubmit = (e) => { e.preventDefault(); if (!clientForm.name || !clientForm.email || !clientForm.phone) return; const newClient = { id: clients.length + 1, ...clientForm }; setClients([...clients, newClient]); setClientForm({ name: "", email: "", phone: "" }); }; const DashboardView = () => ( <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 4 gap 4"> <div className="bg card p 6 rounded lg shadow sm"> <h3 className="text heading font heading mb 2">Products</h3> <p className="text accent">{products.length} total products</p> </div> <div className="bg card p 6 rounded lg shadow sm"> <h3 className="text heading font heading mb 2">Clients</h3> <p className="text accent">{clients.length} total clients</p> </div> <div className="bg card p 6 rounded lg shadow sm"> <h3 className="text heading font heading mb 2">Invoices</h3> <p className="text accent">{invoices.length} total invoices</p> </div> <div className="bg card p 6 rounded lg shadow sm"> <h3 className="text heading font heading mb 2">Orders</h3> <p className="text accent">{orders.length} total orders</p> </div> </div> ); const ProductsView = () => ( <div className="space y 6"> <form onSubmit={handleProductSubmit} className="bg card p 6 rounded lg shadow sm"> <div className="grid grid cols 1 md:grid cols 3 gap 4"> <input type="text" placeholder="Product Name" value={productForm.name} onChange={(e) => setProductForm({ ...productForm, name: e.target.value })} className="border border input rounded sm p 2" /> <input type="number" placeholder="Price" value={productForm.price} onChange={(e) => setProductForm({ ...productForm, price: e.target.value })} className="border border input rounded sm p 2" /> <input type="number" placeholder="Quantity" value={productForm.quantity} onChange={(e) => setProductForm({ ...productForm, quantity: e.target.value })} className="border border input rounded sm p 2" /> </div> <button type="submit" className="mt 4 bg primary text primary foreground px 4 py 2 rounded sm hover:opacity 90"> Add Product </button> </form> <div className="bg card p 6 rounded lg shadow sm overflow x auto"> <table className="w full"> <thead> <tr className="border b border border"> <th className="text left p 2">Name</th> <th className="text left p 2">Price</th> <th className="text left p 2">Quantity</th> <th className="text left p 2">Actions</th> </tr> </thead> <tbody> {products.map((product) => ( <tr key={product.id} className="border b border border"> <td className="p 2">{product.name}</td> <td className="p 2">${product.price}</td> <td className="p 2">{product.quantity}</td> <td className="p 2"> <button className="text accent hover:text primary mr 2"> <FiEdit size={18} /> </button> <button className="text destructive hover:opacity 80"> <FiTrash2 size={18} /> </button> </td> </tr> ))} </tbody> </table> </div> </div> ); const ClientsView = () => ( <div className="space y 6"> <form onSubmit={handleClientSubmit} className="bg card p 6 rounded lg shadow sm"> <div className="grid grid cols 1 md:grid cols 3 gap 4"> <input type="text" placeholder="Client Name" value={clientForm.name} onChange={(e) => setClientForm({ ...clientForm, name: e.target.value })} className="border border input rounded sm p 2" /> <input type="email" placeholder="Email" value={clientForm.email} onChange={(e) => setClientForm({ ...clientForm, email: e.target.value })} className="border border input rounded sm p 2" /> <input type="tel" placeholder="Phone" value={clientForm.phone} onChange={(e) => setClientForm({ ...clientForm, phone: e.target.value })} className="border border input rounded sm p 2" /> </div> <button type="submit" className="mt 4 bg primary text primary foreground px 4 py 2 rounded sm hover:opacity 90"> Add Client </button> </form> <div className="bg card p 6 rounded lg shadow sm overflow x auto"> <table className="w full"> <thead> <tr className="border b border border"> <th className="text left p 2">Name</th> <th className="text left p 2">Email</th> <th className="text left p 2">Phone</th> <th className="text left p 2">Actions</th> </tr> </thead> <tbody> {clients.map((client) => ( <tr key={client.id} className="border b border border"> <td className="p 2">{client.name}</td> <td className="p 2">{client.email}</td> <td className="p 2">{client.phone}</td> <td className="p 2"> <button className="text accent hover:text primary mr 2"> <FiEdit size={18} /> </button> <button className="text destructive hover:opacity 80"> <FiTrash2 size={18} /> </button> </td> </tr> ))} </tbody> </table> </div> </div> ); const InvoicesView = () => ( <div className="bg card p 6 rounded lg shadow sm"> <div className="flex items center mb 4"> <input type="text" placeholder="Search invoices..." className="border border input rounded sm p 2 w full max w md" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> </div> <div className="overflow x auto"> <table className="w full"> <thead> <tr className="border b border border"> <th className="text left p 2">Invoice ID</th> <th className="text left p 2">Client</th> <th className="text left p 2">Date</th> <th className="text left p 2">Total</th> <th className="text left p 2">Actions</th> </tr> </thead> <tbody> {invoices.map((invoice) => ( <tr key={invoice.id} className="border b border border"> <td className="p 2">#{invoice.id}</td> <td className="p 2"> {clients.find((c) => c.id === invoice.clientId)?.name} </td> <td className="p 2">{invoice.date}</td> <td className="p 2">${invoice.total}</td> <td className="p 2"> <button className="text accent hover:text primary"> <FiEdit size={18} /> </button> </td> </tr> ))} </tbody> </table> </div> </div> ); const OrdersView = () => ( <div className="bg card p 6 rounded lg shadow sm"> <div className="flex items center mb 4"> <input type="text" placeholder="Search orders..." className="border border input rounded sm p 2 w full max w md" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> </div> <div className="overflow x auto"> <table className="w full"> <thead> <tr className="border b border border"> <th className="text left p 2">Order ID</th> <th className="text left p 2">Client</th> <th className="text left p 2">Products</th> <th className="text left p 2">Total</th> <th className="text left p 2">Actions</th> </tr> </thead> <tbody> {orders.map((order) => ( <tr key={order.id} className="border b border border"> <td className="p 2">#{order.id}</td> <td className="p 2"> {clients.find((c) => c.id === order.clientId)?.name} </td> <td className="p 2">{order.products.length} items</td> <td className="p 2">${order.total}</td> <td className="p 2"> <button className="text accent hover:text primary"> <FiEdit size={18} /> </button> </td> </tr> ))} </tbody> </table> </div> </div> ); return ( <div className="min h screen bg background"> <div className="max w 7xl mx auto px 4 py 8"> <div className="flex items center justify between mb 8"> <h1 className="text 2xl font heading">Business Management</h1> <div className="flex items center space x 2"> <button onClick={() => setActiveTab("dashboard")} className={`px 4 py 2 rounded sm ${activeTab === "dashboard" ? "bg primary text primary foreground" : "bg secondary text secondary foreground"}`} > Dashboard </button> <button onClick={() => setActiveTab("products")} className={`px 4 py 2 rounded sm ${activeTab === "products" ? "bg primary text primary foreground" : "bg secondary text secondary foreground"}`} > Products </button> <button onClick={() => setActiveTab("clients")} className={`px 4 py 2 rounded sm ${activeTab === "clients" ? "bg primary text primary foreground" : "bg secondary text secondary foreground"}`} > Clients </button> <button onClick={() => setActiveTab("invoices")} className={`px 4 py 2 rounded sm ${activeTab === "invoices" ? "bg primary text primary foreground" : "bg secondary text secondary foreground"}`} > Invoices </button> <button onClick={() => setActiveTab("orders")} className={`px 4 py 2 rounded sm ${activeTab === "orders" ? "bg primary text primary foreground" : "bg secondary text secondary foreground"}`} > Orders </button> </div> </div> {activeTab === "dashboard" && <DashboardView />} {activeTab === "products" && <ProductsView />} {activeTab === "clients" && <ClientsView />} {activeTab === "invoices" && <InvoicesView />} {activeTab === "orders" && <OrdersView />} </div> </div> ); }; export default BusinessManagementApp;