@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/ListView.tsx

@@ -1,17 +1,20 @@
+import { Search, Filter, Columns3, X, Trash2, Archive, ChevronUp, Edit2 } from "./ui/icons";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { Plus } from "./ui/icons";
 import { apiGet, apiDelete, withCacheBust } from "../lib/api";
 
-import { useAuthStore } from "../lib/stores";
+import { useAuthStore, toast } 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 { Pagination } from "./ui/Pagination";
 
 
 import type { CollectionConfig, Field } from "@kyro-cms/core";
+import { resolveFieldValue } from "../lib/resolve-field-value";
 
 type FieldConfig = Field;
 
@@ -114,7 +117,7 @@ export function ListView({
   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.name || field.hidden === true || field.admin?.hidden || field.name === "id") continue;
       if (field.type === "tabs" && field.tabs) {
         for (const tab of field.tabs) {
           if (tab.fields) {
@@ -197,7 +200,21 @@ export function ListView({
   }, []);
 
   const displayFields = useMemo(
-    () => allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name)),
+    () => {
+      const fields = allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name));
+      if (visibleColumns.has("status")) {
+        fields.push({
+          name: "status",
+          type: "select",
+          label: "Status",
+          options: [
+            { value: "draft", label: "Draft" },
+            { value: "published", label: "Published" },
+          ],
+        } as any);
+      }
+      return fields;
+    },
     [allFields, visibleColumns],
   );
 
@@ -211,21 +228,8 @@ export function ListView({
 
   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 val = resolveFieldValue(collection.fields as any, doc, field.name);
+    return val ?? null;
   }
 
   const fetchDocs = useCallback(async () => {
@@ -303,9 +307,10 @@ export function ListView({
           }
           setSelectedIds(new Set());
           fetchDocs();
+          toast.success("Documents deleted");
         } catch (error) {
           console.error("Bulk delete failed:", error);
-          alert({ title: "Error", message: "Failed to delete some documents" });
+          toast.error("Failed to delete some documents");
         }
       }
     });
@@ -320,9 +325,10 @@ export function ListView({
         try {
           await apiDelete(`/api/${collectionSlug}/${id}`);
           fetchDocs();
+          toast.success("Document deleted");
         } catch (error) {
           console.error("Delete failed:", error);
-          alert({ title: "Error", message: "Failed to delete document" });
+          toast.error("Failed to delete document");
         }
       }
     });
@@ -354,19 +360,7 @@ export function ListView({
       <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>
+          <Search className="w-4 h-4" />
           <input
             type="text"
             placeholder="Search..."
@@ -386,19 +380,7 @@ export function ListView({
               : "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>
+            <Filter className="w-4 h-4" />
             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">
@@ -414,19 +396,7 @@ export function ListView({
               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>
+              <Columns3 className="w-4 h-4" />
               Columns
             </button>
             {showColumns && (
@@ -486,19 +456,7 @@ export function ListView({
               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>
+              <Plus className="w-4 h-4" />
               Add Filter
             </button>
           </div>
@@ -548,19 +506,7 @@ export function ListView({
                   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>
+                  <X className="w-4 h-4" />
                 </button>
               </div>
             ))}
@@ -586,19 +532,7 @@ export function ListView({
                 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>
+                <Trash2 className="w-4 h-4" />
                 Delete Selected
               </button>
             )}
@@ -622,19 +556,7 @@ export function ListView({
         ) : 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>
+              <Archive className="w-4 h-4" />
             </div>
             <p className="font-medium text-[var(--kyro-text-primary)] text-base">
               No documents found
@@ -650,19 +572,7 @@ export function ListView({
                 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>
+                <Plus className="w-4 h-4" />
                 Create{" "}
 {String(collection.singularLabel || collection.label || collectionSlug)}
               </button>
@@ -693,19 +603,7 @@ export function ListView({
                         {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>
+                          <ChevronUp className="w-4 h-4" />
                         )}
                       </div>
                     </th>
@@ -775,19 +673,7 @@ export function ListView({
                           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>
+                          <Edit2 className="w-4 h-4" />
                         </button>
                         {canDelete && (
                           <button
@@ -796,19 +682,7 @@ export function ListView({
                             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>
+                            <Trash2 className="w-4 h-4" />
                           </button>
                         )}
                       </div>
@@ -822,59 +696,17 @@ export function ListView({
       </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-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>
-      )}
+      <Pagination
+        page={page}
+        totalPages={totalPages}
+        totalDocs={totalDocs}
+        limit={limit}
+        onPageChange={setPage}
+        onLimitChange={(newLimit) => {
+          setLimit(newLimit);
+          setPage(1);
+        }}
+      />
     </div>
   );
 }
@@ -891,6 +723,15 @@ function formatCellValue(value: any, type?: string): string {
     });
   }
 
+  if (Array.isArray(value)) {
+    return value.map(item => {
+      if (item && typeof item === "object") {
+        return item.title || item.name || item.email || item.filename || item.url || JSON.stringify(item).slice(0, 30);
+      }
+      return String(item ?? "").slice(0, 30);
+    }).filter(Boolean).join(", ");
+  }
+
   if (typeof value === "object") {
     if (value.title) return value.title;
     if (value.name) return value.name;