MythEclipse/9router
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dashboard responsive layouts (#805)

Browse Source 
* Improve dashboard responsive layouts

* Improve proxy pools mobile layout

* Improve CLI tool card input responsiveness

---------

Co-authored-by: Delynn Assistant <zhen@dkzhen.org>
This commit is contained in:
ZhenandDelynn Assistant authored and GitHub committed 2026-05-01 16:34:07 +07:00
1 parent 9ca388972c
commit 0da61d8f7b
29 files changed
+561 -464
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(dashboard)/dashboard/usage/components/OverviewCards.js
+9 -9
View File
@@ -8,22 +8,22 @@ const fmtCost = (n) => `$${(n || 0).toFixed(2)}`;
export default function OverviewCards({ stats }) {
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<Card className="px-4 py-3 flex flex-col gap-1">
<div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 sm:gap-4">
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
<span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
<span className="text-2xl font-bold">{fmt(stats.totalRequests)}</span>
<span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
</Card>
<Card className="px-4 py-3 flex flex-col gap-1">
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
<span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
<span className="text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
<span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
</Card>
<Card className="px-4 py-3 flex flex-col gap-1">
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
<span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
<span className="text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
<span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
</Card>
<Card className="px-4 py-3 flex flex-col gap-1">
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
<span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
<span className="text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
<span className="truncate text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
<span className="text-[10px] text-text-muted">Estimated, not actual billing</span>
</Card>
</div>