@djangocfg/layouts 1.0.3 → 1.0.5

package/src/layouts/PaymentsLayout/README.md

@@ -1,133 +0,0 @@
-# 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

@@ -1,172 +0,0 @@
-/**
- * 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/DeleteApiKeyDialog.tsx

@@ -1,100 +0,0 @@
-/**
- * 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/context/RootPaymentsContext.tsx

@@ -1,134 +0,0 @@
-'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 type {
-  Currency,
-  PaginatedCurrencyListList,
-  ProviderCurrency,
-  PaginatedProviderCurrencyList,
-  Network,
-  PaginatedNetworkList,
-} from '@djangocfg/api/cfg';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context Type
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface RootPaymentsContextValue {
-  // Currencies
-  currencies: PaginatedCurrencyListList | undefined;
-  isLoadingCurrencies: boolean;
-  currenciesError: Error | undefined;
-  refreshCurrencies: () => Promise<void>;
-
-  // Provider Currencies
-  providerCurrencies: PaginatedProviderCurrencyList | undefined;
-  isLoadingProviderCurrencies: boolean;
-  providerCurrenciesError: Error | undefined;
-  refreshProviderCurrencies: () => Promise<void>;
-
-  // Networks
-  networks: PaginatedNetworkList | undefined;
-  isLoadingNetworks: boolean;
-  networksError: Error | undefined;
-  refreshNetworks: () => Promise<void>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────
-
-const RootPaymentsContext = createContext<RootPaymentsContextValue | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────
-
-export function RootPaymentsProvider({ children }: { children: ReactNode }) {
-  // List all currencies
-  const {
-    data: currencies,
-    error: currenciesError,
-    isLoading: isLoadingCurrencies,
-    mutate: mutateCurrencies,
-  } = usePaymentsCurrenciesList({}, api as unknown as API);
-
-  // List all provider currencies
-  const {
-    data: providerCurrencies,
-    error: providerCurrenciesError,
-    isLoading: isLoadingProviderCurrencies,
-    mutate: mutateProviderCurrencies,
-  } = usePaymentsProviderCurrenciesList({}, api as unknown as API);
-
-  // List all networks
-  const {
-    data: networks,
-    error: networksError,
-    isLoading: isLoadingNetworks,
-    mutate: mutateNetworks,
-  } = usePaymentsNetworksList({}, api as unknown as API);
-
-  const refreshCurrencies = async () => {
-    await mutateCurrencies();
-  };
-
-  const refreshProviderCurrencies = async () => {
-    await mutateProviderCurrencies();
-  };
-
-  const refreshNetworks = async () => {
-    await mutateNetworks();
-  };
-
-  const value: RootPaymentsContextValue = {
-    currencies,
-    isLoadingCurrencies,
-    currenciesError,
-    refreshCurrencies,
-    providerCurrencies,
-    isLoadingProviderCurrencies,
-    providerCurrenciesError,
-    refreshProviderCurrencies,
-    networks,
-    isLoadingNetworks,
-    networksError,
-    refreshNetworks,
-  };
-
-  return (
-    <RootPaymentsContext.Provider value={value}>{children}</RootPaymentsContext.Provider>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────
-
-export function useRootPaymentsContext(): RootPaymentsContextValue {
-  const context = useContext(RootPaymentsContext);
-  if (!context) {
-    throw new Error('useRootPaymentsContext must be used within RootPaymentsProvider');
-  }
-  return context;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Re-export types
-// ─────────────────────────────────────────────────────────────────────────
-
-export type {
-  Currency,
-  PaginatedCurrencyListList,
-  ProviderCurrency,
-  PaginatedProviderCurrencyList,
-  Network,
-  PaginatedNetworkList,
-};

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

@@ -1,109 +0,0 @@
-/**
- * API Key Metrics Component
- * Display API key usage statistics
- */
-
-'use client';
-
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Skeleton,
-} from '@djangocfg/ui';
-import { Key, CheckCircle2, XCircle, Activity } from 'lucide-react';
-import { useApiKeysContext } from '@djangocfg/api/cfg/contexts';
-
-export const ApiKeyMetrics: React.FC = () => {
-  const { apiKeys, isLoadingApiKeys } = useApiKeysContext();
-
-  const keysList = apiKeys?.results || [];
-  
-  const metrics = React.useMemo(() => {
-    const total = keysList.length;
-    const active = keysList.filter(key => key.is_active).length;
-    const inactive = total - active;
-    const recentlyUsed = keysList.filter(key => {
-      if (!key.last_used_at) return false;
-      const lastUsed = new Date(key.last_used_at);
-      const dayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
-      return lastUsed > dayAgo;
-    }).length;
-
-    return { total, active, inactive, recentlyUsed };
-  }, [keysList]);
-
-  if (isLoadingApiKeys) {
-    return (
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-4 w-4 rounded-full" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-7 w-12 mb-1" />
-              <Skeleton className="h-3 w-32" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    );
-  }
-
-  const metricsData = [
-    {
-      title: 'Total Keys',
-      value: metrics.total.toString(),
-      description: 'All API keys',
-      icon: Key,
-    },
-    {
-      title: 'Active Keys',
-      value: metrics.active.toString(),
-      description: 'Currently active',
-      icon: CheckCircle2,
-      iconColor: 'text-green-600',
-    },
-    {
-      title: 'Inactive Keys',
-      value: metrics.inactive.toString(),
-      description: 'Not in use',
-      icon: XCircle,
-      iconColor: 'text-muted-foreground',
-    },
-    {
-      title: 'Recently Used',
-      value: metrics.recentlyUsed.toString(),
-      description: 'Last 24 hours',
-      icon: Activity,
-      iconColor: 'text-blue-600',
-    },
-  ];
-
-  return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-      {metricsData.map((metric, index) => {
-        const Icon = metric.icon;
-        return (
-          <Card key={index}>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">{metric.title}</CardTitle>
-              <Icon className={`h-4 w-4 ${metric.iconColor || 'text-muted-foreground'}`} />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{metric.value}</div>
-              <p className="text-xs text-muted-foreground mt-1">
-                {metric.description}
-              </p>
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};
-