@djangocfg/layouts 1.0.1

package/src/layouts/PaymentsLayout/README.md

@@ -0,0 +1,133 @@
+# Payments Layout
+
+Modern payments layout with tabbed interface for managing payments, balances, API keys, and subscriptions.
+
+## Structure
+
+```
+PaymentsLayout/
+├── PaymentsLayout.tsx       # Main layout with tabs and providers
+├── events.ts                # Event-based dialog communication
+├── types.ts                 # TypeScript types
+├── index.ts                 # Public exports
+└── views/                   # Tab views
+    ├── overview/            # Dashboard with metrics and balance
+    │   ├── components/
+    │   │   ├── MetricsCards.tsx
+    │   │   ├── BalanceCard.tsx
+    │   │   ├── RecentPayments.tsx
+    │   │   └── index.ts
+    │   └── index.tsx
+    ├── payments/            # Payment transactions list
+    │   ├── components/
+    │   │   ├── PaymentsList.tsx
+    │   │   └── index.ts
+    │   └── index.tsx
+    ├── transactions/        # Transaction history (placeholder)
+    │   └── index.tsx
+    ├── apikeys/            # API keys management
+    │   ├── components/
+    │   │   ├── ApiKeysList.tsx
+    │   │   ├── ApiKeyMetrics.tsx
+    │   │   └── index.ts
+    │   └── index.tsx
+    └── tariffs/            # Tariff plans (placeholder)
+        └── index.tsx
+```
+
+## Usage
+
+```tsx
+import { PaymentsLayout } from '@djangocfg/layouts';
+
+function PaymentsPage() {
+  return <PaymentsLayout />;
+}
+```
+
+## Features
+
+### Tabs
+- **Overview** - Dashboard with key metrics, balance card, and recent payments
+- **Payments** - Full payment history with search and filters
+- **Transactions** - Balance transaction history (coming soon)
+- **API Keys** - Create, manage, and monitor API keys
+- **Tariffs** - Subscription plans and pricing (coming soon)
+
+### Contexts
+The layout automatically provides all necessary contexts:
+- `OverviewProvider` - Dashboard metrics and overview data
+- `PaymentsProvider` - Payment CRUD operations
+- `BalancesProvider` - User balance management
+- `ApiKeysProvider` - API key management
+
+### Event System
+Uses event-based communication for dialogs:
+- `openCreateApiKeyDialog()` - Open create API key dialog
+- `openEditApiKeyDialog(id)` - Open edit API key dialog
+- `openDeleteApiKeyDialog(id)` - Open delete confirmation dialog
+- `openCreatePaymentDialog()` - Open create payment dialog
+- `openPaymentDetailsDialog(id)` - Open payment details dialog
+- `openCancelPaymentDialog(id)` - Open cancel payment dialog
+- `closePaymentsDialog()` - Close any active dialog
+
+## Components
+
+### Overview View
+- **MetricsCards** - Display key metrics (balance, payments, API keys)
+- **BalanceCard** - Show current balance with quick actions
+- **RecentPayments** - List of recent payment transactions
+
+### Payments View
+- **PaymentsList** - Paginated payment list with filters and search
+
+### API Keys View
+- **ApiKeyMetrics** - API key usage statistics
+- **ApiKeysList** - List of API keys with management actions
+
+## Responsive Design
+- Mobile-first responsive layout
+- Adaptive tabs (icons only on mobile, text on desktop)
+- Responsive grid layouts for cards and metrics
+
+## Architecture
+
+### Decomposed Contexts
+Uses specialized contexts from `@djangocfg/api/cfg/contexts`:
+- `PaymentsContext` - Payment operations
+- `BalancesContext` - Balance queries
+- `ApiKeysContext` - API key CRUD
+- `OverviewContext` - Dashboard data
+
+### View-based Structure
+Each tab is a separate view with:
+- Dedicated components folder
+- Dedicated hooks folder (for future custom hooks)
+- Clean separation of concerns
+
+### Event-driven Dialogs
+Dialogs are controlled via events, not props:
+- Loose coupling between components
+- Easy to trigger from anywhere
+- Centralized dialog management
+
+## Migration from Old Layout
+
+The old `PaymentsLayout_old` has been replaced with this new structure. Key improvements:
+
+1. **Better Organization** - Views are logically separated
+2. **Decomposed Contexts** - Each context has single responsibility
+3. **Event System** - Better dialog management
+4. **Scalability** - Easy to add new tabs and features
+5. **Type Safety** - Full TypeScript support
+
+## Future Enhancements
+
+- [ ] Complete Transactions view with filtering
+- [ ] Complete Tariffs view with plan comparison
+- [ ] Add payment creation dialogs
+- [ ] Add API key creation/edit dialogs
+- [ ] Add real-time payment status updates
+- [ ] Add charts and analytics
+- [ ] Add export functionality
+

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

@@ -0,0 +1,172 @@
+/**
+ * Create API Key Dialog
+ * Dialog for creating new API keys
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Button,
+  useEventListener,
+} from '@djangocfg/ui';
+import { Plus, RefreshCw } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useApiKeysContext } from '@djangocfg/api/cfg/contexts';
+import { Schemas } from '@djangocfg/api/cfg/generated';
+import { paymentsLogger } from '../../../utils/logger';
+
+const { APIKeyCreateRequestSchema } = Schemas;
+type APIKeyCreateRequest = Schemas.APIKeyCreateRequest;
+import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
+
+export const CreateApiKeyDialog: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [initialData, setInitialData] = useState<any>();
+  const { createApiKey } = useApiKeysContext();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const form = useForm<APIKeyCreateRequest>({
+    resolver: zodResolver(APIKeyCreateRequestSchema),
+    defaultValues: {
+      name: '',
+      expires_in_days: null,
+    },
+  });
+
+  // Event listeners
+  useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_APIKEY_DIALOG, (event: any) => {
+    setInitialData(event.payload?.initialKeyData);
+    setOpen(true);
+  });
+
+  useEventListener(PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG, () => {
+    setOpen(false);
+  });
+
+  // Reset form when initial data changes
+  useEffect(() => {
+    if (initialData) {
+      form.reset({
+        name: initialData.name || '',
+        expires_in_days: initialData.expires_in_days || undefined,
+      });
+    }
+  }, [initialData, form]);
+
+  const handleClose = () => {
+    setOpen(false);
+    form.reset();
+    setInitialData(undefined);
+  };
+
+  const handleSubmit = async (data: APIKeyCreateRequest) => {
+    try {
+      setIsSubmitting(true);
+      await createApiKey(data);
+      handleClose();
+      closePaymentsDialog();
+    } catch (error) {
+      paymentsLogger.error('Failed to create API key:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create API Key</DialogTitle>
+          <DialogDescription>
+            Create a new API key for secure access to the platform.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My API Key" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    A descriptive name for your API key.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="expires_in_days"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Expiration (Days)</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      placeholder="30"
+                      min="1"
+                      max="365"
+                      {...field}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        field.onChange(value ? parseInt(value, 10) : null);
+                      }}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Number of days until expiration. Leave empty for no expiration.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting || !form.formState.isValid}>
+                {isSubmitting ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4 mr-2" />
+                    Create Key
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

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

@@ -0,0 +1,203 @@
+/**
+ * Create Payment Dialog
+ * Dialog for creating new payments
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Button,
+  useEventListener,
+} from '@djangocfg/ui';
+import { Plus, RefreshCw } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { Schemas, Enums } from '@djangocfg/api/cfg/generated';
+import { paymentsLogger } from '../../../utils/logger';
+import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
+
+const { PaymentCreateRequestSchema } = Schemas;
+type PaymentCreateRequest = Schemas.PaymentCreateRequest;
+const { PaymentCreateRequestCurrencyCode, PaymentCreateRequestProvider } = Enums;
+
+export const CreatePaymentDialog: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { createPayment } = usePaymentsContext();
+
+  const form = useForm<PaymentCreateRequest>({
+    resolver: zodResolver(PaymentCreateRequestSchema),
+    defaultValues: {
+      amount_usd: 10,
+      currency_code: PaymentCreateRequestCurrencyCode.USDT,
+      provider: PaymentCreateRequestProvider.NOWPAYMENTS,
+    },
+  });
+
+  useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, () => {
+    setOpen(true);
+  });
+
+  useEventListener(PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG, () => {
+    setOpen(false);
+  });
+
+  const handleClose = () => {
+    setOpen(false);
+    form.reset();
+  };
+
+  const handleSubmit = async (data: PaymentCreateRequest) => {
+    try {
+      setIsSubmitting(true);
+      await createPayment(data);
+      handleClose();
+      closePaymentsDialog();
+    } catch (error) {
+      paymentsLogger.error('Failed to create payment:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const currencyOptions = Object.entries(PaymentCreateRequestCurrencyCode).map(([key, value]) => ({
+    value,
+    label: key,
+  }));
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Create Payment</DialogTitle>
+          <DialogDescription>
+            Create a new payment to add funds to your account.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="amount_usd"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Amount (USD)</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      step="0.01"
+                      min="0.01"
+                      placeholder="10.00"
+                      {...field}
+                      onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    The amount you want to pay in USD.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="currency_code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Currency</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select currency" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {currencyOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    The cryptocurrency to use for payment.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="provider"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Payment Provider</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select provider" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value={PaymentCreateRequestProvider.NOWPAYMENTS}>
+                        NOWPayments
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>
+                    The payment gateway to process your payment.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting || !form.formState.isValid}>
+                {isSubmitting ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Plus className="h-4 w-4 mr-2" />
+                    Create Payment
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

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

@@ -0,0 +1,100 @@
+/**
+ * Delete API Key Dialog
+ * Confirmation dialog for deleting API keys
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  useEventListener,
+} from '@djangocfg/ui';
+import { Trash2, RefreshCw } from 'lucide-react';
+import { useApiKeysContext } from '@djangocfg/api/cfg/contexts';
+import { paymentsLogger } from '../../../utils/logger';
+import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
+
+export const DeleteApiKeyDialog: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [keyId, setKeyId] = useState<string>('');
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { deleteApiKey } = useApiKeysContext();
+
+  useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_DELETE_APIKEY_DIALOG, (payload: any) => {
+    const id = payload?.keyId || '';
+    setKeyId(id);
+    setOpen(true);
+  });
+
+  useEventListener(PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG, () => {
+    setOpen(false);
+  });
+
+  const handleClose = () => {
+    setOpen(false);
+    setKeyId('');
+  };
+
+  const handleDelete = async () => {
+    if (!keyId) return;
+
+    try {
+      setIsDeleting(true);
+      await deleteApiKey(keyId);
+      // Add a small delay to ensure the list refreshes before closing
+      await new Promise(resolve => setTimeout(resolve, 100));
+      handleClose();
+      closePaymentsDialog();
+    } catch (error) {
+      paymentsLogger.error('Failed to delete API key:', error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Delete API Key</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this API key? This action cannot be undone and will
+            immediately revoke access for any applications using this key.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={handleClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting ? (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              <>
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete Key
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+

package/src/layouts/PaymentsLayout/components/index.ts

@@ -0,0 +1,4 @@
+export { CreateApiKeyDialog } from './CreateApiKeyDialog';
+export { DeleteApiKeyDialog } from './DeleteApiKeyDialog';
+export { CreatePaymentDialog } from './CreatePaymentDialog';
+