@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/EnhancedListView.tsx

@@ -0,0 +1,786 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Spinner } from "./ui/Spinner";
+import { ConfirmModal } from "./ui/Modal";
+
+export interface FieldConfig {
+  name: string;
+  type: string;
+  label?: string;
+  required?: boolean;
+  options?: { value: string; label: string }[];
+  admin?: {
+    hidden?: boolean;
+    readonly?: boolean;
+  };
+}
+
+export interface CollectionConfig {
+  slug: string;
+  label?: string;
+  singularLabel?: string;
+  fields: FieldConfig[];
+  timestamps?: boolean;
+  admin?: {
+    description?: string;
+    defaultColumns?: string[];
+  };
+}
+
+interface FilterConfig {
+  field: string;
+  operator:
+  | "equals"
+  | "contains"
+  | "gt"
+  | "lt"
+  | "gte"
+  | "lte"
+  | "between"
+  | "in";
+  value: string;
+}
+
+interface SortConfig {
+  field: string;
+  direction: "asc" | "desc";
+}
+
+interface EnhancedListViewProps {
+  collection: CollectionConfig;
+  collectionSlug: string;
+  initialDocs?: any[];
+  initialTotal?: number;
+}
+
+export function EnhancedListView({
+  collection,
+  collectionSlug,
+  initialDocs = [],
+  initialTotal = 0,
+}: EnhancedListViewProps) {
+  const onCreate = () => (window.location.href = `/${collectionSlug}/new`);
+  const onEdit = (id: string) =>
+    (window.location.href = `/${collectionSlug}/${id}`);
+  const [docs, setDocs] = useState<any[]>(initialDocs);
+  const [totalDocs, setTotalDocs] = useState(initialTotal);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
+  const [filters, setFilters] = useState<FilterConfig[]>([]);
+
+  const addFilter = () => {
+    setFilters([...filters, { field: "", operator: "equals", value: "" }]);
+  };
+
+  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);
+
+  const allFields = useMemo(
+    () =>
+      collection.fields.filter(
+        (f) => f.name && !f.admin?.hidden && f.name !== "id",
+      ),
+    [collection.fields],
+  );
+
+  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
+    const defaultCols = allFields.slice(0, 4).map((f) => f.name);
+    return new Set(defaultCols);
+  });
+
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    open: boolean;
+    count: number;
+    ids?: string[];
+  }>({ open: false, count: 0 });
+
+  const displayFields = useMemo(
+    () => allFields.filter((f) => visibleColumns.has(f.name)),
+    [allFields, visibleColumns],
+  );
+
+  const fetchDocs = useCallback(async () => {
+    setLoading(true);
+    try {
+      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 response = await fetch(
+        `/api/${collectionSlug}?${params}&t=${Date.now()}`,
+      );
+      if (!response.ok) throw new Error("Failed to load");
+      const result = await response.json();
+      setDocs(result.docs || []);
+      setTotalDocs(result.totalDocs || 0);
+    } catch (error) {
+      console.error("Failed to load docs:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [collectionSlug, page, limit, search, sort, filters]);
+
+  useEffect(() => {
+    fetchDocs();
+  }, [fetchDocs]);
+
+  const handleSelectAll = () => {
+    if (selectedIds.size === docs.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(docs.map((d) => d.id)));
+    }
+  };
+
+  const handleSelectOne = (id: string) => {
+    const newSet = new Set(selectedIds);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      newSet.add(id);
+    }
+    setSelectedIds(newSet);
+  };
+
+  const handleBulkDelete = async () => {
+    setDeleteConfirm({ open: true, count: selectedIds.size });
+  };
+
+  const confirmBulkDelete = async () => {
+    try {
+      await Promise.all(
+        Array.from(selectedIds).map((id) =>
+          fetch(`/api/${collectionSlug}/${id}`, { method: "DELETE" }),
+        ),
+      );
+      setSelectedIds(new Set());
+      fetchDocs();
+    } catch (error) {
+      console.error("Bulk delete failed:", error);
+    }
+    setDeleteConfirm({ open: false, count: 0 });
+  };
+
+  const totalPages = Math.ceil(totalDocs / limit);
+  const hasActiveFilters = search || filters.length > 0 || sort;
+
+
+  return (
+    <div className="space-y-6">
+      <ConfirmModal
+        open={deleteConfirm.open}
+        onClose={() => setDeleteConfirm({ open: false, count: 0 })}
+        onConfirm={confirmBulkDelete}
+        title="Delete Documents"
+        message={`Are you sure you want to delete ${deleteConfirm.count} document(s)? This cannot be undone.`}
+        confirmLabel="Delete"
+        variant="danger"
+      />
+      {/* Header */}
+      <div className="surface-tile p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-[var(--kyro-text-primary)]">
+            {collection.label || collectionSlug}
+          </h1>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mt-1">
+            {collection.admin?.description ||
+              `Manage your ${collection.label || collectionSlug}`}
+            {totalDocs > 0 && (
+              <span className="ml-2 font-bold">· {totalDocs} documents</span>
+            )}
+          </p>
+        </div>
+        <button type="button"
+          onClick={onCreate}
+          className="flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2.5"
+              d="M12 5v14M5 12h14"
+            />
+          </svg>
+          Create{" "}
+          {collection.singularLabel || collection.label || collectionSlug}
+        </button>
+      </div>
+
+      {/* 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"
+            />
+          </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"
+            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)]"
+              }`}
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <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>
+            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"
+              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"
+            >
+              <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-xl shadow-xl z-50 overflow-hidden">
+                <div className="p-3 border-b border-[var(--kyro-border)]">
+                  <span className="text-xs font-bold uppercase tracking-wider text-[var(--kyro-text-secondary)]">
+                    Toggle Columns
+                  </span>
+                </div>
+                <div className="p-2 max-h-64 overflow-y-auto">
+                  {allFields.map((field) => (
+                    <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>
+
+      {/* 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-bold 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>
+                  ))}
+                </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)]"
+                >
+                  <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"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </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="surface-tile p-4 flex items-center justify-between border-l-4 border-[var(--kyro-sidebar-active)]">
+          <span className="text-sm font-bold text-[var(--kyro-text-primary)]">
+            {selectedIds.size} selected
+          </span>
+          <div className="flex gap-2">
+            <button type="button"
+              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"
+            >
+              <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>
+            <button type="button"
+              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"
+            >
+              Cancel
+            </button>
+          </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-bold 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).toLowerCase()}.`}
+            </p>
+            {!hasActiveFilters && (
+              <button type="button"
+                onClick={onCreate}
+                className="mt-4 inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm shadow-md"
+              >
+                <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{" "}
+                {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] uppercase 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?.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>
+                  )}
+                  <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.slug}
+                    className="hover:bg-[var(--kyro-surface-accent)] transition-colors cursor-pointer group"
+                    onClick={() => onEdit(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, i) => (
+                      <td
+                        key={field.name}
+                        className={`px-4 py-3 ${i === 0 ? "font-bold text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
+                      >
+                        {field.type === "select" && doc[field.name]
+                          ? field.options?.find(
+                            (o) => o.value === doc[field.name],
+                          )?.label || (doc[field.name])
+                          : formatCellValue(doc[field.name], field.type)}
+                      </td>
+                    ))}
+                    {collection.timestamps && (
+                      <td className="px-4 py-3 text-sm text-[var(--kyro-text-secondary)]">
+                        {doc.createdAt
+                          ? new Date(doc.createdAt).toLocaleDateString(
+                            "en-US",
+                            {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            },
+                          )
+                          : "—"}
+                      </td>
+                    )}
+                    <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={() => onEdit(doc.slug || 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="Edit"
+                        >
+                          <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>
+                        <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="px-2 py-1 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
+            >
+              <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-bold 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>
+      )}
+    </div>
+  );
+
+  async function handleDeleteSingle(id: string) {
+    setDeleteConfirm({ open: true, count: 1, ids: [id] });
+  }
+
+  const confirmDelete = async () => {
+    try {
+      for (const id of deleteConfirm.ids || []) {
+        await fetch(`/api/${collectionSlug}/${id}`, { method: "DELETE" });
+      }
+      fetchDocs();
+    } catch (error) {
+      console.error("Delete failed:", error);
+    }
+    setDeleteConfirm({ open: false, count: 0 });
+  };
+}
+
+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, 60);
+}
+
+
+function checkTabbedValue(data: any[], type: string): string | undefined {
+  if (type !== "tabs") return;
+  const label = data[0]?.tabs[0]?.fields[0]?.label;
+  return label;
+}