feat(media): add filtering by type and sorting by creation date

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,13 +28,17 @@ 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, 
       'media', 
@@ -65,16 +71,28 @@ export default async function MediaLibraryPage({
           </p>
         </div>
 
-        <form className="flex-1 max-w-md w-full relative group">
+        <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 en la biblioteca..."
+                placeholder="Buscar titulo..."
-              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"
+                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"
              />
-           <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">
+           </div>
-              <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>
+           <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,8 +158,17 @@ export default async function MediaLibraryPage({
           {/* Pagination */}
           {total > limit && (
             <div className="flex justify-center items-center gap-4 mt-8">
+               {(() => {
+                 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}${q ? `&q=${q}` : ''}`}
+                        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
@@ -150,11 +177,14 @@ export default async function MediaLibraryPage({
                         Página {page} de {Math.ceil(total / limit)}
                      </span>
                      <Link 
-                  href={`/dashboard/media?page=${page + 1}${q ? `&q=${q}` : ''}`}
+                        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>
           )}
         </>