Implement desktop-only dashboard

Restrict dashboard access to desktop devices. Redirect mobile and tablet users to an informational page explaining desktop-only availability.

Author: lovable-dev[bot]

src/App.tsx

@@ -27,6 +27,7 @@ import TrackingJsRoute from '@/pages/TrackingJsRoute';
 import AdminPage from '@/pages/AdminPage';
 import AffiliateOnboardingPage from '@/pages/AffiliateOnboardingPage';
 import CommissionInfoPage from '@/pages/CommissionInfoPage';
+import MobileNotSupportedPage from '@/pages/MobileNotSupportedPage';
 
 const Index = lazy(() => import('@/pages/Index'));
 const AdvancedStatsPage = lazy(() => import('@/pages/AdvancedStatsPage'));
@@ -81,6 +82,7 @@ function App() {
                     <Route path="/payment-success" element={<PaymentSuccessPage />} />
                     <Route path="/affiliate-onboarding" element={<AffiliateOnboardingPage />} />
                     <Route path="/commission-info" element={<CommissionInfoPage />} />
+                    <Route path="/mobile-not-supported" element={<MobileNotSupportedPage />} />
                   </Routes>
                 </Suspense>
 

src/pages/Index.tsx

@@ -3,10 +3,12 @@ import { useAuth } from '@/hooks/useAuth';
 import { useOnboarding } from '@/hooks/useOnboarding';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useGuidedTour } from '@/hooks/useGuidedTour';
+import { useIsMobile } from '@/hooks/use-mobile';
 import { AuthForm } from '@/components/AuthForm';
 import { Dashboard } from '@/components/Dashboard';
 import { OnboardingCarousel } from '@/components/OnboardingCarousel';
 import { ProtectedRoute } from '@/components/ProtectedRoute';
+import MobileNotSupportedPage from './MobileNotSupportedPage';
 import { useTranslation } from 'react-i18next';
 import { useEffect } from 'react';
 
@@ -16,6 +18,7 @@ const Index = () => {
   const { isAuthenticated, checkAuth } = useAuthGuard({ requireAuth: false });
   const { tourCompleted, startTour } = useGuidedTour();
   const { t } = useTranslation();
+  const isMobile = useIsMobile();
 
   const loading = authLoading || onboardingLoading;
 
@@ -66,6 +69,12 @@ const Index = () => {
     return <AuthForm />;
   }
 
+  // Si connecté mais sur mobile/tablette, afficher la page mobile
+  if (user && isMobile) {
+    console.log('📱 DEVICE - Mobile user detected, showing mobile page');
+    return <MobileNotSupportedPage />;
+  }
+
   // Si connecté mais n'a pas vu l'onboarding, afficher le carousel (protégé)
   if (!hasSeenOnboarding) {
     console.log('🔐 SECURITY - User authenticated but onboarding not completed');

src/pages/MobileNotSupportedPage.tsx

@@ -0,0 +1,74 @@
+import { RefSpringLogo } from '@/components/RefSpringLogo';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Monitor, Smartphone, Tablet } from 'lucide-react';
+import { Helmet } from 'react-helmet-async';
+
+const MobileNotSupportedPage = () => {
+  return (
+    <>
+      <Helmet>
+        <title>RefSpring - Version Desktop Requise</title>
+        <meta name="description" content="RefSpring nécessite un ordinateur de bureau pour une expérience optimale." />
+        <meta name="robots" content="noindex, nofollow" />
+      </Helmet>
+      
+      <div className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md text-center">
+          <CardHeader className="space-y-6">
+            <div className="flex justify-center">
+              <RefSpringLogo className="h-12 w-auto" />
+            </div>
+            
+            <div className="space-y-2">
+              <CardTitle className="text-2xl font-bold text-foreground">
+                Version Desktop Requise
+              </CardTitle>
+              <CardDescription className="text-muted-foreground">
+                RefSpring est optimisé pour les ordinateurs de bureau
+              </CardDescription>
+            </div>
+          </CardHeader>
+          
+          <CardContent className="space-y-6">
+            <div className="flex justify-center space-x-4 text-muted-foreground">
+              <div className="flex flex-col items-center space-y-2">
+                <Smartphone className="h-8 w-8 opacity-50" />
+                <span className="text-xs">Mobile</span>
+              </div>
+              <div className="flex flex-col items-center space-y-2">
+                <Tablet className="h-8 w-8 opacity-50" />
+                <span className="text-xs">Tablette</span>
+              </div>
+              <div className="flex flex-col items-center space-y-2">
+                <Monitor className="h-8 w-8 text-primary" />
+                <span className="text-xs font-medium text-primary">Desktop</span>
+              </div>
+            </div>
+            
+            <div className="text-sm text-muted-foreground space-y-3">
+              <p>
+                Notre tableau de bord nécessite un écran plus large pour afficher 
+                toutes les données et fonctionnalités de manière optimale.
+              </p>
+              <p className="font-medium text-foreground">
+                Veuillez utiliser un ordinateur de bureau ou portable pour accéder à RefSpring.
+              </p>
+            </div>
+            
+            <div className="pt-4">
+              <Button 
+                onClick={() => window.location.href = '/'}
+                className="w-full"
+              >
+                Retour à l'accueil
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+};
+
+export default MobileNotSupportedPage;