Skip to content

Commit 38a8525

Browse files
mchestrmchestr
committed
fix some bugs based on user feedback
1 parent 44b34c6 commit 38a8525

30 files changed

+979
-626
lines changed

‎app/admin/llm-usage/[id]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default async function LLMUsageDetailPage({ params }: { params: { id: str
1111
const session = await getServerSession(authOptions)
1212

1313
if (!session) {
14-
redirect("/auth/signin")
14+
redirect("/")
1515
}
1616

1717
if (!session.user.isAdmin) {

‎app/admin/llm-usage/page.tsx‎

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import React from "react"
12
import { getLLMUsageRecords, getLLMUsageStats, getUserById } from "@/actions/admin"
2-
import { SignOutButton } from "@/components/admin/sign-out-button"
3+
import AdminLayoutClient from "@/components/admin/admin-layout-client"
34
import { authOptions } from "@/lib/auth"
45
import { getServerSession } from "next-auth"
56
import Link from "next/link"
@@ -15,7 +16,7 @@ export default async function LLMUsagePage({
1516
const session = await getServerSession(authOptions)
1617

1718
if (!session) {
18-
redirect("/auth/signin")
19+
redirect("/")
1920
}
2021

2122
if (!session.user.isAdmin) {
@@ -53,11 +54,11 @@ export default async function LLMUsagePage({
5354
}
5455

5556
return (
56-
<main className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 p-6">
57-
<div className="max-w-7xl mx-auto">
58-
<div className="flex justify-between items-center mb-6">
59-
<div>
60-
<h1 className="text-3xl font-bold text-white mb-2">LLM Usage & Token Tracking</h1>
57+
<AdminLayoutClient>
58+
<div className="p-4 sm:p-6">
59+
<div className="max-w-7xl mx-auto">
60+
<div className="mb-6">
61+
<h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">LLM Usage & Token Tracking</h1>
6162
<p className="text-sm text-slate-400">
6263
{filteredUser
6364
? `Filtered by: ${filteredUser.name || filteredUser.email || "Unknown User"}`
@@ -72,30 +73,14 @@ export default async function LLMUsagePage({
7273
</Link>
7374
)}
7475
</div>
75-
<div className="flex gap-3">
76-
<Link
77-
href="/admin/users"
78-
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded transition-colors"
79-
>
80-
Users
81-
</Link>
82-
<Link
83-
href="/admin/shares"
84-
className="px-4 py-2 bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-medium rounded transition-colors"
85-
>
86-
Share Analytics
87-
</Link>
88-
<SignOutButton />
89-
</div>
90-
</div>
9176

9277
{/* Filter Banner */}
9378
{filteredUser && (
9479
<div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4 mb-6">
95-
<div className="flex items-center justify-between">
96-
<div className="flex items-center gap-4">
80+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
81+
<div className="flex items-center gap-3 sm:gap-4">
9782
{filteredUser.image ? (
98-
<div className="relative w-12 h-12 rounded-full overflow-hidden bg-slate-700">
83+
<div className="relative w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden bg-slate-700 flex-shrink-0">
9984
{/* eslint-disable-next-line @next/next/no-img-element */}
10085
<img
10186
src={filteredUser.image}
@@ -104,22 +89,22 @@ export default async function LLMUsagePage({
10489
/>
10590
</div>
10691
) : (
107-
<div className="w-12 h-12 rounded-full bg-slate-700 flex items-center justify-center">
108-
<span className="text-slate-400 text-lg font-medium">
92+
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-slate-700 flex items-center justify-center flex-shrink-0">
93+
<span className="text-slate-400 text-base sm:text-lg font-medium">
10994
{(filteredUser.name || filteredUser.email || "U")[0].toUpperCase()}
11095
</span>
11196
</div>
11297
)}
113-
<div>
114-
<div className="text-sm text-slate-400">Viewing LLM usage for</div>
115-
<div className="text-lg font-semibold text-white">
98+
<div className="min-w-0">
99+
<div className="text-xs sm:text-sm text-slate-400">Viewing LLM usage for</div>
100+
<div className="text-base sm:text-lg font-semibold text-white truncate">
116101
{filteredUser.name || filteredUser.email || "Unknown User"}
117102
</div>
118103
</div>
119104
</div>
120105
<Link
121106
href="/admin/llm-usage"
122-
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded transition-colors"
107+
className="px-3 sm:px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs sm:text-sm font-medium rounded transition-colors self-start sm:self-auto"
123108
>
124109
Clear Filter
125110
</Link>
@@ -173,28 +158,28 @@ export default async function LLMUsagePage({
173158
<table className="w-full">
174159
<thead className="bg-slate-700/30 border-b border-slate-700">
175160
<tr>
176-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
161+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
177162
Date
178163
</th>
179-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
164+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider hidden md:table-cell">
180165
User
181166
</th>
182-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
167+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
183168
Provider
184169
</th>
185-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
170+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider hidden lg:table-cell">
186171
Model
187172
</th>
188-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
173+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
189174
Tokens
190175
</th>
191-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
176+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
192177
Cost
193178
</th>
194-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
179+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider hidden lg:table-cell">
195180
Wrapped
196181
</th>
197-
<th className="px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
182+
<th className="px-3 sm:px-6 py-3 text-left text-xs font-medium text-slate-400 uppercase tracking-wider">
198183
Actions
199184
</th>
200185
</tr>
@@ -209,10 +194,18 @@ export default async function LLMUsagePage({
209194
) : (
210195
records.map((record) => (
211196
<tr key={record.id} className="hover:bg-slate-700/20 transition-colors">
212-
<td className="px-6 py-4 whitespace-nowrap">
213-
<div className="text-sm text-slate-300">{formatDate(record.createdAt)}</div>
197+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap">
198+
<div className="text-xs sm:text-sm text-slate-300">
199+
<div className="md:hidden">
200+
{new Date(record.createdAt).toLocaleDateString("en-US", {
201+
month: "short",
202+
day: "numeric",
203+
})}
204+
</div>
205+
<div className="hidden md:block">{formatDate(record.createdAt)}</div>
206+
</div>
214207
</td>
215-
<td className="px-6 py-4 whitespace-nowrap">
208+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap hidden md:table-cell">
216209
<div className="flex items-center gap-2">
217210
{record.user.image ? (
218211
<div className="relative w-8 h-8 rounded-full overflow-hidden bg-slate-700">
@@ -240,26 +233,26 @@ export default async function LLMUsagePage({
240233
</div>
241234
</div>
242235
</td>
243-
<td className="px-6 py-4 whitespace-nowrap">{getProviderBadge(record.provider)}</td>
244-
<td className="px-6 py-4 whitespace-nowrap">
245-
<div className="text-sm text-slate-300 font-mono">
236+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap">{getProviderBadge(record.provider)}</td>
237+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap hidden lg:table-cell">
238+
<div className="text-sm text-slate-300 font-mono truncate max-w-[120px]">
246239
{record.model || <span className="text-slate-500">—</span>}
247240
</div>
248241
</td>
249-
<td className="px-6 py-4 whitespace-nowrap">
242+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap">
250243
<div className="text-sm">
251244
<div className="text-white font-medium">{record.totalTokens.toLocaleString()}</div>
252-
<div className="text-xs text-slate-400">
245+
<div className="text-xs text-slate-400 hidden sm:block">
253246
{record.promptTokens.toLocaleString()} + {record.completionTokens.toLocaleString()}
254247
</div>
255248
</div>
256249
</td>
257-
<td className="px-6 py-4 whitespace-nowrap">
250+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap">
258251
<div className="text-sm text-green-400 font-medium">
259252
${record.cost.toFixed(4)}
260253
</div>
261254
</td>
262-
<td className="px-6 py-4 whitespace-nowrap">
255+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap hidden lg:table-cell">
263256
{record.wrapped ? (
264257
<Link
265258
href={`/admin/users/${record.userId}/wrapped`}
@@ -271,12 +264,13 @@ export default async function LLMUsagePage({
271264
<span className="text-sm text-slate-500">—</span>
272265
)}
273266
</td>
274-
<td className="px-6 py-4 whitespace-nowrap">
267+
<td className="px-3 sm:px-6 py-4 whitespace-nowrap">
275268
<Link
276269
href={`/admin/llm-usage/${record.id}`}
277-
className="px-3 py-1.5 bg-cyan-600 hover:bg-cyan-700 text-white text-xs font-medium rounded transition-colors inline-block"
270+
className="px-2 sm:px-3 py-1 sm:py-1.5 bg-cyan-600 hover:bg-cyan-700 text-white text-xs font-medium rounded transition-colors inline-block"
278271
>
279-
View Details
272+
<span className="hidden sm:inline">View Details</span>
273+
<span className="sm:hidden">View</span>
280274
</Link>
281275
</td>
282276
</tr>
@@ -288,8 +282,8 @@ export default async function LLMUsagePage({
288282

289283
{/* Pagination */}
290284
{pagination.totalPages > 1 && (
291-
<div className="px-6 py-4 border-t border-slate-700 flex items-center justify-between">
292-
<div className="text-sm text-slate-400">
285+
<div className="px-4 sm:px-6 py-4 border-t border-slate-700 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
286+
<div className="text-xs sm:text-sm text-slate-400">
293287
Showing {(pagination.page - 1) * pagination.pageSize + 1} to{" "}
294288
{Math.min(pagination.page * pagination.pageSize, pagination.total)} of{" "}
295289
{pagination.total} results
@@ -298,15 +292,15 @@ export default async function LLMUsagePage({
298292
{pagination.page > 1 && (
299293
<Link
300294
href={`/admin/llm-usage?page=${pagination.page - 1}${userId ? `&userId=${userId}` : ""}`}
301-
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded transition-colors"
295+
className="px-3 sm:px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs sm:text-sm font-medium rounded transition-colors"
302296
>
303297
Previous
304298
</Link>
305299
)}
306300
{pagination.page < pagination.totalPages && (
307301
<Link
308302
href={`/admin/llm-usage?page=${pagination.page + 1}${userId ? `&userId=${userId}` : ""}`}
309-
className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded transition-colors"
303+
className="px-3 sm:px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs sm:text-sm font-medium rounded transition-colors"
310304
>
311305
Next
312306
</Link>
@@ -316,7 +310,8 @@ export default async function LLMUsagePage({
316310
)}
317311
</div>
318312
</div>
319-
</main>
313+
</div>
314+
</AdminLayoutClient>
320315
)
321316
}
322317

‎app/admin/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default async function AdminDashboard() {
66
const session = await getServerSession(authOptions)
77

88
if (!session) {
9-
redirect("/auth/signin")
9+
redirect("/")
1010
}
1111

1212
if (!session.user.isAdmin) {

0 commit comments

Comments
 (0)