@jhits/plugin-blog 0.0.7 → 0.0.9

package/dist/views/PostManager/EmptyState.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Empty State Component
+ * Botanical-themed empty state for when no posts are found
+ */
+export interface EmptyStateProps {
+    hasFilters: boolean;
+    onCreatePost: () => void;
+}
+export declare function EmptyState({ hasFilters, onCreatePost }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/views/PostManager/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/EmptyState.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,eAAe,2CAyBvE"}

package/dist/views/PostManager/EmptyState.js

@@ -0,0 +1,12 @@
+/**
+ * Empty State Component
+ * Botanical-themed empty state for when no posts are found
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sprout, Plus } from 'lucide-react';
+export function EmptyState({ hasFilters, onCreatePost }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 px-8 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border-2 border-dashed border-neutral-300 dark:border-neutral-700", children: [_jsx("div", { className: "w-24 h-24 rounded-full bg-green-500/10 dark:bg-green-500/20 flex items-center justify-center mb-6", children: _jsx(Sprout, { className: "text-green-600 dark:text-green-400 size-12" }) }), _jsx("h3", { className: "text-xl font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-2", children: hasFilters ? 'No Posts Found' : 'No Posts Yet' }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 text-center mb-6 max-w-md", children: hasFilters
+                    ? 'Try adjusting your search or filter criteria to find what you\'re looking for.'
+                    : 'Start growing your content garden. Create your first blog post to share your botanical knowledge with the world.' }), !hasFilters && (_jsxs("button", { onClick: onCreatePost, className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20", children: [_jsx(Plus, { size: 16 }), "Create Your First Post"] }))] }));
+}

package/dist/views/PostManager/PostActionsMenu.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Post Actions Menu Component
+ * Three-dot menu with actions for each post
+ */
+export interface PostActionsMenuProps {
+    onEdit: () => void;
+    onPreview: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+export declare function PostActionsMenu({ onEdit, onPreview, onDuplicate, onDelete, }: PostActionsMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostActionsMenu.d.ts.map

package/dist/views/PostManager/PostActionsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostActionsMenu.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostActionsMenu.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,oBAAoB,2CAuFtB"}

package/dist/views/PostManager/PostActionsMenu.js

@@ -0,0 +1,58 @@
+/**
+ * Post Actions Menu Component
+ * Three-dot menu with actions for each post
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { MoreVertical, Edit, Copy, Trash2 } from 'lucide-react';
+export function PostActionsMenu({ onEdit, onPreview, onDuplicate, onDelete, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 });
+    const buttonRef = useRef(null);
+    const menuRef = useRef(null);
+    // Calculate menu position when opening
+    useEffect(() => {
+        if (isOpen && buttonRef.current) {
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: buttonRect.bottom + 8, // 8px = mt-2 equivalent
+                right: window.innerWidth - buttonRect.right,
+            });
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                buttonRef.current &&
+                !buttonRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const actions = [
+        { label: 'Edit', icon: Edit, onClick: onEdit, color: 'text-neutral-600 dark:text-neutral-400' },
+        // { label: 'Preview', icon: Eye, onClick: onPreview, color: 'text-blue-600 dark:text-blue-400' },
+        { label: 'Duplicate', icon: Copy, onClick: onDuplicate, color: 'text-neutral-600 dark:text-neutral-400' },
+        { label: 'Delete', icon: Trash2, onClick: onDelete, color: 'text-red-600 dark:text-red-400' },
+    ];
+    const menuContent = isOpen && (_jsx("div", { ref: menuRef, className: "fixed w-48 bg-dashboard-card border border-dashboard-border rounded-2xl shadow-xl z-9999 overflow-hidden", style: {
+            top: `${menuPosition.top}px`,
+            right: `${menuPosition.right}px`,
+        }, children: actions.map((action) => {
+            const Icon = action.icon;
+            return (_jsxs("button", { onClick: () => {
+                    action.onClick();
+                    setIsOpen(false);
+                }, className: `w-full flex items-center font-sans gap-3 px-4 py-3 text-sm hover:bg-dashboard-bg transition-colors ${action.color}`, children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: action.label })] }, action.label));
+        }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: buttonRef, onClick: () => setIsOpen(!isOpen), className: "p-2 text-neutral-400 hover:text-dashboard-text hover:bg-dashboard-bg rounded-full transition-colors", title: "Actions", children: _jsx(MoreVertical, { size: 18 }) }), typeof window !== 'undefined' && isOpen && createPortal(menuContent, document.body)] }));
+}

package/dist/views/PostManager/PostCards.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Post Cards Component
+ * Card-based layout for displaying posts
+ */
+import { PostListItem } from '../../types/post';
+export interface PostCardsProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+export declare function PostCards({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }: PostCardsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostCards.d.ts.map

package/dist/views/PostManager/PostCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostCards.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostCards.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAI5D,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AA0BD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,cAAc,2CA6IhB"}

package/dist/views/PostManager/PostCards.js

@@ -0,0 +1,77 @@
+/**
+ * Post Cards Component
+ * Card-based layout for displaying posts
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Calendar, User, UserCheck } from 'lucide-react';
+import { Image } from '@jhits/plugin-images';
+import { PostActionsMenu } from './PostActionsMenu';
+import { useSession } from 'next-auth/react';
+function getStatusBadgeColor(status) {
+    switch (status) {
+        case 'published':
+            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+        case 'draft':
+            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+        case 'archived':
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        default:
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+    }
+}
+function formatDate(dateString, locale) {
+    if (!dateString)
+        return 'No date';
+    return new Date(dateString).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+export function PostCards({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }) {
+    const { data: session, status: sessionStatus } = useSession();
+    const currentUserId = session?.user?.id;
+    const [userMap, setUserMap] = useState({});
+    // Helper function to check if user is the owner
+    const isPostOwner = (post) => {
+        if (sessionStatus === 'loading')
+            return false; // Don't show actions while loading
+        if (!currentUserId || !post.authorId)
+            return false;
+        // Convert both to strings for comparison to handle ObjectId vs string
+        return String(currentUserId) === String(post.authorId);
+    };
+    // Fetch users to map IDs to names
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const response = await fetch('/api/users');
+                const users = await response.json();
+                if (Array.isArray(users)) {
+                    const map = {};
+                    users.forEach((user) => {
+                        const id = user._id?.toString();
+                        if (id) {
+                            map[id] = user.name || user.email || 'Unknown';
+                        }
+                    });
+                    setUserMap(map);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch users:', error);
+            }
+        };
+        fetchUsers();
+    }, []);
+    const getAuthorName = (authorId) => {
+        if (!authorId)
+            return 'Unknown';
+        return userMap[authorId] || authorId;
+    };
+    return (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: posts.map((post) => (_jsxs("div", { className: "bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden hover:shadow-xl transition-all duration-300 group", children: [_jsxs("div", { className: "relative w-full h-48 bg-neutral-200 dark:bg-neutral-800 overflow-hidden", children: [post.featuredImage ? (_jsx(Image, { id: post.featuredImage, alt: post.title, fill: true, editable: false, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx("span", { className: "text-sm text-neutral-400", children: "No Image" }) })), isPostOwner(post) && (_jsx("div", { className: "absolute top-4 left-4 z-10", children: _jsx("div", { className: "bg-white/90 dark:bg-neutral-900/90 backdrop-blur-sm rounded-full p-1 shadow-lg border border-neutral-200 dark:border-neutral-700", children: _jsx(PostActionsMenu, { onEdit: () => onEdit(post.id), onPreview: () => onPreview(post.id), onDuplicate: () => onDuplicate(post.id), onDelete: () => onDelete(post.id) }) }) })), _jsx("div", { className: "absolute top-4 right-4", children: _jsx("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm ${getStatusBadgeColor(post.status)}`, children: post.status }) })] }), _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "mb-4", children: [_jsx("button", { onClick: () => onEdit(post.id), className: "text-left w-full hover:cursor-pointer", children: _jsx("h3", { className: "font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors hover:underline", children: post.title }) }), _jsxs("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-mono", children: ["/", post.slug] })] }), post.excerpt && (_jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 mb-4 line-clamp-2", children: post.excerpt })), _jsxs("div", { className: "space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isPostOwner(post) ? (_jsx(UserCheck, { size: 14, className: "text-primary" })) : (_jsx(User, { size: 14, className: "text-neutral-400" })), _jsxs("span", { className: `text-xs ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`, children: [getAuthorName(post.authorId), isPostOwner(post) && (_jsx("span", { className: "ml-1", children: "(You)" }))] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { size: 14, className: "text-neutral-400" }), _jsx("span", { className: "text-xs text-neutral-600 dark:text-neutral-400", children: formatDate(post.updatedAt, locale) })] })] })] })] }, post.id))) }));
+}

package/dist/views/PostManager/PostFilters.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Post Filters Component
+ * Search and filter controls for posts
+ */
+import { PostStatus } from '../../types/post';
+export interface PostFiltersProps {
+    search: string;
+    onSearchChange: (value: string) => void;
+    statusFilter: PostStatus | 'all';
+    onStatusFilterChange: (value: PostStatus | 'all') => void;
+    categoryFilter: string;
+    onCategoryFilterChange: (value: string) => void;
+    categories: string[];
+}
+export declare function PostFilters({ search, onSearchChange, statusFilter, onStatusFilterChange, categoryFilter, onCategoryFilterChange, categories, }: PostFiltersProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostFilters.d.ts.map

package/dist/views/PostManager/PostFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostFilters.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostFilters.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,UAAU,GAAG,KAAK,CAAC;IACjC,oBAAoB,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,cAAc,EACd,YAAY,EACZ,oBAAoB,EACpB,cAAc,EACd,sBAAsB,EACtB,UAAU,GACb,EAAE,gBAAgB,2CAgElB"}

package/dist/views/PostManager/PostFilters.js

@@ -0,0 +1,10 @@
+/**
+ * Post Filters Component
+ * Search and filter controls for posts
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, Filter, Tag } from 'lucide-react';
+export function PostFilters({ search, onSearchChange, statusFilter, onStatusFilterChange, categoryFilter, onCategoryFilterChange, categories, }) {
+    return (_jsxs("div", { className: "flex flex-col sm:flex-row gap-4 mb-6", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("label", { htmlFor: "blog-post-search", className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", style: { clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }, children: "Search posts by title or content" }), _jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" }), _jsx("input", { id: "blog-post-search", name: "blog-post-search", type: "text", value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search posts by title or content...", className: "w-full pl-11 pr-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all" })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: "blog-post-status-filter", className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", style: { clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }, children: "Filter by status" }), _jsx(Filter, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" }), _jsxs("select", { id: "blog-post-status-filter", name: "blog-post-status-filter", value: statusFilter, onChange: (e) => onStatusFilterChange(e.target.value), className: "pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]", children: [_jsx("option", { value: "all", children: "All Statuses" }), _jsx("option", { value: "published", children: "Published" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "archived", children: "Archived" })] })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: "blog-post-category-filter", className: "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", style: { clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }, children: "Filter by category" }), _jsx(Tag, { className: "absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" }), _jsxs("select", { id: "blog-post-category-filter", name: "blog-post-category-filter", value: categoryFilter, onChange: (e) => onCategoryFilterChange(e.target.value), className: "pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]", children: [_jsx("option", { value: "all", children: "All Categories" }), categories.map((category) => (_jsx("option", { value: category, children: category }, category)))] })] })] }));
+}

package/dist/views/PostManager/PostManagerView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Post Manager View
+ * Production-ready listing page for managing blog posts
+ * Follows dashboard earth-tone design system
+ */
+export interface PostManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+export declare function PostManagerView({ siteId, locale }: PostManagerViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostManagerView.d.ts.map

package/dist/views/PostManager/PostManagerView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostManagerView.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostManagerView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAcH,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAMD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,oBAAoB,2CAqQvE"}

package/dist/views/PostManager/PostManagerView.js

@@ -0,0 +1,179 @@
+/**
+ * Post Manager View
+ * Production-ready listing page for managing blog posts
+ * Follows dashboard earth-tone design system
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { Plus, List, Grid3x3 } from 'lucide-react';
+import { PostStats } from './PostStats';
+import { PostFilters } from './PostFilters';
+import { PostTable } from './PostTable';
+import { PostCards } from './PostCards';
+import { EmptyState } from './EmptyState';
+import { apiToBlogPost } from '../../lib/mappers/apiMapper';
+const STORAGE_KEY_PREFIX = 'blog-view-mode';
+export function PostManagerView({ siteId, locale }) {
+    const [posts, setPosts] = useState([]);
+    const [totalPosts, setTotalPosts] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [categoryFilter, setCategoryFilter] = useState('all');
+    // Load view mode preference from localStorage
+    const getStoredViewMode = () => {
+        if (typeof window === 'undefined')
+            return 'list';
+        const stored = localStorage.getItem(`${STORAGE_KEY_PREFIX}-${siteId}`);
+        return (stored === 'list' || stored === 'cards') ? stored : 'list';
+    };
+    const [viewMode, setViewMode] = useState(getStoredViewMode);
+    // Save view mode preference to localStorage when it changes
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            localStorage.setItem(`${STORAGE_KEY_PREFIX}-${siteId}`, viewMode);
+        }
+    }, [viewMode, siteId]);
+    // Fetch posts from API
+    useEffect(() => {
+        const fetchPosts = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch('/api/plugin-blog?admin=true');
+                const data = await response.json();
+                if (data.blogs && Array.isArray(data.blogs)) {
+                    // Convert API format to PostListItem format
+                    const postListItems = data.blogs.map((doc) => {
+                        const blogPost = apiToBlogPost(doc);
+                        // Use semantic ID (id) - plugin-images handles resolution
+                        // The id is the semantic ID (e.g., "blog-featured-{slug}") which plugin-images resolves
+                        const featuredImageId = blogPost.metadata.featuredImage?.id;
+                        // Extract category from metadata or hero block
+                        let category = undefined;
+                        if (blogPost.metadata.categories && blogPost.metadata.categories.length > 0) {
+                            category = blogPost.metadata.categories[0];
+                        }
+                        else {
+                            // Check hero block for category
+                            const heroBlock = blogPost.blocks.find(block => block.type === 'hero');
+                            if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
+                                const heroCategory = heroBlock.data.category;
+                                if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
+                                    category = heroCategory.trim();
+                                }
+                            }
+                        }
+                        return {
+                            id: blogPost.id,
+                            title: blogPost.title,
+                            slug: blogPost.slug,
+                            status: blogPost.publication.status,
+                            date: blogPost.publication.date,
+                            excerpt: blogPost.metadata.excerpt,
+                            featuredImage: featuredImageId,
+                            authorId: blogPost.publication.authorId,
+                            updatedAt: blogPost.updatedAt,
+                            category: category,
+                        };
+                    });
+                    setPosts(postListItems);
+                    setTotalPosts(data.total);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch posts:', error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchPosts();
+    }, []);
+    // Extract unique categories from posts
+    const categories = React.useMemo(() => {
+        const categorySet = new Set();
+        posts.forEach(post => {
+            if (post.category && post.category.trim()) {
+                categorySet.add(post.category.trim());
+            }
+        });
+        return Array.from(categorySet).sort();
+    }, [posts]);
+    // Filter posts
+    const filteredPosts = React.useMemo(() => {
+        return posts.filter((post) => {
+            const matchesSearch = search === '' ||
+                post.title.toLowerCase().includes(search.toLowerCase()) ||
+                post.excerpt?.toLowerCase().includes(search.toLowerCase()) ||
+                post.slug.toLowerCase().includes(search.toLowerCase());
+            const matchesStatus = statusFilter === 'all' || post.status === statusFilter;
+            const matchesCategory = categoryFilter === 'all' || post.category === categoryFilter;
+            return matchesSearch && matchesStatus && matchesCategory;
+        });
+    }, [posts, search, statusFilter, categoryFilter]);
+    // Action handlers
+    const handleCreatePost = () => {
+        // Navigate to editor route - the plugin router will handle this
+        // The route 'new' maps to the editor view
+        window.location.href = '/dashboard/blog/new';
+    };
+    const handleEdit = (postId) => {
+        // Find the post to get its slug
+        const post = posts.find(p => p.id === postId);
+        if (post) {
+            // Navigate to editor with slug (API uses slug, not ID)
+            window.location.href = `/dashboard/blog/editor/${post.slug}`;
+        }
+    };
+    const handlePreview = (postId) => {
+        // Open preview in new tab
+        window.open(`/dashboard/blog/preview/${postId}`, '_blank');
+    };
+    const handleDuplicate = (postId) => {
+        // TODO: Implement duplicate functionality
+        const post = posts.find((p) => p.id === postId);
+        if (post) {
+            const duplicated = {
+                ...post,
+                id: `duplicate-${Date.now()}`,
+                title: `${post.title} (Copy)`,
+                slug: `${post.slug}-copy-${Date.now()}`,
+                status: 'draft',
+                updatedAt: new Date().toISOString(),
+            };
+            setPosts((prev) => [...prev, duplicated]);
+        }
+    };
+    const handleDelete = async (postId) => {
+        if (confirm('Are you sure you want to delete this post?')) {
+            try {
+                const post = posts.find(p => p.id === postId);
+                if (post) {
+                    const response = await fetch(`/api/plugin-blog/${post.slug}`, {
+                        method: 'DELETE',
+                    });
+                    if (response.ok) {
+                        // Remove from local state
+                        setPosts((prev) => prev.filter((p) => p.id !== postId));
+                        setTotalPosts(prev => prev - 1);
+                    }
+                    else {
+                        const error = await response.json();
+                        alert(error.error || 'Failed to delete post');
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Failed to delete post:', error);
+                alert('Failed to delete post');
+            }
+        }
+    };
+    const hasActiveFilters = search !== '' || statusFilter !== 'all' || categoryFilter !== 'all';
+    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2", children: "Blog Posts" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Manage your blog posts, drafts, and published content" })] }), _jsxs("button", { onClick: handleCreatePost, className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20", children: [_jsx(Plus, { size: 16 }), "New Post"] })] }), _jsx(PostStats, { total: totalPosts, posts: posts }), _jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [_jsx(PostFilters, { search: search, onSearchChange: setSearch, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, categoryFilter: categoryFilter, onCategoryFilterChange: setCategoryFilter, categories: categories }), _jsxs("div", { className: "flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700", children: [_jsx("button", { onClick: () => setViewMode('list'), className: `p-2 rounded-full transition-all ${viewMode === 'list'
+                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "List View", children: _jsx(List, { size: 18 }) }), _jsx("button", { onClick: () => setViewMode('cards'), className: `p-2 rounded-full transition-all ${viewMode === 'cards'
+                                    ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                    : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Card View", children: _jsx(Grid3x3, { size: 18 }) })] })] }), loading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredPosts.length === 0 ? (_jsx(EmptyState, { hasFilters: hasActiveFilters, onCreatePost: handleCreatePost })) : viewMode === 'list' ? (_jsx(PostTable, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete })) : (_jsx(PostCards, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete }))] }));
+}

package/dist/views/PostManager/PostStats.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Post Stats Component
+ * Displays summary statistics for blog posts
+ */
+import { PostListItem } from '../../types/post';
+export interface PostStatsProps {
+    posts: PostListItem[];
+    total: Number;
+}
+export declare function PostStats({ total, posts }: PostStatsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostStats.d.ts.map

package/dist/views/PostManager/PostStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostStats.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostStats.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,2CA+DzD"}

package/dist/views/PostManager/PostStats.js

@@ -0,0 +1,46 @@
+/**
+ * Post Stats Component
+ * Displays summary statistics for blog posts
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, CheckCircle2, Clock, Archive } from 'lucide-react';
+export function PostStats({ total, posts }) {
+    const published = posts.filter(p => p.status === 'published').length;
+    const drafts = posts.filter(p => p.status === 'draft').length;
+    const scheduled = posts.filter(p => p.status === 'scheduled').length;
+    const stats = [
+        {
+            label: 'Total Posts',
+            value: total,
+            icon: FileText,
+            color: 'text-neutral-600 dark:text-neutral-400',
+            bgColor: 'bg-neutral-100 dark:bg-neutral-800',
+        },
+        {
+            label: 'Published',
+            value: published,
+            icon: CheckCircle2,
+            color: 'text-green-600 dark:text-green-400',
+            bgColor: 'bg-green-500/10 dark:bg-green-500/20',
+        },
+        {
+            label: 'Drafts',
+            value: drafts,
+            icon: Clock,
+            color: 'text-amber-600 dark:text-amber-400',
+            bgColor: 'bg-amber-500/10 dark:bg-amber-500/20',
+        },
+        {
+            label: 'Scheduled',
+            value: scheduled,
+            icon: Archive,
+            color: 'text-blue-600 dark:text-blue-400',
+            bgColor: 'bg-blue-500/10 dark:bg-blue-500/20',
+        },
+    ];
+    return (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", children: stats.map((stat) => {
+            const Icon = stat.icon;
+            return (_jsx("div", { className: `p-4 rounded-2xl border border-neutral-300 dark:border-neutral-700 ${stat.bgColor}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `p-2 rounded-xl ${stat.bgColor}`, children: _jsx(Icon, { className: `size-5 ${stat.color}` }) }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-black text-neutral-950 dark:text-white", children: stat.value }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: stat.label })] })] }) }, stat.label));
+        }) }));
+}

package/dist/views/PostManager/PostTable.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Post Table Component
+ * Professional table layout for displaying posts
+ */
+import { PostListItem } from '../../types/post';
+export interface PostTableProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+export declare function PostTable({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }: PostTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PostTable.d.ts.map

package/dist/views/PostManager/PostTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostTable.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostTable.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAI5D,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AA0BD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,cAAc,2CA8KhB"}

package/dist/views/PostManager/PostTable.js

@@ -0,0 +1,77 @@
+/**
+ * Post Table Component
+ * Professional table layout for displaying posts
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Calendar, User, UserCheck } from 'lucide-react';
+import { Image } from '@jhits/plugin-images';
+import { PostActionsMenu } from './PostActionsMenu';
+import { useSession } from 'next-auth/react';
+function getStatusBadgeColor(status) {
+    switch (status) {
+        case 'published':
+            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+        case 'draft':
+            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+        case 'archived':
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        default:
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+    }
+}
+function formatDate(dateString, locale) {
+    if (!dateString)
+        return 'No date';
+    return new Date(dateString).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+export function PostTable({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }) {
+    const { data: session, status: sessionStatus } = useSession();
+    const currentUserId = session?.user?.id;
+    const [userMap, setUserMap] = useState({});
+    // Helper function to check if user is the owner
+    const isPostOwner = (post) => {
+        if (sessionStatus === 'loading')
+            return false; // Don't show actions while loading
+        if (!currentUserId || !post.authorId)
+            return false;
+        // Convert both to strings for comparison to handle ObjectId vs string
+        return String(currentUserId) === String(post.authorId);
+    };
+    // Fetch users to map IDs to names
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const response = await fetch('/api/users');
+                const users = await response.json();
+                if (Array.isArray(users)) {
+                    const map = {};
+                    users.forEach((user) => {
+                        const id = user._id?.toString();
+                        if (id) {
+                            map[id] = user.name || user.email || 'Unknown';
+                        }
+                    });
+                    setUserMap(map);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch users:', error);
+            }
+        };
+        fetchUsers();
+    }, []);
+    const getAuthorName = (authorId) => {
+        if (!authorId)
+            return 'Unknown';
+        return userMap[authorId] || authorId;
+    };
+    return (_jsx("div", { className: "bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700 overflow-hidden", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "bg-neutral-200 dark:bg-neutral-900/50 border-b border-neutral-300 dark:border-neutral-700", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Post" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Author" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Category" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Status" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Last Modified" }), _jsx("th", { className: "px-6 py-4 text-right text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-neutral-300 dark:divide-neutral-700", children: posts.map((post) => (_jsxs("tr", { className: "hover:bg-white dark:hover:bg-neutral-900/50 transition-colors cursor-pointer", children: [_jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [post.featuredImage ? (_jsx("div", { className: "w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 overflow-hidden flex-shrink-0 relative", children: _jsx(Image, { id: post.featuredImage, alt: post.title, fill: true, editable: false, className: "w-full h-full object-cover" }) })) : (_jsx("div", { className: "w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-xs text-neutral-400", children: "No Image" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { onClick: () => onEdit(post.id), className: "text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent", children: _jsx("h3", { className: "font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1 text-left", children: post.title.trim() }) }), _jsxs("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-mono text-left", children: ["/", post.slug] })] })] }) }), _jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [isPostOwner(post) ? (_jsx(UserCheck, { size: 14, className: "text-primary" })) : (_jsx(User, { size: 14, className: "text-neutral-400" })), _jsxs("span", { className: `text-sm ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`, children: [getAuthorName(post.authorId), isPostOwner(post) && (_jsx("span", { className: "ml-2 text-xs text-primary/70", children: "(Jij)" }))] })] }) }), _jsx("td", { className: "px-6 py-4", children: _jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: post.category || 'Uncategorized' }) }), _jsx("td", { className: "px-6 py-4", children: _jsx("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border ${getStatusBadgeColor(post.status)}`, children: post.status }) }), _jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { size: 14, className: "text-neutral-400" }), _jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: formatDate(post.updatedAt, locale) })] }) }), _jsx("td", { className: "px-6 py-4", children: isPostOwner(post) ? (_jsx("div", { className: "flex items-center justify-end", children: _jsx(PostActionsMenu, { onEdit: () => onEdit(post.id), onPreview: () => onPreview(post.id), onDuplicate: () => onDuplicate(post.id), onDelete: () => onDelete(post.id) }) })) : (_jsx("div", { className: "flex items-center justify-end text-neutral-400 text-xs", children: "Alleen auteur" })) })] }, post.id))) })] }) }) }));
+}

package/dist/views/PostManager/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Post Manager View Exports
+ */
+export { PostManagerView } from './PostManagerView';
+export type { PostManagerViewProps } from './PostManagerView';
+export { PostStats } from './PostStats';
+export { PostFilters } from './PostFilters';
+export { PostTable } from './PostTable';
+export { PostCards } from './PostCards';
+export { EmptyState } from './EmptyState';
+export { PostActionsMenu } from './PostActionsMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/views/PostManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}