@kyro-cms/admin 0.1.6 → 0.1.7

package/src/middleware.ts

@@ -9,15 +9,41 @@ const PUBLIC_PATHS = [
   "/api/auth/register",
   "/api/auth/me",
   "/api/auth/users",
+  "/api/auth/refresh",
+  "/api/users",
   "/api/health",
+  "/api/search",
+  "/api/upload",
+  "/api/media",
   "/login",
   "/register",
   "/favicon.svg",
 ];
 
-const PUBLIC_PREFIXES = ["/api/collections/", "/api/auth/"];
+const PUBLIC_PREFIXES = [
+  "/api/collections/",
+  "/api/auth/",
+  "/api/globals/",
+  "/api/media/",
+];
+
+const isApiRequest = (pathname: string): boolean => {
+  return pathname.startsWith("/api/");
+};
 
-export const onRequest: MiddlewareHandler = async ({ request, url }, next) => {
+const redirectToLogin = (): Response => {
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: "/login",
+    },
+  });
+};
+
+export const onRequest: MiddlewareHandler = async (
+  { request, url, locals },
+  next,
+) => {
   const pathname = new URL(url).pathname;
 
   // Helper to extract token from cookie or header
@@ -35,6 +61,21 @@ export const onRequest: MiddlewareHandler = async ({ request, url }, next) => {
 
   const token = getToken();
 
+  // Set user in locals if token is valid
+  if (token) {
+    try {
+      const payload = jwt.verify(token, JWT_SECRET) as jwt.JwtPayload;
+      locals.user = {
+        id: payload.sub || "",
+        email: (payload as any).email || "",
+        role: (payload as any).role || "guest",
+        tenantId: (payload as any).tenantId,
+      };
+    } catch {
+      // Token invalid, leave user undefined
+    }
+  }
+
   // Handle root path - redirect to admin for authenticated users
   if (pathname === "/") {
     if (!token) {
@@ -100,19 +141,37 @@ export const onRequest: MiddlewareHandler = async ({ request, url }, next) => {
   }
 
   if (!token) {
-    return new Response(JSON.stringify({ error: "Authentication required" }), {
-      status: 401,
-      headers: { "Content-Type": "application/json" },
-    });
+    if (!isApiRequest(pathname)) {
+      return redirectToLogin();
+    }
+    return new Response(
+      JSON.stringify({ error: "Authentication required. Please log in." }),
+      {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
   }
 
   try {
     jwt.verify(token, JWT_SECRET);
     return next();
-  } catch {
-    return new Response(JSON.stringify({ error: "Invalid or expired token" }), {
-      status: 401,
-      headers: { "Content-Type": "application/json" },
-    });
+  } catch (err) {
+    const isExpired = err instanceof jwt.TokenExpiredError;
+    if (!isApiRequest(pathname)) {
+      return redirectToLogin();
+    }
+    return new Response(
+      JSON.stringify({
+        error: isExpired
+          ? "Token expired. Please refresh your session or log in again."
+          : "Invalid token. Please log in again.",
+        code: isExpired ? "TOKEN_EXPIRED" : "TOKEN_INVALID",
+      }),
+      {
+        status: 401,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
   }
 };

package/src/pages/[collection]/[id].astro

@@ -1,176 +1,232 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
-import { collections } from '@/lib/config';
-import { AutoForm } from '@/components/AutoForm';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { collections } from "@/lib/config";
+import { AutoForm } from "@/components/AutoForm";
 
 const { collection, id } = Astro.params;
 
 // Validate collection exists
 if (!collection || !collections[collection]) {
-  return Astro.redirect('/');
+  return Astro.redirect("/");
 }
 
 const config = collections[collection];
 
+// Handle legacy integer IDs (e.g., "team-1" -> find by slug instead)
+let lookupId = id;
+if (id && id.includes("-")) {
+  const parts = id.split("-");
+  const potentialNum = parts[parts.length - 1];
+  if (/^\d+$/.test(potentialNum)) {
+    // Legacy integer ID - try to find document by slug from the remaining parts
+    const slugPart = parts.slice(0, -1).join("-");
+    try {
+      const slugResponse = await fetch(
+        `${Astro.url.origin}/api/${collection}?limit=100`,
+        {
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+      if (slugResponse.ok) {
+        const slugResult = await slugResponse.json();
+        const found = (slugResult.docs || []).find(
+          (d: any) => d.slug === slugPart,
+        );
+        if (found) {
+          lookupId = found.id;
+        }
+      }
+    } catch (e) {}
+  }
+}
+
 // Fetch document if editing
 let doc: any = null;
-if (id && id !== 'new') {
+if (lookupId && lookupId !== "new") {
   try {
-    const response = await fetch(`${Astro.url.origin}/api/${collection}/${id}`);
+    const response = await fetch(
+      `${Astro.url.origin}/api/${collection}/${lookupId}`,
+      {
+        headers: Astro.request.headers,
+        credentials: "include",
+      },
+    );
     if (response.ok) {
       const result = await response.json();
       doc = result.data || null;
     }
   } catch (error) {
-    console.error('Failed to fetch document:', error);
+    console.error("Failed to fetch document:", error);
   }
 }
 
+// Redirect to UUID URL if using legacy ID
+if (id && lookupId && id !== lookupId && doc) {
+  return Astro.redirect(`/${collection}/${lookupId}`, 301);
+}
+
 const isNew = !doc;
-const title = isNew ? `Create ${config.singularLabel || config.label || collection}` : `Edit ${config.singularLabel || config.label || collection}`;
-const description = config.admin?.description || `Manage ${(config.label || collection || '').toLowerCase()} documents`;
+const docStatus = doc?.status || "draft";
+const title = isNew
+  ? `Create ${config.singularLabel || config.label || collection}`
+  : `Edit ${config.singularLabel || config.label || collection}`;
+const description =
+  config.admin?.description ||
+  `Manage ${(config.label || collection || "").toLowerCase()} documents`;
 ---
 
 <AdminLayout title={title}>
   <div class="flex-1 overflow-y-auto p-8 space-y-6">
-    <!-- Header -->
-    <div class="surface-tile p-8 flex items-center justify-between">
-      <div class="flex items-center gap-4">
-        <a
-          href={`/${collection}`}
-          class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-gray-200 text-[#64748b] hover:text-[#0b1222] hover:bg-gray-50 transition-colors"
-        >
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
-          </svg>
-        </a>
-        <div>
-          <h1 class="text-2xl font-black tracking-tighter text-[#0b1222]">{title}</h1>
-          <p class="text-sm text-[#64748b] mt-0.5">{description}</p>
-        </div>
-      </div>
-      <div class="flex items-center gap-3">
-        <a
-          href={`/${collection}`}
-          class="px-5 py-2.5 border border-gray-200 rounded-xl text-[#0b1222] font-bold text-sm hover:bg-gray-50 transition-colors"
-        >
-          Cancel
-        </a>
-        <button
-          type="submit"
-          form="doc-form"
-          id="btn-save"
-          class="px-6 py-2.5 bg-[#0b1222] text-white rounded-xl font-bold text-sm hover:bg-[#1a2332] transition-colors active:scale-95"
-        >
-          {isNew ? 'Create' : 'Save Changes'}
-        </button>
-      </div>
-    </div>
-
-    <!-- Form Card -->
-    <div class="surface-tile p-8">
-      <!-- Toast container -->
-      <div id="toast-container" class="hidden fixed bottom-6 right-6 z-50">
-        <div class="flex items-center gap-3 px-5 py-4 bg-[#0b1222] text-white rounded-xl shadow-2xl">
-          <span id="toast-message"></span>
-          <button onclick="document.getElementById('toast-container').classList.add('hidden')" class="text-white/50 hover:text-white ml-2">
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-          </button>
-        </div>
-      </div>
-
-      <form id="doc-form">
-        <AutoForm
-          client:load
-          config={config}
-          data={doc || {}}
-          collectionSlug={collection}
-        />
-      </form>
-    </div>
-
-    <!-- Document Metadata (edit mode only) -->
-    {!isNew && doc && (
-      <div class="surface-tile p-8">
-        <h3 class="text-xs font-bold text-[#64748b] uppercase tracking-[0.2em] mb-4">Document Info</h3>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <div>
-            <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">ID</p>
-            <p class="text-sm text-[#0b1222] font-mono">{doc.id?.slice(0, 12)}…</p>
-          </div>
-          {doc.createdAt && (
-            <div>
-              <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Created</p>
-              <p class="text-sm text-[#0b1222]">{new Date(doc.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
-            </div>
-          )}
-          {doc.updatedAt && (
-            <div>
-              <p class="text-[10px] font-bold text-[#9ca3af] uppercase tracking-widest mb-1">Updated</p>
-              <p class="text-sm text-[#0b1222]">{new Date(doc.updatedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
-            </div>
-          )}
-        </div>
-      </div>
-    )}
+    <form id="doc-form">
+      <AutoForm
+        client:only="react"
+        config={config}
+        data={doc || {}}
+        collectionSlug={collection}
+        documentName={doc?.title || doc?.name || doc?.slug || "new-document"}
+      />
+      <input type="hidden" id="form-data" name="form-data" value="{}" />
+    </form>
   </div>
 
   <script define:vars={{ collection, id, isNew }}>
     function showToast(message, isError = false) {
-      const container = document.getElementById('toast-container');
-      const msg = document.getElementById('toast-message');
+      const container = document.getElementById("toast-container");
+      const msg = document.getElementById("toast-message");
       if (container && msg) {
         msg.textContent = message;
-        container.classList.remove('hidden');
+        container.classList.remove("hidden");
         if (!isError) {
-          setTimeout(() => container.classList.add('hidden'), 3000);
+          setTimeout(() => container.classList.add("hidden"), 3000);
         }
       }
     }
 
-    document.getElementById('doc-form')?.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      
-      const btn = document.getElementById('btn-save');
-      const originalText = btn?.textContent || '';
-      if (btn) {
-        btn.textContent = 'Saving…';
-        btn.setAttribute('disabled', 'true');
+    // Wait for DOM to be ready
+    function setupFormHandler() {
+      const form = document.getElementById("doc-form");
+      const btn = document.getElementById("btn-save");
+
+      if (!form || !btn) {
+        setTimeout(setupFormHandler, 100);
+        return;
       }
 
-      const formData = new FormData(e.target);
-      const data = {};
-      formData.forEach((value, key) => {
-        data[key] = value;
+      // Button click handler
+      btn.addEventListener("click", async () => {
+        // Check form validity
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          return;
+        }
+
+        const originalText = btn.textContent || "";
+        btn.textContent = "Saving…";
+        btn.setAttribute("disabled", "true");
+
+        // Get data from hidden input (populated by React AutoForm onChange)
+        const hiddenInput = document.getElementById("form-data");
+        let data = {};
+
+        if (hiddenInput && hiddenInput.value) {
+          try {
+            const val = hiddenInput.value;
+            if (val) data = JSON.parse(val);
+          } catch (err) {
+            console.error("Failed to parse form data:", err);
+          }
+        }
+
+        const url = isNew ? `/api/${collection}` : `/api/${collection}/${id}`;
+        const method = isNew ? "POST" : "PATCH";
+
+        try {
+          const response = await fetch(url, {
+            method,
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data),
+          });
+
+          if (response.ok) {
+            showToast(
+              isNew ? "Document created successfully" : "Changes saved",
+            );
+            setTimeout(() => {
+              window.location.href = `/${collection}`;
+            }, 800);
+          } else {
+            const error = await response.json();
+            showToast(error.error || "An error occurred", true);
+          }
+        } catch (error) {
+          showToast("Failed to save document", true);
+        } finally {
+          btn.textContent = originalText;
+          btn.removeAttribute("disabled");
+        }
       });
+    }
+
+    setupFormHandler();
+
+    // Setup publish/unpublish handlers
+    const btnPublish = document.getElementById("btn-publish");
+    const btnUnpublish = document.getElementById("btn-unpublish");
 
-      const url = isNew ? `/api/${collection}` : `/api/${collection}/${id}`;
-      const method = isNew ? 'POST' : 'PATCH';
+    async function handlePublish() {
+      if (!btnPublish) return;
+      btnPublish.textContent = "Publishing...";
+      btnPublish.setAttribute("disabled", "true");
 
       try {
-        const response = await fetch(url, {
-          method,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(data),
+        const response = await fetch(`/api/${collection}/${id}/publish`, {
+          method: "POST",
+          credentials: "include",
         });
 
         if (response.ok) {
-          showToast(isNew ? 'Document created successfully' : 'Changes saved');
-          setTimeout(() => {
-            window.location.href = `/${collection}`;
-          }, 800);
+          showToast("Published successfully");
+          location.reload();
         } else {
           const error = await response.json();
-          showToast(error.error || 'An error occurred', true);
+          showToast(error.error || "Failed to publish", true);
         }
-      } catch (error) {
-        showToast('Failed to save document', true);
+      } catch (err) {
+        showToast("Failed to publish", true);
       } finally {
-        if (btn) {
-          btn.textContent = originalText;
-          btn.removeAttribute('disabled');
+        btnPublish.textContent = "Publish";
+        btnPublish.removeAttribute("disabled");
+      }
+    }
+
+    async function handleUnpublish() {
+      if (!btnUnpublish) return;
+      btnUnpublish.textContent = "Unpublishing...";
+      btnUnpublish.setAttribute("disabled", "true");
+
+      try {
+        const response = await fetch(`/api/${collection}/${id}/unpublish`, {
+          method: "POST",
+          credentials: "include",
+        });
+
+        if (response.ok) {
+          showToast("Unpublished successfully");
+          location.reload();
+        } else {
+          const error = await response.json();
+          showToast(error.error || "Failed to unpublish", true);
         }
+      } catch (err) {
+        showToast("Failed to unpublish", true);
+      } finally {
+        btnUnpublish.textContent = "Unpublish";
+        btnUnpublish.removeAttribute("disabled");
       }
-    });
+    }
+
+    if (btnPublish) btnPublish.addEventListener("click", handlePublish);
+    if (btnUnpublish) btnUnpublish.addEventListener("click", handleUnpublish);
   </script>
 </AdminLayout>

package/src/pages/[collection]/index.astro

@@ -1,180 +1,48 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
-import { collections } from '@/lib/config';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { collections } from "@/lib/config";
+import { EnhancedListView } from "@/components/EnhancedListView";
 
 const { collection } = Astro.params;
 
-// Validate collection exists
 if (!collection || !collections[collection]) {
-  return Astro.redirect('/');
+  return Astro.redirect("/");
 }
 
 const config = collections[collection];
-const visibleFields = config.fields.filter(f => f.name && !f.admin?.hidden && f.name !== 'id');
-const displayFields = visibleFields.slice(0, 4);
 
-// Fetch documents from API
+const page = parseInt(Astro.url.searchParams.get("page") || "1");
+const limit = parseInt(Astro.url.searchParams.get("limit") || "10");
+
 let docs: any[] = [];
 let totalDocs = 0;
-const page = parseInt(Astro.url.searchParams.get('page') || '1');
-const limit = parseInt(Astro.url.searchParams.get('limit') || '10');
 
 try {
-  const response = await fetch(`${Astro.url.origin}/api/${collection}?page=${page}&limit=${limit}`);
+  const response = await fetch(
+    `${Astro.url.origin}/api/${collection}?page=${page}&limit=${limit}&t=${Date.now()}`,
+    {
+      headers: Astro.request.headers,
+      credentials: "include",
+    },
+  );
   if (response.ok) {
     const data = await response.json();
     docs = data.docs || [];
     totalDocs = data.totalDocs || 0;
   }
 } catch (error) {
-  console.error('Failed to fetch documents:', error);
+  console.error("Failed to fetch documents:", error);
 }
-
-const totalPages = Math.ceil(totalDocs / limit);
-const collectionDescription = config.admin?.description || `Manage your ${config.label || collection} collection`;
 ---
 
-<AdminLayout title={config.label || collection || 'Collection'}>
-  <div class="flex-1 overflow-y-auto p-8 space-y-6">
-    <!-- Header -->
-    <div class="surface-tile p-8 flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">
-          {config.label || collection}
-        </h1>
-        <p class="text-sm text-[#64748b] mt-1 font-medium">
-          {collectionDescription}
-          {totalDocs > 0 && <span class="ml-2 text-[#0b1222] font-bold">· {totalDocs} documents</span>}
-        </p>
-      </div>
-      <a
-        href={`/${collection}/new`}
-        id="btn-create-new"
-        class="flex items-center gap-2 px-6 py-3 bg-[#0b1222] text-white rounded-xl font-bold transition-all hover:bg-[#1a2332] active:scale-95"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
-        </svg>
-        Create {config.singularLabel || config.label || collection}
-      </a>
-    </div>
-
-    <!-- Data Table -->
-    <div class="surface-tile overflow-hidden p-0">
-      <table class="w-full text-left">
-        <thead>
-          <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
-            <th class="px-8 py-6 w-8">
-              <div class="w-5 h-5 rounded-md border-2 border-gray-200"></div>
-            </th>
-            {displayFields.map(field => (
-              <th class="px-6 py-6">{field.label || field.name}</th>
-            ))}
-            {config.timestamps && (
-              <th class="px-6 py-6">Created</th>
-            )}
-            <th class="px-6 py-6 text-right">Actions</th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-50">
-          {docs.length === 0 ? (
-            <tr>
-              <td colspan="100%" class="px-8 py-16 text-center">
-                <div class="flex flex-col items-center gap-4">
-                  <div class="w-16 h-16 rounded-2xl bg-gray-50 flex items-center justify-center">
-                    <svg class="w-8 h-8 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
-                    </svg>
-                  </div>
-                  <div>
-                    <p class="font-bold text-[#0b1222] text-base">No documents yet</p>
-                    <p class="text-sm text-[#64748b] mt-1">
-                      Get started by creating your first {(config.singularLabel || config.label || collection || 'item').toLowerCase()}.
-                    </p>
-                  </div>
-                  <a
-                    href={`/${collection}/new`}
-                    class="mt-2 inline-flex items-center gap-2 px-5 py-2.5 bg-[#0b1222] text-white rounded-lg font-bold text-sm"
-                  >
-                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
-                    </svg>
-                    Create {config.singularLabel || config.label || collection}
-                  </a>
-                </div>
-              </td>
-            </tr>
-          ) : (
-            docs.map((doc) => (
-              <tr class="group hover:bg-gray-50/50 transition-colors cursor-pointer" onclick={`window.location='/${collection}/${doc.id}'`}>
-                <td class="px-8 py-5">
-                  <div class="w-5 h-5 rounded-md border-2 border-gray-200 group-hover:border-[#0b1222] transition-colors"></div>
-                </td>
-                {displayFields.map((field, i) => (
-                  <td class={`px-6 py-5 ${i === 0 ? 'font-bold text-[#0b1222]' : 'text-[#64748b]'}`}>
-                    {field.type === 'select' && doc[field.name!]
-                      ? (field as any).options?.find((o: any) => o.value === doc[field.name!])?.label || doc[field.name!]
-                      : String(doc[field.name!] || '—').slice(0, 60)}
-                  </td>
-                ))}
-                {config.timestamps && (
-                  <td class="px-6 py-5 text-[#64748b] text-sm">
-                    {doc.createdAt ? new Date(doc.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
-                  </td>
-                )}
-                <td class="px-6 py-5 text-right">
-                  <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <a
-                      href={`/${collection}/${doc.id}`}
-                      class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-100 hover:text-[#0b1222] transition-colors"
-                      onclick="event.stopPropagation()"
-                    >
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                      </svg>
-                    </a>
-                    <button
-                      onclick={`event.stopPropagation(); if(confirm('Delete this document?')) { fetch('/api/${collection}/${doc.id}', { method: 'DELETE' }).then(() => location.reload()); }`}
-                      class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-200 hover:text-[#0b1222] transition-colors"
-                    >
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-    </div>
-
-    <!-- Pagination -->
-    {totalDocs > limit && (
-      <div class="flex items-center justify-between px-2">
-        <span class="text-sm text-[#64748b] font-medium">
-          Showing <span class="text-[#0b1222] font-bold">{(page - 1) * limit + 1}</span> to <span class="text-[#0b1222] font-bold">{Math.min(page * limit, totalDocs)}</span> of <span class="text-[#0b1222] font-bold">{totalDocs}</span>
-        </span>
-        <div class="flex gap-2">
-          {page > 1 && (
-            <a
-              href={`/${collection}?page=${page - 1}&limit=${limit}`}
-              class="px-4 py-2 border border-gray-200 rounded-lg text-sm font-bold text-[#0b1222] hover:bg-gray-50 transition-colors"
-            >
-              ← Previous
-            </a>
-          )}
-          {page < totalPages && (
-            <a
-              href={`/${collection}?page=${page + 1}&limit=${limit}`}
-              class="px-4 py-2 bg-[#0b1222] text-white rounded-lg text-sm font-bold hover:bg-[#1a2332] transition-colors"
-            >
-              Next →
-            </a>
-          )}
-        </div>
-      </div>
-    )}
+<AdminLayout title={config.label || collection || "Collection"}>
+  <div class="flex-1 overflow-y-auto p-8">
+    <EnhancedListView
+      client:load
+      collection={config}
+      collectionSlug={collection}
+      initialDocs={docs}
+      initialTotal={totalDocs}
+    />
   </div>
 </AdminLayout>