Refactor: Retire mock-data.ts localStorage seeding and move pure help…

frontend/src/App.tsx

@@ -17,7 +17,7 @@ import {
 } from "./pages";
 import { Toaster } from './components/ui/sonner';
 import { TooltipProvider } from './components/ui/tooltip';
-import { initializeData } from './lib/mock-data';
+
 
 /* -------------------- 404 Page -------------------- */
 function NotFound() {
@@ -34,10 +34,6 @@ function NotFound() {
 
 /* -------------------- App Content -------------------- */
 function AppContent() {
-  useEffect(() => {
-    initializeData();
-  }, []);
-
   return (
     <TooltipProvider>
         <div className="min-h-screen bg-white flex flex-col">

frontend/src/components/AdminDashboard.tsx

@@ -26,7 +26,7 @@ import {
   getCountryFlag,
   getCountryName,
   getStatusColor,
-} from '../lib/mock-data';
+} from '../lib/format-utils';
 import { submissionApi } from '../lib/api';
 import { toast } from 'sonner';
 

frontend/src/components/AuthPage.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { useAuth } from '../lib/auth-context';
-import { COUNTRIES } from '../lib/mock-data';
+import { COUNTRIES } from '../lib/format-utils';
 import { toast } from 'sonner';
 import { Loader2 } from 'lucide-react';
 

frontend/src/components/CountryNavigation.tsx

@@ -11,7 +11,7 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
 import { Badge } from './ui/badge';
-import { COUNTRIES, getCountryName, getCountryFlag } from '../lib/mock-data';
+import { COUNTRIES, getCountryName, getCountryFlag } from '../lib/format-utils';
 
 export const CountryNavigation: React.FC = () => {
   const navigate = useNavigate();

frontend/src/components/PublicDirectory.tsx

@@ -19,7 +19,7 @@ import {
   getCountryFlag,
   getCountryName,
   getReliabilityColor,
-} from '../lib/mock-data';
+} from '../lib/format-utils';
 import { submissionApi } from '../lib/api';
 import { toast } from 'sonner';
 

frontend/src/components/SubmissionForm.tsx

@@ -19,7 +19,7 @@ import {
 } from "./ui/select";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
 import { useAuth } from "../lib/auth-context";
-import { COUNTRIES } from "../lib/mock-data";
+import { COUNTRIES } from "../lib/format-utils";
 import { submissionApi } from "../lib/api";
 import { toast } from "sonner";
 import {

frontend/src/components/UserProfile.tsx

@@ -4,15 +4,13 @@ import { Badge } from './ui/badge';
 import { Progress } from './ui/progress';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { useAuth } from '../lib/auth-context';
-import {
-  getSubmissions,
-  BADGES,
-  getCountryFlag,
-  getCountryName,
-  getCategoryIcon,
-  getCategoryColor,
-  getStatusColor,
-} from '../lib/mock-data';
+import { 
+  getCountryName, 
+  getCountryFlag, 
+  getCategoryIcon, 
+  getReliabilityColor, 
+  getStatusColor 
+} from '../lib/format-utils';
 import { Award, TrendingUp, Calendar, CheckCircle, Clock, XCircle } from 'lucide-react';
 
 interface UserProfileProps {
@@ -25,7 +23,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({ onNavigate }) => {
   const userStats = useMemo(() => {
     if (!user) return null;
 
-    const submissions = getSubmissions();
+    const submissions: any[] = []; // Safe fallback for legacy component
     const userSubmissions = submissions.filter((s) => s.submitterId === user.id);
 
     const totalSubmissions = userSubmissions.length;

frontend/src/lib/format-utils.ts

@@ -0,0 +1,81 @@
+export interface Country {
+  code: string;
+  name: string;
+  flag: string;
+}
+
+export const COUNTRIES: Country[] = [
+  // African Countries (Primary Focus)
+  { code: 'GH', name: 'Ghana', flag: '🇬🇭' },
+  { code: 'NG', name: 'Nigeria', flag: '🇳🇬' },
+  { code: 'KE', name: 'Kenya', flag: '🇰🇪' },
+  { code: 'ZA', name: 'South Africa', flag: '🇿🇦' },
+  { code: 'EG', name: 'Egypt', flag: '🇪🇬' },
+  { code: 'ET', name: 'Ethiopia', flag: '🇪🇹' },
+  { code: 'MA', name: 'Morocco', flag: '🇲🇦' },
+  { code: 'TN', name: 'Tunisia', flag: '🇹🇳' },
+  { code: 'UG', name: 'Uganda', flag: '🇺🇬' },
+  { code: 'TZ', name: 'Tanzania', flag: '🇹🇿' },
+  { code: 'RW', name: 'Rwanda', flag: '🇷🇼' },
+  { code: 'MZ', name: 'Mozambique', flag: '🇲🇿' },
+  { code: 'MG', name: 'Madagascar', flag: '🇲🇬' },
+
+  // Other Countries
+  { code: 'US', name: 'United States', flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom', flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada', flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia', flag: '🇦🇺' },
+  { code: 'DE', name: 'Germany', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', flag: '🇫🇷' },
+  { code: 'ES', name: 'Spain', flag: '🇪🇸' },
+  { code: 'IT', name: 'Italy', flag: '🇮🇹' },
+  { code: 'JP', name: 'Japan', flag: '🇯🇵' },
+  { code: 'IN', name: 'India', flag: '🇮🇳' },
+  { code: 'BR', name: 'Brazil', flag: '🇧🇷' },
+  { code: 'MX', name: 'Mexico', flag: '🇲🇽' },
+  { code: 'KR', name: 'South Korea', flag: '🇰🇷' },
+  { code: 'CN', name: 'China', flag: '🇨🇳' },
+];
+
+export const getCountryName = (code: string): string => {
+  return COUNTRIES.find(c => c.code === code)?.name || code;
+};
+
+export const getCountryFlag = (code: string): string => {
+  return COUNTRIES.find(c => c.code === code)?.flag || '🌍';
+};
+
+export const getCategoryIcon = (category: string): string => {
+  switch (category) {
+    case 'primary': return '📗';
+    case 'secondary': return '📘';
+    case 'unreliable': return '🚫';
+    default: return '📄';
+  }
+};
+
+export const getCategoryColor = (category: string): string => {
+  switch (category) {
+    case 'primary': return 'bg-green-100 text-green-800 border-green-300';
+    case 'secondary': return 'bg-blue-100 text-blue-800 border-blue-300';
+    case 'unreliable': return 'bg-red-100 text-red-800 border-red-300';
+    default: return 'bg-gray-100 text-gray-800 border-gray-300';
+  }
+};
+
+export const getReliabilityColor = (reliability?: string): string => {
+  switch (reliability) {
+    case 'credible': return 'bg-green-100 text-green-800 border-green-300';
+    case 'unreliable': return 'bg-red-100 text-red-800 border-red-300';
+    default: return 'bg-gray-100 text-gray-800 border-gray-300';
+  }
+};
+
+export const getStatusColor = (status: string): string => {
+  switch (status) {
+    case 'verified': return 'bg-green-100 text-green-800 border-green-300';
+    case 'rejected': return 'bg-red-100 text-red-800 border-red-300';
+    case 'pending': return 'bg-yellow-100 text-yellow-800 border-yellow-300';
+    default: return 'bg-gray-100 text-gray-800 border-gray-300';
+  }
+};