@djangocfg/layouts 1.0.1

package/src/layouts/AppLayout/layouts/PublicLayout/components/Navigation.tsx

@@ -0,0 +1,159 @@
+/**
+ * Public Layout Navigation
+ *
+ * Full-featured navigation using @djangocfg/ui components
+ * Refactored from _old/MainLayout - uses context only!
+ */
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Menu } from 'lucide-react';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+import { cn } from '@djangocfg/ui/lib';
+import { useIsMobile } from '@djangocfg/ui/hooks';
+import { useAppContext } from '../../../context';
+import { useAuth } from '../../../../../auth';
+import { useNavigation } from '../../../hooks';
+import { DesktopUserMenu } from './DesktopUserMenu';
+import { MobileMenu } from './MobileMenu';
+
+/**
+ * Navigation Component
+ *
+ * Features:
+ * - Logo and branding
+ * - NavigationMenu from @djangocfg/ui (Radix UI based)
+ * - Theme toggle
+ * - User menu (desktop)
+ * - Mobile menu button
+ *
+ * All data from context - zero prop drilling!
+ */
+export function Navigation() {
+  const { config, toggleMobileMenu } = useAppContext();
+  const { user, isAuthenticated, logout } = useAuth();
+  const { isActive } = useNavigation();
+  const isMobile = useIsMobile();
+
+  const { app, publicLayout } = config;
+
+  return (
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[9990] bg-surface-gradient border-border/30">
+      <div className="w-full px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Left side - Logo and Navigation Menu */}
+          <div className="flex items-center gap-6 flex-1">
+            {/* Logo */}
+            <Link
+              href={publicLayout.navigation.homePath}
+              className="flex items-center gap-3 group"
+            >
+              <img
+                src={app.logoPath}
+                alt={`${app.name} Logo`}
+                className="h-8 w-auto object-contain transition-transform duration-300 group-hover:scale-105"
+              />
+              <span className="text-xl font-bold transition-colors duration-300 text-foreground group-hover:text-primary">
+                {app.name}
+              </span>
+            </Link>
+
+            {/* Desktop Navigation Menu using @djangocfg/ui NavigationMenu */}
+            {!isMobile && (
+            <div>
+              <NavigationMenu>
+              <NavigationMenuList>
+                {publicLayout.navigation.menuSections.map((section) => {
+                  // Single item section - render as direct link
+                  if (section.items.length === 1) {
+                    const item = section.items[0];
+                    if (!item) return null;
+
+                    return (
+                      <NavigationMenuItem key={section.title}>
+                        <NavigationMenuLink asChild>
+                          <Link
+                            href={item.path}
+                            className={cn(
+                              navigationMenuTriggerStyle(),
+                              isActive(item.path) && 'bg-accent text-accent-foreground'
+                            )}
+                          >
+                            {item.label}
+                          </Link>
+                        </NavigationMenuLink>
+                      </NavigationMenuItem>
+                    );
+                  }
+
+                  // Multiple items - render as dropdown menu
+                  return (
+                    <NavigationMenuItem key={section.title}>
+                      <NavigationMenuTrigger>{section.title}</NavigationMenuTrigger>
+                      <NavigationMenuContent>
+                        <ul className="grid gap-3 p-4" style={{ width: '400px' }}>
+                          {section.items.map((item) => (
+                            <li key={item.path}>
+                              <NavigationMenuLink asChild>
+                                <Link
+                                  href={item.path}
+                                  className={cn(
+                                    'block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors whitespace-nowrap hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+                                    isActive(item.path) && 'bg-accent/50'
+                                  )}
+                                >
+                                  <div className="text-sm font-medium leading-none">
+                                    {item.label}
+                                  </div>
+                                </Link>
+                              </NavigationMenuLink>
+                            </li>
+                          ))}
+                        </ul>
+                      </NavigationMenuContent>
+                    </NavigationMenuItem>
+                  );
+                })}
+              </NavigationMenuList>
+              </NavigationMenu>
+            </div>
+            )}
+          </div>
+
+          {/* Right side - Theme Toggle & User Menu */}
+          {!isMobile && (
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <DesktopUserMenu />
+          </div>
+          )}
+
+          {/* Mobile Menu Button - Only visible on mobile */}
+          {isMobile && (
+          <button
+            onClick={toggleMobileMenu}
+            className="p-3 rounded-lg border shadow-sm transition-all duration-200 bg-card/50 hover:bg-card border-border/50 hover:border-primary/50 text-foreground hover:text-primary"
+            aria-label="Toggle mobile menu"
+          >
+            <Menu className="size-5" />
+          </button>
+          )}
+        </div>
+      </div>
+
+      {/* Mobile Menu Drawer */}
+      <MobileMenu />
+    </nav>
+  );
+}

package/src/layouts/AppLayout/layouts/PublicLayout/index.ts

@@ -0,0 +1,5 @@
+/**
+ * PublicLayout Module
+ */
+
+export * from './PublicLayout';

package/src/layouts/AppLayout/layouts/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Layouts Module
+ */
+
+export * from './PublicLayout';
+export * from './PrivateLayout';
+export * from './AuthLayout';

package/src/layouts/AppLayout/providers/CoreProviders.tsx

@@ -0,0 +1,47 @@
+/**
+ * Core Providers
+ *
+ * Wraps application with all necessary providers
+ */
+
+'use client';
+
+import React, { ReactNode } from 'react';
+import { ThemeProvider, Toaster } from '@djangocfg/ui';
+import { AuthProvider } from '../../../auth';
+import type { AppLayoutConfig } from '../types';
+
+export interface CoreProvidersProps {
+  children: ReactNode;
+  config: AppLayoutConfig;
+}
+
+/**
+ * Core Providers Wrapper
+ *
+ * Provides:
+ * - ThemeProvider (dark/light mode)
+ * - AuthProvider (authentication)
+ * - Toaster (notifications)
+ */
+export function CoreProviders({ children, config }: CoreProvidersProps) {
+  return (
+    <ThemeProvider>
+      <AuthProvider
+        config={{
+          apiUrl: config.api.baseUrl,
+          routes: {
+            auth: config.routes.auth,
+            defaultCallback: config.routes.defaultCallback,
+            defaultAuthCallback: config.routes.defaultAuthCallback || config.routes.defaultCallback,
+          },
+        }}
+      >
+        {children}
+      </AuthProvider>
+
+      {/* Global toast notifications */}
+      <Toaster />
+    </ThemeProvider>
+  );
+}

package/src/layouts/AppLayout/providers/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Providers Module
+ */
+
+export * from './CoreProviders';

package/src/layouts/AppLayout/types/config.ts

@@ -0,0 +1,40 @@
+/**
+ * Configuration Types
+ */
+
+import type { ReactNode } from 'react';
+import type { PublicLayoutConfig, PrivateLayoutConfig } from './layout';
+import type { RouteConfig } from './routes';
+
+/**
+ * Main AppLayout configuration
+ */
+export interface AppLayoutConfig {
+  /** Application metadata */
+  app: {
+    name: string;
+    description?: string;
+    logoPath: string;
+    siteUrl?: string;
+    icons?: {
+      logo192?: string;
+      logo384?: string;
+      logo512?: string;
+      logoVector?: string;
+    };
+  };
+
+  /** API configuration */
+  api: {
+    baseUrl: string;
+  };
+
+  /** Route configuration */
+  routes: RouteConfig;
+
+  /** Public layout configuration */
+  publicLayout: PublicLayoutConfig;
+
+  /** Private layout configuration */
+  privateLayout: PrivateLayoutConfig;
+}

package/src/layouts/AppLayout/types/index.ts

@@ -0,0 +1,10 @@
+/**
+ * AppLayout Type Definitions
+ *
+ * All types for the unified AppLayout system
+ */
+
+export * from './config';
+export * from './layout';
+export * from './navigation';
+export * from './routes';

package/src/layouts/AppLayout/types/layout.ts

@@ -0,0 +1,47 @@
+/**
+ * Layout Configuration Types
+ */
+
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import type { NavigationSection, DashboardMenuGroup } from './navigation';
+
+/**
+ * Public layout configuration
+ */
+export interface PublicLayoutConfig {
+  navigation: {
+    homePath: string;
+    menuSections: NavigationSection[];
+  };
+  userMenu: {
+    dashboardPath?: string;
+    profilePath: string;
+  };
+  footer: {
+    badge: {
+      icon: LucideIcon;
+      text: string;
+    };
+    links: {
+      docs?: string;
+      privacy?: string;
+      terms?: string;
+      security?: string;
+      cookies?: string;
+    };
+    menuSections: NavigationSection[];
+  };
+}
+
+/**
+ * Private/Dashboard layout configuration
+ */
+export interface PrivateLayoutConfig {
+  homeHref: string;
+  profileHref: string;
+  showChat?: boolean;
+  menuGroups: DashboardMenuGroup[];
+  contentPadding?: 'default' | 'none';
+  headerActions?: ReactNode;
+}

package/src/layouts/AppLayout/types/navigation.ts

@@ -0,0 +1,41 @@
+/**
+ * Navigation Types
+ */
+
+import type { LucideIcon } from 'lucide-react';
+
+/**
+ * Navigation menu item
+ */
+export interface NavigationItem {
+  label: string;
+  path: string;
+}
+
+/**
+ * Navigation menu section
+ */
+export interface NavigationSection {
+  title: string;
+  items: NavigationItem[];
+}
+
+/**
+ * Dashboard menu item with icon
+ */
+export interface DashboardMenuItem {
+  path: string;
+  label: string;
+  icon: LucideIcon;
+  badge?: string | number;
+  subItems?: DashboardMenuItem[]; // Support nested menu items
+}
+
+/**
+ * Dashboard menu group
+ */
+export interface DashboardMenuGroup {
+  label: string;
+  order: number;
+  items: DashboardMenuItem[];
+}

package/src/layouts/AppLayout/types/routes.ts

@@ -0,0 +1,45 @@
+/**
+ * Route Types
+ */
+
+/**
+ * Route configuration
+ */
+export interface RouteConfig {
+  /** Authentication route */
+  auth: string;
+
+  /** Default redirect after login */
+  defaultCallback: string;
+
+  /** Redirect for authenticated users on auth page */
+  defaultAuthCallback?: string;
+
+  /** Route detector functions */
+  detectors: RouteDetectors;
+}
+
+/**
+ * Route detection functions
+ */
+export interface RouteDetectors {
+  /** Check if route is public */
+  isPublicRoute: (path: string) => boolean;
+
+  /** Check if route is private/protected */
+  isPrivateRoute: (path: string) => boolean;
+
+  /** Check if route is auth page */
+  isAuthRoute: (path: string) => boolean;
+
+  /** Get redirect URL for unauthenticated users */
+  getUnauthenticatedRedirect: (path: string) => string | null;
+
+  /** Get page title for route */
+  getPageTitle: (path: string) => string;
+}
+
+/**
+ * Layout mode based on route
+ */
+export type LayoutMode = 'public' | 'private' | 'auth';

package/src/layouts/AppLayout/utils/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Utilities Module
+ */
+
+export * from './routeDetection';

package/src/layouts/AppLayout/utils/routeDetection.ts

@@ -0,0 +1,31 @@
+/**
+ * Route Detection Utilities
+ */
+
+import type { LayoutMode, RouteDetectors } from '../types';
+
+/**
+ * Determine layout mode from pathname
+ */
+export function determineLayoutMode(
+  pathname: string,
+  detectors: RouteDetectors
+): LayoutMode {
+  if (detectors.isAuthRoute(pathname)) return 'auth';
+  if (detectors.isPrivateRoute(pathname)) return 'private';
+  return 'public';
+}
+
+/**
+ * Check if redirect is needed for unauthenticated user
+ */
+export function getRedirectUrl(
+  pathname: string,
+  isAuthenticated: boolean,
+  detectors: RouteDetectors
+): string | null {
+  if (!isAuthenticated) {
+    return detectors.getUnauthenticatedRedirect(pathname);
+  }
+  return null;
+}

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -0,0 +1,125 @@
+/**
+ * Payments Layout
+ * Main layout with tabs for different payment-related views
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import {
+  PaymentsProvider,
+  BalancesProvider,
+  ApiKeysProvider,
+  OverviewProvider,
+} from '@djangocfg/api/cfg/contexts';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
+import { Wallet, CreditCard, History, Key, Crown } from 'lucide-react';
+import type { PaymentTab } from './types';
+import { OverviewView } from './views/overview';
+import { PaymentsView } from './views/payments';
+import { TransactionsView } from './views/transactions';
+import { ApiKeysView } from './views/apikeys';
+import { TariffsView } from './views/tariffs';
+import { CreateApiKeyDialog, DeleteApiKeyDialog } from './components';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Payments Layout Content
+// ─────────────────────────────────────────────────────────────────────────
+
+const PaymentsLayoutContent: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<PaymentTab>('overview');
+
+  return (
+    <div className="h-full p-6 space-y-6">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
+        <p className="text-muted-foreground">
+          Manage your payments, subscriptions, API keys, and account balance
+        </p>
+      </div>
+
+      {/* Main Content with Tabs */}
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as PaymentTab)}
+        className="space-y-6"
+      >
+        <TabsList className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
+          <TabsTrigger value="overview" className="inline-flex items-center gap-2 px-3 py-1.5">
+            <Wallet className="h-4 w-4" />
+            <span className="hidden sm:inline">Overview</span>
+          </TabsTrigger>
+          <TabsTrigger value="payments" className="inline-flex items-center gap-2 px-3 py-1.5">
+            <CreditCard className="h-4 w-4" />
+            <span className="hidden sm:inline">Payments</span>
+          </TabsTrigger>
+          <TabsTrigger value="transactions" className="inline-flex items-center gap-2 px-3 py-1.5">
+            <History className="h-4 w-4" />
+            <span className="hidden sm:inline">Transactions</span>
+          </TabsTrigger>
+          <TabsTrigger value="apikeys" className="inline-flex items-center gap-2 px-3 py-1.5">
+            <Key className="h-4 w-4" />
+            <span className="hidden sm:inline">API Keys</span>
+          </TabsTrigger>
+          <TabsTrigger value="tariffs" className="inline-flex items-center gap-2 px-3 py-1.5">
+            <Crown className="h-4 w-4" />
+            <span className="hidden sm:inline">Tariffs</span>
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Overview Tab */}
+        <TabsContent value="overview" className="space-y-6">
+          <OverviewView />
+        </TabsContent>
+
+        {/* Payments Tab */}
+        <TabsContent value="payments" className="space-y-6">
+          <PaymentsView />
+        </TabsContent>
+
+        {/* Transactions Tab */}
+        <TabsContent value="transactions" className="space-y-6">
+          <TransactionsView />
+        </TabsContent>
+
+        {/* API Keys Tab */}
+        <TabsContent value="apikeys" className="space-y-6">
+          <ApiKeysView />
+        </TabsContent>
+
+        {/* Tariffs Tab */}
+          <TabsContent value="tariffs" className="space-y-6">
+            <TariffsView />
+          </TabsContent>
+        </Tabs>
+
+        {/* Global Dialogs */}
+        <CreateApiKeyDialog />
+        <DeleteApiKeyDialog />
+      </div>
+    );
+  };
+  
+  // ─────────────────────────────────────────────────────────────────────────
+  // Payments Layout (with providers)
+  // ─────────────────────────────────────────────────────────────────────────
+
+export interface PaymentsLayoutProps {
+  children?: React.ReactNode;
+}
+
+export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
+  return (
+    <OverviewProvider>
+      <PaymentsProvider>
+        <BalancesProvider>
+          <ApiKeysProvider>
+            <PaymentsLayoutContent />
+          </ApiKeysProvider>
+        </BalancesProvider>
+      </PaymentsProvider>
+    </OverviewProvider>
+  );
+};
+