feat: add request logging functionality and usage metrics display

src/app/(dashboard)/dashboard/providers/page.js

@@ -1,13 +1,14 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, CardSkeleton, Badge, UsageStats } from "@/shared/components";
+import { Card, CardSkeleton, Badge, UsageStats, RequestLogger } 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);
 
@@ -97,7 +98,27 @@ export default function ProvidersPage() {
       </div>
 
       {activeTab === "usage" ? (
-        <UsageStats />
+        <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 />}
+        </div>
       ) : (
         <>
           {/* OAuth Providers */}

src/app/api/usage/logs/route.js

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { getRecentLogs } from "@/lib/usageDb";
+
+export async function GET() {
+  try {
+    const logs = await getRecentLogs(200);
+    return NextResponse.json(logs);
+  } catch (error) {
+    console.error("Error fetching logs:", error);
+    return NextResponse.json({ error: "Failed to fetch logs" }, { status: 500 });
+  }
+}