@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/ListView.tsx

@@ -1,332 +1,906 @@
-import { useState, useEffect } from "react";
-import { apiGet, apiDelete } from "../lib/api";
-import type { CollectionConfig, KyroConfig } from "@kyro-cms/core/client";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
-import { ConfirmModal } from "./ui/Modal";
-import { Search, Plus, Settings } from "lucide-react";
+import { Plus } from "./ui/icons";
+import { apiGet, apiDelete, withCacheBust } from "../lib/api";
+
+import { useAuthStore } from "../lib/stores";
+import { useUIStore } from "../lib/stores";
+import { adminPath as ADMIN_BASE } from "../lib/paths";
+import { PageHeader } from "./ui/PageHeader";
+import { Badge } from "./ui/Badge";
+
+
+import type { CollectionConfig, Field } from "@kyro-cms/core";
+
+type FieldConfig = Field;
+
+interface FilterConfig {
+  field: string;
+  operator:
+  | "equals"
+  | "contains"
+  | "gt"
+  | "lt"
+  | "gte"
+  | "lte"
+  | "between"
+  | "in";
+  value: string;
+}
+
+interface SortConfig {
+  field: string;
+  direction: "asc" | "desc";
+}
 
 interface ListViewProps {
-  config: KyroConfig;
   collection: CollectionConfig;
-  onCreate: () => void;
-  onEdit: (id: string) => void;
+  collectionSlug?: string;
+  initialDocs?: any[];
+  initialTotal?: number;
+  onCreate?: () => void;
+  onEdit?: (id: string) => void;
+  // For legacy Admin.tsx compatibility
+  config?: any;
 }
 
+/**
+ * Unified ListView component used across both SPA (Admin.tsx) and MPA (Astro pages) modes.
+ */
 export function ListView({
-  config,
   collection,
-  onCreate,
-  onEdit,
+  collectionSlug: providedSlug,
+  initialDocs = [],
+  initialTotal = 0,
+  onCreate: providedOnCreate,
+  onEdit: providedOnEdit,
+  config,
 }: ListViewProps) {
-  const [docs, setDocs] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  const collectionSlug = providedSlug || collection.slug;
+  const { permissions } = useAuthStore();
+  const canCreate = permissions?.collections?.[collectionSlug]?.create !== false;
+  const canDelete = permissions?.collections?.[collectionSlug]?.delete !== false;
+  const canUpdate = permissions?.collections?.[collectionSlug]?.update !== false;
+
+  const handleCreate = () => {
+    if (!canCreate) return;
+    if (providedOnCreate) {
+      providedOnCreate();
+    } else {
+      window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
+    }
+  };
+
+  const handleEdit = (id: string) => {
+    if (providedOnEdit) {
+      providedOnEdit(id);
+    } else {
+      window.location.href = `${ADMIN_BASE}/${collectionSlug}/${id}`;
+    }
+  };
+
+  const [docs, setDocs] = useState<any[]>(initialDocs);
+  const [totalDocs, setTotalDocs] = useState(initialTotal);
+  const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [limit] = useState(25);
-  const [deleteId, setDeleteId] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [limit, setLimit] = useState(10);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
+  const [filters, setFilters] = useState<FilterConfig[]>([]);
+  const { confirm, alert } = useUIStore();
 
-  const label = collection.label || collection.slug;
+  const addFilter = () => {
+    setFilters([...filters, { field: "", operator: "equals", value: "" }]);
+  };
 
-  useEffect(() => {
-    loadDocs();
-  }, [page]);
+  const clearAll = () => {
+    setSearch("");
+    setFilters([]);
+    setSort(null);
+  };
+
+  const removeFilter = (index: number) => {
+    setFilters(filters.filter((_, i) => i !== index));
+  };
+
+  const updateFilter = (index: number, updates: Partial<FilterConfig>) => {
+    setFilters(filters.map((f, i) => (i === index ? { ...f, ...updates } : f)));
+  };
+  const [sort, setSort] = useState<SortConfig | null>(null);
+  const [showFilters, setShowFilters] = useState(false);
+  const [showColumns, setShowColumns] = useState(false);
+
+  function flattenFields(fields: FieldConfig[]): FieldConfig[] {
+    const result: FieldConfig[] = [];
+    for (const field of fields || []) {
+      if (!field.name || field.admin?.hidden || field.name === "id") continue;
+      if (field.type === "tabs" && field.tabs) {
+        for (const tab of field.tabs) {
+          if (tab.fields) {
+            result.push(...flattenFields(tab.fields));
+          }
+        }
+      } else if (
+        (field.type === "row" || field.type === "collapsible") &&
+        field.fields
+      ) {
+        result.push(...flattenFields(field.fields));
+      } else {
+        result.push(field);
+      }
+    }
+    return result;
+  }
+
+  const allFields = useMemo(
+    () => flattenFields(collection.fields),
+    [collection.fields],
+  );
+
+  const titleField: string | undefined =
+    typeof collection.admin?.useAsTitle === "string"
+      ? collection.admin.useAsTitle
+      : allFields.find((f) => f.type !== "group" && typeof f.name === "string")?.name;
+
+  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
+    let cols: string[];
+    if (collection.admin?.defaultColumns) {
+      cols = [...(collection.admin?.defaultColumns as string[] || [])];
+    } else {
+      cols = allFields.slice(0, 4).map((f) => f.name).filter((n): n is string => !!n);
+    }
+
+    if (titleField && cols.includes(titleField)) {
+      cols = [titleField, ...cols.filter((c) => c !== titleField)];
+    }
+
+    if (!cols.includes("updatedAt")) {
+      cols.push("updatedAt");
+    }
+
+    return new Set(cols);
+  });
+
+  const toggleColumn = useCallback((fieldName: string) => {
+    setVisibleColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) {
+        next.delete(fieldName);
+      } else {
+        next.add(fieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  function resolveSortField(fieldName: string): string {
+    const field = allFields.find((f) => f.name === fieldName);
+    if (!field) return fieldName;
+    if (field.type === "group" && field.fields?.[0]?.name) {
+      return `${fieldName}.${field.fields[0].name}`;
+    }
+    return fieldName;
+  }
+
+  const handleSort = useCallback((fieldName: string) => {
+    const resolvedField = resolveSortField(fieldName);
+    setSort((prev) => {
+      if (prev && prev.field === resolvedField) {
+        return {
+          field: resolvedField,
+          direction: prev.direction === "asc" ? "desc" : "asc",
+        };
+      }
+      return { field: resolvedField, direction: "asc" };
+    });
+  }, []);
+
+  const displayFields = useMemo(
+    () => allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name)),
+    [allFields, visibleColumns],
+  );
 
-  const loadDocs = async () => {
+  function fieldContainsTitle(field: FieldConfig): boolean {
+    if (!field.name || !titleField) return false;
+    if (field.name === titleField) return true;
+    if (field.type === "group" && field.fields?.[0]?.name === titleField)
+      return true;
+    return false;
+  }
+
+  function extractFieldValue(doc: any, field: FieldConfig): any {
+    if (!field.name) return null;
+    if (doc[field.name] !== undefined && doc[field.name] !== null) {
+      return doc[field.name];
+    }
+    if (field.type === "group" && typeof doc[field.name] === "object") {
+      const firstFieldName = field.fields?.[0]?.name;
+      if (
+        firstFieldName &&
+        doc[field.name][firstFieldName] !== undefined
+      ) {
+        return doc[field.name][firstFieldName];
+      }
+      const firstKey = Object.keys(doc[field.name] || {})[0];
+      if (firstKey) return doc[field.name][firstKey];
+    }
+    return null;
+  }
+
+  const fetchDocs = useCallback(async () => {
+    setLoading(true);
     try {
-      setLoading(true);
-      const result = await apiGet(
-        `/api/${collection.slug}?page=${page}&limit=${limit}`,
-      );
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString(),
+      });
+
+      if (search) params.append("search", search);
+      if (sort) params.append("sort", sort.field);
+      if (sort) params.append("order", sort.direction);
+      if (filters.length > 0) {
+        params.append("filters", JSON.stringify(filters));
+      }
+
+      const result = (await apiGet(
+        withCacheBust(`/api/${collectionSlug}?${params}`),
+        { autoToast: false },
+      ) as { docs?: Record<string, unknown>[]; totalDocs?: number });
       setDocs(result.docs || []);
-      setTotalPages(result.totalPages || 1);
+      setTotalDocs(result.totalDocs || 0);
     } catch (error) {
       console.error("Failed to load docs:", error);
     } finally {
       setLoading(false);
     }
-  };
+  }, [collectionSlug, page, limit, search, sort, filters]);
 
-  const filteredDocs = docs.filter((d) =>
-    Object.values(d).some((v) =>
-      String(v).toLowerCase().includes(searchQuery.toLowerCase()),
-    ),
-  );
+  // Initial fetch only if not provided with initialDocs or if empty
+  useEffect(() => {
+    if (docs.length === 0 && initialTotal === 0) {
+      fetchDocs();
+    }
+  }, []);
+
+  // Subsequent fetches on filter/pagination changes
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    fetchDocs();
+  }, [page, limit, search, sort, filters]);
 
-  const handleDelete = async (id: string) => {
-    setDeleteId(id);
+  const handleSelectAll = () => {
+    if (selectedIds.size === docs.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(docs.map((d) => d.id)));
+    }
   };
 
-  const confirmDelete = async () => {
-    if (!deleteId) return;
-    try {
-      await apiDelete(`/api/${collection.slug}/${deleteId}`);
-      setDocs((prev) => prev.filter((d) => d.id !== deleteId));
-    } catch (error) {
-      console.error("Failed to delete:", error);
+  const handleSelectOne = (id: string) => {
+    const newSet = new Set(selectedIds);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      newSet.add(id);
     }
-    setDeleteId(null);
+    setSelectedIds(newSet);
+  };
+
+  const handleBulkDelete = () => {
+    confirm({
+      title: "Delete Documents",
+      message: `Are you sure you want to delete ${selectedIds.size} document(s)? This cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          for (const id of Array.from(selectedIds)) {
+            await apiDelete(`/api/${collectionSlug}/${id}`);
+          }
+          setSelectedIds(new Set());
+          fetchDocs();
+        } catch (error) {
+          console.error("Bulk delete failed:", error);
+          alert({ title: "Error", message: "Failed to delete some documents" });
+        }
+      }
+    });
+  };
+
+  const handleDeleteSingle = (id: string) => {
+    confirm({
+      title: "Delete Document",
+      message: "Are you sure you want to delete this document? This cannot be undone.",
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          await apiDelete(`/api/${collectionSlug}/${id}`);
+          fetchDocs();
+        } catch (error) {
+          console.error("Delete failed:", error);
+          alert({ title: "Error", message: "Failed to delete document" });
+        }
+      }
+    });
   };
 
-  const columns =
-    collection.admin?.defaultColumns ||
-    Object.keys(collection.fields || {}).slice(0, 4);
+  const totalPages = Math.ceil(totalDocs / limit);
+  const hasActiveFilters = search || filters.length > 0 || sort;
 
   return (
-    <>
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 mb-8 pt-4">
-        <div>
-          <h2 className="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
-            {label}
-          </h2>
-          <p className="text-[11px] font-bold uppercase tracking-widest opacity-40 mt-1">
-            Manage and explore your {label.toLowerCase()} entries
-          </p>
-        </div>
+    <div className="space-y-6">
+      <PageHeader
+        title={collection.label || collectionSlug}
+        description={collection.admin?.description || `Manage your ${collection.label || collectionSlug}`}
+        metadata={totalDocs > 0 ? [
+          <span key="count" className="text-xs font-bold opacity-60">
+            {totalDocs} documents
+          </span>
+        ] : undefined}
+        action={canCreate ? {
+          label: `Create ${collection.singularLabel || collection.label || collectionSlug}`,
+          onClick: handleCreate,
+          icon: Plus,
+        } : undefined}
+
+      />
 
-        <div className="flex items-center gap-4 flex-1 max-w-2xl lg:justify-end">
-          <div className="relative flex-1 max-w-md group">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
-            <input
-              type="text"
-              placeholder={`Search ${label}...`}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] focus:border-[var(--kyro-primary)] transition-all text-sm font-medium"
+
+      {/* Toolbar */}
+      <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+        {/* Search */}
+        <div className="relative flex-1 max-w-md">
+          <svg
+            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)]"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
             />
-          </div>
+          </svg>
+          <input
+            type="text"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-sm font-medium text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+          />
+        </div>
+
+        <div className="flex items-center gap-2 flex-wrap">
+          {/* Filter Toggle */}
           <button
             type="button"
-            className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-black text-xs shadow-lg active:scale-95 transition-all"
-            onClick={onCreate}
+            onClick={() => setShowFilters(!showFilters)}
+            className={`flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm transition-all ${showFilters || filters.length > 0
+              ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+              : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+              }`}
           >
-            <Plus className="w-4 h-4" />
-            Create New
-          </button>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="kyro-loading">
-          <Spinner />
-        </div>
-      ) : docs.length === 0 ? (
-        <div className="kyro-card">
-          <div className="kyro-empty">
             <svg
-              className="kyro-empty-icon"
-              width="40"
-              height="40"
-              viewBox="0 0 24 24"
+              className="w-4 h-4"
               fill="none"
               stroke="currentColor"
-              strokeWidth="1.5"
+              viewBox="0 0 24 24"
             >
-              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+              />
             </svg>
-            <p className="kyro-empty-title">No {label.toLowerCase()} yet</p>
-            <p className="kyro-empty-text">
-              Get started by creating your first one.
-            </p>
+            Filters
+            {filters.length > 0 && (
+              <span className="ml-1 px-1.5 py-0.5 bg-[var(--kyro-sidebar-text-active)] text-[var(--kyro-sidebar-active)] rounded-full text-xs">
+                {filters.length}
+              </span>
+            )}
+          </button>
+
+          {/* Column Toggle */}
+          <div className="relative">
             <button
               type="button"
-              className="kyro-btn kyro-btn-primary kyro-btn-md"
-              style={{ marginTop: 16 }}
-              onClick={onCreate}
+              onClick={() => setShowColumns(!showColumns)}
+              className="flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
             >
-              Create {label}
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+                />
+              </svg>
+              Columns
             </button>
+            {showColumns && (
+              <div className="absolute right-0 top-full mt-2 w-56 surface-tile border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 overflow-hidden">
+                <div className="p-3 border-b border-[var(--kyro-border)]">
+                  <span className="text-xs font-bold  tracking-wider text-[var(--kyro-text-secondary)]">
+                    Toggle Columns
+                  </span>
+                </div>
+                <div className="p-2 max-h-64 overflow-y-auto">
+                  {allFields.map((field) => {
+                    if (!field.name) return null;
+                    return (
+                      <label
+                        key={field.name}
+                        className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={visibleColumns.has(field.name)}
+                          onChange={() => toggleColumn(field.name!)}
+                          className="w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)]"
+                        />
+                        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+                          {field.label || field.name}
+                        </span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
           </div>
+
+          {/* Clear All */}
+          {hasActiveFilters && (
+            <button
+              type="button"
+              onClick={clearAll}
+              className="px-4 py-2 rounded-xl font-bold text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all"
+            >
+              Clear All
+            </button>
+          )}
         </div>
-      ) : (
-        <div className="surface-tile overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
-          <table className="w-full border-collapse">
-            <thead>
-              <tr className="bg-[var(--kyro-bg-secondary)] text-[10px] font-black uppercase tracking-[0.2em] opacity-40 text-left">
-                <th className="px-6 py-4 w-12">
-                  <input
-                    type="checkbox"
-                    className="accent-[var(--kyro-primary)]"
-                    onChange={(e) => {
-                      if (e.target.checked)
-                        setSelectedIds(new Set(docs.map((d) => d.id)));
-                      else setSelectedIds(new Set());
-                    }}
-                  />
-                </th>
-                <th className="px-6 py-4">Document</th>
-                {columns
-                  .filter((c) => c !== "title" && c !== "name")
-                  .map((col) => (
-                    <th key={col} className="px-6 py-4">
-                      {col}
-                    </th>
+      </div>
+
+      {/* Filter Panel */}
+      {showFilters && (
+        <div className="surface-tile p-4 border-l-4 border-[var(--kyro-sidebar-active)]">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-medium text-[var(--kyro-text-primary)]">
+              Advanced Filters
+            </h3>
+            <button
+              type="button"
+              onClick={addFilter}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm font-bold text-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 5v14M5 12h14"
+                />
+              </svg>
+              Add Filter
+            </button>
+          </div>
+          <div className="space-y-3">
+            {filters.map((filter, index) => (
+              <div key={index} className="flex flex-wrap gap-2 items-center">
+                <select
+                  value={filter.field}
+                  onChange={(e) =>
+                    updateFilter(index, { field: e.target.value })
+                  }
+                  className="px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
+                >
+                  {allFields.map((field) => (
+                    <option key={field.name} value={field.name}>
+                      {field.label || field.name}
+                    </option>
                   ))}
-                <th key="status" className="px-6 py-4">
-                  Status
-                </th>
-                <th className="px-6 py-4 text-right">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[var(--kyro-border)]">
-              {filteredDocs.map((doc) => (
-                <tr
-                  key={doc.id}
-                  className={`group hover:bg-[var(--kyro-primary)] transition-all cursor-pointer ${selectedIds.has(doc.id) ? "bg-[var(--kyro-primary)]" : ""}`}
-                  onClick={() => onEdit(doc.id)}
+                </select>
+                <select
+                  value={filter.operator}
+                  onChange={(e) =>
+                    updateFilter(index, {
+                      operator: e.target.value as FilterConfig["operator"],
+                    })
+                  }
+                  className="px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
                 >
-                  <td
-                    className="px-6 py-5"
-                    onClick={(e) => e.stopPropagation()}
+                  <option value="equals">Equals</option>
+                  <option value="contains">Contains</option>
+                  <option value="gt">Greater than</option>
+                  <option value="lt">Less than</option>
+                  <option value="gte">Greater or equal</option>
+                  <option value="lte">Less or equal</option>
+                </select>
+                <input
+                  type="text"
+                  value={filter.value}
+                  onChange={(e) =>
+                    updateFilter(index, { value: e.target.value })
+                  }
+                  placeholder="Value..."
+                  className="flex-1 min-w-[150px] px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
+                />
+                <button
+                  type="button"
+                  onClick={() => removeFilter(index)}
+                  className="p-2 text-[var(--kyro-text-muted)] hover:text-red-500 transition-colors"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
                   >
-                    <input
-                      type="checkbox"
-                      checked={selectedIds.has(doc.id)}
-                      onChange={() => {
-                        const next = new Set(selectedIds);
-                        if (next.has(doc.id)) next.delete(doc.id);
-                        else next.add(doc.id);
-                        setSelectedIds(next);
-                      }}
-                      className="accent-[var(--kyro-primary)]"
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
                     />
-                  </td>
-                  <td className="px-6 py-5">
-                    <div className="flex flex-col">
-                      <span className="font-black text-sm group-hover:text-[var(--kyro-primary)] transition-colors">
-                        {doc.title || doc.name || doc.id}
-                      </span>
-                      <span className="text-[10px] font-bold opacity-30 uppercase tracking-widest mt-1">
-                        ID: {doc.id.slice(-8)}
-                      </span>
-                    </div>
-                  </td>
-                  {columns
-                    .filter((c) => c !== "title" && c !== "name")
-                    .map((col) => (
-                      <td
-                        key={col}
-                        className="px-6 py-5 text-sm font-medium text-[var(--kyro-text-secondary)]"
-                      >
-                        {formatValue(doc[col])}
-                      </td>
-                    ))}
-                  <td className="px-6 py-5">
-                    <span
-                      className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${doc.status === "published" ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"}`}
-                    >
-                      {doc.status || "draft"}
-                    </span>
-                  </td>
-                  <td
-                    className="px-6 py-5 text-right"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <button
-                        type="button"
-                        className="p-2 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-lg transition-all"
-                        onClick={() => onEdit(doc.id)}
-                        title="Edit"
-                      >
-                        <Settings className="w-4 h-4" />
-                      </button>
-                      <button
-                        type="button"
-                        className="p-2 text-red-500 hover:bg-red-500/10 rounded-lg transition-all"
-                        onClick={() => handleDelete(doc.id)}
-                        title="Delete"
-                      >
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        >
-                          <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                        </svg>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                  </svg>
+                </button>
+              </div>
+            ))}
+            {filters.length === 0 && (
+              <p className="text-sm text-[var(--kyro-text-muted)]">
+                No filters applied. Click "Add Filter" to create one.
+              </p>
+            )}
+          </div>
         </div>
       )}
 
+      {/* Bulk Actions */}
       {selectedIds.size > 0 && (
-        <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-3xl shadow-2xl p-4 flex items-center gap-8 animate-in slide-in-from-bottom-12 duration-500 ring-1 ring-white/10">
-          <div className="flex items-center gap-4 border-r border-[var(--kyro-border)] pr-8 ml-2">
-            <div className="w-10 h-10 rounded-2xl bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-black">
-              {selectedIds.size}
-            </div>
-            <div>
-              <p className="text-xs font-black uppercase tracking-widest">
-                Docs Selected
-              </p>
+        <div className="surface-tile p-4 flex items-center justify-between border-l-4 border-[var(--kyro-sidebar-active)]">
+          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+            {selectedIds.size} selected
+          </span>
+          <div className="flex gap-2">
+            {canDelete && (
               <button
                 type="button"
-                onClick={() => setSelectedIds(new Set())}
-                className="text-[10px] font-bold text-[var(--kyro-primary)] hover:underline"
+                onClick={handleBulkDelete}
+                className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg font-bold text-sm hover:bg-red-600 transition-all"
               >
-                Clear Selection
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="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"
+                  />
+                </svg>
+                Delete Selected
               </button>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 pr-2">
+            )}
             <button
               type="button"
-              className="flex items-center gap-2 px-6 py-2.5 bg-green-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-green-500/20 active:scale-95 transition-all"
+              onClick={() => setSelectedIds(new Set())}
+              className="px-4 py-2 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] font-bold text-sm transition-all"
             >
-              Publish
+              Cancel
             </button>
-            <button
-              type="button"
-              onClick={async () => {
-                if (
-                  window.confirm(
-                    `Are you sure you want to delete ${selectedIds.size} documents?`,
-                  )
-                ) {
-                  for (const id of Array.from(selectedIds)) {
-                    await apiDelete(`/api/${collection.slug}/${id}`);
-                  }
-                  loadDocs();
-                  setSelectedIds(new Set());
-                }
+          </div>
+        </div>
+      )}
+
+      {/* Data Table */}
+      <div className="surface-tile overflow-hidden">
+        {loading ? (
+          <div className="flex items-center justify-center py-20">
+            <Spinner />
+          </div>
+        ) : docs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 px-8">
+            <div className="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4">
+              <svg
+                className="w-8 h-8 text-[var(--kyro-text-muted)]"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="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"
+                />
+              </svg>
+            </div>
+            <p className="font-medium text-[var(--kyro-text-primary)] text-base">
+              No documents found
+            </p>
+            <p className="text-sm text-[var(--kyro-text-secondary)] mt-1">
+              {hasActiveFilters
+                ? "Try adjusting your filters or search query."
+                : `Get started by creating your first ${((collection.singularLabel || collection.label || collectionSlug) as string).toLowerCase()}.`}
+            </p>
+            {!hasActiveFilters && canCreate && (
+              <button
+                type="button"
+                onClick={handleCreate}
+                className="mt-4 kyro-btn kyro-btn-md kyro-btn-primary shadow-md flex items-center gap-2"
+              >
+                <svg
+                  className="w-3.5 h-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M12 5v14M5 12h14"
+                  />
+                </svg>
+                Create{" "}
+{String(collection.singularLabel || collection.label || collectionSlug)}
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left">
+              <thead>
+                <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]">
+                  <th className="px-4 py-4 w-10">
+                    <input
+                      type="checkbox"
+                      checked={
+                        selectedIds.size === docs.length && docs.length > 0
+                      }
+                      onChange={handleSelectAll}
+                      className="w-4 h-4 rounded border-[var(--kyro-border-strong)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)]"
+                    />
+                  </th>
+                  {displayFields.map((field) => (
+                    <th
+                      key={field.name}
+                      className="px-4 py-4 cursor-pointer hover:text-[var(--kyro-text-primary)] transition-colors"
+                      onClick={() => handleSort(field.name)}
+                    >
+                      <div className="flex items-center gap-2">
+                        {checkTabbedValue(displayFields, field.type) ??
+                          (field.label || field.name)}
+                        {sort && sort.field === field.name && (
+                          <svg
+                            className={`w-3 h-3 ${sort.direction === "desc" ? "rotate-180" : ""}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              d="M5 15l7-7 7 7"
+                            />
+                          </svg>
+                        )}
+                      </div>
+                    </th>
+                  ))}
+                  {collection.timestamps ? (
+                    <th className="px-4 py-4">Created</th>
+                  ) : null}
+                  <th className="px-4 py-4 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-[var(--kyro-border)]">
+                {docs.map((doc) => (
+                  <tr
+                    key={doc.id}
+                    className="hover:bg-[var(--kyro-surface-accent)] transition-colors cursor-pointer group"
+                    onClick={() => handleEdit(doc.id)}
+                  >
+                    <td
+                      className="px-4 py-3"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(doc.id)}
+                        onChange={() => handleSelectOne(doc.id)}
+                        className="w-4 h-4 rounded border-[var(--kyro-border-strong)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)]"
+                      />
+                    </td>
+                    {displayFields.map((field) => {
+                      const rawValue = extractFieldValue(doc, field);
+                      const cellValue =
+                        field.type === "select" && rawValue
+                          ? field.options?.find((o: any) => o.value === rawValue)
+                            ?.label || rawValue
+                          : formatCellValue(rawValue, field.type);
+                      return (
+                        <td
+                          key={field.name}
+                          className={`px-4 py-3 ${fieldContainsTitle(field) ? "font-medium text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
+                        >
+                          {cellValue}
+                        </td>
+                      );
+                    })}
+                    {collection.timestamps ? (
+                      <td className="px-4 py-3 text-sm text-[var(--kyro-text-secondary)]">
+                        {doc.createdAt
+                          ? new Date(doc.createdAt as string).toLocaleDateString(
+                            "en-US",
+                            {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            },
+                          )
+                          : "—"}
+                      </td>
+                    ) : null}
+                    <td
+                      className="px-4 py-3 text-right"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          type="button"
+                          onClick={() => handleEdit(doc.id)}
+                          className="flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
+                          title={canUpdate ? "Edit" : "View"}
+                        >
+                          <svg
+                            className="w-4 h-4"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="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"
+                            />
+                          </svg>
+                        </button>
+                        {canDelete && (
+                          <button
+                            type="button"
+                            onClick={() => handleDeleteSingle(doc.id)}
+                            className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[var(--kyro-text-muted)] hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 transition-colors"
+                            title="Delete"
+                          >
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="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"
+                              />
+                            </svg>
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalDocs > limit && (
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-4 px-2">
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-[var(--kyro-text-secondary)] font-medium">
+              Showing{" "}
+              <span className="text-[var(--kyro-text-primary)] font-bold">
+                {(page - 1) * limit + 1}
+              </span>{" "}
+              to{" "}
+              <span className="text-[var(--kyro-text-primary)] font-bold">
+                {Math.min(page * limit, totalDocs)}
+              </span>{" "}
+              of{" "}
+              <span className="text-[var(--kyro-text-primary)] font-bold">
+                {totalDocs}
+              </span>
+            </span>
+            <select
+              value={limit}
+              onChange={(e) => {
+                setLimit(Number(e.target.value));
+                setPage(1);
               }}
-              className="flex items-center gap-2 px-6 py-2.5 bg-red-500 text-white rounded-xl font-black text-[10px] uppercase tracking-widest shadow-lg hover:shadow-red-500/20 active:scale-95 transition-all"
+              className="px-2 py-1 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
             >
-              Delete
-            </button>
+              <option value={10}>10 / page</option>
+              <option value={25}>25 / page</option>
+              <option value={50}>50 / page</option>
+              <option value={100}>100 / page</option>
+            </select>
+          </div>
+          <div className="flex gap-2">
+            {page > 1 && (
+              <button
+                type="button"
+                onClick={() => setPage(page - 1)}
+                className="px-4 py-2 border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+              >
+                ← Previous
+              </button>
+            )}
+            {page < totalPages && (
+              <button
+                type="button"
+                onClick={() => setPage(page + 1)}
+                className="px-4 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg text-sm font-bold hover:opacity-90 transition-all"
+              >
+                Next →
+              </button>
+            )}
           </div>
         </div>
       )}
-      <ConfirmModal
-        open={!!deleteId}
-        onClose={() => setDeleteId(null)}
-        onConfirm={confirmDelete}
-        title="Delete Document"
-        message="Are you sure you want to delete this document? This cannot be undone."
-        confirmLabel="Delete"
-        variant="danger"
-      />
-    </>
+    </div>
   );
 }
 
-function formatValue(value: any): string {
+function formatCellValue(value: any, type?: string): string {
   if (value === null || value === undefined) return "—";
   if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (type === "number" || type === "price") return String(value);
+  if (type === "date" || type === "datetime") {
+    return new Date(value).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  }
+
   if (typeof value === "object") {
     if (value.title) return value.title;
     if (value.name) return value.name;
+    if (value.email) return value.email;
     return JSON.stringify(value).slice(0, 50);
   }
-  return String(value).slice(0, 50);
+  return String(value).slice(0, 60);
+}
+
+function checkTabbedValue(data: any[], type: string): string | undefined {
+  if (type !== "tabs") return;
+  const label = data[0]?.tabs?.[0]?.fields?.[0]?.label;
+  return label;
 }