Refactor: Implement logging phases

src/pages/AdminSystemLog.tsx

@@ -1,6 +1,7 @@
 import { Component, ReactNode } from 'react';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
 import { AdminLayout } from '@/components/layout/AdminLayout';
+import { logger } from '@/lib/logger';
 import { SystemActivityLog } from '@/components/admin/SystemActivityLog';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Card, CardContent } from '@/components/ui/card';
@@ -28,7 +29,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   }
 
   componentDidCatch(error: Error, errorInfo: any) {
-    console.error('System Activity Log Error:', error, errorInfo);
+    logger.error('System Activity Log Error', { error, errorInfo });
   }
 
   render() {

src/pages/Auth.tsx

@@ -13,6 +13,7 @@ import { Zap, Mail, Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
 import { TurnstileCaptcha } from '@/components/auth/TurnstileCaptcha';
 import { notificationService } from '@/lib/notificationService';
 import { StorageWarning } from '@/components/auth/StorageWarning';
@@ -180,7 +181,7 @@ export default function Auth() {
       // Reset CAPTCHA widget to force fresh token generation
       setSignInCaptchaKey(prev => prev + 1);
       
-      console.error('[Auth] Sign in error:', error);
+      logger.error('[Auth] Sign in error', { error });
       
       // Enhanced error messages
       const errorMsg = getErrorMessage(error);
@@ -301,7 +302,7 @@ export default function Auth() {
             username: formData.username,
           }
         }).catch(err => {
-          console.error('Failed to register Novu subscriber:', err);
+          logger.error('Failed to register Novu subscriber', { error: err });
           // Don't block signup if Novu registration fails
         });
       }

src/pages/DesignerDetail.tsx

@@ -12,6 +12,7 @@ import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Ruler } from 'lucide-re
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { DesignerPhotoGallery } from '@/components/companies/DesignerPhotoGallery';
+import { logger } from '@/lib/logger';
 
 // Lazy load admin form
 const DesignerForm = lazy(() => import('@/components/admin/DesignerForm').then(m => ({ default: m.DesignerForm })));
@@ -81,7 +82,7 @@ export default function DesignerDetail() {
         fetchStatistics(data.id);
       }
     } catch (error) {
-      console.error('Error fetching designer:', error);
+      logger.error('Error fetching designer', { error });
     } finally {
       setLoading(false);
     }
@@ -108,7 +109,7 @@ export default function DesignerDetail() {
       if (photosError) throw photosError;
       setTotalPhotos(photosCount || 0);
     } catch (error) {
-      console.error('Error fetching statistics:', error);
+      logger.error('Error fetching statistics', { error });
     } finally {
       setStatsLoading(false);
     }

src/pages/DesignerRides.tsx

@@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { logger } from '@/lib/logger';
 
 export default function DesignerRides() {
   const { designerSlug } = useParams<{ designerSlug: string }>();
@@ -90,7 +91,7 @@ export default function DesignerRides() {
         setRides((ridesData || []) as any);
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/Designers.tsx

@@ -18,6 +18,7 @@ import { DesignerCard } from '@/components/designers/DesignerCard';
 import { DesignerListView } from '@/components/designers/DesignerListView';
 import { DesignerForm } from '@/components/admin/DesignerForm';
 import { useAuth } from '@/hooks/useAuth';
+import { logger } from '@/lib/logger';
 import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyCreation } from '@/lib/companyHelpers';
@@ -88,7 +89,7 @@ export default function Designers() {
       const { data } = await query;
       setCompanies(data || []);
     } catch (error) {
-      console.error('Error fetching companies:', error);
+      logger.error('Error fetching companies', { error });
     } finally {
       setLoading(false);
     }

src/pages/ForceLogout.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { supabase } from "@/integrations/supabase/client";
 import { authStorage } from "@/lib/authStorage";
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { logger } from '@/lib/logger';
 
 /**
  * ForceLogout - Hidden endpoint for completely clearing auth session
@@ -15,26 +16,26 @@ const ForceLogout = () => {
 
   useEffect(() => {
     const performFullLogout = async () => {
-      console.log('[ForceLogout] Starting complete auth cleanup...');
+      logger.info('[ForceLogout] Starting complete auth cleanup');
       
       try {
         // 1. Sign out from Supabase
-        console.log('[ForceLogout] Signing out from Supabase...');
+        logger.info('[ForceLogout] Signing out from Supabase');
         await supabase.auth.signOut();
         
         // 2. Clear all auth-related storage
-        console.log('[ForceLogout] Clearing all auth storage...');
+        logger.info('[ForceLogout] Clearing all auth storage');
         authStorage.clearAll();
         
         // 3. Brief delay to ensure cleanup completes
         await new Promise(resolve => setTimeout(resolve, 500));
         
-        console.log('[ForceLogout] ✓ Auth cleanup complete, redirecting to home...');
+        logger.info('[ForceLogout] Auth cleanup complete, redirecting to home');
         
         // 4. Redirect to home page
         navigate('/', { replace: true });
       } catch (error) {
-        console.error('[ForceLogout] Error during logout:', error);
+        logger.error('[ForceLogout] Error during logout', { error });
         // Still redirect even if there's an error
         navigate('/', { replace: true });
       }

src/pages/ManufacturerDetail.tsx

@@ -13,6 +13,7 @@ import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Factory, FerrisWheel }
 import { Company } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
+import { logger } from '@/lib/logger';
 
 // Lazy load admin form
 const ManufacturerForm = lazy(() => import('@/components/admin/ManufacturerForm').then(m => ({ default: m.ManufacturerForm })));
@@ -82,7 +83,7 @@ export default function ManufacturerDetail() {
         fetchStatistics(data.id);
       }
     } catch (error) {
-      console.error('Error fetching manufacturer:', error);
+      logger.error('Error fetching manufacturer', { error });
     } finally {
       setLoading(false);
     }
@@ -118,7 +119,7 @@ export default function ManufacturerDetail() {
       if (photosError) throw photosError;
       setTotalPhotos(photosCount || 0);
     } catch (error) {
-      console.error('Error fetching statistics:', error);
+      logger.error('Error fetching statistics', { error });
     } finally {
       setStatsLoading(false);
     }

src/pages/ManufacturerModels.tsx

@@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { logger } from '@/lib/logger';
 
 interface RideModelWithCount extends RideModel {
   ride_count: number;
@@ -85,7 +86,7 @@ export default function ManufacturerModels() {
       setModels(modelsWithCounts);
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/ManufacturerRides.tsx

@@ -17,6 +17,7 @@ import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { logger } from '@/lib/logger';
 
 export default function ManufacturerRides() {
   const { manufacturerSlug } = useParams<{ manufacturerSlug: string }>();
@@ -90,7 +91,7 @@ export default function ManufacturerRides() {
         setRides((ridesData || []) as any);
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/Manufacturers.tsx

@@ -18,6 +18,7 @@ import { ManufacturerCard } from '@/components/manufacturers/ManufacturerCard';
 import { ManufacturerListView } from '@/components/manufacturers/ManufacturerListView';
 import { ManufacturerForm } from '@/components/admin/ManufacturerForm';
 import { useAuth } from '@/hooks/useAuth';
+import { logger } from '@/lib/logger';
 import { useUserRole } from '@/hooks/useUserRole';
 import { toast } from '@/hooks/use-toast';
 import { submitCompanyCreation } from '@/lib/companyHelpers';
@@ -75,7 +76,7 @@ export default function Manufacturers() {
       const { data } = await query;
       setCompanies(data || []);
     } catch (error) {
-      console.error('Error fetching companies:', error);
+      logger.error('Error fetching companies', { error });
     } finally {
       setLoading(false);
     }

src/pages/NotFound.tsx

@@ -1,13 +1,14 @@
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { logger } from '@/lib/logger';
 
 const NotFound = () => {
   useDocumentTitle('404 - Page Not Found');
   const location = useLocation();
 
   useEffect(() => {
-    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+    logger.error("404 Error: User attempted to access non-existent route", { pathname: location.pathname });
   }, [location.pathname]);
 
   return (

src/pages/OperatorDetail.tsx

@@ -14,6 +14,7 @@ import { Company, Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { OperatorPhotoGallery } from '@/components/companies/OperatorPhotoGallery';
 import { ParkCard } from '@/components/parks/ParkCard';
+import { logger } from '@/lib/logger';
 
 // Lazy load admin form
 const OperatorForm = lazy(() => import('@/components/admin/OperatorForm').then(m => ({ default: m.OperatorForm })));
@@ -89,7 +90,7 @@ export default function OperatorDetail() {
         fetchPhotoCount(data.id);
       }
     } catch (error) {
-      console.error('Error fetching operator:', error);
+      logger.error('Error fetching operator', { error });
     } finally {
       setLoading(false);
     }
@@ -110,7 +111,7 @@ export default function OperatorDetail() {
       if (error) throw error;
       setParks(data || []);
     } catch (error) {
-      console.error('Error fetching parks:', error);
+      logger.error('Error fetching parks', { error });
     } finally {
       setParksLoading(false);
     }
@@ -137,7 +138,7 @@ export default function OperatorDetail() {
       if (ridesError) throw ridesError;
       setOperatingRides(ridesData?.length || 0);
     } catch (error) {
-      console.error('Error fetching statistics:', error);
+      logger.error('Error fetching statistics', { error });
     } finally {
       setStatsLoading(false);
     }
@@ -154,7 +155,7 @@ export default function OperatorDetail() {
       if (error) throw error;
       setTotalPhotos(count || 0);
     } catch (error) {
-      console.error('Error fetching photo count:', error);
+      logger.error('Error fetching photo count', { error });
       setTotalPhotos(0);
     }
   };

src/pages/OperatorParks.tsx

@@ -17,6 +17,7 @@ import { Grid3X3, List } from 'lucide-react';
 import { FilterState, SortState } from './Parks';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { logger } from '@/lib/logger';
 
 const initialFilters: FilterState = {
   search: '',
@@ -86,7 +87,7 @@ export default function OperatorParks() {
         setParks(parksData || []);
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/OwnerParks.tsx

@@ -17,6 +17,7 @@ import { Grid3X3, List } from 'lucide-react';
 import { FilterState, SortState } from './Parks';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
+import { logger } from '@/lib/logger';
 
 const initialFilters: FilterState = {
   search: '',
@@ -86,7 +87,7 @@ export default function OwnerParks() {
         setParks(parksData || []);
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/ParkRides.tsx

@@ -15,6 +15,7 @@ import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 import { useOpenGraph } from '@/hooks/useOpenGraph';
@@ -110,7 +111,7 @@ export default function ParkRides() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       setRides((ridesData || []) as any);
     } catch (error) {
-      console.error('Error fetching park and rides:', error);
+      logger.error('Error fetching park and rides', { error });
       toast({
         title: "Error",
         description: "Failed to load park rides.",

src/pages/Profile.tsx

@@ -23,6 +23,7 @@ import { User, MapPin, Calendar, Star, Trophy, Settings, Camera, Edit3, Save, X,
 import { Profile as ProfileType } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { useToast } from '@/hooks/use-toast';
+import { logger } from '@/lib/logger';
 import { getErrorMessage } from '@/lib/errorHandler';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { profileEditSchema } from '@/lib/validation';
@@ -215,7 +216,7 @@ export default function Profile() {
         parkCount: parkCount
       });
     } catch (error) {
-      console.error('Error fetching calculated stats:', error);
+      logger.error('Error fetching calculated stats', { error });
       toast({
         variant: 'destructive',
         description: getErrorMessage(error),
@@ -379,7 +380,7 @@ export default function Profile() {
 
       setRecentActivity(combined);
     } catch (error) {
-      console.error('Error fetching recent activity:', error);
+      logger.error('Error fetching recent activity', { error });
       toast({
         variant: 'destructive',
         description: getErrorMessage(error),
@@ -440,7 +441,7 @@ export default function Profile() {
         await fetchRecentActivity(data.user_id || '');
       }
     } catch (error) {
-      console.error('Error fetching profile:', error);
+      logger.error('Error fetching profile', { error });
       toast({
         variant: "destructive",
         title: "Error loading profile",
@@ -481,7 +482,7 @@ export default function Profile() {
         await fetchRecentActivity(user.id);
       }
     } catch (error) {
-      console.error('Error fetching profile:', error);
+      logger.error('Error fetching profile', { error });
       toast({
         variant: "destructive",
         title: "Error loading profile",

src/pages/PropertyOwnerDetail.tsx

@@ -14,6 +14,7 @@ import { Company, Park } from '@/types/database';
 import { supabase } from '@/integrations/supabase/client';
 import { PropertyOwnerPhotoGallery } from '@/components/companies/PropertyOwnerPhotoGallery';
 import { ParkCard } from '@/components/parks/ParkCard';
+import { logger } from '@/lib/logger';
 
 // Lazy load admin form
 const PropertyOwnerForm = lazy(() => import('@/components/admin/PropertyOwnerForm').then(m => ({ default: m.PropertyOwnerForm })));
@@ -89,7 +90,7 @@ export default function PropertyOwnerDetail() {
         fetchPhotoCount(data.id);
       }
     } catch (error) {
-      console.error('Error fetching property owner:', error);
+      logger.error('Error fetching property owner', { error });
     } finally {
       setLoading(false);
     }
@@ -110,7 +111,7 @@ export default function PropertyOwnerDetail() {
       if (error) throw error;
       setParks(data || []);
     } catch (error) {
-      console.error('Error fetching parks:', error);
+      logger.error('Error fetching parks', { error });
     } finally {
       setParksLoading(false);
     }
@@ -137,7 +138,7 @@ export default function PropertyOwnerDetail() {
       if (ridesError) throw ridesError;
       setOperatingRides(ridesData?.length || 0);
     } catch (error) {
-      console.error('Error fetching statistics:', error);
+      logger.error('Error fetching statistics', { error });
     } finally {
       setStatsLoading(false);
     }
@@ -154,7 +155,7 @@ export default function PropertyOwnerDetail() {
       if (error) throw error;
       setTotalPhotos(count || 0);
     } catch (error) {
-      console.error('Error fetching photo count:', error);
+      logger.error('Error fetching photo count', { error });
       setTotalPhotos(0);
     }
   };

src/pages/RideModelDetail.tsx

@@ -16,6 +16,7 @@ import { useAuthModal } from '@/hooks/useAuthModal';
 import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
 import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
 
 // Lazy load admin form
@@ -108,7 +109,7 @@ export default function RideModelDetail() {
         }
       }
     } catch (error) {
-      console.error('Error fetching data:', error);
+      logger.error('Error fetching data', { error });
     } finally {
       setLoading(false);
     }

src/pages/RideModelRides.tsx

@@ -15,6 +15,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { toast } from '@/hooks/use-toast';
 import { getErrorMessage } from '@/lib/errorHandler';
+import { logger } from '@/lib/logger';
 import type { Ride, Company, RideModel } from "@/types/database";
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
 
@@ -110,7 +111,7 @@ export default function RideModelRides() {
       setModel(modelData as RideModel);
       setRides(ridesData as Ride[] || []);
     } catch (error) {
-      console.error("Error fetching data:", error);
+      logger.error("Error fetching data", { error });
     } finally {
       setLoading(false);
     }