-
About WikiSourceVerifier
-
- A community-driven platform for verifying Wikipedia
- references and maintaining source quality standards.
-
+
© 2025 WikiSourceVerifier. Built for the Wikipedia community.
+
This is a demonstration platform. For production use, connect to a real backend service.
Quick Links
diff --git a/frontend/src/components/AdminDashboard.tsx b/frontend/src/components/AdminDashboard.tsx
index f542bc1..a62f875 100644
--- a/frontend/src/components/AdminDashboard.tsx
+++ b/frontend/src/components/AdminDashboard.tsx
@@ -1,4 +1,6 @@
-import { useState, useEffect } from 'react';
+
+
+import React, { useState, useEffect } from 'react';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
@@ -28,8 +30,10 @@ import {
getStatusColor,
} from '../lib/mock-data';
import { submissionApi } from '../lib/api';
+import { useWebSocket } from '../hooks/useWebSocket';
import { toast } from 'sonner';
+
interface Submission {
id: string;
url: string;
@@ -45,6 +49,10 @@ interface Submission {
verifiedAt?: string;
createdAt: string;
updatedAt: string;
+ mediaType?: string;
+ credibility?: 'credible' | 'unreliable';
+ submitterName?: string;
+ submittedDate?: string;
}
import { CheckCircle, XCircle, Eye, Clock, TrendingUp, Users, FileCheck } from 'lucide-react';
@@ -52,8 +60,10 @@ interface AdminDashboardProps {
onNavigate: (page: string) => void;
}
+
export const AdminDashboard: React.FC
= ({ onNavigate }) => {
const { user } = useAuth();
+ const { on, isConnected } = useWebSocket();
const [submissions, setSubmissions] = useState([]);
const [selectedSubmission, setSelectedSubmission] = useState(null);
const [verificationNotes, setVerificationNotes] = useState('');
@@ -62,10 +72,57 @@ export const AdminDashboard: React.FC = ({ onNavigate }) =>
const [showDialog, setShowDialog] = useState(false);
const [loading, setLoading] = useState(false);
+
useEffect(() => {
loadSubmissions();
}, [user]);
+ // Real-time WebSocket event handlers
+ useEffect(() => {
+ if (!user || (user.role !== 'admin' && user.role !== 'verifier')) return;
+
+ const handleNewSubmission = (data: any) => {
+ console.log('📝 Real-time: New submission received:', data);
+ // Add new submission to the list if it matches user's scope
+ if (user.role === 'admin' || user.country === data.country) {
+ loadSubmissions(); // Refresh the list
+ toast.info(data.message, {
+ duration: 4000,
+ position: 'bottom-right'
+ });
+ }
+ };
+
+ const handleSubmissionVerified = (data: any) => {
+ console.log('✅ Real-time: Submission verification received:', data);
+ loadSubmissions(); // Refresh the list
+ };
+
+ const handleSubmissionUpdated = (data: any) => {
+ console.log('📝 Real-time: Submission update received:', data);
+ loadSubmissions(); // Refresh the list
+ };
+
+ const handleSubmissionDeleted = (data: any) => {
+ console.log('🗑️ Real-time: Submission deletion received:', data);
+ loadSubmissions(); // Refresh the list
+ };
+
+ // Subscribe to real-time events
+ const unsubscribeCreated = on('submission:created', handleNewSubmission);
+ const unsubscribeVerified = on('submission:verified', handleSubmissionVerified);
+ const unsubscribeUpdated = on('submission:updated', handleSubmissionUpdated);
+ const unsubscribeDeleted = on('submission:deleted', handleSubmissionDeleted);
+
+ // Cleanup subscriptions
+ return () => {
+ unsubscribeCreated();
+ unsubscribeVerified();
+ unsubscribeUpdated();
+ unsubscribeDeleted();
+ };
+ }, [user, on]);
+
const loadSubmissions = async () => {
if (!user) return;
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index 87277cf..f1a2d90 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -1,17 +1,9 @@
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import {
- BookOpen,
- Search,
- Upload,
- User,
- LogOut,
- Award,
- Shield,
- LogIn,
-} from "lucide-react";
-import { Button } from "./ui/button";
-import { useState } from "react";
-import { useAuth } from "../lib/auth-context";
+
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { BookOpen, Search, Upload, User, LogOut, Award, Shield, LogIn } from 'lucide-react';
+import { Button } from './ui/button';
+import { useAuth } from '../lib/auth-context';
+import NotificationSystem from './NotificationSystem';
import {
DropdownMenu,
DropdownMenuContent,
@@ -19,18 +11,9 @@ import {
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-import { Badge } from "./ui/badge";
-import { Menu } from "lucide-react";
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
-
-
-const countries = [
- { name: 'Ghana', slug: 'ghana' },
- { name: 'Nigeria', slug: 'nigeria' },
- { name: 'Kenya', slug: 'kenya' },
-];
-
+} from './ui/dropdown-menu';
+import { Badge } from './ui/badge';
+import React from 'react';
export const Navigation: React.FC = () => {
const { user, logout } = useAuth();
@@ -94,70 +77,15 @@ export const Navigation: React.FC = () => {