@dyrected/admin 1.0.1

package/src/pages/dashboard/dashboard.tsx

@@ -0,0 +1,150 @@
+import { Database, Globe, ImageIcon, ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useQuery, useQueries } from "@tanstack/react-query";
+import { useDyrected } from "../../providers/dyrected-provider";
+import { Button } from "../../components/ui/button";
+
+export function Dashboard() {
+  const { client } = useDyrected();
+
+  const { data: schemas, isLoading: isLoadingSchemas } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: () => client!.getSchemas(),
+    enabled: !!client,
+  });
+
+  const collections = (schemas?.collections || []).filter((c: any) => !c.admin?.hidden && !c.slug.startsWith('platform_'));
+  const globals = (schemas?.globals || []).filter((g: any) => !g.admin?.hidden && !g.slug.startsWith('platform_'));
+
+  const collectionCounts = useQueries({
+    queries: collections.map((col: any) => ({
+      queryKey: ["collection-count", col.slug],
+      queryFn: () => client!.find(col.slug, { limit: 1 }),
+      enabled: !!client && !!col.slug,
+    })),
+  });
+
+  if (isLoadingSchemas) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  // No schema yet — route to /setup
+  if (collections.length === 0 && globals.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center space-y-4">
+          <p className="text-muted-foreground">No collections configured yet.</p>
+          <Button asChild>
+            <Link to="/setup">View Integration Guide</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <div>
+        <h2 className="text-2xl font-semibold tracking-tight">Overview</h2>
+        <p className="text-muted-foreground">Monitor and manage your site's content and structure.</p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="p-1 space-y-2 group border border-card">
+          <div className="flex items-center gap-3">
+            <div className="rounded-md bg-primary/5 p-1.5 text-primary/60 group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+              <Database className="h-4 w-4" />
+            </div>
+            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Collections</h3>
+          </div>
+          <p className="text-3xl font-bold tracking-tight">{collections.length}</p>
+        </div>
+
+        <div className="p-1 space-y-2 group border border-card">
+          <div className="flex items-center gap-3">
+            <div className="rounded-md bg-secondary/5 p-1.5 text-muted-foreground/60 group-hover:bg-accent group-hover:text-foreground transition-colors">
+              <Globe className="h-4 w-4" />
+            </div>
+            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Global Configs</h3>
+          </div>
+          <p className="text-3xl font-bold tracking-tight">{globals.length}</p>
+        </div>
+
+        <div className="p-1 space-y-2 group border border-card">
+          <div className="flex items-center gap-3">
+            <div className="rounded-md bg-accent p-1.5 text-muted-foreground/60 group-hover:bg-accent group-hover:text-foreground transition-colors">
+              <ImageIcon className="h-4 w-4" />
+            </div>
+            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Media Files</h3>
+          </div>
+          <p className="text-3xl font-bold tracking-tight">-</p>
+        </div>
+      </div>
+
+      <div className="grid gap-8 md:grid-cols-2">
+        <section >
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold flex items-center gap-2">
+              <Database className="h-5 w-5 text-primary" />
+              Collections
+            </h3>
+            {/* <Button variant="ghost" size="sm" asChild className="text-xs">
+              <Link to="/collections">View All</Link>
+            </Button> */}
+          </div>
+          <div className="space-y-1 border border-card">
+            {collections.map((col: any, idx: number) => (
+              <Link
+                key={col.slug}
+                to={`/collections/${col.slug}`}
+                className="group flex items-center justify-between p-3 rounded-md hover:bg-primary/[0.02] transition-colors"
+              >
+                <div>
+                  <p className="font-medium group-hover:text-primary transition-colors">{col.labels?.plural || col.slug}</p>
+                  <p className="text-xs text-muted-foreground uppercase">{col.slug}</p>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-right mr-4">
+                    <p className="text-sm font-semibold">{collectionCounts[idx]?.data?.total || 0}</p>
+                    <p className="text-[10px] text-muted-foreground uppercase">Entries</p>
+                  </div>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-transform group-hover:translate-x-0.5" />
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold flex items-center gap-2">
+              <Globe className="h-5 w-5 text-secondary-foreground" />
+              Global Settings
+            </h3>
+          </div>
+          <div className="space-y-1 border border-card">
+            {globals.map((glb: any) => (
+              <Link
+                key={glb.slug}
+                to={`/globals/${glb.slug}`}
+                className="group flex items-center justify-between p-3 rounded-md hover:bg-primary/[0.02] transition-colors"
+              >
+                <div>
+                  <p className="font-medium group-hover:text-secondary-foreground transition-colors">{glb.label || glb.slug}</p>
+                  <p className="text-xs text-muted-foreground uppercase">{glb.slug}</p>
+                </div>
+                <div className="bg-secondary/10 px-2 py-1 rounded text-[10px] font-bold text-secondary-foreground uppercase">
+                  Global
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/pages/globals/editor-page.tsx

@@ -0,0 +1,122 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { useDyrected } from "../../providers/dyrected-provider"
+import { FormEngine } from "../../components/forms/form-engine"
+import { useParams } from "react-router-dom"
+import { Globe, Save } from "lucide-react"
+import { useState, useEffect } from "react"
+import { Button } from "../../components/ui/button"
+
+export function GlobalEditorPage() {
+  const { slug } = useParams()
+  const { client } = useDyrected()
+  const queryClient = useQueryClient()
+  const [isDirty, setIsDirty] = useState(false)
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (isDirty) {
+        e.preventDefault()
+        e.returnValue = ""
+      }
+    }
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload)
+  }, [isDirty])
+
+  // Fetch schema
+  const { data: schemas } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: () => client!.getSchemas(),
+    enabled: !!client,
+  })
+
+  const schema = schemas?.globals.find((g: any) => g.slug === slug)
+
+  // Fetch global data
+  const { data: globalData, isLoading: isGlobalLoading } = useQuery({
+    queryKey: ["global", slug],
+    queryFn: () => client!.getGlobal(slug!),
+    enabled: !!client && !!slug,
+  })
+
+  // 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)
+  }, [])
+
+  const saveMutation = useMutation({
+    mutationFn: (data: any) => {
+      return client!.updateGlobal(slug!, data)
+    },
+    onSuccess: () => {
+      setIsDirty(false)
+      queryClient.invalidateQueries({ queryKey: ["global", slug] })
+      toast.success(`${schema.label || schema.slug} updated successfully`)
+    },
+    onError: (error: any) => {
+      toast.error("Failed to update settings", {
+        description: error.message
+      })
+    }
+  })
+
+  if (!schema) return <div>Global schema not found for: {slug}</div>
+  if (isGlobalLoading) return <div>Loading global settings...</div>
+
+  return (
+    <div className="space-y-8 max-w-5xl mx-auto">
+      <div className="flex items-center justify-between gap-4 border-b border-border/50 pb-6">
+        <div className="flex items-center gap-4">
+          <div className="p-2 bg-primary/10 text-primary rounded-lg shrink-0">
+            <Globe className="h-5 w-5" />
+          </div>
+          <div>
+            <h1 className="text-lg font-serif font-bold tracking-tight text-foreground truncate">
+              {schema.label || schema.slug}
+            </h1>
+            <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/40 leading-none mt-1">
+              Global Configuration
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            size="icon"
+            className="h-9 w-9 rounded-lg shadow-sm"
+            onClick={() => document.getElementById('dyrected-form-submit')?.click()}
+            disabled={saveMutation.isPending}
+            title="Save Changes (⌘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>
+
+      <div className="animate-in space-y-8 pb-20">
+        <FormEngine
+          collection={slug!}
+          fields={schema.fields}
+          defaultValues={globalData || {}}
+          onSubmit={(data) => saveMutation.mutate(data)}
+          isLoading={saveMutation.isPending}
+          onChange={(dirty) => setIsDirty(dirty)}
+          submitLabel="Save Changes"
+        />
+        <button id="dyrected-form-submit" type="submit" className="hidden" />
+      </div>
+    </div>
+  )
+}