@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/EnhancedListView.tsx

@@ -1,889 +0,0 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-import { Spinner } from "./ui/Spinner";
-import { ConfirmModal } from "./ui/Modal";
-import { apiGet, apiDelete, withCacheBust } from "../lib/api";
-
-export interface FieldConfig {
-  name: string;
-  type: string;
-  label?: string;
-  required?: boolean;
-  options?: { value: string; label: string }[];
-  fields?: FieldConfig[];
-  tabs?: Array<{ label?: string; name?: string; fields?: FieldConfig[] }>;
-  admin?: {
-    hidden?: boolean;
-    readonly?: boolean;
-  };
-}
-
-export interface CollectionConfig {
-  slug: string;
-  label?: string;
-  singularLabel?: string;
-  fields: FieldConfig[];
-  timestamps?: boolean;
-  admin?: {
-    description?: string;
-    defaultColumns?: string[];
-    useAsTitle?: 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);
-
-  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 [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
-    if (collection.admin?.defaultColumns) {
-      return new Set(collection.admin.defaultColumns);
-    }
-    const defaultCols = allFields.slice(0, 4).map((f) => f.name);
-    return new Set(defaultCols);
-  });
-
-  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 [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 titleField =
-    collection.admin?.useAsTitle ||
-    allFields.find((f) => f.type !== "group")?.name;
-
-  function fieldContainsTitle(field: FieldConfig): boolean {
-    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 (doc[field.name] !== undefined && doc[field.name] !== null) {
-      return doc[field.name];
-    }
-    if (field.type === "group" && typeof doc[field.name] === "object") {
-      if (
-        field.fields?.[0]?.name &&
-        doc[field.name][field.fields[0].name] !== undefined
-      ) {
-        return doc[field.name][field.fields[0].name];
-      }
-      const firstKey = Object.keys(doc[field.name])[0];
-      if (firstKey) return doc[field.name][firstKey];
-    }
-    return null;
-  }
-
-  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 result = await apiGet(
-        withCacheBust(`/api/${collectionSlug}?${params}`),
-      );
-      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) =>
-          apiDelete(`/api/${collectionSlug}/${id}`),
-        ),
-      );
-      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-lg 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) => {
-                      const rawValue = extractFieldValue(doc, field);
-                      const cellValue =
-                        field.type === "select" && rawValue
-                          ? field.options?.find((o) => o.value === rawValue)
-                              ?.label || rawValue
-                          : formatCellValue(rawValue, field.type);
-                      return (
-                        <td
-                          key={field.name}
-                          className={`px-4 py-3 ${fieldContainsTitle(field) ? "font-bold 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).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 apiDelete(`/api/${collectionSlug}/${id}`);
-      }
-      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;
-}