Changeset 99c1e45 for chapterx-frontend/src/components

Timestamp:

06/24/26 16:28:50 (12 days ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

a8f4a2d

Parents:

0b502c2

Message:

Fixed writer section and admin management

Location:

chapterx-frontend/src/components

Files:

• admin/PlatformStats.tsx (modified) (1 diff)
• admin/UserTable.tsx (modified) (4 diffs)
• story/LikeButton.tsx (modified) (3 diffs)
• ui/StoryCard.tsx (modified) (2 diffs)
• writer/StoryAnalytics.tsx (modified) (4 diffs)

chapterx-frontend/src/components/admin/PlatformStats.tsx

@@ -1 @@
-import React from 'react'
-import { Users, BookOpen, FileText, Heart, Eye, MessageCircle } from 'lucide-react'
+import React, { useEffect } from 'react'
+import { Users, BookOpen, Heart, 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 { allUsers, fetchAllUsers } = useAuthStore()
+  const { stories, fetchStories } = useStoryStore()
 
-  const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0)
+  useEffect(() => { fetchStories(); fetchAllUsers() }, [])
+
   const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0)
+  const totalComments = stories.reduce((acc, s) => acc + s.total_comments, 0)
   const published = stories.filter(s => s.status === 'published').length
 
   const stats = [
-    { icon: <Users size={24} className="text-blue-300" />, label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: '+12 this month' },
+    { icon: <Users size={24} className="text-blue-300" />, label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: `${allUsers.filter(u => u.role === 'writer').length} writers` },
     { icon: <BookOpen size={24} className="text-violet-300" />, label: 'Total Stories', value: stories.length, color: 'bg-violet-500/20', change: `${published} published` },
-    { icon: <FileText size={24} className="text-emerald-300" />, label: 'Comments', value: comments.length, color: 'bg-emerald-500/20', change: 'Platform-wide' },
     { icon: <Heart size={24} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' },
-    { icon: <Eye size={24} className="text-amber-300" />, label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-amber-500/20', change: 'All time' },
-    { icon: <MessageCircle size={24} className="text-cyan-300" />, label: 'Writers', value: allUsers.filter(u => u.role === 'writer').length, color: 'bg-cyan-500/20', change: 'Active creators' },
+    { icon: <MessageCircle size={24} className="text-emerald-300" />, label: 'Total Comments', value: totalComments.toLocaleString(), color: 'bg-emerald-500/20', change: 'Platform-wide' },
   ]
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
       {stats.map(stat => (
         <div key={stat.label} className="bg-slate-800 border border-slate-700 rounded-2xl p-6">

chapterx-frontend/src/components/admin/UserTable.tsx

@@ -1 +1 @@
 import React, { useState } from 'react'
 import { Search, Shield, UserX, UserCheck } from 'lucide-react'
+import axios from 'axios'
 import { useAuthStore } from '../../store/authStore'
-import { useNotificationStore } from '../../store/notificationStore'
 import { useUIStore } from '../../store/uiStore'
 import { User, UserRole } from '../../types'
@@ -10 +10 @@
 import { Modal } from '../ui/Modal'
 
+const API = 'https://localhost:7125/api'
+
 export const UserTable: React.FC = () => {
-  const { allUsers, updateUserRole, currentUser } = useAuthStore()
-  const { addNotification } = useNotificationStore()
+  const { allUsers, updateUserRole, currentUser, token } = useAuthStore()
   const { addToast } = useUIStore()
   const [search, setSearch] = useState('')
   const [confirmUser, setConfirmUser] = useState<User | null>(null)
   const [confirmAction, setConfirmAction] = useState<'promote' | 'demote' | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const authHeaders = token ? { Authorization: `Bearer ${token}` } : {}
 
   const filtered = allUsers.filter(
@@ -25 +29 @@
   )
 
-  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 handlePromote = async (user: User) => {
+    setLoading(true)
+    try {
+      await axios.post(`${API}/admins`, { userId: user.user_id }, { headers: authHeaders })
+      updateUserRole(user.user_id, 'admin')
+      addToast(`${user.username} promoted to admin`)
+    } catch (err: any) {
+      addToast(err?.response?.data?.message || 'Failed to promote user.', 'error')
+    } finally {
+      setLoading(false)
+      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 handleDemote = async (user: User) => {
+    setLoading(true)
+    try {
+      await axios.delete(`${API}/admins/${user.user_id}`, { headers: authHeaders })
+      updateUserRole(user.user_id, 'writer')
+      addToast(`${user.username} removed from admin`, 'info')
+    } catch (err: any) {
+      addToast(err?.response?.data?.message || 'Failed to demote user.', 'error')
+    } finally {
+      setLoading(false)
+      setConfirmUser(null)
+    }
   }
 
@@ -140 +152 @@
                 variant={confirmAction === 'promote' ? 'primary' : 'danger'}
                 className="flex-1"
+                loading={loading}
                 onClick={() => confirmAction === 'promote' ? handlePromote(confirmUser) : handleDemote(confirmUser)}
               >

chapterx-frontend/src/components/story/LikeButton.tsx

@@ -9 +9 @@
 const API = 'https://localhost:7125/api'
 
-function getAuthHeaders() {
-  try {
-    const token = JSON.parse(localStorage.getItem('chapterx-auth') || '{}')?.state?.token
-    return token ? { Authorization: `Bearer ${token}` } : {}
-  } catch { return {} }
-}
-
 interface LikeButtonProps {
   storyId: number
@@ -25 +18 @@
 export const LikeButton: React.FC<LikeButtonProps> = ({ storyId, authorUserId, totalLikes, onCountChange }) => {
   const navigate = useNavigate()
-  const { currentUser } = useAuthStore()
+  const { currentUser, token } = useAuthStore()
   const { addNotification } = useNotificationStore()
+  const authHeaders = token ? { Authorization: `Bearer ${token}` } : {}
   const { addToast } = useUIStore()
   const [liked, setLiked] = useState(false)
@@ -55 +49 @@
     try {
       if (liked) {
-        await axios.delete(`${API}/likes/user/${currentUser.user_id}/story/${storyId}`, { headers: getAuthHeaders() })
+        await axios.delete(`${API}/likes/user/${currentUser.user_id}/story/${storyId}`, { headers: authHeaders })
         setLiked(false)
         setCount(c => { const n = c - 1; onCountChange?.(n); return n })
         addToast('Removed from likes', 'info')
       } else {
-        await axios.post(`${API}/likes`, { userId: currentUser.user_id, storyId }, { headers: getAuthHeaders() })
+        await axios.post(`${API}/likes`, { userId: currentUser.user_id, storyId }, { headers: authHeaders })
         setLiked(true)
         setCount(c => { const n = c + 1; onCountChange?.(n); return n })

chapterx-frontend/src/components/ui/StoryCard.tsx

@@ -1 +1 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Heart, MessageCircle, Eye, Lock } from 'lucide-react'
+import { Heart, MessageCircle, Lock } from 'lucide-react'
 import { Story } from '../../types'
 import { useAuthStore } from '../../store/authStore'
@@ -86 +86 @@
             {story.total_comments}
           </span>
-          <span className="flex items-center gap-1 ml-auto">
-            <Eye size={12} />
-            {story.total_views.toLocaleString()}
-          </span>
         </div>
       </div>

chapterx-frontend/src/components/writer/StoryAnalytics.tsx

@@ -1 +1 @@
 import React from 'react'
 import {
-  LineChart,
-  Line,
   BarChart,
   Bar,
@@ -11 +9 @@
   ResponsiveContainer,
 } from 'recharts'
-import { Eye, Heart, MessageCircle, TrendingUp, Clock, BarChart2 } from 'lucide-react'
-import { mockAnalytics } from '../../data/mockData'
+import { Heart, MessageCircle, BookOpen } from 'lucide-react'
+import { Story } from '../../types'
+
+interface Props {
+  stories: Story[]
+}
 
 const StatCard: React.FC<{ icon: React.ReactNode; label: string; value: string | number; color: string }> = ({
   icon, label, value, color,
 }) => (
-  <div className={`p-4 bg-slate-800 rounded-xl border border-slate-700`}>
+  <div className="p-4 bg-slate-800 rounded-xl border border-slate-700">
     <div className={`w-10 h-10 rounded-xl ${color} flex items-center justify-center mb-3`}>
       {icon}
     </div>
-    <p className="text-2xl font-bold text-white">{value.toLocaleString()}</p>
+    <p className="text-2xl font-bold text-white">{typeof value === 'number' ? value.toLocaleString() : value}</p>
     <p className="text-slate-400 text-sm mt-0.5">{label}</p>
   </div>
@@ -42 +44 @@
 }
 
-export const StoryAnalytics: React.FC = () => {
-  const analytics = mockAnalytics
-  const viewsData = analytics.views_over_time.filter((_, i) => i % 5 === 0)
-  const likesData = analytics.likes_over_time.filter((_, i) => i % 5 === 0)
+export const StoryAnalytics: React.FC<Props> = ({ stories }) => {
+  const published = stories.filter(s => s.status === 'published')
+
+  const totalLikes = stories.reduce((a, s) => a + s.total_likes, 0)
+  const totalComments = stories.reduce((a, s) => a + s.total_comments, 0)
+  const totalChapters = stories.reduce((a, s) => a + s.total_chapters, 0)
+
+  // Likes per story (sorted by created_at)
+  const likesData = [...published]
+    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+    .map(s => ({
+      date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+      likes: s.total_likes,
+      story: s.title,
+    }))
+
+  if (published.length === 0) {
+    return (
+      <div className="text-center py-12 text-slate-500">
+        <p>No published stories yet — analytics will appear here once you publish.</p>
+      </div>
+    )
+  }
 
   return (
     <div className="space-y-6">
       {/* Stat cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
-        <StatCard icon={<Eye size={18} className="text-blue-300" />} label="Total Views" value={analytics.total_views} color="bg-blue-500/20" />
-        <StatCard icon={<Heart size={18} className="text-rose-300" />} label="Total Likes" value={analytics.total_likes} color="bg-rose-500/20" />
-        <StatCard icon={<MessageCircle size={18} className="text-violet-300" />} label="Comments" value={analytics.total_comments} color="bg-violet-500/20" />
-        <StatCard icon={<Clock size={18} className="text-amber-300" />} label="Avg Read (min)" value={analytics.avg_read_time} color="bg-amber-500/20" />
-        <StatCard icon={<BarChart2 size={18} className="text-emerald-300" />} label="Completion %" value={`${analytics.completion_rate}%`} color="bg-emerald-500/20" />
-      </div>
-
-      {/* Views chart */}
-      <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
-        <div className="flex items-center gap-2 mb-4">
-          <TrendingUp size={16} className="text-blue-400" />
-          <h3 className="text-white font-semibold">Views Over Time</h3>
-        </div>
-        <ResponsiveContainer width="100%" height={200}>
-          <LineChart data={viewsData}>
-            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
-            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
-            <YAxis tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
-            <Tooltip content={<CustomTooltip />} />
-            <Line type="monotone" dataKey="views" stroke="#6366f1" strokeWidth={2} dot={false} name="Views" />
-          </LineChart>
-        </ResponsiveContainer>
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        <StatCard icon={<Heart size={18} className="text-rose-300" />} label="Total Likes" value={totalLikes} color="bg-rose-500/20" />
+        <StatCard icon={<MessageCircle size={18} className="text-violet-300" />} label="Total Comments" value={totalComments} color="bg-violet-500/20" />
+        <StatCard icon={<BookOpen size={18} className="text-emerald-300" />} label="Total Chapters" value={totalChapters} color="bg-emerald-500/20" />
       </div>
 
@@ -79 +81 @@
         <div className="flex items-center gap-2 mb-4">
           <Heart size={16} className="text-rose-400" />
-          <h3 className="text-white font-semibold">Likes Over Time</h3>
+          <h3 className="text-white font-semibold">Likes per Story</h3>
         </div>
-        <ResponsiveContainer width="100%" height={200}>
-          <BarChart data={likesData}>
-            <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
-            <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
-            <YAxis tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
-            <Tooltip content={<CustomTooltip />} />
-            <Bar dataKey="likes" fill="#f43f5e" radius={[4, 4, 0, 0]} name="Likes" />
-          </BarChart>
-        </ResponsiveContainer>
+        {likesData.length > 0 ? (
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart data={likesData}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+              <XAxis dataKey="date" tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
+              <YAxis tick={{ fill: '#64748b', fontSize: 11 }} tickLine={false} axisLine={false} />
+              <Tooltip content={<CustomTooltip />} />
+              <Bar dataKey="likes" fill="#f43f5e" radius={[4, 4, 0, 0]} name="Likes" />
+            </BarChart>
+          </ResponsiveContainer>
+        ) : (
+          <p className="text-slate-500 text-sm text-center py-8">No likes data yet</p>
+        )}
       </div>
+
+      {/* Per-story breakdown */}
+      {published.length > 1 && (
+        <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+          <h3 className="text-white font-semibold mb-4">Story Breakdown</h3>
+          <div className="space-y-3">
+            {[...published]
+              .sort((a, b) => b.total_likes - a.total_likes)
+              .map(s => (
+                <div key={s.story_id} className="flex items-center justify-between text-sm">
+                  <span className="text-slate-300 truncate max-w-xs">{s.title}</span>
+                  <div className="flex items-center gap-4 text-slate-400 flex-shrink-0">
+                    <span className="flex items-center gap-1"><Heart size={12} /> {s.total_likes}</span>
+                    <span className="flex items-center gap-1"><MessageCircle size={12} /> {s.total_comments}</span>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
     </div>
   )