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

Added Usage page.

Browse Source
This commit is contained in:
decolua committed 2026-01-19 10:39:30 +07:00
1 parent da15660681
commit 3804357aba
12 files changed
+237 -138
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(dashboard)/dashboard/providers/page.js
+27 -79
View File
@@ -1,14 +1,12 @@
"use client";
import { useState, useEffect } from "react";
import { Card, CardSkeleton, Badge, UsageStats, RequestLogger } from "@/shared/components";
import { Card, CardSkeleton, Badge } from "@/shared/components";
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
import Link from "next/link";
import { getErrorCode, getRelativeTime } from "@/shared/utils";
export default function ProvidersPage() {
const [activeTab, setActiveTab] = useState("connections");
const [usageSubTab, setUsageSubTab] = useState("overview");
const [connections, setConnections] = useState([]);
const [loading, setLoading] = useState(true);
@@ -73,85 +71,35 @@ export default function ProvidersPage() {
return (
<div className="flex flex-col gap-6">
{/* Tabs */}
<div className="flex border-b border-border">
<button
onClick={() => setActiveTab("connections")}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === "connections"
? "border-primary text-primary"
: "border-transparent text-text-muted hover:text-text-primary"
}`}
>
Connections
</button>
<button
onClick={() => setActiveTab("usage")}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === "usage"
? "border-primary text-primary"
: "border-transparent text-text-muted hover:text-text-primary"
}`}
>
Usage
</button>
{/* OAuth Providers */}
<div className="flex flex-col gap-4">
<h2 className="text-xl font-semibold">OAuth Providers</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{Object.entries(OAUTH_PROVIDERS).map(([key, info]) => (
<ProviderCard
key={key}
providerId={key}
provider={info}
stats={getProviderStats(key, "oauth")}
/>
))}
</div>
</div>
{activeTab === "usage" ? (
<div className="flex flex-col gap-6">
<div className="flex gap-4">
<button
onClick={() => setUsageSubTab("overview")}
className={`text-sm font-semibold transition-colors ${
usageSubTab === "overview" ? "text-primary" : "text-text-muted hover:text-text-primary"
}`}
>
Overview
</button>
<button
onClick={() => setUsageSubTab("logs")}
className={`text-sm font-semibold transition-colors ${
usageSubTab === "logs" ? "text-primary" : "text-text-muted hover:text-text-primary"
}`}
>
Logger
</button>
</div>
{usageSubTab === "overview" ? <UsageStats /> : <RequestLogger />}
{/* API Key Providers */}
<div className="flex flex-col gap-4">
<h2 className="text-xl font-semibold">API Key Providers</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{Object.entries(APIKEY_PROVIDERS).map(([key, info]) => (
<ApiKeyProviderCard
key={key}
providerId={key}
provider={info}
stats={getProviderStats(key, "apikey")}
/>
))}
</div>
) : (
<>
{/* OAuth Providers */}
<div className="flex flex-col gap-4">
<h2 className="text-xl font-semibold">OAuth Providers</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{Object.entries(OAUTH_PROVIDERS).map(([key, info]) => (
<ProviderCard
key={key}
providerId={key}
provider={info}
stats={getProviderStats(key, "oauth")}
/>
))}
</div>
</div>
{/* API Key Providers */}
<div className="flex flex-col gap-4">
<h2 className="text-xl font-semibold">API Key Providers</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{Object.entries(APIKEY_PROVIDERS).map(([key, info]) => (
<ApiKeyProviderCard
key={key}
providerId={key}
provider={info}
stats={getProviderStats(key, "apikey")}
/>
))}
</div>
</div>
</>
)}
</div>
</div>
);
}