Analytics dashboard

import { useMemo, useState } from "react";

type Row = { id: number; customer: string; plan: "Free" | "Pro" | "Team"; mrr: number; status: "active" | "trialing" | "churned" };

const rows: Row[] = [
  { id: 1, customer: "Aarav Studio", plan: "Pro", mrr: 1499, status: "active" },
  { id: 2, customer: "Nimbus Labs", plan: "Team", mrr: 3999, status: "active" },
  { id: 3, customer: "Priya Designs", plan: "Free", mrr: 0, status: "trialing" },
  { id: 4, customer: "Orbit Retail", plan: "Pro", mrr: 1499, status: "churned" },
  { id: 5, customer: "Kavya Tech", plan: "Team", mrr: 3999, status: "active" },
];

export default function App() {
  const [query, setQuery] = useState("");
  const filtered = useMemo(() => rows.filter((r) => r.customer.toLowerCase().includes(query.toLowerCase())), [query]);
  const mrr = rows.filter((r) => r.status === "active").reduce((s, r) => s + r.mrr, 0);
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 md:grid md:grid-cols-[220px_1fr]">
      <aside className="border-b border-slate-200 bg-white p-4 md:border-b-0 md:border-r">
        <div className="text-sm font-semibold tracking-wide">ACME ANALYTICS</div>
        <nav className="mt-6 space-y-1 text-sm">
          {["Overview", "Customers", "Revenue", "Settings"].map((item, i) => (
            <a key={item} href="#" className={"block rounded-md px-3 py-2 " + (i === 0 ? "bg-slate-100 font-medium" : "text-slate-600 hover:bg-slate-50")}>
              {item}
            </a>
          ))}
        </nav>
      </aside>
      <main className="p-6">
        <h1 className="text-xl font-semibold">Overview</h1>
        <div className="mt-4 grid gap-4 sm:grid-cols-3">
          {[
            ["Active customers", String(rows.filter((r) => r.status === "active").length)],
            ["Monthly revenue", "₹" + mrr.toLocaleString("en-IN")],
            ["Trials", String(rows.filter((r) => r.status === "trialing").length)],
          ].map(([label, value]) => (
            <div key={label} className="rounded-xl border border-slate-200 bg-white p-4">
              <div className="text-xs uppercase tracking-wide text-slate-500">{label}</div>
              <div className="mt-1 text-2xl font-semibold">{value}</div>
            </div>
          ))}
        </div>
        <div className="mt-6 rounded-xl border border-slate-200 bg-white">
          <div className="flex items-center justify-between border-b border-slate-200 p-4">
            <h2 className="font-medium">Customers</h2>
            <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search" className="rounded-md border border-slate-300 px-3 py-1.5 text-sm" aria-label="Search customers" />
          </div>
          <table className="w-full text-sm">
            <thead className="text-left text-slate-500">
              <tr><th className="p-3">Customer</th><th className="p-3">Plan</th><th className="p-3">MRR</th><th className="p-3">Status</th></tr>
            </thead>
            <tbody>
              {filtered.map((r) => (
                <tr key={r.id} className="border-t border-slate-100">
                  <td className="p-3 font-medium">{r.customer}</td>
                  <td className="p-3">{r.plan}</td>
                  <td className="p-3">₹{r.mrr.toLocaleString("en-IN")}</td>
                  <td className="p-3 capitalize">{r.status}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </main>
    </div>
  );
}