{
    "id": "bhaskar/customers-revenue-table",
    "kind": "component",
    "title": "Customers Revenue Table",
    "summary": "A customers table with avatars, plan, last active time and monthly revenue plus a total header.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/customers-revenue-table/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "A card table with title, account count and total MRR in the header. Rows show avatar, name, company, plan, recency and revenue.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Cards",
        "html": "<div class='tb'><div class='th'><div><h4>Customers</h4><p>4 accounts</p></div><div class='tm'><small>MRR</small><b>$87/mo</b></div></div><table><thead><tr><th>Customer</th><th>Plan</th><th>Last active</th><th class='r'>MRR</th></tr></thead><tbody><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fda4af,#fb7185)'>AK</i><div><b>Arun Kapoor</b><small>Studio Dev</small></div></div></td><td>Team</td><td>2h ago</td><td class='r'>$49</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#a5b4fc,#6366f1)'>RS</i><div><b>Rupam Sen</b><small>Design Lab</small></div></div></td><td>Pro</td><td>1d ago</td><td class='r'>$19</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#86efac,#22c55e)'>AC</i><div><b>Ava Chen</b><small>Northwind</small></div></div></td><td>Pro</td><td>3d ago</td><td class='r'>$19</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fcd34d,#f59e0b)'>SO</i><div><b>Sofia Ortiz</b><small>Harbor Labs</small></div></div></td><td>Free</td><td>1w ago</td><td class='r'>—</td></tr></tbody></table></div>",
        "css": ".tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-bottom:1px solid #f0f0f0}.tb td{padding:12px 18px;font-size:14px;border-top:1px solid #f4f4f4}.tb tbody tr:first-child td{border-top:0}.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-right:12px;vertical-align:middle;color:#fff;font:600 11px Inter,Arial,sans-serif;font-style:normal}.who{display:flex;align-items:center}.who b{display:block;font-weight:500}.who small{display:block;font-size:12.5px;color:#737373}.r{text-align:right!important}.th{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tm{text-align:right}.tm small{display:block;font-size:12px;color:#8a8a8a}.tm b{font-size:16px}.tb td:first-child{padding-right:6px}@media(max-width:480px){.tb th:nth-child(3),.tb td:nth-child(3){display:none}}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}