Navigation Quick Reference & Implementation Guide

// In NavGroupWithOverview component
{group.isSubModule && (
  <Badge variant="secondary" className="ml-auto text-xs">
    Sub-Module
  </Badge>
)}

// Add sub-module section before "All Modules"
{module.navGroups?.some(g => g.isSubModule) && (
  <div className="space-y-2">
    <h3 className="text-sm font-medium">Sub-Modules</h3>
    {module.navGroups
      .filter(g => g.isSubModule)
      .map(subModule => (
        <SubModuleCard 
          key={subModule.id}
          subModule={subModule}
          parentModule={module}
        />
      ))}
  </div>
)}

// Update useCollapsible logic
const useCollapsible = visibleNavGroups.length >= 3 || 
  module.id === 'hr'; // HR always uses collapsible

// Smart defaults
const [isOpen, setIsOpen] = useState(
  hasActiveItem || 
  group.defaultOpen || 
  (module.id === 'hr' && group.id === 'people-management') ||
  false
);

// In NavGroupWithOverview, show quick actions when group is sub-module
{group.isSubModule && group.quickActions && (
  <div className="flex gap-1 px-3 py-1">
    {group.quickActions.map(action => (
      <Button key={action.route} variant="outline" size="sm">
        <ActionIcon className="h-3 w-3" />
        {action.label}
      </Button>
    ))}
  </div>
)}

// Add sub-module cards in module section
{module.navGroups
  .filter(g => g.isSubModule)
  .map(subModule => (
    <div key={subModule.id} className="border rounded-lg p-3">
      <div className="flex items-center gap-2 mb-2">
        <SubModuleIcon className="h-4 w-4" />
        <span className="font-medium">{subModule.label}</span>
      </div>
      <p className="text-xs text-muted-foreground mb-2">
        {subModule.description}
      </p>
      <Button 
        variant="outline" 
        size="sm"
        onClick={() => handleNavigation(subModule.overviewRoute)}
      >
        Enter {subModule.label}
      </Button>
    </div>
  ))}

// Add to AVAILABLE_SHORTCUTS
{
  id: "hr-compliance",
  label: "Compliance",
  icon: ShieldCheck,
  route: "/hr/compliance",
  permission: "hr.compliance.view",
  category: "sub-module",
  parentModule: "hr",
  subModuleId: "compliance",
},

// In CollapsibleNavGroupSection
{group.isSubModule && (
  <div className="flex items-center gap-2 px-3 py-1 bg-primary/5 rounded">
    <Badge variant="secondary" className="text-xs">Sub-Module</Badge>
    {group.quickActions && (
      <div className="flex gap-1 ml-auto">
        {group.quickActions.slice(0, 2).map(action => (
          <Button key={action.route} variant="ghost" size="sm">
            <ActionIcon className="h-3 w-3" />
          </Button>
        ))}
      </div>
    )}
  </div>
)}

// Standardize module rendering
const renderModule = (module: ModuleDefinition) => {
  const hasSubModules = module.navGroups?.some(g => g.isSubModule);
  
  return (
    <div className="space-y-2">
      <ModuleHeader module={module} />
      {hasSubModules && (
        <SubModulesSection 
          subModules={module.navGroups.filter(g => g.isSubModule)}
        />
      )}
      <ModuleNavItems module={module} />
    </div>
  );
};

// New component structure
export function NavigationCustomizer() {
  const { currentModule } = useNavigation();
  const [pinnedItems, setPinnedItems] = useState<string[]>([]);
  const [hiddenGroups, setHiddenGroups] = useState<string[]>([]);
  
  // Save preferences to user profile
  const savePreferences = async () => {
    // Store in pf_user_preferences table
  };
  
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Customize Navigation</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <PinnedItemsSection />
          <GroupOrderSection />
          <HiddenGroupsSection />
        </div>
      </DialogContent>
    </Dialog>
  );
}

// In search results
const searchResults = useMemo(() => {
  const allResults = [
    ...modules,
    ...modules.flatMap(m => 
      m.navGroups
        ?.filter(g => g.isSubModule)
        .map(sub => ({
          ...sub,
          parentModule: m.name,
          category: 'sub-module',
        })) || []
    ),
    // ... other results
  ];
  
  return filterResults(allResults, query);
}, [query]);

export function useNavigationAnalytics() {
  const trackNavigation = (event: NavigationEvent) => {
    // Send to analytics service
    analytics.track('navigation', {
      module: event.module,
      subModule: event.subModule,
      route: event.route,
      timestamp: Date.now(),
    });
  };
  
  return { trackNavigation };
}