Changeset a8f4a2d for chapterx-frontend/src/components

Timestamp:

06/24/26 16:51:52 (12 days ago)

Author:

kikisrbinoska <srbinoskakristina07@…>

Branches:

main

Children:

3ae4bab

Parents:

99c1e45

Message:

Fixed views count

Location:

chapterx-frontend/src/components

Files:

• admin/PlatformStats.tsx (modified) (4 diffs)
• writer/StoryAnalytics.tsx (modified) (4 diffs)

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

@@ -1 +1 @@
 import React, { useEffect } from 'react'
-import { Users, BookOpen, Heart, MessageCircle } from 'lucide-react'
+import { Users, BookOpen, Heart, MessageCircle, Eye } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useStoryStore } from '../../store/storyStore'
@@ -12 +12 @@
   const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0)
   const totalComments = stories.reduce((acc, s) => acc + s.total_comments, 0)
+  const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0)
   const published = stories.filter(s => s.status === 'published').length
 
@@ -17 +18 @@
     { 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: <Eye size={24} className="text-cyan-300" />, label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-cyan-500/20', change: 'Chapter reads' },
     { icon: <Heart size={24} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' },
     { icon: <MessageCircle size={24} className="text-emerald-300" />, label: 'Total Comments', value: totalComments.toLocaleString(), color: 'bg-emerald-500/20', change: 'Platform-wide' },
@@ -22 +24 @@
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 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/writer/StoryAnalytics.tsx

@@ -9 +9 @@
   ResponsiveContainer,
 } from 'recharts'
-import { Heart, MessageCircle, BookOpen } from 'lucide-react'
+import { Heart, MessageCircle, BookOpen, Eye } from 'lucide-react'
 import { Story } from '../../types'
 
@@ -50 +50 @@
   const totalComments = stories.reduce((a, s) => a + s.total_comments, 0)
   const totalChapters = stories.reduce((a, s) => a + s.total_chapters, 0)
+  const totalViews = stories.reduce((a, s) => a + s.total_views, 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,
-    }))
+  const sortedPublished = [...published].sort(
+    (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+  )
+
+  const likesData = sortedPublished.map(s => ({
+    date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+    likes: s.total_likes,
+    story: s.title,
+  }))
+
+  const viewsData = sortedPublished.map(s => ({
+    date: new Date(s.created_at).toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+    views: s.total_views,
+    story: s.title,
+  }))
 
   if (published.length === 0) {
@@ -71 +79 @@
     <div className="space-y-6">
       {/* Stat cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard icon={<Eye size={18} className="text-cyan-300" />} label="Total Views" value={totalViews} color="bg-cyan-500/20" />
         <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>
+
+      {/* Views chart */}
+      <div className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Eye size={16} className="text-cyan-400" />
+          <h3 className="text-white font-semibold">Views per Story</h3>
+        </div>
+        {viewsData.length > 0 ? (
+          <ResponsiveContainer width="100%" height={200}>
+            <BarChart 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 />} />
+              <Bar dataKey="views" fill="#06b6d4" radius={[4, 4, 0, 0]} name="Views" />
+            </BarChart>
+          </ResponsiveContainer>
+        ) : (
+          <p className="text-slate-500 text-sm text-center py-8">No views yet</p>
+        )}
       </div>
 
@@ -109 +139 @@
                   <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"><Eye size={12} /> {s.total_views.toLocaleString()}</span>
                     <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>