From 41735c5280bf5b20625e80aecc16c39822420236 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Wed, 15 Apr 2026 17:05:16 -0500
Subject: [PATCH] feat(media): add filtering by type and sorting by creation
 date

---
 src/app/dashboard/media/page.tsx | 84 ++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/app/dashboard/media/page.tsx b/src/app/dashboard/media/page.tsx
index 4ae4b2b..31fd215 100644
--- a/src/app/dashboard/media/page.tsx
+++ b/src/app/dashboard/media/page.tsx
@@ -9,11 +9,13 @@ import { Query } from 'node-appwrite';
 export default async function MediaLibraryPage({
   searchParams
 }: {
-  searchParams: { q?: string, page?: string }
+  searchParams: Promise<{ q?: string, page?: string, tipo?: string, orden?: string }>
 }) {
   const sParams = await searchParams;
   const q = sParams.q || '';
   const page = Number(sParams.page) || 1;
+  const tipo = sParams.tipo || '';
+  const orden = sParams.orden || 'desc';
   const limit = 12;
   const offset = (page - 1) * limit;
 
@@ -26,12 +28,16 @@ export default async function MediaLibraryPage({
     const queries = [
         Query.limit(limit),
         Query.offset(offset),
-        Query.orderDesc('$createdAt')
+        orden === 'asc' ? Query.orderAsc('$createdAt') : Query.orderDesc('$createdAt')
     ];
 
     if (q) {
         queries.push(Query.contains('titulo', q));
     }
+    
+    if (tipo === 'imagen' || tipo === 'video') {
+        queries.push(Query.equal('tipo', tipo));
+    }
 
     const response = await sessionClient.databases.listDocuments(
       APPWRITE_ALMEIRA_CONFIG.databaseId, 
@@ -65,16 +71,28 @@ export default async function MediaLibraryPage({
           </p>
         </div>
 
-        <form className="flex-1 max-w-md w-full relative group">
-           <input 
-              type="text" 
-              name="q" 
-              defaultValue={q}
-              placeholder="Buscar en la biblioteca..."
-              className="w-full bg-slate-950 border border-slate-800 rounded-full px-6 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium placeholder:text-slate-600"
-           />
-           <button type="submit" className="absolute right-2 top-2 bg-slate-800 p-1.5 rounded-full hover:bg-slate-700 transition-colors text-slate-400">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <form className="flex-1 w-full flex flex-col md:flex-row gap-2 relative group text-sm">
+           <div className="relative flex-1">
+             <input 
+                type="text" 
+                name="q" 
+                defaultValue={q}
+                placeholder="Buscar titulo..."
+                className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium placeholder:text-slate-600"
+             />
+           </div>
+           <select name="tipo" defaultValue={tipo} className="bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium appearance-none min-w-[140px] cursor-pointer">
+              <option value="">Cualquier tipo</option>
+              <option value="imagen">Sólo Imágenes</option>
+              <option value="video">Sólo Videos</option>
+           </select>
+           <select name="orden" defaultValue={orden} className="bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-pink-500 transition-all font-medium appearance-none min-w-[180px] cursor-pointer">
+              <option value="desc">Más recientes primero</option>
+              <option value="asc">Más antiguos primero</option>
+           </select>
+           <button type="submit" className="bg-slate-800 px-6 py-3 rounded-xl hover:bg-slate-700 transition-colors text-slate-300 font-bold uppercase tracking-widest flex items-center justify-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+              <span>Filtrar</span>
            </button>
         </form>
 
@@ -140,21 +158,33 @@ export default async function MediaLibraryPage({
           {/* Pagination */}
           {total > limit && (
             <div className="flex justify-center items-center gap-4 mt-8">
-               <Link 
-                  href={`/dashboard/media?page=${page - 1}${q ? `&q=${q}` : ''}`}
-                  className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page <= 1 ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
-               >
-                  ANTERIOR
-               </Link>
-               <span className="text-slate-400 font-bold tracking-widest text-xs uppercase">
-                  Página {page} de {Math.ceil(total / limit)}
-               </span>
-               <Link 
-                  href={`/dashboard/media?page=${page + 1}${q ? `&q=${q}` : ''}`}
-                  className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page >= Math.ceil(total / limit) ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
-               >
-                  SIGUIENTE
-               </Link>
+               {(() => {
+                 const currentParams = new URLSearchParams();
+                 if (q) currentParams.set('q', q);
+                 if (tipo) currentParams.set('tipo', tipo);
+                 if (orden !== 'desc') currentParams.set('orden', orden);
+                 const baseQuery = currentParams.toString() ? `&${currentParams.toString()}` : '';
+                 
+                 return (
+                   <>
+                     <Link 
+                        href={`/dashboard/media?page=${page - 1}${baseQuery}`}
+                        className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page <= 1 ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
+                     >
+                        ANTERIOR
+                     </Link>
+                     <span className="text-slate-400 font-bold tracking-widest text-xs uppercase">
+                        Página {page} de {Math.ceil(total / limit)}
+                     </span>
+                     <Link 
+                        href={`/dashboard/media?page=${page + 1}${baseQuery}`}
+                        className={`px-6 py-2 rounded-full font-bold text-sm transition-all border border-slate-800 ${page >= Math.ceil(total / limit) ? 'opacity-30 pointer-events-none bg-slate-900' : 'bg-slate-900 text-white hover:border-pink-500'}`}
+                     >
+                        SIGUIENTE
+                     </Link>
+                   </>
+                 );
+               })()}
             </div>
           )}
         </>