@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/BrandingHub.tsx

@@ -10,7 +10,7 @@ import {
   Check,
   RefreshCcw,
   Sparkles,
-} from "lucide-react";
+} from "./ui/icons";
 
 export function BrandingHub() {
   const [siteName, setSiteName] = useState("Kyro CMS");
@@ -73,11 +73,11 @@ export function BrandingHub() {
   ];
 
   return (
-    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-32">
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       {/* Header */}
       <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
         <div>
-          <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+          <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
             Branding <span className="text-[var(--kyro-primary)]">Hub</span>
           </h1>
           <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-60">
@@ -90,11 +90,10 @@ export function BrandingHub() {
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className={`flex items-center gap-2 px-8 py-3 rounded-2xl font-black text-sm shadow-xl transition-all active:scale-95 ${
-              saved
-                ? "bg-green-500 text-white"
-                : "bg-[var(--kyro-primary)] text-white hover:shadow-[var(--kyro-primary)]"
-            }`}
+            className={`flex items-center gap-2 px-8 py-3 rounded-2xl font-bold text-sm shadow-xl transition-all active:scale-95 ${saved
+              ? "bg-green-500 text-white"
+              : "bg-[var(--kyro-primary)] text-white hover:shadow-[var(--kyro-primary)]"
+              }`}
           >
             {saving ? (
               <RefreshCcw className="w-4 h-4 animate-spin" />
@@ -117,12 +116,12 @@ export function BrandingHub() {
         <section className="surface-tile p-8 space-y-8">
           <div className="flex items-center gap-3 mb-2">
             <Tag className="w-5 h-5 text-[var(--kyro-primary)]" />
-            <h2 className="text-xl font-black tracking-tight">Core Identity</h2>
+            <h2 className="text-xl font-bold tracking-tight">Core Identity</h2>
           </div>
 
           <div className="space-y-6">
             <div className="space-y-2">
-              <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <label className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Site Public Name
               </label>
               <input
@@ -135,7 +134,7 @@ export function BrandingHub() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <label className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Admin Dashboard Title
               </label>
               <input
@@ -148,7 +147,7 @@ export function BrandingHub() {
             </div>
 
             <div className="space-y-2">
-              <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <label className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 System Greeting
               </label>
               <textarea
@@ -166,14 +165,14 @@ export function BrandingHub() {
         <section className="surface-tile p-8 space-y-8">
           <div className="flex items-center gap-3 mb-2">
             <Palette className="w-5 h-5 text-[var(--kyro-primary)]" />
-            <h2 className="text-xl font-black tracking-tight">
+            <h2 className="text-xl font-bold tracking-tight">
               Visual Aesthetic
             </h2>
           </div>
 
           <div className="space-y-8">
             <div className="space-y-4">
-              <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <label className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Primary Brand Color
               </label>
               <div className="grid grid-cols-6 gap-3">
@@ -191,13 +190,13 @@ export function BrandingHub() {
             </div>
 
             <div className="space-y-4 pt-4 border-t border-[var(--kyro-border)]">
-              <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <label className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Project Logo (SVG/PNG)
               </label>
               <div className="flex items-center gap-6">
                 <div className="w-20 h-20 rounded-2xl bg-[var(--kyro-bg-secondary)] border-2 border-dashed border-[var(--kyro-border)] flex flex-col items-center justify-center text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-primary)] hover:text-[var(--kyro-primary)] cursor-pointer transition-all">
                   <ImageIcon className="w-6 h-6 mb-1 opacity-40" />
-                  <span className="text-[8px] font-black uppercase">
+                  <span className="text-[8px] font-bold ">
                     Upload
                   </span>
                 </div>
@@ -219,7 +218,7 @@ export function BrandingHub() {
         <section className="lg:col-span-2 surface-tile p-8 overflow-hidden relative group">
           <div className="absolute top-0 right-0 p-8 flex items-center gap-2 text-[var(--kyro-primary)]">
             <Sparkles className="w-4 h-4" />
-            <span className="text-[10px] font-black uppercase tracking-widest">
+            <span className="text-[10px] font-bold  tracking-widest">
               Live Preview
             </span>
           </div>
@@ -227,11 +226,11 @@ export function BrandingHub() {
           <div className="max-w-2xl mx-auto py-12 text-center space-y-6">
             <div className="inline-flex items-center gap-3 px-4 py-2 bg-[var(--kyro-bg-secondary)] rounded-full border border-[var(--kyro-border)]">
               <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              <span className="text-[10px] font-black uppercase tracking-widest opacity-60">
+              <span className="text-[10px] font-bold  tracking-widest opacity-60">
                 {adminTitle} Online
               </span>
             </div>
-            <h2 className="text-5xl font-black tracking-tighter leading-none italic">
+            <h2 className="text-5xl font-bold tracking-tighter leading-none italic">
               Welcome to {siteName}.
             </h2>
             <p className="text-xl font-medium text-[var(--kyro-text-secondary)] opacity-60">

package/src/components/BulkActionsBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
-import { CountBadge } from "./StatusBadge";
+import { CountBadge } from "./ui/Badge";
 
 interface BulkAction {
   label: string;

package/src/components/CreateView.tsx

@@ -3,6 +3,9 @@ import { apiPost } from "../lib/api";
 import type { KyroConfig, CollectionConfig } from "@kyro-cms/core/client";
 import { AutoForm } from "./AutoForm";
 import { Spinner } from "./ui/Spinner";
+import { PageHeader } from "./ui/PageHeader";
+import { adminPath } from "../lib/paths";
+
 
 interface CreateViewProps {
   config: KyroConfig;
@@ -25,8 +28,9 @@ export function CreateView({
   const fields = collection.fields || [];
   const label = collection.label || collection.slug;
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+
     try {
       setSaving(true);
       await apiPost(`/api/${collection.slug}`, data);
@@ -40,44 +44,26 @@ export function CreateView({
 
   return (
     <div className="kyro-detail">
-      <div className="kyro-detail-header">
-        <button type="button" className="kyro-detail-back" onClick={onCancel}>
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <path d="M19 12H5M12 19l-7-7 7-7" />
-          </svg>
-        </button>
-        <h2 className="kyro-detail-title">Create {label}</h2>
-        <div className="kyro-detail-actions">
-          <button
-            type="button"
-            className="kyro-btn kyro-btn-secondary kyro-btn-md"
-            onClick={onCancel}
-            disabled={saving}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            className="kyro-btn kyro-btn-primary kyro-btn-md"
-            onClick={handleSubmit}
-            disabled={saving}
-          >
-            {saving ? <Spinner size="sm" /> : `Create ${label}`}
-          </button>
-        </div>
-      </div>
+      <PageHeader
+        back={{ onClick: onCancel }}
+        breadcrumbs={[
+          { label: "Collections" },
+          { label: label, href: `${adminPath}/${collection.slug}` },
+          { label: "New" }
+        ]}
+        title={`Create ${collection.singularLabel || label}`}
+        action={{
+          label: saving ? "Creating..." : `Create ${collection.singularLabel || label}`,
+          onClick: () => handleSubmit(),
+        }}
+
+      />
+
 
       <div className="kyro-detail-body">
         <div className="kyro-card">
           <div className="kyro-card-content">
-            <form onSubmit={handleSubmit}>
+            <form>
               <AutoForm
                 config={{ ...collection, fields }}
                 data={data}

package/src/components/Dashboard.tsx

@@ -1,23 +1,18 @@
 import React, { useState, useEffect } from "react";
-import {
-  LayoutDashboard,
-  FileText,
-  Image as ImageIcon,
-  Users,
-  Plus,
-  ArrowUpRight,
-  Activity,
-  Clock,
-  ArrowRight,
-} from "lucide-react";
+import { LayoutDashboard, FileText, Image as ImageIcon, Users, Plus, ArrowUpRight, Activity, Clock as ClockIcon, ArrowRight } from "./ui/icons";
+import { useAuthStore } from "../lib/stores";
+import { authCollectionSlugs } from "../lib/config";
+import { PageHeader } from "./ui/PageHeader";
+
 
 interface DashboardProps {
-  collections: any;
+  collections: Record<string, unknown>;
   onNavigate: (view: string, collection?: string) => void;
-  user: any;
+  user: Record<string, unknown> | null;
 }
 
 export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
+  const { permissions } = useAuthStore();
   const [stats, setStats] = useState({
     totalDocs: 0,
     totalMedia: 0,
@@ -67,39 +62,30 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
             time: "3h ago",
           },
         ],
-      } as any);
+      } as { totalDocs: number; totalMedia: number; totalUsers: number; recentActivity: Array<{ id: number; type: string; user: string; doc: string; collection: string; time: string }> });
       setLoading(false);
     }, 800);
     return () => clearTimeout(timer);
   }, []);
 
-  const collectionList = Object.entries(collections);
+  const collectionList = Object.entries(collections).filter(
+    ([slug]) =>
+      !authCollectionSlugs.includes(slug) &&
+      permissions?.collections?.[slug]?.read !== false,
+  );
 
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
-      {/* Header Section */}
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
-        <div>
-          <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
-            Welcome back,{" "}
-            <span className="text-[var(--kyro-primary)]">
-              {user?.email?.split("@")[0] || "Admin"}
-            </span>
-          </h1>
-          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium italic opacity-70">
-            Everything looks great in your command center today.
-          </p>
-        </div>
-        <div className="flex items-center gap-3">
-          <button type="button"
-            onClick={() => onNavigate("create", collectionList[0]?.[0])}
-            className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl active:scale-95 transition-all"
-          >
-            <Plus className="w-4 h-4" />
-            New Document
-          </button>
-        </div>
-      </div>
+      <PageHeader
+        title={`Welcome back, ${user?.email?.split("@")[0] || "Admin"}`}
+        description="Everything looks great in your command center today."
+        action={collectionList.length > 0 && permissions?.collections?.[collectionList[0]?.[0]]?.create !== false ? {
+          label: "New Document",
+          onClick: () => onNavigate("create", collectionList[0]?.[0]),
+          icon: Plus,
+        } : undefined}
+      />
+
 
       {/* Stats Grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -134,10 +120,10 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
             className="surface-tile p-6 flex items-center justify-between group hover:border-[var(--kyro-primary)] transition-all duration-500 cursor-default"
           >
             <div>
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-1">
+              <p className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-1">
                 {stat.label}
               </p>
-              <h3 className="text-3xl font-black tracking-tighter">
+              <h3 className="text-3xl font-bold tracking-tighter">
                 {loading ? "..." : stat.value}
               </h3>
             </div>
@@ -154,11 +140,11 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
         {/* Main Content Area: Collections & Insights */}
         <div className="space-y-8 min-w-0">
           <section className="surface-tile p-8">
-            <h2 className="text-xl font-black mb-1 tracking-tight flex items-center gap-2">
+            <h2 className="text-xl font-bold mb-1 tracking-tight flex items-center gap-2">
               <LayoutDashboard className="w-5 h-5 opacity-40" />
               Content Growth
             </h2>
-            <p className="text-[10px] font-black uppercase tracking-widest opacity-40 mb-8">
+            <p className="text-[10px] font-bold  tracking-widest opacity-40 mb-8">
               Snapshot of document velocity over the last 7 days
             </p>
 
@@ -204,7 +190,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                   className="filter drop-shadow-[0_0_8px_var(--kyro-primary)]"
                 />
               </svg>
-              <div className="flex justify-between mt-4 text-[10px] font-black opacity-30 tracking-widest uppercase">
+              <div className="flex justify-between mt-4 text-[10px] font-bold opacity-30 tracking-widest ">
                 <span>Mon</span>
                 <span>Tue</span>
                 <span>Wed</span>
@@ -216,14 +202,14 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {collectionList.map(([slug, config]: [string, any]) => (
+              {collectionList.map(([slug, config]: [string, Record<string, unknown>]) => (
                 <div
                   key={slug}
                   onClick={() => onNavigate("list", slug)}
                   className="p-6 rounded-2xl border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] bg-[var(--kyro-bg-secondary)] hover:bg-[var(--kyro-surface)] transition-all cursor-pointer group"
                 >
                   <div className="flex items-center justify-between mb-2">
-                    <h3 className="font-black text-lg tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors">
+                    <h3 className="font-bold text-lg tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors">
                       {config.label || slug}
                     </h3>
                     <ArrowUpRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-all" />
@@ -245,51 +231,41 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
           <section className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <section className="surface-tile p-6 border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)] transition-all cursor-pointer group">
               <div className="flex items-center justify-between mb-4">
-                <h3 className="text-xl font-black tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors flex items-center gap-2">
+                <h3 className="text-xl font-bold tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors flex items-center gap-2">
                   <Plus className="w-5 h-5" />
                   Quick Links
                 </h3>
               </div>
               <div className="space-y-3">
-                <button type="button"
-                  onClick={() => onNavigate("new", "posts")}
-                  className="w-full flex items-center justify-between p-4 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group/btn"
-                >
-                  <span className="text-sm font-bold text-[var(--kyro-text-primary)]">
-                    New Post
-                  </span>
-                  <Plus className="w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/btn:text-[var(--kyro-primary)]" />
-                </button>
-                <button type="button"
-                  onClick={() => onNavigate("new", "products")}
-                  className="w-full flex items-center justify-between p-4 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group/btn"
-                >
-                  <span className="text-sm font-bold text-[var(--kyro-text-primary)]">
-                    New Product
-                  </span>
-                  <Plus className="w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/btn:text-[var(--kyro-primary)]" />
-                </button>
-                <button type="button"
-                  onClick={() => onNavigate("new", "pages")}
-                  className="w-full flex items-center justify-between p-4 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group/btn"
-                >
-                  <span className="text-sm font-bold text-[var(--kyro-text-primary)]">
-                    New Page
-                  </span>
-                  <Plus className="w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/btn:text-[var(--kyro-primary)]" />
-                </button>
+                {collectionList
+                  .filter(([slug]) => permissions?.collections?.[slug]?.create !== false)
+                  .map(([slug]) => (
+                    <button type="button"
+                      key={slug}
+                      onClick={() => onNavigate("new", slug)}
+                      className="w-full flex items-center justify-between p-4 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group/btn"
+                    >
+                      <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+                        New {(collections[slug] as Record<string, unknown>)?.singularLabel || (collections[slug] as Record<string, unknown>)?.label || slug}
+                      </span>
+                      <Plus className="w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/btn:text-[var(--kyro-primary)]" />
+                    </button>
+                  ))}
+                {collectionList.every(([slug]) => permissions?.collections?.[slug]?.create === false) && (
+                  <p className="text-sm text-[var(--kyro-text-secondary)] py-2">No collections available for creation.</p>
+                )}
               </div>
             </section>
 
             <div className="surface-tile p-8 bg-[#0f172a] text-white border-none shadow-2xl shadow-blue-500/10 overflow-hidden relative group cursor-pointer">
               <div className="relative z-10">
-                <h3 className="text-2xl font-black tracking-tighter mb-2">
+                <h3 className="text-2xl font-bold tracking-tighter mb-2">
                   Media Library
                 </h3>
                 <p className="opacity-80 text-sm font-medium mb-6">
                   Manage high-fidelity assets with our liquid masonry gallery.
                 </p>
-                <div className="flex items-center gap-2 font-black text-xs uppercase tracking-widest text-blue-400">
+                <div className="flex items-center gap-2 font-bold text-xs  tracking-widest text-blue-400">
                   Open Assets{" "}
                   <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                 </div>
@@ -302,23 +278,23 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
         {/* Sidebar Area: Recent Activity */}
         <div className="space-y-6">
           <section className="surface-tile p-8">
-            <h2 className="text-xl font-black mb-6 tracking-tight flex items-center gap-2">
-              <Clock className="w-5 h-5 opacity-40" />
+            <h2 className="text-xl font-bold mb-6 tracking-tight flex items-center gap-2">
+              <ClockIcon className="w-5 h-5 opacity-40" />
               Recent Activity
             </h2>
             <div className="space-y-6">
-              {stats.recentActivity.map((act: any) => (
+              {stats.recentActivity.map((act: Record<string, unknown>) => (
                 <div key={act.id} className="flex gap-4 group">
                   <div className="mt-1">
                     <div className="w-8 h-8 rounded-full bg-[var(--kyro-bg-secondary)] flex items-center justify-center border border-[var(--kyro-border)] group-hover:bg-[var(--kyro-primary)] transition-colors">
-                      <span className="text-[10px] font-black">
+                      <span className="text-[10px] font-bold">
                         {act.user[0]}
                       </span>
                     </div>
                   </div>
                   <div className="flex-1 border-b border-[var(--kyro-border)] pb-4 group-last:border-none">
                     <p className="text-sm font-medium text-[var(--kyro-text-primary)] leading-snug">
-                      <span className="font-black">{act.user}</span>{" "}
+                      <span className="font-bold">{act.user}</span>{" "}
                       {act.type === "create"
                         ? "created"
                         : act.type === "edit"
@@ -331,20 +307,20 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                       </span>{" "}
                       in <span className="opacity-60">{act.collection}</span>
                     </p>
-                    <span className="text-[10px] font-bold uppercase opacity-40 mt-1 block">
+                    <span className="text-[10px] font-bold  opacity-40 mt-1 block">
                       {act.time}
                     </span>
                   </div>
                 </div>
               ))}
             </div>
-            <button type="button" className="w-full mt-6 py-3 text-xs font-black uppercase tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors border-t border-[var(--kyro-border)] pt-6">
+            <button type="button" className="w-full mt-6 py-3 text-xs font-bold  tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors border-t border-[var(--kyro-border)] pt-6">
               View Audit Logs
             </button>
           </section>
 
           <section className="surface-tile p-8">
-            <h2 className="text-xl font-black mb-6 tracking-tight flex items-center gap-2">
+            <h2 className="text-xl font-bold mb-6 tracking-tight flex items-center gap-2">
               <Activity className="w-5 h-5 opacity-40" />
               System Status
             </h2>
@@ -375,7 +351,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                     {sys.label}
                   </span>
                   <div className="flex items-center gap-2">
-                    <span className="text-[10px] font-black uppercase tracking-widest opacity-60">
+                    <span className="text-[10px] font-bold  tracking-widest opacity-60">
                       {sys.status}
                     </span>
                     <div