@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/PostManager/PostTable.tsx

@@ -5,9 +5,9 @@
 
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Calendar, User, UserCheck } from 'lucide-react';
-import { Image } from '@jhits/plugin-images';
+import React from 'react';
+import { FileText, Tag, Activity } from 'lucide-react';
+import { Image as PluginImage } from '@jhits/plugin-images';
 import { PostListItem, PostStatus } from '../../types/post';
 import { PostActionsMenu } from './PostActionsMenu';
 import { LanguageFlags } from './LanguageFlags';
@@ -25,17 +25,17 @@ export interface PostTableProps {
 function getStatusBadgeColor(status: PostStatus | 'not-translated') {
     switch (status) {
         case 'published':
-            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+            return 'bg-emerald-500 text-white border-emerald-400 shadow-sm';
         case 'draft':
-            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+            return 'bg-amber-500 text-white border-amber-400 shadow-sm';
         case 'scheduled':
-            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+            return 'bg-blue-500 text-white border-blue-400 shadow-sm';
         case 'archived':
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500 text-white border-neutral-400';
         case 'not-translated':
-            return 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20 italic';
+            return 'bg-red-500/10 text-red-500 border-red-500/20 italic';
         default:
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500/10 text-neutral-500 border-neutral-500/20';
     }
 }
 
@@ -58,184 +58,156 @@ export function PostTable({
 }: PostTableProps) {
     const { data: session, status: sessionStatus } = useSession();
     const currentUserId = (session?.user as any)?.id;
-    const [userMap, setUserMap] = useState<Record<string, string>>({});
 
     // Helper function to check if user is the owner
     const isPostOwner = (post: PostListItem): boolean => {
-        if (sessionStatus === 'loading') return false; // Don't show actions while loading
+        if (sessionStatus === 'loading') return false;
         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: Record<string, string> = {};
-                    users.forEach((user: { _id: string; name?: string; email?: string }) => {
-                        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?: string) => {
-        if (!authorId) return 'Unknown';
-        return userMap[authorId] || authorId;
+    const getAuthorData = (post: PostListItem) => {
+        if (post.author) {
+            return {
+                name: post.author.name || 'Unknown Author',
+                image: post.author.image
+            };
+        }
+        return { name: 'Unknown Author' };
     };
 
     return (
-        <div className="bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700 overflow-hidden">
-            <div className="overflow-x-auto">
-                <table className="w-full">
-                    <thead className="bg-neutral-200 dark:bg-neutral-900/50 border-b border-neutral-300 dark:border-neutral-700">
-                        <tr>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Post
-                            </th>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Author
-                            </th>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Category
-                            </th>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Languages
-                            </th>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Status
-                            </th>
-                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Last Modified
-                            </th>
-                            <th className="px-6 py-4 text-right text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
-                                Actions
-                            </th>
+        <div className="bg-dashboard-card/40 rounded-[2rem] overflow-hidden border border-dashboard-border/40 shadow-sm">
+            <div className="overflow-x-auto custom-scrollbar">
+                <table className="w-full text-left border-collapse min-w-[1000px] lg:min-w-0">
+                    <thead>
+                        <tr className="text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest border-b border-dashboard-border/40 bg-dashboard-bg/20">
+                            <th className="px-8 py-5">Publication</th>
+                            <th className="px-8 py-5 hidden lg:table-cell">Author</th>
+                            <th className="px-8 py-5 hidden xl:table-cell">Category</th>
+                            <th className="px-8 py-5">Editions</th>
+                            <th className="px-8 py-5">Status</th>
+                            <th className="px-8 py-5 hidden md:table-cell">Modified</th>
+                            <th className="px-8 py-5 text-right">Actions</th>
                         </tr>
                     </thead>
-                    <tbody className="divide-y divide-neutral-300 dark:divide-neutral-700">
-                        {posts.map((post) => (
-                            <tr
-                                key={post.id}
-                                className="hover:bg-white dark:hover:bg-neutral-900/50 transition-colors cursor-pointer"
-                            >
-                                {/* Featured Image & Title */}
-                                <td className="px-6 py-4">
-                                    <div className="flex items-center gap-4">
-                                        {post.featuredImage ? (
-                                            <div className="w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 overflow-hidden flex-shrink-0 relative">
-                                                <Image
-                                                    id={post.featuredImage}
-                                                    alt={post.title}
-                                                    fill
-                                                    editable={false}
-                                                    className="w-full h-full object-cover"
-                                                />
+                    <tbody className="divide-y divide-dashboard-border/30">
+                        {posts.map((post) => {
+                            const owner = isPostOwner(post);
+                            const author = getAuthorData(post);
+                            const initials = author.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+                            
+                            return (
+                                <tr
+                                    key={post.id}
+                                    className="group hover:bg-primary/[0.03] transition-colors"
+                                >
+                                    {/* Featured Image & Title */}
+                                    <td className="px-8 py-4">
+                                        <div className="flex items-center gap-4">
+                                            {post.featuredImage ? (
+                                                <div className={`size-12 relative bg-dashboard-bg/50 rounded-xl overflow-hidden border transition-all shrink-0 ${
+                                                    owner ? 'border-primary/30' : 'border-dashboard-border/60'
+                                                }`}>
+                                                    <PluginImage
+                                                        id={post.featuredImage}
+                                                        alt={post.title}
+                                                        fill
+                                                        editable={false}
+                                                        className="object-cover"
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <div className="size-12 rounded-xl bg-dashboard-bg/50 flex items-center justify-center border border-dashboard-border/60 opacity-20 shrink-0">
+                                                    <FileText size={18} />
+                                                </div>
+                                            )}
+                                            <div className="min-w-0">
+                                                <button 
+                                                    onClick={() => onEdit(post.id)} 
+                                                    className="text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent group/title"
+                                                >
+                                                    <h3 className="font-bold text-dashboard-text text-sm tracking-tight group-hover/title:text-primary transition-colors truncate max-w-[200px] lg:max-w-[300px]">
+                                                        {post.title.trim()}
+                                                    </h3>
+                                                </button>
+                                                <p className="text-[9px] font-mono text-dashboard-text-secondary/50 uppercase tracking-tight truncate max-w-[150px]">
+                                                    /{post.slug}
+                                                </p>
                                             </div>
-                                        ) : (
-                                            <div className="w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center flex-shrink-0">
-                                                <span className="text-xs text-neutral-400">No Image</span>
+                                        </div>
+                                    </td>
+
+                                    {/* Author */}
+                                    <td className="px-8 py-4 hidden lg:table-cell">
+                                        <div className="flex items-center gap-3">
+                                            <div className={`size-8 rounded-lg flex items-center justify-center text-[10px] font-bold border transition-all overflow-hidden shrink-0 ${
+                                                owner ? 'bg-primary text-white border-primary/20 shadow-lg shadow-primary/20' : 'bg-dashboard-bg/50 text-dashboard-text-secondary border-dashboard-border/60'
+                                            }`}>
+                                                {author.image ? (
+                                                    <img src={author.image} alt={author.name} className="size-full object-cover" crossOrigin="anonymous" />
+                                                ) : initials}
                                             </div>
-                                        )}
-                                        <div className="min-w-0 flex-1">
-                                            <button 
-                                                onClick={() => onEdit(post.id)} 
-                                                className="text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent"
-                                            >
-                                                <h3 className="font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1 text-left">
-                                                    {post.title.trim()}
-                                                </h3>
-                                            </button>
-                                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono text-left">
-                                                /{post.slug}
-                                            </p>
+                                            <span className={`text-[10px] font-bold uppercase tracking-tight truncate max-w-[100px] ${owner ? 'text-primary' : 'text-dashboard-text/70'}`}>
+                                                {author.name}
+                                                {owner && <span className="opacity-60 ml-0.5">(YOU)</span>}
+                                            </span>
                                         </div>
-                                    </div>
-                                </td>
+                                    </td>
 
-                                {/* Author */}
-                                <td className="px-6 py-4">
-                                    <div className="flex items-center gap-2">
-                                        {isPostOwner(post) ? (
-                                            <UserCheck size={14} className="text-primary" />
-                                        ) : (
-                                            <User size={14} className="text-neutral-400" />
-                                        )}
-                                        <span className={`text-sm ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`}>
-                                            {getAuthorName(post.authorId)}
-                                            {isPostOwner(post) && (
-                                                <span className="ml-2 text-xs text-primary/70">(Jij)</span>
-                                            )}
+                                    {/* Category */}
+                                    <td className="px-8 py-4 hidden xl:table-cell">
+                                        <span className="text-[10px] font-bold text-primary/80 uppercase tracking-widest flex items-center gap-1.5">
+                                            <Tag size={10} />
+                                            {post.category || 'Article'}
                                         </span>
-                                    </div>
-                                </td>
-
-                                {/* Category */}
-                                <td className="px-6 py-4">
-                                    <span className="text-sm text-neutral-600 dark:text-neutral-400">
-                                        {post.category || 'Uncategorized'}
-                                    </span>
-                                </td>
-
-                                {/* Languages */}
-                                <td className="px-6 py-4">
-                                    <LanguageFlags post={post} />
-                                </td>
-
-                                {/* Status Badge */}
-                                <td className="px-6 py-4">
-                                    <span
-                                        className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border ${getStatusBadgeColor(post.status)}`}
-                                    >
-                                        {post.status}
-                                    </span>
-                                </td>
-
-                                {/* Last Modified */}
-                                <td className="px-6 py-4">
-                                    <div className="flex items-center gap-2">
-                                        <Calendar size={14} className="text-neutral-400" />
-                                        <span className="text-sm text-neutral-600 dark:text-neutral-400">
-                                            {formatDate(post.updatedAt, locale)}
+                                    </td>
+
+                                    {/* Languages */}
+                                    <td className="px-8 py-4">
+                                        <LanguageFlags post={post} />
+                                    </td>
+
+                                    {/* Status Badge */}
+                                    <td className="px-8 py-4">
+                                        <span
+                                            className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider border backdrop-blur-sm shadow-sm ${getStatusBadgeColor(post.status)}`}
+                                        >
+                                            {post.status === 'not-translated' ? 'Edition Missing' : post.status}
                                         </span>
-                                    </div>
-                                </td>
-
-                                {/* Actions Menu - Only show for own posts */}
-                                <td className="px-6 py-4">
-                                    {isPostOwner(post) ? (
-                                        <div className="flex items-center justify-end">
-                                            <PostActionsMenu
-                                                onEdit={() => onEdit(post.id)}
-                                                onPreview={() => onPreview(post.id)}
-                                                onDuplicate={() => onDuplicate(post.id)}
-                                                onDelete={() => onDelete(post.id)}
-                                            />
-                                        </div>
-                                    ) : (
-                                        <div className="flex items-center justify-end text-neutral-400 text-xs">
-                                            Alleen auteur
+                                    </td>
+
+                                    {/* Last Modified */}
+                                    <td className="px-8 py-4 hidden md:table-cell">
+                                        <div className="flex flex-col">
+                                            <span className="text-[11px] font-semibold text-dashboard-text/80 uppercase tracking-tight">
+                                                {formatDate(post.updatedAt, locale)}
+                                            </span>
+                                            <span className="text-[9px] font-bold text-dashboard-text-secondary/50 uppercase tracking-widest">Last Edit</span>
                                         </div>
-                                    )}
-                                </td>
-                            </tr>
-                        ))}
+                                    </td>
+
+                                    {/* Actions Menu */}
+                                    <td className="px-8 py-4 text-right">
+                                        {owner ? (
+                                            <div className="flex items-center justify-end">
+                                                <PostActionsMenu
+                                                    onEdit={() => onEdit(post.id)}
+                                                    onPreview={() => onPreview(post.id)}
+                                                    onDuplicate={() => onDuplicate(post.id)}
+                                                    onDelete={() => onDelete(post.id)}
+                                                />
+                                            </div>
+                                        ) : (
+                                            <span className="text-[9px] font-bold text-dashboard-text-secondary/30 uppercase tracking-widest italic">View Only</span>
+                                        )}
+                                    </td>
+                                </tr>
+                            );
+                        })}
                     </tbody>
                 </table>
             </div>
         </div>
     );
 }
-