robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add debug info to recent API calls display

Browse Source 
Added total count display and error message output to help debug
why API calls are logged but not displayed in the UI.
This commit is contained in:
robin
2025-12-18 15:39:46 +01:00
parent 1cfa9cab8c
commit f25aad401e
1 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/admin/page.tsx
View File

@@ -185,53 +185,65 @@ export default async function AdminPage() {
</div>
</div>
{/* Recent Activity */}
{/* Recent API Calls */}
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
<h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Recent API Calls</h2>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-zinc-200 dark:border-zinc-800">
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Time</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">User</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">API Type</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Status</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Error</th>
</tr>
</thead>
<tbody>
{recentUsage?.map((item) => (
<tr key={item.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
{new Date(item.created_at).toLocaleString('de-DE')}
</td>
<td className="py-3 px-4 text-sm font-semibold text-zinc-900 dark:text-white">
{(item.profiles as any)?.username || 'Unknown'}
</td>
<td className="py-3 px-4">
<span className={`text-xs font-black uppercase px-2 py-1 rounded ${item.api_type === 'google_search'
? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-500'
: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-500'
}`}>
{item.api_type === 'google_search' ? 'Search' : 'AI'}
</span>
</td>
<td className="py-3 px-4">
<span className={`text-xs font-black uppercase px-2 py-1 rounded ${item.success
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
}`}>
{item.success ? 'Success' : 'Failed'}
</span>
</td>
<td className="py-3 px-4 text-xs text-zinc-500 max-w-xs truncate">
{item.error_message || '-'}
</td>
</tr>
))}
</tbody>
</table>
<div className="text-sm text-zinc-500 mb-4">
Total calls logged: {recentUsage?.length || 0}
</div>
{!recentUsage || recentUsage.length === 0 ? (
<div className="text-center py-8 text-zinc-500">
<AlertCircle className="mx-auto mb-2" size={32} />
<p>No API calls recorded yet</p>
{recentError && (
<p className="text-red-500 text-xs mt-2">Error: {recentError.message}</p>
)}
</div>
) : (
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-zinc-200 dark:border-zinc-800">
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Time</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">User</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">API Type</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Endpoint</th>
<th className="text-left py-3 px-4 text-xs font-black uppercase text-zinc-400">Status</th>
</tr>
</thead>
<tbody>
{recentUsage.map((call: any) => (
<tr key={call.id} className="border-b border-zinc-100 dark:border-zinc-800/50">
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
{new Date(call.created_at).toLocaleString('de-DE')}
</td>
<td className="py-3 px-4 text-sm text-zinc-900 dark:text-white">
{call.profiles?.username || 'Unknown'}
</td>
<td className="py-3 px-4">
<span className={`px-2 py-1 rounded-full text-xs font-bold ${call.api_type === 'google_search'
? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400'
: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400'
}`}>
{call.api_type === 'google_search' ? 'Google Search' : 'Gemini AI'}
</span>
</td>
<td className="py-3 px-4 text-sm text-zinc-600 dark:text-zinc-400">
{call.endpoint}
</td>
<td className="py-3 px-4">
{call.success ? (
<span className="text-green-600 dark:text-green-400 font-bold">✓</span>
) : (
<span className="text-red-600 dark:text-red-400 font-bold">✗</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
</main>