- Timestamp:
- 06/24/26 16:28:50 (11 days ago)
- Branches:
- main
- Children:
- a8f4a2d
- Parents:
- 0b502c2
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
chapterx-frontend/src/components/admin/PlatformStats.tsx
r0b502c2 r99c1e45 1 import React from 'react'2 import { Users, BookOpen, FileText, Heart, Eye, MessageCircle } from 'lucide-react'1 import React, { useEffect } from 'react' 2 import { Users, BookOpen, Heart, MessageCircle } from 'lucide-react' 3 3 import { useAuthStore } from '../../store/authStore' 4 4 import { useStoryStore } from '../../store/storyStore' 5 5 6 6 export const PlatformStats: React.FC = () => { 7 const { allUsers } = useAuthStore()8 const { stories, comments } = useStoryStore()7 const { allUsers, fetchAllUsers } = useAuthStore() 8 const { stories, fetchStories } = useStoryStore() 9 9 10 const totalViews = stories.reduce((acc, s) => acc + s.total_views, 0) 10 useEffect(() => { fetchStories(); fetchAllUsers() }, []) 11 11 12 const totalLikes = stories.reduce((acc, s) => acc + s.total_likes, 0) 13 const totalComments = stories.reduce((acc, s) => acc + s.total_comments, 0) 12 14 const published = stories.filter(s => s.status === 'published').length 13 15 14 16 const stats = [ 15 { icon: <Users size={24} className="text-blue-300" />, label: 'Total Users', value: allUsers.length, color: 'bg-blue-500/20', change: '+12 this month'},17 { 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` }, 16 18 { icon: <BookOpen size={24} className="text-violet-300" />, label: 'Total Stories', value: stories.length, color: 'bg-violet-500/20', change: `${published} published` }, 17 { icon: <FileText size={24} className="text-emerald-300" />, label: 'Comments', value: comments.length, color: 'bg-emerald-500/20', change: 'Platform-wide' },18 19 { icon: <Heart size={24} className="text-rose-300" />, label: 'Total Likes', value: totalLikes.toLocaleString(), color: 'bg-rose-500/20', change: 'Across all stories' }, 19 { icon: <Eye size={24} className="text-amber-300" />, label: 'Total Views', value: totalViews.toLocaleString(), color: 'bg-amber-500/20', change: 'All time' }, 20 { 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' }, 20 { icon: <MessageCircle size={24} className="text-emerald-300" />, label: 'Total Comments', value: totalComments.toLocaleString(), color: 'bg-emerald-500/20', change: 'Platform-wide' }, 21 21 ] 22 22 23 23 return ( 24 <div className="grid grid-cols-2 md:grid-cols- 3gap-4">24 <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> 25 25 {stats.map(stat => ( 26 26 <div key={stat.label} className="bg-slate-800 border border-slate-700 rounded-2xl p-6">
Note:
See TracChangeset
for help on using the changeset viewer.
