@djangocfg/layouts 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.0.3",
-    "@djangocfg/og-image": "^1.0.3",
-    "@djangocfg/ui": "^1.0.3",
+    "@djangocfg/api": "^1.0.4",
+    "@djangocfg/og-image": "^1.0.4",
+    "@djangocfg/ui": "^1.0.4",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.0.3",
+    "@djangocfg/typescript-config": "^1.0.4",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx

@@ -51,7 +51,7 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
   if (variant === 'compact') {
     return (
       <div
-        className={`flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+        className={`flex items-center justify-between p-3 bg-muted/30 rounded-sm border border-border ${className}`}
       >
         <div className="flex items-center space-x-2">
           {getChannelIcon()}
@@ -78,7 +78,7 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
 
   return (
     <div
-      className={`space-y-3 p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+      className={`space-y-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
     >
       <div className="flex items-start space-x-2">
         {getChannelIcon()}

package/src/layouts/AppLayout/layouts/AuthLayout/OTPForm.tsx

@@ -80,27 +80,27 @@ export const OTPForm: React.FC = () => {
                 <InputOTPGroup className="gap-2">
                   <InputOTPSlot
                     index={0}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={1}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={2}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={3}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={4}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                   <InputOTPSlot
                     index={5}
-                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-lg shadow-sm"
+                    className="h-12 w-12 text-lg font-semibold border-2 border-border bg-background rounded-sm shadow-sm"
                   />
                 </InputOTPGroup>
               </InputOTP>

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -81,7 +81,7 @@ export function DashboardSidebar() {
                   className={isMobile ? "h-10 w-10 flex-shrink-0" : "h-8 w-8 flex-shrink-0"}
                 />
               ) : (
-                <div className={isMobile ? "h-10 w-10 bg-primary rounded-lg flex items-center justify-center flex-shrink-0" : "h-8 w-8 bg-primary rounded-lg flex items-center justify-center flex-shrink-0"}>
+                <div className={isMobile ? "h-10 w-10 bg-primary rounded-sm flex items-center justify-center flex-shrink-0" : "h-8 w-8 bg-primary rounded-sm flex items-center justify-center flex-shrink-0"}>
                   <span className="text-primary-foreground font-bold text-sm">
                     {app.name.charAt(0).toUpperCase()}
                   </span>

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

@@ -61,7 +61,7 @@ export function DesktopUserMenu() {
           {/* User Dropdown */}
           <div className="relative">
             <button
-              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
+              className="flex items-center gap-2 px-3 py-2 rounded-sm text-sm font-medium transition-colors text-foreground hover:text-primary hover:bg-accent/50"
               onClick={toggleUserMenu}
               aria-haspopup="true"
               aria-expanded={userMenuOpen}
@@ -85,15 +85,15 @@ export function DesktopUserMenu() {
                 />
                 {/* Dropdown */}
                 <div
-                  className="absolute top-full right-0 mt-2 w-48 rounded-lg shadow-lg backdrop-blur-xl z-[9996] bg-card/95 border border-border/50"
+                  className="absolute top-full right-0 mt-2 w-48 rounded-sm shadow-sm backdrop-blur-xl z-[9996] bg-popover border border-border"
                   role="menu"
                   aria-label="User menu"
                 >
                   <div className="p-2">
                     {/* User info */}
-                    <div className="px-3 py-2 text-sm mb-2 border-b text-muted-foreground border-border/30">
-                      Signed in as:
-                      <div className="font-medium truncate text-foreground">
+                    <div className="px-3 py-2 text-sm mb-2 border-b border-border">
+                      <div className="text-muted-foreground">Signed in as:</div>
+                      <div className="font-medium truncate text-popover-foreground mt-1">
                         {user?.email}
                       </div>
                     </div>
@@ -113,7 +113,7 @@ export function DesktopUserMenu() {
                     {/* Logout button */}
                     <button
                       onClick={handleLogout}
-                      className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors text-destructive hover:bg-destructive/[0.1]"
+                      className="w-full flex items-center gap-2 px-3 py-2 text-sm rounded-sm transition-colors text-destructive hover:bg-destructive/[0.1]"
                     >
                       <LogOut className="size-4" />
                       <span>Sign out</span>

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

@@ -139,7 +139,7 @@ export function Footer() {
               {/* Badge */}
               {footer.badge && (
                 <div className="pt-2">
-                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary/10 hover:bg-primary/15 border border-primary/20 text-xs font-medium text-primary transition-colors">
+                  <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-sm bg-primary/10 hover:bg-primary/15 border border-primary/20 text-xs font-medium text-primary transition-colors">
                     <footer.badge.icon className="w-3.5 h-3.5" />
                     {footer.badge.text}
                   </span>

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

@@ -10,12 +10,11 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import Link from 'next/link';
-import { Crown, LogOut, Settings, User, X } from 'lucide-react';
-import { ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
-import { ThemeToggle } from '@djangocfg/ui/theme';
+import { X } from 'lucide-react';
 import { useAppContext } from '../../../context';
 import { useAuth } from '../../../../../auth';
 import { useNavigation } from '../../../hooks';
+import { MobileMenuUserCard } from './MobileMenuUserCard';
 
 /**
  * Mobile Menu Component
@@ -37,34 +36,47 @@ export function MobileMenu() {
 
   const { app, publicLayout, routes } = config;
 
-  // Animation state
-  const [isAnimating, setIsAnimating] = React.useState(false);
+  // Track if we should render (stays true during close animation)
+  const [shouldRender, setShouldRender] = React.useState(false);
 
-  // Trigger animation when menu opens
+  // Track animation state separately
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  // Handle opening
   React.useEffect(() => {
     if (mobileMenuOpen) {
-      // Small delay to trigger animation
-      setTimeout(() => setIsAnimating(true), 10);
+      setShouldRender(true);
+      // Trigger animation after render
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsOpen(true);
+        });
+      });
     } else {
-      setIsAnimating(false);
+      // Start close animation
+      setIsOpen(false);
+      // Wait for animation to finish before unmounting
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(timer);
     }
   }, [mobileMenuOpen]);
 
   const handleLogout = () => {
     logout();
-    handleClose();
+    closeMobileMenu();
   };
 
   const handleClose = () => {
-    setIsAnimating(false);
-    setTimeout(closeMobileMenu, 300); // Wait for animation
+    closeMobileMenu();
   };
 
   const handleNavigate = () => {
-    handleClose();
+    closeMobileMenu();
   };
 
-  if (!mobileMenuOpen) return null;
+  if (!shouldRender) return null;
 
   // Portal to body to avoid z-index and positioning issues
   if (typeof window === 'undefined') return null;
@@ -73,8 +85,8 @@ export function MobileMenu() {
     <>
       {/* Backdrop with fade animation */}
       <div
-        className={`fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
-          isAnimating ? 'opacity-100' : 'opacity-0'
+        className={`fixed inset-0 z-[150] bg-black/50 backdrop-blur-sm transition-opacity duration-300 ease-in-out lg:hidden ${
+          isOpen ? 'opacity-100' : 'opacity-0'
         }`}
         onClick={handleClose}
         aria-hidden="true"
@@ -82,8 +94,8 @@ export function MobileMenu() {
 
       {/* Menu Content with slide animation */}
       <div
-        className={`fixed top-0 right-0 bottom-0 w-80 z-[9999] bg-card backdrop-blur-xl border-l border-border shadow-2xl transition-transform duration-300 ease-out lg:hidden ${
-          isAnimating ? 'translate-x-0' : 'translate-x-full'
+        className={`fixed top-0 right-0 bottom-0 w-80 z-[200] bg-popover border-l border-border shadow-2xl transition-transform duration-300 ease-in-out lg:hidden ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
         role="dialog"
         aria-modal="true"
@@ -104,7 +116,7 @@ export function MobileMenu() {
             </div>
             <button
               onClick={handleClose}
-              className="p-2 rounded-lg transition-colors hover:bg-accent/50"
+              className="p-2 rounded-sm transition-colors hover:bg-accent/50"
               aria-label="Close menu"
             >
               <X className="size-5" />
@@ -113,118 +125,16 @@ export function MobileMenu() {
 
           {/* Scrollable Content */}
           <div className="flex-1 overflow-y-auto p-4 space-y-6">
-            {/* User Menu Card - Authenticated */}
-            {isAuthenticated ? (
-              <Card className="border-primary/20 shadow-lg bg-accent/30">
-                <CardContent className="p-4">
-                  {/* User Info Header */}
-                  <div className="flex items-center gap-3 mb-4 p-3 rounded-lg border border-border bg-accent/50">
-                    <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden">
-                      {user?.avatar ? (
-                        <img
-                          src={user.avatar}
-                          alt={user?.email || 'User'}
-                          className="w-10 h-10 rounded-full object-cover"
-                        />
-                      ) : (
-                        <User className="w-5 h-5 text-primary-foreground" />
-                      )}
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                        Signed in as
-                      </p>
-                      <p className="text-sm font-semibold truncate text-foreground">
-                        {user?.email}
-                      </p>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <div className="size-2 rounded-full animate-pulse bg-green-500"></div>
-                      <span className="text-xs font-medium text-green-600 dark:text-green-400">
-                        Active
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Action Buttons */}
-                  <div className="space-y-3">
-                    {/* Dashboard link */}
-                    {publicLayout.userMenu.dashboardPath && (
-                      <ButtonLink
-                        href={publicLayout.userMenu.dashboardPath}
-                        variant="default"
-                        size="sm"
-                        className="w-full justify-center"
-                        onClick={handleNavigate}
-                      >
-                        <Crown className="w-4 h-4 mr-2" />
-                        Dashboard
-                      </ButtonLink>
-                    )}
-
-                    {/* Profile link */}
-                    <ButtonLink
-                      href={publicLayout.userMenu.profilePath}
-                      variant="outline"
-                      size="sm"
-                      className="w-full justify-center"
-                      onClick={handleNavigate}
-                    >
-                      <Settings className="w-4 h-4 mr-2" />
-                      Profile Settings
-                    </ButtonLink>
-
-                    {/* Logout */}
-                    <button
-                      onClick={handleLogout}
-                      className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors border text-destructive border-destructive/30 hover:bg-destructive/10"
-                    >
-                      <LogOut className="w-4 h-4" />
-                      Sign Out
-                    </button>
-
-                    {/* Theme toggle */}
-                    <div className="flex justify-center pt-2 border-t border-border/30">
-                      <ThemeToggle />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ) : (
-              /* Guest Card */
-              <Card className="border-border bg-accent/30">
-                <CardContent className="p-4">
-                  <div className="text-center space-y-4">
-                    <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted flex-shrink-0">
-                      <User className="w-6 h-6 text-muted-foreground" />
-                    </div>
-                    <div>
-                      <p className="text-sm font-medium mb-1 text-foreground">
-                        Welcome!
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        Sign in to access your dashboard
-                      </p>
-                    </div>
-                    <ButtonLink
-                      href={routes.auth}
-                      variant="default"
-                      size="lg"
-                      className="w-full justify-center"
-                      onClick={handleNavigate}
-                    >
-                      <User className="w-5 h-5 mr-2" />
-                      Sign In
-                    </ButtonLink>
-
-                    {/* Theme toggle */}
-                    <div className="flex justify-center pt-2 border-t border-border/30">
-                      <ThemeToggle />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
+            {/* User Menu Card */}
+            <MobileMenuUserCard
+              isAuthenticated={isAuthenticated}
+              user={user}
+              dashboardPath={publicLayout.userMenu.dashboardPath}
+              profilePath={publicLayout.userMenu.profilePath}
+              authPath={routes.auth}
+              onLogout={handleLogout}
+              onNavigate={handleNavigate}
+            />
 
             {/* Navigation Sections */}
             <div className="space-y-6">
@@ -238,7 +148,7 @@ export function MobileMenu() {
                     <div key={section.title} className="space-y-2">
                       <Link
                         href={item.path}
-                        className={`block px-4 py-3 rounded-lg text-base font-medium transition-colors ${
+                        className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
                           isActive(item.path)
                             ? 'text-primary border border-primary/20 bg-primary/[0.1]'
                             : 'text-muted-foreground hover:text-primary hover:bg-accent/50'
@@ -262,7 +172,7 @@ export function MobileMenu() {
                         <Link
                           key={item.path}
                           href={item.path}
-                          className={`block px-4 py-3 rounded-lg text-base font-medium transition-colors ${
+                          className={`block px-4 py-3 rounded-sm text-base font-medium transition-colors ${
                             isActive(item.path)
                               ? 'bg-accent text-accent-foreground'
                               : 'text-foreground hover:bg-accent hover:text-accent-foreground'

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

@@ -0,0 +1,150 @@
+/**
+ * Mobile Menu User Card Component
+ *
+ * Displays user information and action buttons in mobile menu
+ * - Authenticated: shows user info with dashboard, profile, and logout
+ * - Guest: shows welcome message with sign in button
+ */
+
+'use client';
+
+import React from 'react';
+import { Crown, LogOut, Settings, User } from 'lucide-react';
+import { Button, ButtonLink, Card, CardContent } from '@djangocfg/ui/components';
+import { ThemeToggle } from '@djangocfg/ui/theme';
+
+interface MobileMenuUserCardProps {
+  isAuthenticated: boolean;
+  user?: {
+    email?: string;
+    avatar?: string;
+  } | null;
+  dashboardPath?: string;
+  profilePath: string;
+  authPath: string;
+  onLogout: () => void;
+  onNavigate: () => void;
+}
+
+export function MobileMenuUserCard({
+  isAuthenticated,
+  user,
+  dashboardPath,
+  profilePath,
+  authPath,
+  onLogout,
+  onNavigate,
+}: MobileMenuUserCardProps) {
+  if (isAuthenticated) {
+    return (
+      <Card className="border-primary/20 shadow-lg !bg-accent/50">
+        <CardContent className="p-4">
+          {/* User Info Header */}
+          <div className="flex items-center gap-3 mb-4 p-3 rounded-sm border border-border bg-accent/70">
+            <div className="w-10 h-10 rounded-full flex items-center justify-center bg-primary flex-shrink-0 overflow-hidden relative">
+              {user?.avatar ? (
+                <img
+                  src={user.avatar}
+                  alt={user?.email || 'User'}
+                  className="w-10 h-10 rounded-full object-cover"
+                />
+              ) : (
+                <User className="w-5 h-5 text-primary-foreground" />
+              )}
+              {/* Active indicator */}
+              <div className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-green-500 border-2 border-background" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                Signed in as
+              </p>
+              <p className="text-sm font-semibold truncate text-foreground">
+                {user?.email}
+              </p>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="space-y-3">
+            {/* Dashboard link */}
+            {dashboardPath && (
+              <ButtonLink
+                href={dashboardPath}
+                variant="default"
+                size="sm"
+                className="w-full h-9"
+                onClick={onNavigate}
+              >
+                <Crown className="w-4 h-4 mr-2" />
+                Dashboard
+              </ButtonLink>
+            )}
+
+            {/* Quick Actions - Icons only */}
+            <div className="flex items-center justify-center gap-2 pt-3 mt-1 border-t border-border/30">
+              {/* Profile Settings */}
+              <ButtonLink
+                href={profilePath}
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9"
+                onClick={onNavigate}
+                aria-label="Profile Settings"
+              >
+                <Settings className="h-5 w-5" />
+              </ButtonLink>
+
+              {/* Theme Toggle */}
+              <ThemeToggle />
+
+              {/* Sign Out */}
+              <Button
+                onClick={onLogout}
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                aria-label="Sign Out"
+              >
+                <LogOut className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Guest Card
+  return (
+    <Card className="border-border !bg-accent/50">
+      <CardContent className="p-4">
+        <div className="text-center space-y-4">
+          <div className="w-12 h-12 rounded-full flex items-center justify-center mx-auto bg-muted">
+            <User className="w-6 h-6 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium mb-1 text-foreground">Welcome!</p>
+            <p className="text-xs text-muted-foreground">
+              Sign in to access your dashboard
+            </p>
+          </div>
+          <ButtonLink
+            href={authPath}
+            variant="default"
+            size="default"
+            className="w-full"
+            onClick={onNavigate}
+          >
+            <User className="w-5 h-5 mr-2" />
+            Sign In
+          </ButtonLink>
+
+          {/* Theme toggle */}
+          <div className="flex justify-center pt-2 border-t border-border/30">
+            <ThemeToggle />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -49,7 +49,7 @@ export function Navigation() {
   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">
+    <nav className="sticky top-0 w-full border-b backdrop-blur-xl z-[100] bg-background/80 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 */}
@@ -143,7 +143,7 @@ export function Navigation() {
           {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"
+            className="p-3 rounded-sm 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" />

package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx

@@ -30,7 +30,7 @@ import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { Schemas, Enums } from '@djangocfg/api/cfg/generated';
+import { Schemas } from '@djangocfg/api/cfg/generated';
 import { paymentsLogger } from '../../../utils/logger';
 import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
 import { openPaymentDetails } from './PaymentDetailsDialog';
@@ -39,7 +39,6 @@ import type { ComboboxOption } from '@djangocfg/ui';
 
 const { PaymentCreateRequestSchema } = Schemas;
 type PaymentCreateRequest = Schemas.PaymentCreateRequest;
-const { PaymentCreateRequestCurrencyCode, PaymentCreateRequestProvider } = Enums;
 
 export const CreatePaymentDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
@@ -55,33 +54,54 @@ export const CreatePaymentDialog: React.FC = () => {
     resolver: zodResolver(PaymentCreateRequestSchema),
     defaultValues: {
       amount_usd: 10,
-      currency_code: PaymentCreateRequestCurrencyCode.USDT,
+      currency_code: 'USDT', // Default to USDT
     },
   });
 
   // Group currencies by token and create combobox options
+  // Backend automatically selects network, so we group by currency code
   const currencyOptions = useMemo((): ComboboxOption[] => {
     if (!providerCurrencies?.results) return [];
 
     const enabledCurrencies = providerCurrencies.results.filter(pc => pc.is_enabled);
 
-    return enabledCurrencies.map((pc) => {
-      const networkInfo = pc.network ? ` (${pc.network.name})` : '';
-      const label = `${pc.currency.code} - ${pc.currency.name}${networkInfo}`;
-      const description = pc.network ? pc.network.code : 'No network';
+    // Group by currency code and collect all networks
+    const currencyMap = new Map<string, { pc: ProviderCurrency, networks: string[] }>();
+
+    for (const pc of enabledCurrencies) {
+      const code = pc.currency.code.toUpperCase();
+      if (!currencyMap.has(code)) {
+        currencyMap.set(code, { pc, networks: [] });
+      }
+      if (pc.network?.name) {
+        currencyMap.get(code)!.networks.push(pc.network.name);
+      }
+    }
+
+    return Array.from(currencyMap.values()).map(({ pc, networks }) => {
+      // Show network info only if there's exactly one network, otherwise backend will choose
+      let label = pc.currency.code;
+      let description = pc.currency.name;
+
+      if (networks.length === 1) {
+        label = `${pc.currency.code} (${networks[0]})`;
+      } else if (networks.length > 1) {
+        description = `${pc.currency.name} • Multiple networks available`;
+      }
 
       return {
-        value: pc.provider_currency_code,
+        // Use currency code (e.g. "USDT") as value for API
+        value: pc.currency.code.toUpperCase(),
         label,
         description,
       };
     });
   }, [providerCurrencies]);
 
-  // Get ProviderCurrency by currency_code
+  // Get first ProviderCurrency by currency code (e.g. "USDT")
   const getProviderCurrency = (currencyCode: string) => {
     return providerCurrencies?.results?.find(
-      pc => pc.provider_currency_code === currencyCode
+      pc => pc.is_enabled && pc.currency.code.toUpperCase() === currencyCode.toUpperCase()
     );
   };
 
@@ -127,13 +147,17 @@ export const CreatePaymentDialog: React.FC = () => {
     try {
       setIsSubmitting(true);
 
-      const payment = await createPayment(data);
+      const result = await createPayment(data);
       handleClose();
       closePaymentsDialog();
 
-      // Open payment details dialog with created payment
-      if (payment) {
-        openPaymentDetails(payment);
+      // The API returns a wrapped response with { success, message, payment }
+      // Extract the payment ID from the result
+      const paymentData = result as any;
+      const paymentId = paymentData?.payment?.id || paymentData?.id;
+
+      if (paymentId) {
+        openPaymentDetails(String(paymentId));
       }
     } catch (error) {
       paymentsLogger.error('Failed to create payment:', error);
@@ -214,15 +238,13 @@ export const CreatePaymentDialog: React.FC = () => {
                         const pc = getProviderCurrency(option.value);
                         if (!pc) return option.label;
                         return (
-                          <div className="flex items-center gap-2 flex-1">
-                            <TokenIcon symbol={pc.currency.code} size={24} />
-                            <div className="flex flex-col flex-1">
-                              <span className="font-medium">{pc.currency.code} - {pc.currency.name}</span>
-                              {pc.network && (
-                                <span className="text-xs text-muted-foreground">
-                                  Network: {pc.network.name} ({pc.network.code})
-                                </span>
-                              )}
+                          <div className="flex items-center gap-2 flex-1 min-w-0">
+                            <TokenIcon symbol={pc.currency.code} size={20} className="shrink-0" />
+                            <div className="flex flex-col flex-1 min-w-0">
+                              <span className="font-medium truncate">
+                                {pc.currency.code}
+                                {pc.network && ` (${pc.network.name})`}
+                              </span>
                             </div>
                           </div>
                         );
@@ -244,7 +266,7 @@ export const CreatePaymentDialog: React.FC = () => {
               if (!pc) return null;
 
               return (
-                <div className="rounded-lg bg-muted p-4 space-y-3">
+                <div className="rounded-sm bg-muted p-4 space-y-3">
                   {/* Amount to Send in Crypto */}
                   <div className="flex items-center justify-between">
                     <span className="text-sm text-muted-foreground">You will send</span>

package/src/layouts/PaymentsLayout/components/PaymentDetailsDialog.tsx

@@ -15,34 +15,58 @@ import {
   DialogTitle,
   Button,
   TokenIcon,
-  useEventListener,
 } from '@djangocfg/ui';
-import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle } from 'lucide-react';
-import type { Payment } from '@djangocfg/api/cfg/contexts';
+import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+import { Hooks, api } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
 
 export const PAYMENT_DETAILS_EVENTS = {
   OPEN_PAYMENT_DETAILS: 'open-payment-details',
   CLOSE_PAYMENT_DETAILS: 'close-payment-details',
 } as const;
 
-export interface PaymentDetailsDialogProps {
-  payment?: Payment | null;
-}
-
-export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ payment: initialPayment }) => {
+export const PaymentDetailsDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
-  const [payment, setPayment] = useState<Payment | null>(initialPayment || null);
+  const [paymentId, setPaymentId] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
   const [timeLeft, setTimeLeft] = useState<string>('');
 
-  useEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, (event: CustomEvent<{ payment: Payment }>) => {
-    setPayment(event.detail.payment);
-    setOpen(true);
-  });
+  // Load payment data by ID using hook
+  // Only fetch when dialog is open and paymentId is set
+  const shouldFetch = open && !!paymentId;
+  const { data: payment, isLoading, error, mutate } = Hooks.usePaymentsPaymentRetrieve(
+    shouldFetch ? paymentId : '',
+    api as unknown as API
+  );
 
-  useEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, () => {
-    setOpen(false);
-  });
+  // Debug logging
+  useEffect(() => {
+    if (error) {
+      console.error('Payment loading error:', error);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const customEvent = event as CustomEvent<{ paymentId: string }>;
+      console.log('Opening payment details for ID:', customEvent.detail.paymentId);
+      setPaymentId(customEvent.detail.paymentId);
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+      setPaymentId(null);
+    };
+
+    window.addEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
+    window.addEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+
+    return () => {
+      window.removeEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
+      window.removeEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+    };
+  }, []);
 
   const handleClose = () => {
     setOpen(false);
@@ -99,7 +123,45 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
     }
   };
 
-  if (!payment) return null;
+  if (!open) return null;
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Loading payment information...</DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center justify-center py-12">
+            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Error state - only show error if we actually tried to fetch and failed
+  if (shouldFetch && !isLoading && (error || !payment)) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Failed to load payment information</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <XCircle className="h-12 w-12 text-destructive" />
+            <p className="text-sm text-muted-foreground">
+              {error ? `Error: ${error}` : 'Payment not found'}
+            </p>
+            <Button onClick={() => mutate()}>Try Again</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
 
   const statusInfo = getStatusInfo();
   const StatusIcon = statusInfo.icon;
@@ -121,7 +183,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
         <div className="space-y-6">
           {/* Status Badge */}
-          <div className={`flex items-center gap-3 p-4 rounded-lg ${statusInfo.bg}`}>
+          <div className={`flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`}>
             <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
             <div className="flex-1">
               <div className="font-semibold capitalize">{payment.status}</div>
@@ -135,10 +197,10 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
           {/* Amount Information */}
           <div className="space-y-3">
-            <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+            <div className="flex items-center justify-between p-4 bg-muted rounded-sm">
               <span className="text-sm text-muted-foreground">Amount to send</span>
               <div className="flex items-center gap-2">
-                <TokenIcon symbol={payment.currency || 'BTC'} size={20} />
+                <TokenIcon symbol={String(payment.currency || 'BTC')} size={20} />
                 <span className="font-mono font-bold text-lg">
                   {payment.amount_crypto?.toFixed(8)} {payment.currency}
                 </span>
@@ -150,6 +212,13 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
               <span className="font-semibold text-lg">${payment.amount_usd?.toFixed(2)} USD</span>
             </div>
 
+            {payment.provider_payment_id && (
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm text-muted-foreground">Payment Order #</span>
+                <span className="font-mono font-medium">{payment.provider_payment_id}</span>
+              </div>
+            )}
+
             {payment.network && (
               <div className="flex items-center justify-between px-4">
                 <span className="text-sm text-muted-foreground">Network</span>
@@ -160,7 +229,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
           {/* QR Code */}
           {qrCodeUrl && payment.status === 'pending' && (
-            <div className="flex justify-center p-6 bg-white rounded-lg">
+            <div className="flex justify-center p-6 bg-white rounded-sm">
               <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
             </div>
           )}
@@ -170,7 +239,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
             <div className="space-y-2">
               <label className="text-sm font-medium">Payment Address</label>
               <div className="flex items-center gap-2">
-                <div className="flex-1 p-3 bg-muted rounded-lg font-mono text-sm break-all">
+                <div className="flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all">
                   {payment.pay_address}
                 </div>
                 <Button
@@ -193,7 +262,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
           {payment.transaction_hash && (
             <div className="space-y-2">
               <label className="text-sm font-medium">Transaction Hash</label>
-              <div className="p-3 bg-muted rounded-lg font-mono text-sm break-all">
+              <div className="p-3 bg-muted rounded-sm font-mono text-sm break-all">
                 {payment.transaction_hash}
               </div>
             </div>
@@ -241,10 +310,10 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 };
 
 // Helper function to open payment details dialog
-export const openPaymentDetails = (payment: Payment) => {
+export const openPaymentDetails = (paymentId: string) => {
   window.dispatchEvent(
     new CustomEvent(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, {
-      detail: { payment },
+      detail: { paymentId },
     })
   );
 };

package/src/layouts/PaymentsLayout/context/RootPaymentsContext.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import React, { createContext, useContext, useEffect, type ReactNode } from 'react';
-import {
-  api,
-  usePaymentsCurrenciesList,
-  usePaymentsProviderCurrenciesList,
-  usePaymentsNetworksList,
-} from '@djangocfg/api/cfg';
-import type { API } from '@djangocfg/api/cfg';
+import { api, Hooks } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
 import type {
   Currency,
   PaginatedCurrencyListList,
@@ -15,7 +10,7 @@ import type {
   PaginatedProviderCurrencyList,
   Network,
   PaginatedNetworkList,
-} from '@djangocfg/api/cfg';
+} from '@djangocfg/api';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Context Type
@@ -58,7 +53,7 @@ export function RootPaymentsProvider({ children }: { children: ReactNode }) {
     error: currenciesError,
     isLoading: isLoadingCurrencies,
     mutate: mutateCurrencies,
-  } = usePaymentsCurrenciesList({}, api as unknown as API);
+  } = Hooks.usePaymentsCurrenciesList({}, api as unknown as API);
 
   // List all provider currencies
   const {
@@ -66,7 +61,7 @@ export function RootPaymentsProvider({ children }: { children: ReactNode }) {
     error: providerCurrenciesError,
     isLoading: isLoadingProviderCurrencies,
     mutate: mutateProviderCurrencies,
-  } = usePaymentsProviderCurrenciesList({}, api as unknown as API);
+  } = Hooks.usePaymentsProviderCurrenciesList({}, api as unknown as API);
 
   // List all networks
   const {
@@ -74,7 +69,7 @@ export function RootPaymentsProvider({ children }: { children: ReactNode }) {
     error: networksError,
     isLoading: isLoadingNetworks,
     mutate: mutateNetworks,
-  } = usePaymentsNetworksList({}, api as unknown as API);
+  } = Hooks.usePaymentsNetworksList({}, api as unknown as API);
 
   const refreshCurrencies = async () => {
     await mutateCurrencies();

package/src/layouts/PaymentsLayout/views/apikeys/components/ApiKeysList.tsx

@@ -88,7 +88,7 @@ export const ApiKeysList: React.FC = () => {
         <CardContent>
           <div className="space-y-4">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+              <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
                 <div className="space-y-2 flex-1">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-3 w-48" />
@@ -131,7 +131,7 @@ export const ApiKeysList: React.FC = () => {
             {keysList.map((key) => (
               <div
                 key={key.id}
-                className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
+                className="flex items-center justify-between p-4 border rounded-sm hover:bg-accent/50 transition-colors"
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 mb-2">

package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx

@@ -72,7 +72,7 @@ export const RecentPayments: React.FC = () => {
         </CardHeader>
         <CardContent className="space-y-3">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
+            <div key={i} className="flex items-center justify-between p-3 border rounded-sm">
               <div className="space-y-2">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-3 w-24" />
@@ -112,7 +112,7 @@ export const RecentPayments: React.FC = () => {
             {payments.map((payment) => (
               <div
                 key={payment.id}
-                className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent cursor-pointer transition-colors"
+                className="flex items-center justify-between p-3 border rounded-sm hover:bg-accent cursor-pointer transition-colors"
                 onClick={() => openPaymentDetailsDialog(payment.id)}
               >
                 <div className="flex-1">

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -156,7 +156,7 @@ export const PaymentsList: React.FC = () => {
         {isLoadingPayments ? (
           <div className="space-y-3">
             {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
+              <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
                 <div className="space-y-2">
                   <Skeleton className="h-4 w-32" />
                   <Skeleton className="h-3 w-24" />
@@ -201,7 +201,7 @@ export const PaymentsList: React.FC = () => {
                     <TableRow
                       key={payment.id}
                       className="cursor-pointer hover:bg-accent"
-                      onClick={() => openPaymentDetails(payment)}
+                      onClick={() => openPaymentDetails(payment.id)}
                     >
                       <TableCell>
                         <div>
@@ -234,7 +234,7 @@ export const PaymentsList: React.FC = () => {
                           size="sm"
                           onClick={(e) => {
                             e.stopPropagation();
-                            openPaymentDetails(payment);
+                            openPaymentDetails(payment.id);
                           }}
                         >
                           <ExternalLink className="h-4 w-4" />

package/src/layouts/SupportLayout/hooks/useInfiniteMessages.ts

@@ -4,9 +4,8 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getSupportTicketsMessagesList } from '@djangocfg/api';
+import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
-import { CfgSupportTypes } from '@djangocfg/api';
 
 type PaginatedMessageList = CfgSupportTypes.PaginatedMessageList;
 type Message = CfgSupportTypes.Message;
@@ -41,7 +40,7 @@ export function useInfiniteMessages(ticketUuid: string | null): UseInfiniteMessa
   };
 
   const fetcher = async ([, ticket_uuid, page, pageSize]: [string, string, number, number]) => {
-    return getSupportTicketsMessagesList(
+    return Fetchers.getSupportTicketsMessagesList(
       ticket_uuid,
       { page, page_size: pageSize },
       api as unknown as API

package/src/layouts/SupportLayout/hooks/useInfiniteTickets.ts

@@ -4,9 +4,8 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getSupportTicketsList } from '@djangocfg/api';
+import { api, Fetchers, CfgSupportTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
-import { CfgSupportTypes } from '@djangocfg/api';
 
 type PaginatedTicketList = CfgSupportTypes.PaginatedTicketList;
 type Ticket = CfgSupportTypes.Ticket;
@@ -37,7 +36,7 @@ export function useInfiniteTickets(): UseInfiniteTicketsReturn {
   };
 
   const fetcher = async ([, page, pageSize]: [string, number, number]) => {
-    return getSupportTicketsList(
+    return Fetchers.getSupportTicketsList(
       { page, page_size: pageSize },
       api as unknown as API
     );

package/src/snippets/Chat/components/SessionList.tsx

@@ -102,7 +102,7 @@ export const SessionList: React.FC<SessionListProps> = ({
               {sessions.map((session, index) => (
                 <div
                   key={session.id}
-                  className="group relative flex items-start gap-3 p-4 border rounded-lg 
+                  className="group relative flex items-start gap-3 p-4 border rounded-sm 
                            hover:bg-muted/50 hover:border-primary/50 hover:shadow-md
                            transition-all duration-200 cursor-pointer
                            animate-in fade-in slide-in-from-left-2"

package/src/snippets/Chat/hooks/useInfiniteSessions.ts

@@ -4,7 +4,7 @@
  */
 
 import useSWRInfinite from 'swr/infinite';
-import { api, getKnowbaseAdminSessionsList, CfgKnowbaseTypes } from '@djangocfg/api';
+import { api, Fetchers, CfgKnowbaseTypes } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
 
 type PaginatedChatSessionList = CfgKnowbaseTypes.PaginatedChatSessionList;
@@ -25,7 +25,7 @@ export function useInfiniteSessions() {
   };
 
   const fetcher = async ([, page, pageSize]: [string, number, number]) => {
-    return getKnowbaseAdminSessionsList(
+    return Fetchers.getKnowbaseAdminSessionsList(
       { page, page_size: pageSize },
       api as unknown as API
     );

package/src/snippets/VideoPlayer/VideoPlayer.tsx

@@ -71,7 +71,7 @@ export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(({
       {/* Video Player */}
       <div 
         className={cn(
-          "relative w-full overflow-hidden rounded-lg bg-black",
+          "relative w-full overflow-hidden rounded-sm bg-black",
           theme === 'minimal' && "rounded-none",
           theme === 'modern' && "rounded-xl shadow-2xl"
         )}