import logoMark from "@/assets/logo-mark.png";
import { BrandedLoadingScreen } from "@/components/ui/page-loader";
import { useState, useEffect, lazy, Suspense, type ReactNode } from "react";
import { CommandCenterPanel } from "@/components/dashboard/CommandCenterPanel";
import { readRecent, recordRecent, resolveRecent } from "@/lib/dashboard/recentModules";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
import { LayoutGrid } from "lucide-react";
import i18next from "i18next";

function ModulesContainer({ drawer, open, onOpenChange, children }: { drawer: boolean; open: boolean; onOpenChange: (o: boolean) => void; children: ReactNode }) {
  if (!drawer) return <>{children}</>;
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="w-full overflow-y-auto sm:max-w-5xl">
        <SheetHeader className="mb-4"><SheetTitle>{i18next.t("cockpit.allModules")}</SheetTitle></SheetHeader>
        {children}
      </SheetContent>
    </Sheet>
  );
}
import { useNavigate, Link } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import { useLogout } from "@/hooks/useLogout";
import { AdManager } from "@/components/customer-display/AdManager";
import { ThemeSelectorWidget } from "@/components/dashboard/ThemeSelectorWidget";
import { MiniSparkBar } from "@/components/dashboard/MiniSparkBar";
import { DynamicShadowCard } from "@/components/dashboard/DynamicShadowCard";

import { ADSENSE_CONFIG } from "@/config/adsense";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ModuleCard } from "@/components/dashboard/ModuleCard";
import { Button } from "@/components/ui/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
import { Palette, ShieldAlert } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import {
  Building2,
  ShoppingCart,
  
  Settings,
  ArrowRight,
  TrendingUp,
  Users,
  Package,
  BarChart3,
  Truck,
  Monitor,
  LogOut,
  Landmark,
  Sprout,
  User,
  LucideIcon,
  Loader2,
  BookOpen,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { BrandedText } from "@/components/ui/BrandedText";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTranslation } from "react-i18next";
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
import { usePermissions } from "@/hooks/usePermissions";
import { useCompanyPlan } from "@/hooks/useCompanyPlan";
import { CompanySelector } from "@/components/backoffice/CompanySelector";
import { usePageTransition } from "@/contexts/PageTransitionContext";
const LazyTabletMockup = lazy(() => import("@/components/landing/TabletMockup").then(m => ({ default: m.TabletMockup })));
import { useSelectedCompany } from "@/hooks/useSelectedCompany";
import { FullscreenToggle } from "@/components/FullscreenToggle";
import { CommandPaletteButton } from "@/components/CommandPaletteButton";
import { useAuthMode, PIN_ALLOWED_MODULES } from "@/hooks/useAuthMode";
import { HiddenModulesPanel, type HiddenModuleEntry } from "@/components/dashboard/HiddenModulesPanel";
import { PLAN_FEATURE_LABELS } from "@/config/permissions";
import { Skeleton } from "@/components/ui/skeleton";

interface ModuleInfo {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  path: string;
  color: string;
  features: string[];
  devOnly?: boolean;
  lockedFeature?: string;
  lockedFeatureLabel?: string;
}

interface ModuleGroup {
  groupName: string;
  modules: ModuleInfo[];
  primaryModules?: ModuleInfo[];
  secondaryModules?: ModuleInfo[];
}

// Génère la classe de fond teinté pour une card de module (10% opacité)
const getCardBackground = (color: string): string => {
  // Cas gradient (POS): from-slate-600 to-slate-700 -> bg-slate-600/10
  if (color.includes('from-')) {
    const match = color.match(/from-(\w+-\d+)/);
    if (match) return `bg-${match[1]}/10`;
  }
  // Cas normal: bg-blue-600 -> bg-blue-600/10
  if (color.startsWith('bg-')) {
    return `${color}/10`;
  }
  return 'bg-muted/50';
};

// Génère la couleur shimmer et glow pour l'effet holographique
const colorMap: Record<string, { shimmer: string; glow: string; accent: string }> = {
  'bg-blue-600': { shimmer: 'rgba(59, 130, 246, 0.3)', glow: 'rgba(59, 130, 246, 0.25)', accent: '#3b82f6' },
  'bg-pink-600': { shimmer: 'rgba(219, 39, 119, 0.3)', glow: 'rgba(219, 39, 119, 0.25)', accent: '#db2777' },
  'bg-teal-600': { shimmer: 'rgba(13, 148, 136, 0.3)', glow: 'rgba(13, 148, 136, 0.25)', accent: '#0d9488' },
  'bg-violet-600': { shimmer: 'rgba(124, 58, 237, 0.3)', glow: 'rgba(124, 58, 237, 0.25)', accent: '#7c3aed' },
  'bg-amber-600': { shimmer: 'rgba(217, 119, 6, 0.3)', glow: 'rgba(217, 119, 6, 0.25)', accent: '#d97706' },
  'bg-amber-700': { shimmer: 'rgba(180, 83, 9, 0.3)', glow: 'rgba(180, 83, 9, 0.25)', accent: '#b45309' },
  'bg-rose-600': { shimmer: 'rgba(225, 29, 72, 0.3)', glow: 'rgba(225, 29, 72, 0.25)', accent: '#e11d48' },
  'bg-emerald-600': { shimmer: 'rgba(5, 150, 105, 0.3)', glow: 'rgba(5, 150, 105, 0.25)', accent: '#059669' },
  'bg-green-600': { shimmer: 'rgba(22, 163, 74, 0.3)', glow: 'rgba(22, 163, 74, 0.25)', accent: '#16a34a' },
  'bg-sky-600': { shimmer: 'rgba(2, 132, 199, 0.3)', glow: 'rgba(2, 132, 199, 0.25)', accent: '#0284c7' },
  'bg-orange-600': { shimmer: 'rgba(234, 88, 12, 0.3)', glow: 'rgba(234, 88, 12, 0.25)', accent: '#ea580c' },
  'bg-indigo-600': { shimmer: 'rgba(79, 70, 229, 0.3)', glow: 'rgba(79, 70, 229, 0.25)', accent: '#4f46e5' },
};

const getShimmerStyle = (color: string): React.CSSProperties => {
  // Gérer le cas gradient (POS)
  if (color.includes('from-slate')) {
    return {
      '--shimmer-color': 'rgba(100, 116, 139, 0.3)',
      '--shimmer-glow': 'rgba(100, 116, 139, 0.25)',
      '--module-accent': '#64748b',
    } as React.CSSProperties;
  }
  
  const colors = colorMap[color] || { shimmer: 'rgba(255, 255, 255, 0.2)', glow: 'rgba(0, 0, 0, 0.15)', accent: 'hsl(var(--primary))' };
  return {
    '--shimmer-color': colors.shimmer,
    '--shimmer-glow': colors.glow,
    '--module-accent': colors.accent,
  } as React.CSSProperties;
};

// Style shimmer réduit de 50% pour les modules en développement
const getDevOnlyShimmerStyle = (color: string): React.CSSProperties => {
  const baseStyle = getShimmerStyle(color);
  const shimmerColor = baseStyle['--shimmer-color'] as string;
  const glowColor = baseStyle['--shimmer-glow'] as string;
  
  // Réduire l'opacité du shimmer de 50%
  const reduceOpacity = (rgba: string) => {
    return rgba.replace(/[\d.]+\)$/, (match) => `${parseFloat(match) * 0.5})`);
  };
  
  return {
    '--shimmer-color': shimmerColor ? reduceOpacity(shimmerColor) : undefined,
    '--shimmer-glow': glowColor ? reduceOpacity(glowColor) : undefined,
  } as React.CSSProperties;
};

const Dashboard = () => {
  const navigate = useNavigate();
  const logout = useLogout();
  const { t } = useTranslation();
  const { triggerTransition, transitionState } = usePageTransition();
  
  // Centralized company selection
  const {
    selectedCompanyId,
    setSelectedCompanyId,
    companies: userCompanies,
    isLoading: companiesLoading,
  } = useSelectedCompany();
  const authMode = useAuthMode();
  const isPinMode = authMode === 'pin';

  // États pour l'animation d'entrée combinée
  const [showInitialLoader, setShowInitialLoader] = useState(true);
  const [isContentReady, setIsContentReady] = useState(false);
  const [cardsAnimationReady, setCardsAnimationReady] = useState(false);

  // Navigate when transition enters fullscreen-loading phase (page should load now)
  useEffect(() => {
    if (transitionState.phase === "fullscreen-loading" && transitionState.moduleInfo?.path) {
      navigate(transitionState.moduleInfo.path);
    }
  }, [transitionState.phase, transitionState.moduleInfo, navigate]);

  const permissions = usePermissions({ companyId: selectedCompanyId });
  const { externalAdsOnDisplay, internalAdsOnDisplay } = useCompanyPlan(selectedCompanyId);
  const showAdBanner = externalAdsOnDisplay || internalAdsOnDisplay;

  const allModuleGroups: ModuleGroup[] = [
    {
      groupName: "Commerçants",
      modules: [],
      primaryModules: [
        {
          id: "backoffice",
          title: "BackOffice",
          description: "Gestion commerciale & opérations",
          icon: Building2,
          path: "/backoffice",
          color: "bg-blue-600",
          features: ["Catalogue", "Réservations", "Finances", "Fidélité"],
        },
        {
          id: "pos",
          title: "Point de Vente",
          description: "Interface tactile optimisée",
          icon: ShoppingCart,
          path: "/pos",
          color: "from-slate-600 to-slate-700",
          features: ["Encaissement", "Commandes", "Tables", "Paiements"],
        },
      ],
      secondaryModules: [
        {
          id: "sales",
          title: "Gestion des Ventes",
          description: "Commandes en ligne & ventes ERP",
          icon: Package,
          path: "/sales",
          color: "bg-pink-600",
          features: ["Commandes Web & Borne", "Ventes ERP & Devis", "Suivi en direct", "Historique"],
        },
        {
          id: "purchasing",
          title: "Achats",
          description: "Gestion des approvisionnements",
          icon: Package,
          path: "/purchasing",
          color: "bg-orange-600",
          features: ["Fournisseurs", "Commandes", "Réceptions", "Transferts"],
          devOnly: true,
        },
        {
          id: "kiosk",
          title: "Borne de Commande",
          description: "Interface de commande sur place",
          icon: Monitor,
          path: "/kiosk",
          color: "bg-violet-600",
          features: ["Commandes autonomes", "Interface tactile", "Paiement", "Publicités"],
        },
        {
          id: "display",
          title: "Écrans d'affichage",
          description: "KDS Cuisine & Menu Board TV",
          icon: Monitor,
          path: "/display",
          color: "bg-amber-600",
          features: ["Tickets cuisine", "Postes de prépa", "Menu Board TV", "Temps réel"],
        },
      ],
    },
    {
      groupName: "Administration",
      modules: [
        {
          id: "operator",
          title: "Administration",
          description: "Dashboard Opérateur",
          icon: Settings,
          path: "/operator",
          color: "bg-rose-600",
          features: ["Sociétés & Rôles", "Plans & Abonnements", "Paiements plateforme", "Traductions"],
        },
        {
          id: "fiscal-administration",
          title: "Autorité Fiscale",
          description: "Configuration TVA & conformité fiscale",
          icon: BarChart3,
          path: "/fiscal-administration",
          color: "bg-amber-700",
          features: ["Planification revenus", "Administrateurs fiscaux", "Rapports par juridiction", "Exports"],
          devOnly: true,
        },
      ],
    },
    {
      groupName: "Partenaires",
      modules: [
        {
          id: "fiduciary",
          title: "Fiduciaire",
          description: "Espace comptable partenaire",
          icon: Landmark,
          path: "/fiduciary",
          color: "bg-emerald-600",
          features: ["Clients", "Exports fiscaux", "Déclarations TVA", "Rapports comptables"],
          devOnly: true,
        },
        {
          id: "business-referrer",
          title: "Apporteur d'Affaires",
          description: "Gestion des commissions",
          icon: TrendingUp,
          path: "/business-referrer",
          color: "bg-green-600",
          features: ["Commissions", "Sociétés référencées", "Historique", "Projections"],
        },
        {
          id: "supplier-b2b",
          title: "Fournisseur B2B",
          description: "Espace grossiste",
          icon: Truck,
          path: "/supplier-b2b",
          color: "bg-sky-600",
          features: ["Catalogue B2B", "Zones de livraison", "Gestion commandes", "Tarifs grossiste"],
          devOnly: true,
        },
      ],
    },
  ];

  // Platform-role users (operator, SUP/ADM/MAN/USR_PLATFORM) must always see the
  // Administration group regardless of company selection or PIN mode.
  const isPlatformUser = permissions.isOperator || !!permissions.platformRole;

  // Build hidden-modules diagnostic list (before filtering) so admins can see WHY a card is missing.
  const hiddenModules: HiddenModuleEntry[] = [];
  const mapModule = (module: ModuleInfo, groupName?: string): ModuleInfo | null => {
    const isPlatformGroup = groupName === "Administration";
    // Platform users always see platform modules, even in PIN mode or without a company.
    if (isPlatformUser && isPlatformGroup) {
      return module;
    }
    const pinOk = !isPinMode || PIN_ALLOWED_MODULES.includes(module.id);
    if (!pinOk) {
      hiddenModules.push({ id: module.id, title: module.title, reason: { type: "pin" } });
      return null;
    }
    const roleOk = permissions.canAccessDashboardModule(module.path);
    if (roleOk) return module;
    const restriction = permissions.getDashboardModuleRestriction(module.path);
    if (restriction?.type === "feature" && restriction.requiredFeature) {
      // Show as locked (upsell) instead of hiding
      const label = PLAN_FEATURE_LABELS[restriction.requiredFeature]?.label ?? restriction.requiredFeature;
      return {
        ...module,
        path: "/backoffice?tab=subscription",
        description: `Plan requis : ${label}`,
        devOnly: true, // reuse existing amber/dashed styling
        lockedFeature: restriction.requiredFeature,
        lockedFeatureLabel: label,
      };
    }
    if (restriction) {
      hiddenModules.push({ id: module.id, title: module.title, reason: restriction as HiddenModuleEntry["reason"] });
    }
    return null;
  };
  const filterModules = (mods: ModuleInfo[] | undefined, groupName?: string) =>
    mods?.map((m) => mapModule(m, groupName)).filter((m): m is ModuleInfo => m !== null);

  // Filter modules based on permissions
  const moduleGroups = allModuleGroups
    .map(group => ({
      ...group,
      modules: filterModules(group.modules, group.groupName) ?? [],
      primaryModules: filterModules(group.primaryModules, group.groupName),
      secondaryModules: filterModules(group.secondaryModules, group.groupName),
    }))
    .filter(group =>
      group.modules.length > 0 ||
      (group.primaryModules?.length || 0) > 0 ||
      (group.secondaryModules?.length || 0) > 0
    );

  const showDiagnosticPanel =
    !permissions.isLoading &&
    (hiddenModules.length > 0 || (isPinMode && !isPlatformUser) || permissions.isOperatorBypass || moduleGroups.length === 0);


  // Use selected company
  const userCompany = selectedCompanyId;

  // Fetch user to detect when ready
  const { data: user, isLoading } = useQuery({
    queryKey: ["current-user-dashboard"],
    queryFn: async () => {
      const { data: { user } } = await supabase.auth.getUser();
      return user;
    },
  });

  const isDashboardAccessLoading = isLoading || permissions.isLoading || companiesLoading;

  // Cockpit fusionné : modules récents + tiroir
  const showCockpit = !isPinMode && !!selectedCompanyId && !isDashboardAccessLoading && moduleGroups.length > 0;
  const [modulesDrawerOpen, setModulesDrawerOpen] = useState(false);
  const [recentKeys, setRecentKeys] = useState<string[]>([]);
  useEffect(() => {
    const sync = () => setRecentKeys(readRecent(user?.id));
    sync();
    window.addEventListener("recent-modules-changed", sync);
    return () => window.removeEventListener("recent-modules-changed", sync);
  }, [user?.id]);
  const allVisibleModules = moduleGroups.flatMap((g) => [...(g.primaryModules ?? []), ...(g.secondaryModules ?? []), ...g.modules]);
  const recentModules = resolveRecent(recentKeys, allVisibleModules.map((m) => m.path), [])
    .map((p) => allVisibleModules.find((m) => m.path === p)!)
    .filter(Boolean);
  const openModule: typeof triggerTransition = (rect, opts) => {
    recordRecent(user?.id, opts.path);
    setModulesDrawerOpen(false);
    return triggerTransition(rect, opts);
  };

  // Logique de séquencement des animations
  useEffect(() => {
    // Si on arrive via une transition depuis un autre module, skip le loader
    if (transitionState.isAnimating) {
      setShowInitialLoader(false);
      setIsContentReady(true);
      setCardsAnimationReady(true);
      return;
    }
    
    // Attendre que les données soient chargées
    if (!isLoading && user) {
      // Phase 1: Commencer le fade-out de l'overlay
      setIsContentReady(true);
      
      // Phase 2: Après 300ms (mi-fade), déclencher l'animation des cartes
      const cardsTimer = setTimeout(() => {
        setCardsAnimationReady(true);
      }, 300);
      
      // Phase 3: Cacher complètement l'overlay
      const hideTimer = setTimeout(() => {
        setShowInitialLoader(false);
      }, 600);
      
      return () => {
        clearTimeout(cardsTimer);
        clearTimeout(hideTimer);
      };
    }
  }, [isLoading, user, transitionState.isAnimating]);

  // Fetch real dashboard stats filtered by company
  const { data: dashboardStats } = useQuery({
    queryKey: ["dashboard-stats", userCompany],
    queryFn: async () => {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);

      // Get company locations
      let locationIds: string[] = [];
      if (userCompany) {
        const { data: companyLocations } = await supabase
          .from("locations")
          .select("id")
          .eq("company_id", userCompany);
        locationIds = companyLocations?.map(l => l.id) || [];
      }

      // Sales today (filtered by company locations)
      let salesTodayQuery = supabase
        .from("sales")
        .select("total_amount")
        .gte("sale_date", today.toISOString());
      
      if (userCompany && locationIds.length > 0) {
        salesTodayQuery = salesTodayQuery.in("location_id", locationIds);
      }
      const { data: salesToday } = await salesTodayQuery;

      const totalSalesToday = salesToday?.reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0;

      // Sales yesterday for comparison
      let salesYesterdayQuery = supabase
        .from("sales")
        .select("total_amount")
        .gte("sale_date", yesterday.toISOString())
        .lt("sale_date", today.toISOString());
      
      if (userCompany && locationIds.length > 0) {
        salesYesterdayQuery = salesYesterdayQuery.in("location_id", locationIds);
      }
      const { data: salesYesterday } = await salesYesterdayQuery;

      const totalSalesYesterday = salesYesterday?.reduce((sum, s) => sum + (s.total_amount || 0), 0) || 0;
      const salesChange = totalSalesYesterday > 0 
        ? Math.round(((totalSalesToday - totalSalesYesterday) / totalSalesYesterday) * 100)
        : 0;

      // Active customers - filter by those who purchased in company locations
      const startOfMonth = new Date();
      startOfMonth.setDate(1);
      startOfMonth.setHours(0, 0, 0, 0);

      let activeCustomers = 0;
      let totalCustomers = 0;

      if (userCompany && locationIds.length > 0) {
        // Get unique customer IDs from sales in company locations
        const { data: companySales } = await supabase
          .from("sales")
          .select("customer_id")
          .in("location_id", locationIds)
          .not("customer_id", "is", null);

        const uniqueCustomerIds = [...new Set(companySales?.map(s => s.customer_id).filter(Boolean))];
        totalCustomers = uniqueCustomerIds.length;

        // Active customers this month
        const { data: recentSales } = await supabase
          .from("sales")
          .select("customer_id")
          .in("location_id", locationIds)
          .gte("sale_date", startOfMonth.toISOString())
          .not("customer_id", "is", null);

        activeCustomers = [...new Set(recentSales?.map(s => s.customer_id).filter(Boolean))].length;
      } else {
        // Operator sees all
        const { count: allActive } = await supabase
          .from("customer_wallets")
          .select("*", { count: "exact", head: true })
          .gte("last_activity_at", startOfMonth.toISOString());

        const { count: allTotal } = await supabase
          .from("customers")
          .select("*", { count: "exact", head: true });

        activeCustomers = allActive || 0;
        totalCustomers = allTotal || 0;
      }

      // Products in stock (filtered by company)
      let stockQuery = supabase
        .from("stock_items")
        .select("quantity");
      
      if (userCompany) {
        stockQuery = stockQuery.eq("company_id", userCompany);
      }
      const { data: stockData } = await stockQuery;

       const totalStock = stockData?.reduce((sum, s) => sum + (s.quantity || 0), 0) || 0;

      // --- 15-day history for sparklines ---
      const fifteenDaysAgo = new Date(today);
      fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 14);

      // Fetch sales for the last 15 days
      let sales15Query = supabase
        .from("sales")
        .select("total_amount, sale_date, customer_id")
        .gte("sale_date", fifteenDaysAgo.toISOString());
      if (userCompany && locationIds.length > 0) {
        sales15Query = sales15Query.in("location_id", locationIds);
      }
      const { data: sales15 } = await sales15Query;

      // Build daily buckets
      const salesByDay: number[] = [];
      const customersByDay: number[] = [];
      for (let d = 0; d < 15; d++) {
        const dayStart = new Date(fifteenDaysAgo);
        dayStart.setDate(dayStart.getDate() + d);
        const dayEnd = new Date(dayStart);
        dayEnd.setDate(dayEnd.getDate() + 1);

        const daySales = sales15?.filter(s => {
          const sd = new Date(s.sale_date);
          return sd >= dayStart && sd < dayEnd;
        }) || [];

        salesByDay.push(daySales.reduce((sum, s) => sum + (s.total_amount || 0), 0));
        customersByDay.push(new Set(daySales.map(s => s.customer_id).filter(Boolean)).size);
      }

      // Stock history is not available per-day, so we use a flat line with current value
      const stockByDay = Array(15).fill(totalStock);

      return {
        salesToday: totalSalesToday,
        salesChange,
        activeCustomers,
        totalCustomers,
        totalStock,
        salesByDay,
        customersByDay,
        stockByDay,
      };
    },
    refetchInterval: 60000,
    enabled: userCompany !== undefined,
  });

  const stats = [
    { 
      label: "Ventes du jour", 
      value: `CHF ${(dashboardStats?.salesToday || 0).toLocaleString('fr-CH', { minimumFractionDigits: 2 })}`, 
      icon: TrendingUp, 
      change: `${dashboardStats?.salesChange && dashboardStats.salesChange >= 0 ? '+' : ''}${dashboardStats?.salesChange || 0}%`,
      sparkData: dashboardStats?.salesByDay || [],
      sparkColor: "hsl(var(--success))",
    },
    { 
      label: "Clients actifs", 
      value: (dashboardStats?.activeCustomers || 0).toLocaleString(), 
      icon: Users, 
      change: `${dashboardStats?.totalCustomers || 0} total`,
      sparkData: dashboardStats?.customersByDay || [],
      sparkColor: "hsl(var(--primary))",
    },
    { 
      label: "Produits en stock", 
      value: (dashboardStats?.totalStock || 0).toLocaleString(), 
      icon: Package, 
      change: "unités",
      sparkData: dashboardStats?.stockByDay || [],
      sparkColor: "hsl(var(--accent))",
    },
  ];

  const handleLogout = async () => {
    await logout({ redirectTo: "/" });
  };

  const noModulesTitle = isPinMode
    ? "Mode appareil actif"
    : userCompanies.length === 0
      ? "Aucune société accessible"
      : !selectedCompanyId
        ? "Aucune société sélectionnée"
        : "Aucun module disponible";

  const noModulesDescription = isPinMode
    ? "Quittez le mode PIN pour retrouver tous les modules de gestion."
    : userCompanies.length === 0
      ? "Créez une société ou vérifiez que votre utilisateur est bien membre d'une société."
      : !selectedCompanyId
        ? "Sélectionnez une société dans l'en-tête pour charger les modules."
        : "Aucun rôle compatible n'a été trouvé pour cette société. Vérifiez vos rôles ou votre appartenance.";

  return (
    <>
      {/* Overlay de chargement initial : même visuel que tous les autres chargements */}
      {showInitialLoader && (
        <div
          className={cn(
            "fixed inset-0 z-[100] transition-opacity duration-500",
            isContentReady ? "opacity-0 pointer-events-none" : "opacity-100"
          )}
        >
          <BrandedLoadingScreen />
        </div>
      )}

      <div className="h-screen flex flex-col bg-background overflow-hidden">
      {/* Header */}
      <header className="h-16 shrink-0 border-b border-transparent bg-gradient-to-r from-card via-card to-primary/5 flex items-center justify-between gap-2 px-4 md:px-6 relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-gradient-to-r after:from-primary/40 after:via-accent/30 after:to-transparent">
        <div className="flex items-center gap-3 min-w-0">
          <Link to="/dashboard" className="shrink-0" aria-label="CrystalERP">
            <img
              src={logoMark}
              alt="CrystalERP"
              width={40}
              height={40}
              className="w-10 h-10 object-contain"
            />
          </Link>
          <div className="min-w-0">
            <BrandedText text="CrystalERP" as="h1" className="text-lg font-semibold font-heading text-foreground" />
            <Breadcrumb>
              <BreadcrumbList className="text-xs">
                <BreadcrumbItem>
                  <BreadcrumbPage>Tableau de bord</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </div>
        <div className="flex items-center justify-end gap-1 md:gap-3 min-w-0 shrink-0">
          <CommandPaletteButton className="hidden md:inline-flex" />
          <div className="hidden md:block">
            <FullscreenToggle variant="icon" />
          </div>
          {!isPinMode && (
            <CompanySelector
              selectedCompanyId={selectedCompanyId || ""}
              onCompanyChange={setSelectedCompanyId}
              companies={userCompanies}
              isLoading={companiesLoading}
            />
          )}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-10 w-10 rounded-full">
                <Avatar className="h-10 w-10">
                  <AvatarImage src="" alt="Avatar" />
                  <AvatarFallback className="bg-primary text-primary-foreground">
                    <User className="h-5 w-5" />
                  </AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48">
              <DropdownMenuItem onClick={() => navigate("/profile")}>
                <User className="mr-2 h-4 w-4" />
                {t("profile.title")}
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout}>
                <LogOut className="mr-2 h-4 w-4" />
                {t("auth.logout")}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 overflow-auto p-4 md:p-6 dashboard-mesh-bg">
        {/* Ad Banner - only show if ads are enabled for this company */}
        {showAdBanner && (
          <div className="mb-6 rounded-lg overflow-hidden h-24 bg-muted/30">
            <AdManager
              companyId={selectedCompanyId}
              variant="banner"
              rotationInterval={20000}
              prioritizeInternal={false}
              adsenseSlotId={ADSENSE_CONFIG.slots.banner}
            />
          </div>
        )}

        {/* Stats moved before theme selector */}


        {/* Module groups */}
        {(() => {
          const getFlexibleGridCols = (count: number): string => {
            switch (count) {
              case 1:
                return "grid-cols-1";
              case 2:
                return "grid-cols-1 md:grid-cols-2";
              case 3:
                return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
              default:
                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
            }
          };
          return null;
        })()}
        {showCockpit && (
          <CommandCenterPanel
            companyId={selectedCompanyId}
            onOpenPath={(p) => recordRecent(user?.id, p)}
            dockExtras={<>
              {!isPinMode && (
                <HoverCard openDelay={80} closeDelay={150}>
                  <HoverCardTrigger asChild>
                    <button type="button" className="flex flex-col items-center gap-0.5 rounded-xl px-2.5 py-1 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary">
                      <Palette className="h-4 w-4" /><span className="text-[10px]">{t("cockpit.theme")}</span>
                    </button>
                  </HoverCardTrigger>
                  <HoverCardContent side="top" align="end" className="w-80 p-2"><ThemeSelectorWidget /></HoverCardContent>
                </HoverCard>
              )}
              {showDiagnosticPanel && (
                <HoverCard openDelay={80} closeDelay={150}>
                  <HoverCardTrigger asChild>
                    <button type="button" className="flex flex-col items-center gap-0.5 rounded-xl px-2.5 py-1 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary">
                      <ShieldAlert className="h-4 w-4" /><span className="text-[10px]">{t("cockpit.bypass")}</span>
                    </button>
                  </HoverCardTrigger>
                  <HoverCardContent side="top" align="end" className="w-auto p-2">
                    <HiddenModulesPanel hidden={hiddenModules} isPinMode={isPinMode} isOperatorBypass={permissions.isOperatorBypass} planCode={permissions.planCode} forceVisible={moduleGroups.length === 0} message={noModulesDescription} />
                  </HoverCardContent>
                </HoverCard>
              )}
            </>}
            modulesPanel={
              <div className="hud-panel flex items-stretch gap-1 p-1">
                <div className="grid flex-1 grid-cols-3 gap-1">
                  {recentModules.map((m) => (
                    <button key={m.path} type="button" data-module-card={m.id} title={m.description}
                      onClick={(e) => openModule(e.currentTarget.getBoundingClientRect(), { icon: m.icon, title: m.title, color: m.color, path: m.path, animationTarget: "header" })}
                      className="flex min-w-0 items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1 py-1 text-center transition-colors hover:border-primary/50 hover:bg-primary/5">
                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary/10 text-primary"><m.icon className="h-3 w-3" /></span>
                      <span className="truncate font-mono text-[10px] font-semibold uppercase leading-tight tracking-wider text-foreground">{m.title}</span>
                    </button>
                  ))}
                </div>
                <Button variant="outline" size="sm" title={t("cockpit.allModules")} className="h-auto shrink-0 px-2 font-mono text-[10px] uppercase tracking-wider" onClick={() => setModulesDrawerOpen(true)}>
                  <LayoutGrid className="mr-1 h-3 w-3" />{t("cockpit.all")}
                </Button>
              </div>
            }
          />
        )}
        <ModulesContainer drawer={showCockpit} open={modulesDrawerOpen} onOpenChange={setModulesDrawerOpen}>
        <div className="space-y-8" key={selectedCompanyId || 'no-company'}>
          {isDashboardAccessLoading ? (
            <div className="flex flex-col lg:flex-row gap-6">
              <div className="w-full lg:w-3/4 space-y-4">
                <div className="flex items-center gap-3">
                  <Skeleton className="h-6 w-1 rounded-full" />
                  <Skeleton className="h-7 w-32" />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Skeleton className="h-[180px] rounded-lg" />
                  <Skeleton className="h-[180px] rounded-lg" />
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                  <Skeleton className="h-[130px] rounded-lg" />
                  <Skeleton className="h-[130px] rounded-lg" />
                  <Skeleton className="h-[130px] rounded-lg" />
                  <Skeleton className="h-[130px] rounded-lg" />
                </div>
              </div>
              {!isPinMode && (
                <div className="w-full lg:w-1/4 grid grid-cols-2 lg:grid-cols-1 gap-4">
                  <Skeleton className="h-[180px] rounded-lg" />
                  <Skeleton className="h-[130px] rounded-lg" />
                </div>
              )}
            </div>
          ) : (
          <>
          {/* Commerçants (3/4) + KPI cards (1/4) side by side */}
          <div className="flex flex-col lg:flex-row gap-6">
          {moduleGroups.filter(g => g.groupName === "Commerçants").map((group) => {
            const getFlexibleGridCols = (count: number): string => {
              switch (count) {
                case 1: return "grid-cols-1";
                case 2: return "grid-cols-1 md:grid-cols-2";
                case 3: return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
                default: return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
              }
            };
            return (
            <div 
              key={group.groupName}
              className="w-full lg:w-3/4"
            >
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center">
                <div className={cn(
                  "w-1 h-6 rounded-full mr-3",
                  group.groupName === "Commerçants" && "bg-primary",
                  group.groupName === "Administration" && "bg-rose-500",
                  group.groupName === "Partenaires" && "bg-emerald-500",
                )} />
                <span className={cn(
                  "px-2 py-0.5 rounded-md",
                  group.groupName === "Commerçants" && "bg-primary/5",
                  group.groupName === "Administration" && "bg-rose-500/5",
                  group.groupName === "Partenaires" && "bg-emerald-500/5",
                )}>
                  {group.groupName}
                </span>
              </h3>
              {/* Commerçants group: primary + secondary modules */}
              {group.groupName === "Commerçants" && (group.primaryModules?.length || group.secondaryModules?.length) ? (
                <>
                  {/* Primary modules - BackOffice & POS */}
                  {group.primaryModules && group.primaryModules.length > 0 && (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                      {group.primaryModules.map((module, moduleIndex) => (
                        <ModuleCard
                          key={module.title}
                          moduleId={module.id}
                          color={module.color}
                          data-module-card={module.id}
                          className="holographic-card group cursor-pointer ring-1 ring-primary/10 overflow-hidden"
                          style={getShimmerStyle(module.color)}
                          onClick={(e) => {
                            const cardElement = e.currentTarget;
                            const rect = cardElement.getBoundingClientRect();
                            openModule(rect, {
                              icon: module.icon,
                              title: module.title,
                              color: module.color,
                              path: module.path,
                              animationTarget: module.id === "pos" ? "right" : "left",
                            });
                          }}
                        >
                          <div className="h-[180px]">
                            <div className="flex flex-col justify-center p-5 h-full">
                              <ArrowRight className="absolute top-4 right-4 w-5 h-5 text-muted-foreground" />
                              <h3 className="text-xl font-semibold text-foreground mb-1">{module.title}</h3>
                              <p className="text-sm text-muted-foreground mb-3">{module.description}</p>
                              <ul className="grid grid-cols-2 gap-1.5">
                                {module.features.map((feature) => (
                                  <li key={feature} className="flex items-center text-sm text-muted-foreground">
                                    <div className="w-1.5 h-1.5 rounded-full bg-primary mr-2 shrink-0" />
                                    {feature}
                                  </li>
                                ))}
                              </ul>
                            </div>
                          </div>
                        </ModuleCard>
                      ))}
                    </div>
                  )}
                  {/* Secondary modules */}
                  {group.secondaryModules && group.secondaryModules.length > 0 && (
                    <div className={`grid ${getFlexibleGridCols(group.secondaryModules.length)} gap-4`}>
                      {group.secondaryModules.map((module, moduleIndex) => (
                        <ModuleCard
                          key={module.title}
                          moduleId={module.id}
                          color={module.color}
                          data-module-card={module.id}
                          className={cn(
                            "holographic-card group cursor-pointer overflow-hidden",
                            module.devOnly && "opacity-70 border-2 border-dashed border-amber-500/50"
                          )}
                          style={module.devOnly ? getDevOnlyShimmerStyle(module.color) : getShimmerStyle(module.color)}
                          onClick={(e) => {
                            const cardElement = e.currentTarget;
                            const rect = cardElement.getBoundingClientRect();
                            openModule(rect, {
                              icon: module.icon,
                              title: module.title,
                              color: module.color,
                              path: module.path,
                              animationTarget: "header",
                            });
                          }}
                        >
                          <div className="min-h-[130px]">
                            <div className="flex flex-col justify-center p-4 h-full">
                              <ArrowRight className="absolute top-3 right-3 w-4 h-4 text-muted-foreground" />
                              <div className="flex items-center gap-2 mb-1">
                                <span className="text-base font-semibold text-foreground">{module.title}</span>
                                {module.devOnly && (
                                  <TooltipProvider>
                                    <Tooltip>
                                      <TooltipTrigger asChild>
                                        <Sprout className="w-4 h-4 text-amber-500" />
                                      </TooltipTrigger>
                                      <TooltipContent side="top">
                                        {t('permissions.inDevelopment')}
                                      </TooltipContent>
                                    </Tooltip>
                                  </TooltipProvider>
                                )}
                              </div>
                              <p className="text-xs text-muted-foreground mb-2">{module.description}</p>
                              <ul className="space-y-0.5">
                                {module.features.map((feature) => (
                                  <li key={feature} className="flex items-center text-xs text-muted-foreground">
                                    <div className="w-1 h-1 rounded-full bg-primary mr-2 shrink-0" />
                                    {feature}
                                  </li>
                                ))}
                              </ul>
                            </div>
                          </div>
                        </ModuleCard>
                      ))}
                    </div>
                  )}
                </>
              ) : null}
            </div>
          );
          })}

          {/* KPI cards - 1/4 width, aligned with module rows */}
          {!isPinMode && (
             <div className="w-full lg:w-1/4 flex-shrink-0 grid grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-0 lg:flex lg:flex-col">
              {/* Spacer for group header - desktop only */}
              <div className="hidden lg:block h-[36px] mb-4" />
              {/* Ventes du jour - aligned with primary row (POS) */}
              {stats[0] && (() => {
                const stat = stats[0];
                const colors = { border: "border-l-success/60", bg: "from-card to-success/5", iconBg: "bg-gradient-to-br from-success/20 to-success/10", iconText: "text-success" };
                const changeValue = parseFloat(String(stat.change));
                const isPositive = !isNaN(changeValue) && changeValue >= 0;
                return (
                  <DynamicShadowCard rgb="34, 197, 94" className={cn("border-l-[3px] lg:h-[180px]", colors.border, `bg-gradient-to-br ${colors.bg}`)}>
                    <CardContent className="pt-6 h-full flex flex-col justify-center">
                      <div className="flex items-center justify-between mb-3">
                        <div>
                          <p className="text-sm text-muted-foreground">{stat.label}</p>
                          <p className="text-2xl font-bold text-foreground mt-1">{stat.value}</p>
                          <span className={cn(
                            "inline-flex items-center text-xs font-medium mt-1 px-1.5 py-0.5 rounded-full",
                            isPositive ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
                          )}>
                            {stat.change}
                          </span>
                        </div>
                        <div className={cn("w-12 h-12 rounded-xl flex items-center justify-center", colors.iconBg)}>
                          <stat.icon className={cn("w-6 h-6", colors.iconText)} />
                        </div>
                      </div>
                      <MiniSparkBar data={stat.sparkData} color={stat.sparkColor} height={28} />
                      <p className="text-[10px] text-muted-foreground mt-1">15 derniers jours</p>
                    </CardContent>
                  </DynamicShadowCard>
                );
              })()}
              {/* Gap matching mb-6 between primary and secondary rows */}
              <div className="hidden lg:block mb-6" />
              {/* Clients actifs - aligned with secondary row (Écrans Cuisine) */}
              {stats[1] && (() => {
                const stat = stats[1];
                const colors = { border: "border-l-primary/60", bg: "from-card to-primary/5", iconBg: "bg-gradient-to-br from-primary/20 to-primary/10", iconText: "text-primary" };
                const changeValue = parseFloat(String(stat.change));
                const isPositive = !isNaN(changeValue) && changeValue >= 0;
                return (
                  <DynamicShadowCard rgb="59, 130, 246" className={cn("border-l-[3px] lg:h-[130px]", colors.border, `bg-gradient-to-br ${colors.bg}`)}>
                    <CardContent className="pt-4 h-full flex flex-col justify-center">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <p className="text-xs text-muted-foreground">{stat.label}</p>
                          <p className="text-xl font-bold text-foreground mt-1">{stat.value}</p>
                          <span className={cn(
                            "inline-flex items-center text-xs font-medium mt-1 px-1.5 py-0.5 rounded-full",
                            isPositive ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
                          )}>
                            {stat.change}
                          </span>
                        </div>
                        <div className={cn("w-10 h-10 rounded-xl flex items-center justify-center", colors.iconBg)}>
                          <stat.icon className={cn("w-5 h-5", colors.iconText)} />
                        </div>
                      </div>
                      <MiniSparkBar data={stat.sparkData} color={stat.sparkColor} height={20} />
                    </CardContent>
                  </DynamicShadowCard>
                );
              })()}
            </div>
          )}
          </div>

          {(() => {
            const adminGroup = moduleGroups.find(g => g.groupName === "Administration");
            const partnerGroup = moduleGroups.find(g => g.groupName === "Partenaires");
            if (!adminGroup && !partnerGroup) return null;

            const renderGroupHeader = (group: typeof adminGroup) => {
              if (!group) return null;
              return (
                <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center">
                  <div className={cn(
                    "w-1 h-6 rounded-full mr-3",
                    group.groupName === "Administration" && "bg-rose-500",
                    group.groupName === "Partenaires" && "bg-emerald-500",
                  )} />
                  <span className={cn(
                    "px-2 py-0.5 rounded-md",
                    group.groupName === "Administration" && "bg-rose-500/5",
                    group.groupName === "Partenaires" && "bg-emerald-500/5",
                  )}>
                    {group.groupName}
                  </span>
                </h3>
              );
            };

            const renderModuleCard = (module: any, large: boolean) => (
              <ModuleCard
                key={module.title}
                moduleId={module.id}
                color={module.color}
                data-module-card={module.id}
                className={cn(
                  "holographic-card group cursor-pointer ring-1 ring-primary/10 overflow-hidden",
                  module.devOnly && "opacity-70 border-2 border-dashed border-amber-500/50"
                )}
                style={module.devOnly ? getDevOnlyShimmerStyle(module.color) : getShimmerStyle(module.color)}
                onClick={(e) => {
                  const cardElement = e.currentTarget;
                  const rect = cardElement.getBoundingClientRect();
                  openModule(rect, {
                    icon: module.icon,
                    title: module.title,
                    color: module.color,
                    path: module.path,
                    animationTarget: "left",
                  });
                }}
              >
                <div className={large ? "h-[180px]" : "h-[130px]"}>
                  <div className={cn("flex flex-col justify-center h-full", large ? "p-5" : "p-4")}>
                    <ArrowRight className={cn("absolute top-3 right-3 text-muted-foreground", large ? "w-5 h-5 top-4 right-4" : "w-4 h-4")} />
                    <div className="flex items-center gap-2 mb-1">
                      <span className={cn("font-semibold text-foreground", large ? "text-xl" : "text-base")}>{module.title}</span>
                      {module.devOnly && (
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Sprout className="w-4 h-4 text-amber-500" />
                            </TooltipTrigger>
                            <TooltipContent side="top">
                              {t('permissions.inDevelopment')}
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      )}
                    </div>
                    <p className={cn("text-muted-foreground", large ? "text-sm mb-3" : "text-xs mb-2")}>{module.description}</p>
                    <ul className={cn("grid grid-cols-2", large ? "gap-1.5" : "gap-1")}>
                      {module.features.map((feature: string) => (
                        <li key={feature} className={cn("flex items-center text-muted-foreground", large ? "text-sm" : "text-xs")}>
                          <div className={cn("rounded-full bg-primary mr-2 shrink-0", large ? "w-1.5 h-1.5" : "w-1 h-1")} />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </ModuleCard>
            );

            return (
              <div className="flex flex-col lg:flex-row gap-6">
                {/* Administration - 1/4 width */}
                {adminGroup && (
                  <div className="w-full lg:w-1/4 flex-shrink-0">
                    {renderGroupHeader(adminGroup)}
                    <div className="grid grid-cols-1 gap-4">
                      {adminGroup.modules.map((module) => renderModuleCard(module, false))}
                    </div>
                  </div>
                )}
                {/* Partenaires - 3/4 width */}
                {partnerGroup && (
                  <div className="flex-1">
                    {renderGroupHeader(partnerGroup)}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {partnerGroup.modules.map((module) => renderModuleCard(module, false))}
                    </div>
                  </div>
                )}
              </div>
            );
          })()}
          {moduleGroups.length === 0 && (
            <Card className="border-dashed">
              <CardContent className="pt-6 text-center space-y-3">
                <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                  <Building2 className="h-5 w-5" />
                </div>
                <p className="font-medium text-foreground">
                  {noModulesTitle}
                </p>
                <p className="text-sm text-muted-foreground">
                  {noModulesDescription}
                </p>
                {!isPinMode && userCompanies.length === 0 && (
                  <Button variant="outline" onClick={() => navigate("/backoffice")}>Créer ou récupérer ma société</Button>
                )}
              </CardContent>
            </Card>
          )}
          </>
          )}
        </div>

        {/* Resources card */}
        {!isDashboardAccessLoading && !isPinMode && permissions.canAccessDashboardModule("/resources") && (
          <div className="mt-6">
            <ModuleCard
              moduleId="resources"
              color="bg-indigo-600"
              className="holographic-card group cursor-pointer ring-1 ring-primary/10 overflow-hidden max-w-md"
              style={getShimmerStyle("bg-indigo-600") as any}
              onClick={(e) => {
                const cardElement = e.currentTarget;
                const rect = cardElement.getBoundingClientRect();
                openModule(rect, {
                  icon: BookOpen,
                  title: t("resources.dashboard.title", "Centre d'aide"),
                  color: "bg-indigo-600",
                  path: "/resources",
                  animationTarget: "header",
                });
              }}
            >
              <div className="h-[100px]">
                <div className="flex flex-col justify-center p-4 h-full">
                  <ArrowRight className="absolute top-3 right-3 w-4 h-4 text-muted-foreground" />
                  <div className="flex items-center gap-2 mb-1">
                    <BookOpen className="w-5 h-5 text-indigo-500" />
                    <span className="text-base font-semibold text-foreground">{t("resources.dashboard.title", "Centre d'aide")}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">{t("resources.dashboard.description", "Documentation & guides")}</p>
                </div>
              </div>
            </ModuleCard>
          </div>
        )}
        </ModulesContainer>

        {/* Theme selector widget + discreet access badges */}
        {!showCockpit && <div className="mt-8 space-y-3">
          {showDiagnosticPanel && (
            <div className="flex justify-end">
              <HiddenModulesPanel
                hidden={hiddenModules}
                isPinMode={isPinMode}
                isOperatorBypass={permissions.isOperatorBypass}
                planCode={permissions.planCode}
                forceVisible={moduleGroups.length === 0}
                message={noModulesDescription}
              />
            </div>
          )}
          {!isPinMode && <ThemeSelectorWidget />}
        </div>}
      </main>

      </div>
    </>
  );
};

export default Dashboard;