@djangocfg/layouts 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.0.4",
-    "@djangocfg/og-image": "^1.0.4",
-    "@djangocfg/ui": "^1.0.4",
+    "@djangocfg/api": "^1.0.6",
+    "@djangocfg/og-image": "^1.0.6",
+    "@djangocfg/ui": "^1.0.6",
     "@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.4",
+    "@djangocfg/typescript-config": "^1.0.6",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -17,7 +17,7 @@
 
 'use client';
 
-import React, { ReactNode, useState, useEffect } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { AppContextProvider } from './context';
 import { CoreProviders } from './providers';
@@ -50,41 +50,35 @@ function LayoutRouter({ children }: { children: ReactNode }) {
     setIsMounted(true);
   }, []);
 
-  // Get layout mode from context
-  const [layoutMode, setLayoutMode] = useState<'public' | 'private' | 'auth'>('public');
+  // Determine layout mode based on route (synchronous - works with SSR)
+  const getLayoutMode = (): 'public' | 'private' | 'auth' => {
+    if (router.pathname.startsWith('/auth')) return 'auth';
+    if (router.pathname.startsWith('/private')) return 'private';
+    return 'public';
+  };
 
-  useEffect(() => {
-    // This will be properly determined by AppContext
-    // For now, simple detection
-    if (router.pathname.startsWith('/auth')) {
-      setLayoutMode('auth');
-    } else if (router.pathname.startsWith('/private')) {
-      setLayoutMode('private');
-    } else {
-      setLayoutMode('public');
-    }
-  }, [router.pathname]);
-
-  // Show loading during SSR or auth check
-  if (!isMounted || isLoading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-muted-foreground">Loading...</div>
-      </div>
-    );
-  }
+  const layoutMode = getLayoutMode();
 
   // Render appropriate layout
   switch (layoutMode) {
+    // Public routes: render immediately (SSR enabled)
+    case 'public':
+      return <PublicLayout>{children}</PublicLayout>;
+
+    // Auth routes: render immediately (SSR enabled)
     case 'auth':
       return <AuthLayout>{children}</AuthLayout>;
 
+    // Private routes: wait for client-side hydration and auth check
     case 'private':
+      if (!isMounted || isLoading) {
+        return (
+          <div className="min-h-screen flex items-center justify-center">
+            <div className="text-muted-foreground">Loading...</div>
+          </div>
+        );
+      }
       return <PrivateLayout>{children}</PrivateLayout>;
-
-    case 'public':
-    default:
-      return <PublicLayout>{children}</PublicLayout>;
   }
 }
 

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -1,6 +1,8 @@
 /**
- * Payments Layout
- * Main layout with tabs for different payment-related views
+ * Payments Layout (v2.0 - Simplified)
+ *
+ * Simplified layout with 3 tabs: Overview, Payments, Transactions
+ * Removed: API Keys, Tariffs (deprecated in v2.0)
  */
 
 'use client';
@@ -8,18 +10,15 @@
 import React from 'react';
 import {
   PaymentsProvider,
-  ApiKeysProvider,
   OverviewProvider,
   RootPaymentsProvider,
 } from '@djangocfg/api/cfg/contexts';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
-import { Wallet, CreditCard, History, Key, Crown } from 'lucide-react';
+import { Wallet, CreditCard, History } from 'lucide-react';
 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, CreatePaymentDialog, PaymentDetailsDialog } from './components';
+import { CreatePaymentDialog, PaymentDetailsDialog } from './components';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Payments Layout
@@ -35,75 +34,58 @@ export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
       <div className="h-full p-6 space-y-6">
         {/* Page Header */}
         <div>
-          <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
+          <h1 className="text-3xl font-bold tracking-tight">Payments</h1>
           <p className="text-muted-foreground">
-            Manage your payments, subscriptions, API keys, and account balance
+            Manage your payments, balance, and transaction history
           </p>
         </div>
 
-      {/* Main Content with Tabs */}
-      <Tabs defaultValue="overview" 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>
+        {/* Main Content with Tabs */}
+        <Tabs defaultValue="overview" 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>
+          </TabsList>
 
-        {/* Each tab wrapped in its own provider - loads only when tab is active */}
-        <TabsContent value="overview" className="space-y-6">
-          <OverviewProvider>
+          {/* Overview Tab - Balance + Recent Payments */}
+          <TabsContent value="overview" className="space-y-6">
+            <OverviewProvider>
+              <PaymentsProvider>
+                <OverviewView />
+                <CreatePaymentDialog />
+              </PaymentsProvider>
+            </OverviewProvider>
+          </TabsContent>
+
+          {/* Payments Tab - Full Payment List */}
+          <TabsContent value="payments" className="space-y-6">
             <PaymentsProvider>
-              <OverviewView />
+              <PaymentsView />
               <CreatePaymentDialog />
             </PaymentsProvider>
-          </OverviewProvider>
-        </TabsContent>
-
-        <TabsContent value="payments" className="space-y-6">
-          <PaymentsProvider>
-            <PaymentsView />
-            <CreatePaymentDialog />
-          </PaymentsProvider>
-        </TabsContent>
-
-        <TabsContent value="transactions" className="space-y-6">
-          <TransactionsView />
-        </TabsContent>
+          </TabsContent>
 
-        <TabsContent value="apikeys" className="space-y-6">
-          <ApiKeysProvider>
-            <ApiKeysView />
-            <CreateApiKeyDialog />
-            <DeleteApiKeyDialog />
-          </ApiKeysProvider>
-        </TabsContent>
+          {/* Transactions Tab - Transaction History */}
+          <TabsContent value="transactions" className="space-y-6">
+            <OverviewProvider>
+              <TransactionsView />
+            </OverviewProvider>
+          </TabsContent>
+        </Tabs>
 
-        <TabsContent value="tariffs" className="space-y-6">
-          <TariffsView />
-        </TabsContent>
-      </Tabs>
-
-      {/* Global Payment Details Dialog */}
-      <PaymentDetailsDialog />
+        {/* Global Payment Details Dialog */}
+        <PaymentDetailsDialog />
       </div>
     </RootPaymentsProvider>
   );
 };
-

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

@@ -1,5 +1,5 @@
 /**
- * Create Payment Dialog
+ * Create Payment Dialog (v2.0 - Simplified)
  * Dialog for creating new payments
  */
 
@@ -21,115 +21,95 @@ import {
   FormLabel,
   FormMessage,
   Input,
-  Combobox,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Button,
   TokenIcon,
-  useEventListener,
 } from '@djangocfg/ui';
 import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { Schemas } from '@djangocfg/api/cfg/generated';
-import { paymentsLogger } from '../../../utils/logger';
-import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
-import { openPaymentDetails } from './PaymentDetailsDialog';
-import type { ProviderCurrency } from '@djangocfg/api/cfg/contexts';
-import type { ComboboxOption } from '@djangocfg/ui';
+import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
+import { openPaymentDetailsDialog } from '../events';
 
-const { PaymentCreateRequestSchema } = Schemas;
-type PaymentCreateRequest = Schemas.PaymentCreateRequest;
+// Payment creation schema
+const PaymentCreateSchema = z.object({
+  amount_usd: z.number().min(0.01, 'Amount must be at least $0.01'),
+  currency_code: z.string().min(1, 'Please select a currency'),
+});
+
+type PaymentCreateRequest = z.infer<typeof PaymentCreateSchema>;
 
 export const CreatePaymentDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const { createPayment } = usePaymentsContext();
-  const {
-    providerCurrencies,
-    isLoadingProviderCurrencies,
-  } = useRootPaymentsContext();
+  const { currencies, isLoadingCurrencies } = useRootPaymentsContext();
 
   const form = useForm<PaymentCreateRequest>({
-    resolver: zodResolver(PaymentCreateRequestSchema),
+    resolver: zodResolver(PaymentCreateSchema),
     defaultValues: {
       amount_usd: 10,
-      currency_code: 'USDT', // Default to USDT
+      currency_code: '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);
-
-    // 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 {
-        // Use currency code (e.g. "USDT") as value for API
-        value: pc.currency.code.toUpperCase(),
-        label,
-        description,
-      };
-    });
-  }, [providerCurrencies]);
-
-  // Get first ProviderCurrency by currency code (e.g. "USDT")
-  const getProviderCurrency = (currencyCode: string) => {
-    return providerCurrencies?.results?.find(
-      pc => pc.is_enabled && pc.currency.code.toUpperCase() === currencyCode.toUpperCase()
-    );
-  };
+  // Extract currencies list from response (handle different possible structures)
+  const currenciesList = useMemo(() => {
+    const data = currencies?.currencies || currencies?.results || currencies || [];
+    return Array.isArray(data) ? data : [];
+  }, [currencies]);
+
+  // Get currency options for select
+  const currencyOptions = useMemo(() => {
+    return currenciesList
+      .filter((curr: any) => curr.is_enabled !== false)
+      .map((curr: any) => ({
+        code: curr.code || curr.currency_code || curr.symbol,
+        name: curr.name || curr.code || curr.currency_code,
+        usd_rate: curr.usd_rate || curr.rate || 1,
+        network: curr.network || null,
+      }));
+  }, [currenciesList]);
 
   // Calculate crypto amount from USD
   const calculateCryptoAmount = useMemo(() => {
     const amountUsd = form.watch('amount_usd');
     const currencyCode = form.watch('currency_code');
-    const pc = getProviderCurrency(currencyCode);
+    const currency = currencyOptions.find((c: any) => c.code === currencyCode);
 
-    if (!pc || !pc.currency.usd_rate || !amountUsd) {
+    if (!currency || !currency.usd_rate || !amountUsd) {
       return null;
     }
 
-    const cryptoAmount = amountUsd / pc.currency.usd_rate;
+    const cryptoAmount = amountUsd / currency.usd_rate;
     return {
       amount: cryptoAmount,
-      currency: pc.currency.code,
-      symbol: pc.currency.symbol || pc.currency.code,
+      currency: currency.code,
+      rate: currency.usd_rate,
+      network: currency.network,
     };
-  }, [form.watch('amount_usd'), form.watch('currency_code'), providerCurrencies]);
+  }, [form.watch('amount_usd'), form.watch('currency_code'), currencyOptions]);
 
-  useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, () => {
-    setOpen(true);
-  });
+  // Listen for open/close events
+  useEffect(() => {
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
 
-  useEventListener(PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG, () => {
-    setOpen(false);
-  });
+    window.addEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
+    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
+
+    return () => {
+      window.removeEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
+      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
+    };
+  }, []);
 
   const handleClose = () => {
     setOpen(false);
@@ -139,7 +119,7 @@ export const CreatePaymentDialog: React.FC = () => {
   // Initialize default currency if not set
   useEffect(() => {
     if (currencyOptions.length > 0 && !form.getValues('currency_code')) {
-      form.setValue('currency_code', currencyOptions[0].value as any);
+      form.setValue('currency_code', currencyOptions[0].code);
     }
   }, [currencyOptions, form]);
 
@@ -147,20 +127,19 @@ export const CreatePaymentDialog: React.FC = () => {
     try {
       setIsSubmitting(true);
 
-      const result = await createPayment(data);
+      const result = await createPayment();
       handleClose();
       closePaymentsDialog();
 
-      // The API returns a wrapped response with { success, message, payment }
-      // Extract the payment ID from the result
+      // Extract payment ID from result
       const paymentData = result as any;
       const paymentId = paymentData?.payment?.id || paymentData?.id;
 
       if (paymentId) {
-        openPaymentDetails(String(paymentId));
+        openPaymentDetailsDialog(String(paymentId));
       }
     } catch (error) {
-      paymentsLogger.error('Failed to create payment:', error);
+      console.error('Failed to create payment:', error);
     } finally {
       setIsSubmitting(false);
     }
@@ -208,49 +187,32 @@ export const CreatePaymentDialog: React.FC = () => {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Currency</FormLabel>
-                  <FormControl>
-                    <Combobox
-                      options={currencyOptions}
-                      value={field.value}
-                      onValueChange={field.onChange}
-                      placeholder="Select currency..."
-                      searchPlaceholder="Search currencies..."
-                      emptyText="No currencies found."
-                      disabled={isLoadingProviderCurrencies}
-                      className="w-full"
-                      renderValue={(option) => {
-                        if (!option) return null;
-                        const pc = getProviderCurrency(option.value);
-                        if (!pc) return option.label;
-                        return (
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    disabled={isLoadingCurrencies}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select currency..." />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {currencyOptions.map((curr: any) => (
+                        <SelectItem key={curr.code} value={curr.code}>
                           <div className="flex items-center gap-2">
-                            <TokenIcon symbol={pc.currency.code} size={20} />
-                            <span>{pc.currency.code}</span>
-                            {pc.network && (
+                            <TokenIcon symbol={curr.code} size={16} />
+                            <span>{curr.code}</span>
+                            {curr.network && (
                               <span className="text-xs text-muted-foreground">
-                                ({pc.network.name})
+                                ({curr.network})
                               </span>
                             )}
                           </div>
-                        );
-                      }}
-                      renderOption={(option) => {
-                        const pc = getProviderCurrency(option.value);
-                        if (!pc) return option.label;
-                        return (
-                          <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>
-                        );
-                      }}
-                    />
-                  </FormControl>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                   <FormDescription>
                     The cryptocurrency to use for payment.
                   </FormDescription>
@@ -259,59 +221,53 @@ export const CreatePaymentDialog: React.FC = () => {
               )}
             />
 
-            {/* Conversion and Fee Information */}
-            {calculateCryptoAmount && (() => {
-              const pc = getProviderCurrency(form.watch('currency_code'));
-              const amountUsd = form.watch('amount_usd');
-              if (!pc) return null;
-
-              return (
-                <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>
-                    <div className="flex items-center gap-2">
-                      <TokenIcon symbol={calculateCryptoAmount.currency} size={16} />
-                      <span className="font-mono font-semibold">
-                        {calculateCryptoAmount.amount.toFixed(8)} {calculateCryptoAmount.currency}
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* USD Amount Received */}
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">You will receive</span>
-                    <span className="text-lg font-bold">
-                      ${amountUsd?.toFixed(2)} USD
+            {/* Conversion Information */}
+            {calculateCryptoAmount && (
+              <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>
+                  <div className="flex items-center gap-2">
+                    <TokenIcon symbol={calculateCryptoAmount.currency} size={16} />
+                    <span className="font-mono font-semibold">
+                      {calculateCryptoAmount.amount.toFixed(8)} {calculateCryptoAmount.currency}
                     </span>
                   </div>
+                </div>
 
-                  {/* Exchange Rate */}
-                  <div className="flex items-center justify-between text-xs">
-                    <span className="text-muted-foreground">Rate</span>
-                    <span className="font-medium">
-                      1 {calculateCryptoAmount.currency} = ${pc.currency.usd_rate?.toFixed(2)}
-                    </span>
-                  </div>
+                {/* USD Amount Received */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">You will receive</span>
+                  <span className="text-lg font-bold">
+                    ${form.watch('amount_usd')?.toFixed(2)} USD
+                  </span>
+                </div>
 
-                  {/* Network Info */}
-                  {pc.network && (
-                    <div className="border-t pt-3">
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm text-muted-foreground">Network</span>
-                        <span className="text-sm font-medium">{pc.network.name}</span>
-                      </div>
-                    </div>
-                  )}
+                {/* Exchange Rate */}
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground">Rate</span>
+                  <span className="font-medium">
+                    1 {calculateCryptoAmount.currency} = ${calculateCryptoAmount.rate?.toFixed(2)}
+                  </span>
                 </div>
-              );
-            })()}
+
+                {/* Network Info */}
+                {calculateCryptoAmount.network && (
+                  <div className="border-t pt-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">Network</span>
+                      <span className="text-sm font-medium">{calculateCryptoAmount.network}</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
 
             <DialogFooter>
               <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button type="submit" disabled={isSubmitting}>
+              <Button type="submit" disabled={isSubmitting || currencyOptions.length === 0}>
                 {isSubmitting ? (
                   <>
                     <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
@@ -331,4 +287,3 @@ export const CreatePaymentDialog: React.FC = () => {
     </Dialog>
   );
 };
-