From cbfd0c1798d41612a99c746b92d8805989feaa1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Fri, 21 Nov 2025 14:46:59 +0100
Subject: [PATCH] feat: Add sortable 'Added' column to admin table

- Display upload date in German format (DD.MM.YYYY)
- Column is sortable by clicking header
- Uses existing createdAt field from database
---
 app/admin/page.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 0a0f09a..dac4b32 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -11,7 +11,7 @@ interface Song {
     activations: number;
 }
 
-type SortField = 'title' | 'artist';
+type SortField = 'title' | 'artist' | 'createdAt';
 type SortDirection = 'asc' | 'desc';
 
 export default function AdminPage() {
@@ -229,6 +229,12 @@ export default function AdminPage() {
                                 >
                                     Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
                                 </th>
+                                <th
+                                    style={{ padding: '0.75rem', cursor: 'pointer', userSelect: 'none' }}
+                                    onClick={() => handleSort('createdAt')}
+                                >
+                                    Added {sortField === 'createdAt' && (sortDirection === 'asc' ? '↑' : '↓')}
+                                </th>
                                 <th style={{ padding: '0.75rem' }}>Activations</th>
                                 <th style={{ padding: '0.75rem' }}>Actions</th>
                             </tr>
@@ -258,6 +264,9 @@ export default function AdminPage() {
                                                     style={{ padding: '0.25rem' }}
                                                 />
                                             </td>
+                                            <td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
+                                                {new Date(song.createdAt).toLocaleDateString('de-DE')}
+                                            </td>
                                             <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -282,6 +291,9 @@ export default function AdminPage() {
                                         <>
                                             <td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td>
                                             <td style={{ padding: '0.75rem' }}>{song.artist}</td>
+                                            <td style={{ padding: '0.75rem', color: '#666', fontSize: '0.75rem' }}>
+                                                {new Date(song.createdAt).toLocaleDateString('de-DE')}
+                                            </td>
                                             <td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
                                             <td style={{ padding: '0.75rem' }}>
                                                 <div style={{ display: 'flex', gap: '0.5rem' }}>
@@ -307,7 +319,7 @@ export default function AdminPage() {
                             ))}
                             {paginatedSongs.length === 0 && (
                                 <tr>
-                                    <td colSpan={5} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
+                                    <td colSpan={6} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
                                         {searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'}
                                     </td>
                                 </tr>