Index: chapterx-frontend/src/components/admin/ContentModerationTable.tsx =================================================================== --- chapterx-frontend/src/components/admin/ContentModerationTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/ContentModerationTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,124 @@ +import React, { useState } from 'react' +import { Trash2, Eye, AlertTriangle } from 'lucide-react' +import { useStoryStore } from '../../store/storyStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { Story } from '../../types' +import { StatusBadge, GenreBadge } from '../ui/Badge' +import { Button } from '../ui/Button' +import { Modal } from '../ui/Modal' +import { useNavigate } from 'react-router-dom' + +export const ContentModerationTable: React.FC = () => { + const { stories, deleteStory } = useStoryStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + const navigate = useNavigate() + const [confirmStory, setConfirmStory] = useState(null) + + const handleDelete = (story: Story) => { + deleteStory(story.story_id) + addNotification({ + user_id: story.user_id, + type: 'system', + title: 'Story Removed', + message: `Your story "${story.title}" has been removed by an administrator.`, + }) + addToast(`"${story.title}" removed from platform`, 'info') + setConfirmStory(null) + } + + const formatDate = (str: string) => + new Date(str).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + + return ( +
+
+ + + + + + + + + + + + + {stories.map(story => ( + + + + + + + + + ))} + +
StoryAuthorGenresStatusPublishedActions
+
+

{story.title}

+ {story.mature_content && ( + 18+ + )} +
+ 		@{story.author_username} +
+ {story.genres.slice(0, 2).map(g => )} +
+ 		{formatDate(story.created_at)} +
+ + +
+
+ {stories.length === 0 && ( +
No stories to moderate.
+ )} +
+ + {/* Confirm modal */} + setConfirmStory(null)} + title="Remove Story" + size="sm" + > + {confirmStory && ( +
+
+ +
+

"{confirmStory.title}"

+

+ This will permanently remove the story and notify the author. This action cannot be undone. +

+
+
+
+ + +
+
+ )} + +
+ ) +} Index: chapterx-frontend/src/components/admin/PlatformStats.tsx =================================================================== --- chapterx-frontend/src/components/admin/PlatformStats.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/PlatformStats.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,37 @@ +import React from 'react' +import { Users, BookOpen, FileText, Heart, Eye, MessageCircle } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useStoryStore } from '../../store/storyStore' + +export const PlatformStats: React.FC = () => { + const { allUsers } = useAuthStore() + const { stories, comments } = useStoryStore() + + const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0) + const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0) + const published = stories.filter(s => s.status === 'published').length + + const stats = [ + { icon: , label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: '+12 this month' }, + { icon: , label: 'Total Stories', value: stories.length, color: 'bg-violet-500/20', change: `${published} published` }, + { icon: , label: 'Comments', value: comments.length, color: 'bg-emerald-500/20', change: 'Platform-wide' }, + { icon: , label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' }, + { icon: , label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-amber-500/20', change: 'All time' }, + { icon: , label: 'Writers', value: allUsers.filter(u => u.role === 'writer').length, color: 'bg-cyan-500/20', change: 'Active creators' }, + ] + + return ( +
+ {stats.map(stat => ( +
+
+ {stat.icon} +
+

{stat.value}

+

{stat.label}

+

{stat.change}

+
+ ))} +
+ ) +} Index: chapterx-frontend/src/components/admin/UserTable.tsx =================================================================== --- chapterx-frontend/src/components/admin/UserTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) +++ chapterx-frontend/src/components/admin/UserTable.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935) @@ -0,0 +1,153 @@ +import React, { useState } from 'react' +import { Search, Shield, UserX, UserCheck } from 'lucide-react' +import { useAuthStore } from '../../store/authStore' +import { useNotificationStore } from '../../store/notificationStore' +import { useUIStore } from '../../store/uiStore' +import { User, UserRole } from '../../types' +import { Avatar } from '../ui/Avatar' +import { RoleBadge } from '../ui/Badge' +import { Button } from '../ui/Button' +import { Modal } from '../ui/Modal' + +export const UserTable: React.FC = () => { + const { allUsers, updateUserRole, currentUser } = useAuthStore() + const { addNotification } = useNotificationStore() + const { addToast } = useUIStore() + const [search, setSearch] = useState('') + const [confirmUser, setConfirmUser] = useState(null) + const [confirmAction, setConfirmAction] = useState<'promote' | 'demote' | null>(null) + + const filtered = allUsers.filter( + u => + u.username.toLowerCase().includes(search.toLowerCase()) || + u.email.toLowerCase().includes(search.toLowerCase()) || + u.name.toLowerCase().includes(search.toLowerCase()) + ) + + const handlePromote = (user: User) => { + const newRole: UserRole = user.role === 'regular' ? 'writer' : user.role === 'writer' ? 'admin' : 'admin' + updateUserRole(user.user_id, newRole) + addNotification({ + user_id: user.user_id, + type: 'system', + title: 'Role Updated', + message: `Your account has been promoted to ${newRole}.`, + }) + addToast(`${user.username} promoted to ${newRole}`) + setConfirmUser(null) + } + + const handleDemote = (user: User) => { + const newRole: UserRole = user.role === 'admin' ? 'writer' : 'regular' + updateUserRole(user.user_id, newRole) + addToast(`${user.username} role changed to ${newRole}`, 'info') + setConfirmUser(null) + } + + const formatDate = (str: string) => + new Date(str).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + + return ( +
+ {/* Search */} +
+ + setSearch(e.target.value)} + placeholder="Search users..." + className="w-full pl-9 pr-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500" + /> +
+ + {/* Table */} +
+ + + + + + + + + + + + {filtered.map(user => ( + + + + + + + + ))} + +
UserEmailRoleJoinedActions
+
+ +
+

{user.name} {user.surname}

+

@{user.username}

+
+
+ 		{user.email}{formatDate(user.created_at)} +
+ {user.user_id !== currentUser?.user_id && user.role !== 'admin' && ( + + )} + {user.user_id !== currentUser?.user_id && user.role !== 'regular' && ( + + )} +
+
+ {filtered.length === 0 && ( +
No users found.
+ )} +
+ + {/* Confirm modal */} + { setConfirmUser(null); setConfirmAction(null) }} + title={confirmAction === 'promote' ? 'Promote User' : 'Demote User'} + size="sm" + > + {confirmUser && ( +
+

+ {confirmAction === 'promote' + ? `Promote @${confirmUser.username} to the next role tier?` + : `Demote @${confirmUser.username} to a lower role?`} +

+
+ + +
+
+ )} + +
+ ) +}