AI Creator Studio Telegram

const metrics = [
  { label: "Available Credits", value: "1,250" },
  { label: "Available Tokens", value: "82,000" },
  { label: "Usage Today", value: "14 jobs" },
  { label: "Active Jobs", value: "0" },
  { label: "Queue Status", value: "Normal" },
  { label: "Storage Usage", value: "0.0 GB" },
];

const providerRows = [
  { name: "Mock Provider", status: "Healthy", quota: "Unlimited", rateLimit: "Local" },
  { name: "Runway", status: "Not configured", quota: "-", rateLimit: "-" },
  { name: "Kling", status: "Not configured", quota: "-", rateLimit: "-" },
  { name: "Pika", status: "Not configured", quota: "-", rateLimit: "-" },
];

export default function DashboardPage() {
  return (
    <main className="min-h-screen">
      <section className="border-b border-stone-200 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-6 md:flex-row md:items-end md:justify-between">
          <div>
            <p className="text-sm font-medium uppercase tracking-wide text-teal-700">Hermes Agent</p>
            <h1 className="mt-2 text-3xl font-semibold tracking-normal text-zinc-950">
              AI Creator Studio Telegram
            </h1>
            <p className="mt-2 max-w-2xl text-sm leading-6 text-zinc-600">
              Internal operations dashboard for generation jobs, provider quota, credits, and project usage.
            </p>
          </div>
          <div className="rounded-md border border-teal-200 bg-teal-50 px-4 py-3 text-sm text-teal-900">
            Runtime: Docker Compose ready
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-8">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {metrics.map((metric) => (
            <div key={metric.label} className="rounded-md border border-stone-200 bg-white p-5 shadow-sm">
              <p className="text-sm text-zinc-500">{metric.label}</p>
              <p className="mt-3 text-2xl font-semibold text-zinc-950">{metric.value}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 pb-10">
        <div className="overflow-hidden rounded-md border border-stone-200 bg-white shadow-sm">
          <div className="border-b border-stone-200 px-5 py-4">
            <h2 className="text-base font-semibold text-zinc-950">Provider Status</h2>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-left text-sm">
              <thead className="bg-stone-50 text-zinc-500">
                <tr>
                  <th className="px-5 py-3 font-medium">Provider</th>
                  <th className="px-5 py-3 font-medium">Status</th>
                  <th className="px-5 py-3 font-medium">Quota</th>
                  <th className="px-5 py-3 font-medium">Rate Limit</th>
                </tr>
              </thead>
              <tbody>
                {providerRows.map((provider) => (
                  <tr key={provider.name} className="border-t border-stone-100">
                    <td className="px-5 py-4 font-medium text-zinc-900">{provider.name}</td>
                    <td className="px-5 py-4 text-zinc-600">{provider.status}</td>
                    <td className="px-5 py-4 text-zinc-600">{provider.quota}</td>
                    <td className="px-5 py-4 text-zinc-600">{provider.rateLimit}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </main>
  );
}