@dyrected/admin 1.0.1

package/src/pages/collections/edit-page.tsx

@@ -0,0 +1,280 @@
+import { useState, useEffect } from "react"
+import { toast } from "sonner"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useDyrected } from "../../providers/dyrected-provider"
+import { FormEngine } from "../../components/forms/form-engine"
+import { useNavigate, useParams } from "react-router-dom"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "../../components/ui/button"
+import { Badge } from "../../components/ui/badge"
+import { cn } from "../../lib/utils"
+import { Archive, Eye, EyeOff, Save } from "lucide-react"
+import { LivePreviewPane } from "../../components/live-preview/LivePreviewPane"
+import jexl from 'jexl'
+
+export function EditEntryPage() {
+  const { slug, id } = useParams()
+  const { client } = useDyrected()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [showPreview, setShowPreview] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
+  const [previewData, setPreviewData] = useState<any>(null)
+  const isEdit = !!id
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault()
+        e.returnValue = ""
+      }
+    }
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
+  }, [isDirty])
+
+  // Cmd+S to save
+  useEffect(() => {
+    const handleSave = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault()
+        document.getElementById('dyrected-form-submit')?.click()
+      }
+    }
+    window.addEventListener("keydown", handleSave)
+    return () => window.removeEventListener("keydown", handleSave)
+  }, [])
+
+  // Fetch schema
+  const { data: schemas } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: () => client!.getSchemas(),
+    enabled: !!client,
+  })
+
+  const schema = schemas?.collections.find((c: any) => c.slug === slug)
+
+  // Effect to default preview if available
+  useEffect(() => {
+    if (schema?.admin?.previewUrl) {
+      setShowPreview(true)
+    }
+  }, [schema])
+
+  // Fetch entry data if in edit mode
+  const { data: entry, isLoading: isEntryLoading } = useQuery({
+    queryKey: ["entry", slug, id],
+    queryFn: () => client!.collection(slug!).findOne(id!),
+    enabled: !!client && isEdit,
+  })
+
+  useEffect(() => {
+    if (entry) {
+      setPreviewData(entry)
+    }
+  }, [entry])
+
+  const saveMutation = useMutation({
+    mutationFn: (data: any) => {
+      if (isEdit) {
+        return client!.collection(slug!).update(id!, data)
+      } else {
+        return client!.collection(slug!).create(data)
+      }
+    },
+    onSuccess: (data: any) => {
+      setIsDirty(false)
+      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
+      if (isEdit) {
+        queryClient.invalidateQueries({ queryKey: ["entry", slug, id] })
+      }
+
+      toast.success(isEdit ? "Entry updated successfully" : "Entry created successfully", {
+        description: `${schema.label || schema.slug} has been saved.`
+      })
+
+      if (!isEdit && data?.id) {
+        navigate(`/collections/${slug}/edit/${data.id}`, { replace: true })
+      }
+    },
+    onError: (error: any) => {
+      toast.error("Failed to save entry", {
+        description: error.message || "An unexpected error occurred."
+      })
+    }
+  })
+
+  if (!schema) return <div>Collection not found</div>
+  if (isEdit && isEntryLoading) return <div>Loading entry...</div>
+
+  const hasStatus = schema?.fields.some((f: any) => f.name === "status")
+  const currentStatus = entry?.status || "draft"
+
+  let previewUrl = typeof schema.admin?.previewUrl === 'function'
+    ? schema.admin.previewUrl(previewData || entry, { locale: 'en' })
+    : schema.admin?.previewUrl
+
+  if (typeof previewUrl === 'string' && previewUrl.includes('{{')) {
+    previewUrl = previewUrl.replace(/{{(.*?)}}/g, (_, key) => entry?.[key.trim()] || "")
+  } else if (typeof previewUrl === 'string' && (previewData || entry)) {
+    try {
+      // Provide current window origin to Jexl context so users can use it in expressions
+      const context = { ...(previewData || entry), siteUrl: window.location.origin };
+
+      if (previewUrl.includes('+') || previewUrl.includes('?') || previewUrl.includes('==') || previewUrl.includes('siteUrl')) {
+        previewUrl = jexl.evalSync(previewUrl, context)
+      }
+    } catch (e) {
+      console.error("[PreviewDebug] Jexl Evaluation Failed:", e)
+    }
+  }
+
+  // If the resolved URL is relative, prepend the current origin
+  if (typeof previewUrl === 'string' && previewUrl.startsWith('/')) {
+    previewUrl = `${window.location.origin}${previewUrl}`
+  }
+
+  const canCreate = (schema.access as any)?.create !== false
+  const canUpdate = (schema.access as any)?.update !== false
+
+  return (
+    <div className="flex h-[calc(100vh-0px)] overflow-hidden -mt-6 -mx-4 lg:-mt-10 lg:-mx-6">
+      {/* Left Column: Header + Form */}
+      <div className={cn(
+        "flex-1 overflow-y-auto px-6 py-6 lg:px-10 lg:py-10 transition-all duration-500",
+        showPreview ? "max-w-2xl xl:max-w-3xl" : "max-w-5xl mx-auto w-full"
+      )}>
+        <div className="space-y-8">
+          {/* Header */}
+          <div className="flex items-center justify-between gap-4 border-b border-border/50 pb-6">
+            <div className="flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 rounded-lg hover:bg-muted shrink-0"
+                onClick={() => navigate(`/collections/${slug}`)}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <div>
+                <div className="flex items-center gap-3">
+                  <h1 className="text-lg font-serif font-bold tracking-tight text-foreground truncate">
+                    {isEdit ? `Edit ${schema.label || schema.slug}` : `New ${schema.label || schema.slug}`}
+                  </h1>
+                  {hasStatus && (
+                    <Badge className={cn(
+                      "px-2 py-0 rounded-full text-[10px] font-bold uppercase tracking-wider",
+                      currentStatus === "published" ? "bg-emerald-100 text-emerald-700 border-emerald-200" : "bg-amber-100 text-amber-700 border-amber-200"
+                    )} variant="outline">
+                      {currentStatus === "published" ? "Live" : "Draft"}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {previewUrl && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    "h-9 w-9 rounded-lg transition-colors",
+                    showPreview ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-muted"
+                  )}
+                  onClick={() => setShowPreview(!showPreview)}
+                  title={showPreview ? "Hide Preview" : "Live Preview"}
+                >
+                  {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </Button>
+              )}
+              <Button
+                size="icon"
+                className="h-9 w-9 rounded-lg shadow-sm"
+                onClick={() => document.getElementById('dyrected-form-submit')?.click()}
+                disabled={saveMutation.isPending || (isEdit ? !canUpdate : !canCreate)}
+                title={isEdit ? "Save Changes (⌘S)" : "Create Entry (⌘S)"}
+              >
+                {saveMutation.isPending ? (
+                  <div className="h-4 w-4 animate-spin border-2 border-current border-t-transparent rounded-full" />
+                ) : (
+                  <Save className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Form */}
+          <div className="animate-in space-y-8 pb-20">
+            {!canUpdate && isEdit && (
+              <div className="p-4 rounded-lg bg-amber-50 border border-amber-200 text-amber-800 text-sm flex items-center gap-3">
+                <Archive className="h-4 w-4" />
+                You have read-only access to this collection.
+              </div>
+            )}
+            <FormEngine
+              collection={slug!}
+              fields={schema.fields}
+              defaultValues={entry}
+              onSubmit={(data) => saveMutation.mutate(data)}
+              onDataChange={(newData) => setPreviewData({ ...entry, ...newData })}
+              onChange={(dirty) => setIsDirty(dirty)}
+              isLoading={saveMutation.isPending}
+              submitLabel={isEdit ? "Save Changes" : "Create Entry"}
+              readOnly={isEdit ? !canUpdate : !canCreate}
+            />
+            <button id="dyrected-form-submit" type="submit" className="hidden" />
+
+            {/* Document Meta */}
+            <div className="pt-8 border-t border-border/40">
+              <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
+                <div className="space-y-1">
+                  <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Document ID</p>
+                  <code className="text-xs font-mono text-muted-foreground/80 select-all">
+                    {isEdit ? id : "Pending..."}
+                  </code>
+                </div>
+
+                {isEdit && (
+                  <>
+                    <div className="space-y-1">
+                      <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Created At</p>
+                      <p className="text-xs font-medium text-muted-foreground/80">
+                        {entry?.createdAt ? new Date(entry.createdAt).toLocaleString() : 'N/A'}
+                      </p>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Last Updated</p>
+                      <p className="text-xs font-medium text-muted-foreground/80">
+                        {entry?.updatedAt ? new Date(entry.updatedAt).toLocaleString() : 'N/A'}
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Column: Preview (starts from top) */}
+      {previewUrl && (
+        <div className={cn(
+          "hidden lg:block border-l border-border/50 bg-muted/5 transition-all duration-500 overflow-hidden",
+          showPreview ? "flex-1 opacity-100" : "w-0 opacity-0 border-l-0"
+        )}>
+          {/* We use negative margins to pull the preview up and out to the shell's padding edges if possible, 
+              but since we're inside a parent with padding, we'll just make it height-full.
+          */}
+          <div className="h-full">
+            <LivePreviewPane
+              previewUrl={previewUrl}
+              data={previewData || entry}
+              mode={schema.admin?.previewMode}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/pages/collections/list-page.tsx

@@ -0,0 +1,343 @@
+import * as React from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { Link } from "react-router-dom"
+import { useDyrected } from "../../providers/dyrected-provider"
+import { DataTable } from "../../components/ui/data-table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Badge } from "../../components/ui/badge"
+import { Button } from "../../components/ui/button"
+import { Checkbox } from "../../components/ui/checkbox"
+import {
+  MoreHorizontal,
+  Plus,
+  Pencil,
+  Trash2,
+  Calendar,
+  Database,
+  Image as ImageIcon,
+} from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu"
+import { RenderCell } from "../../components/ui/render-cell"
+import { PageHeader } from "../../components/ui/page-header"
+import { Pagination } from "../../components/ui/pagination"
+import { MediaGrid } from "../../components/media/media-grid"
+
+interface CollectionListPageProps {
+  slug: string
+}
+
+export function CollectionListPage({ slug }: CollectionListPageProps) {
+  const { client } = useDyrected()
+  const queryClient = useQueryClient()
+  const [page, setPage] = React.useState(1)
+
+  // Reset to page 1 when collection slug changes
+  React.useEffect(() => { setPage(1) }, [slug])
+
+  // Fetch schema to know fields
+  const { data: schemas } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: () => client!.getSchemas(),
+    enabled: !!client,
+  })
+
+  const schema = schemas?.collections.find((c: any) => c.slug === slug)
+
+  // Fetch collection data
+  const { data: response, isLoading } = useQuery({
+    queryKey: ["collection", slug, page],
+    queryFn: () => client!.collection(slug).find({ page, limit: 20, depth: 1 }).exec(),
+    enabled: !!client,
+  })
+
+  const totalPages = response?.totalPages ?? 1
+  const hasNextPage = page < totalPages
+  const hasPrevPage = page > 1
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => client!.collection(slug).delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
+      setRowSelection({})
+      toast.success("Entry deleted successfully")
+    },
+    onError: (error: any) => {
+      toast.error("Failed to delete entry", {
+        description: error.message
+      })
+    }
+  })
+
+  const bulkDeleteMutation = useMutation({
+    mutationFn: async (ids: string[]) => {
+      for (const id of ids) {
+        await client!.collection(slug).delete(id)
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["collection", slug] })
+      setRowSelection({})
+      toast.success("Selected entries deleted")
+    },
+    onError: (error: any) => {
+      toast.error("Failed to delete entries", {
+        description: error.message
+      })
+    }
+  })
+
+  function handleDelete(id: string) {
+    if (window.confirm("Delete this entry? This cannot be undone.")) {
+      deleteMutation.mutate(id)
+    }
+  }
+
+  function handleBulkDelete(ids: string[]) {
+    if (window.confirm(`Delete ${ids.length} entries? This cannot be undone.`)) {
+      bulkDeleteMutation.mutate(ids)
+    }
+  }
+
+  const [rowSelection, setRowSelection] = React.useState<Record<string, boolean>>({})
+
+  const columns: ColumnDef<any>[] = React.useMemo(() => {
+    if (!schema) return []
+
+    const cols: ColumnDef<any>[] = [
+      {
+        id: "select",
+        header: ({ table }) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label="Select all"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label="Select row"
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      },
+      {
+        accessorKey: "id",
+        header: "ID",
+        cell: ({ row }) => <span className="font-mono text-xs">{row.getValue("id")}</span>,
+      },
+    ]
+
+    const hasStatus = schema.fields.some((f: any) => f.name === "status")
+
+    if (hasStatus) {
+      cols.push({
+        accessorKey: "status",
+        header: "Status",
+        cell: ({ row }) => {
+          const status = row.getValue("status")
+          return (
+            <Badge variant={status === "published" ? "default" : "secondary"}>
+              {status === "published" ? "Published" : "Draft"}
+            </Badge>
+          )
+        }
+      })
+    }
+
+    // Include all non-hidden fields as columns
+    const allDisplayFields = schema.fields.filter((f: any) => f.name !== "status" && !f.admin?.hidden)
+
+    allDisplayFields.forEach((field: any) => {
+      cols.push({
+        accessorKey: field.name,
+        header: field.label || field.name,
+        cell: ({ row }) => (
+          <RenderCell
+            value={row.getValue(field.name)}
+            field={field}
+            client={client}
+            schemas={schemas}
+          />
+        ),
+      })
+    })
+
+    // Add metadata columns
+    cols.push({
+      accessorKey: "updatedAt",
+      header: "Last Updated",
+      cell: ({ row }) => {
+        const date = new Date(row.getValue("updatedAt"))
+        return (
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Calendar className="h-3 w-3" />
+            <span className="text-xs">{date.toLocaleDateString()}</span>
+          </div>
+        )
+      }
+    })
+
+    // Actions
+    cols.push({
+      id: "actions",
+      cell: ({ row }) => {
+        const item = row.original
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => navigator.clipboard.writeText(item.id)}>
+                Copy ID
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <Link to={`/collections/${slug}/edit/${item.id}`}>
+                <DropdownMenuItem className="flex gap-2">
+                  <Pencil className="h-4 w-4" />
+                  Edit
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuItem
+                className="flex gap-2 text-destructive focus:text-destructive"
+                onClick={() => handleDelete(item.id)}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="h-4 w-4" />
+                {deleteMutation.isPending ? "Deleting..." : "Delete"}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      },
+    })
+
+    return cols
+  }, [schema, client, deleteMutation.isPending])
+
+  const initialColumnVisibility = React.useMemo(() => {
+    if (!schema) return {}
+    
+    const visibility: Record<string, boolean> = {}
+    const displayFields = schema.fields.filter((f: any) => f.name !== "status" && !f.admin?.hidden)
+    
+    let visibleFieldNames: string[] = []
+    if (schema.admin?.defaultColumns && Array.isArray(schema.admin.defaultColumns)) {
+      visibleFieldNames = schema.admin.defaultColumns
+    } else {
+      visibleFieldNames = displayFields.slice(0, 3).map((f: any) => f.name)
+    }
+
+    // Set visibility for all fields
+    displayFields.forEach((f: any) => {
+      visibility[f.name] = visibleFieldNames.includes(f.name)
+    })
+
+    return visibility
+  }, [schema])
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[400px] items-center justify-center">
+        <div className="animate-spin rounded-full border-4 border-primary border-t-transparent h-8 w-8"></div>
+      </div>
+    )
+  }
+
+  if (!schema) {
+    return <div>Collection not found: {slug}</div>
+  }
+
+  if (slug === "media") {
+    return (
+      <div className="space-y-8 animate-in">
+        <PageHeader 
+          title="Media Library" 
+          description="Manage your media assets and uploads." 
+          icon={ImageIcon}
+        >
+          <Link to={`/collections/${slug}/new`}>
+            <Button className="h-8 px-4 text-[11px] rounded-md bg-primary hover:bg-primary/90 shadow-sm transition-all active:scale-95">
+              <Plus className="mr-1.5 h-3 w-3" />
+              Upload New
+            </Button>
+          </Link>
+        </PageHeader>
+
+        <MediaGrid 
+          items={response?.docs || []} 
+          baseUrl={client?.getBaseUrl() || ""} 
+          onDelete={handleDelete}
+          slug={slug}
+        />
+
+        <Pagination 
+          page={page}
+          totalPages={totalPages}
+          hasPrevPage={hasPrevPage}
+          hasNextPage={hasNextPage}
+          onPageChange={setPage}
+          className="mt-8"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8 animate-in">
+      <PageHeader 
+        title={schema.labels?.plural || schema.label || schema.slug} 
+        description={`Manage your ${schema.slug} entries and update content.`} 
+        icon={Database}
+      >
+        <Link to={`/collections/${slug}/new`}>
+          <Button className="h-8 px-4 text-[11px] rounded-md bg-primary hover:bg-primary/90 shadow-sm transition-all active:scale-95">
+            <Plus className="mr-1.5 h-3 w-3" />
+            Create New
+          </Button>
+        </Link>
+      </PageHeader>
+
+      <div className="overflow-hidden">
+        <DataTable
+          key={slug}
+          columns={columns}
+          data={response?.docs || []}
+          searchKey={schema.admin?.useAsTitle || schema.fields.find((f: any) => !f.admin?.hidden)?.name || "id"}
+          onRowSelectionChange={setRowSelection}
+          rowSelection={rowSelection}
+          persistenceKey={slug}
+          initialColumnVisibility={initialColumnVisibility}
+          bulkActions={(selectedIds) => (
+            <Button
+              variant="destructive"
+              size="sm"
+              className="h-8"
+              onClick={() => handleBulkDelete(selectedIds)}
+              disabled={bulkDeleteMutation.isPending}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete Selected ({selectedIds.length})
+            </Button>
+          )}
+        />
+        <Pagination 
+          page={page}
+          totalPages={totalPages}
+          total={response?.total}
+          hasPrevPage={hasPrevPage}
+          hasNextPage={hasNextPage}
+          onPageChange={setPage}
+        />
+      </div>
+    </div>
+  )
+}