@djangocfg/layouts 1.0.1

package/src/layouts/PaymentsLayout/events.ts

@@ -0,0 +1,106 @@
+/**
+ * Payments Layout Events
+ * Event-based communication for dialogs and actions
+ */
+
+import { events } from '@djangocfg/ui';
+import type { APIKeyDetail, Payment } from './types';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Dialog Events
+// ─────────────────────────────────────────────────────────────────────────
+
+export const PAYMENTS_DIALOG_EVENTS = {
+  // API Keys
+  OPEN_CREATE_APIKEY_DIALOG: 'OPEN_CREATE_APIKEY_DIALOG',
+  OPEN_EDIT_APIKEY_DIALOG: 'OPEN_EDIT_APIKEY_DIALOG',
+  OPEN_DELETE_APIKEY_DIALOG: 'OPEN_DELETE_APIKEY_DIALOG',
+  
+  // Payments
+  OPEN_CREATE_PAYMENT_DIALOG: 'OPEN_CREATE_PAYMENT_DIALOG',
+  OPEN_PAYMENT_DETAILS_DIALOG: 'OPEN_PAYMENT_DETAILS_DIALOG',
+  OPEN_CANCEL_PAYMENT_DIALOG: 'OPEN_CANCEL_PAYMENT_DIALOG',
+  
+  // Close
+  CLOSE_PAYMENTS_DIALOG: 'CLOSE_PAYMENTS_DIALOG',
+} as const;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Event Types
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface PaymentsDialogEvent {
+  type: typeof PAYMENTS_DIALOG_EVENTS[keyof typeof PAYMENTS_DIALOG_EVENTS];
+  payload?: {
+    // API Keys
+    keyId?: string;
+    keyData?: APIKeyDetail;
+    initialKeyData?: Partial<APIKeyDetail>;
+    
+    // Payments
+    paymentId?: string;
+    paymentData?: Payment;
+    initialPaymentData?: Partial<Payment>;
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// API Keys Events
+// ─────────────────────────────────────────────────────────────────────────
+
+export const openCreateApiKeyDialog = (initialData?: Partial<APIKeyDetail>) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_APIKEY_DIALOG,
+    payload: { initialKeyData: initialData },
+  });
+};
+
+export const openEditApiKeyDialog = (keyId: string, keyData?: APIKeyDetail) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_EDIT_APIKEY_DIALOG,
+    payload: { keyId, keyData },
+  });
+};
+
+export const openDeleteApiKeyDialog = (keyId: string, keyData?: APIKeyDetail) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_DELETE_APIKEY_DIALOG,
+    payload: { keyId, keyData },
+  });
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Payments Events
+// ─────────────────────────────────────────────────────────────────────────
+
+export const openCreatePaymentDialog = (initialData?: Partial<Payment>) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG,
+    payload: { initialPaymentData: initialData },
+  });
+};
+
+export const openPaymentDetailsDialog = (paymentId: string, paymentData?: Payment) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG,
+    payload: { paymentId, paymentData },
+  });
+};
+
+export const openCancelPaymentDialog = (paymentId: string, paymentData?: Payment) => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.OPEN_CANCEL_PAYMENT_DIALOG,
+    payload: { paymentId, paymentData },
+  });
+};
+
+// ─────────────────────────────────────────────────────────────────────────
+// Close Events
+// ─────────────────────────────────────────────────────────────────────────
+
+export const closePaymentsDialog = () => {
+  events.publish({
+    type: PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG,
+  });
+};
+

package/src/layouts/PaymentsLayout/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Payments Layout
+ * Export main layout and types
+ */
+
+export { PaymentsLayout } from './PaymentsLayout';
+export type { PaymentsLayoutProps } from './PaymentsLayout';
+export type { PaymentTab } from './types';
+
+// Re-export events for convenience
+export {
+  openCreateApiKeyDialog,
+  openEditApiKeyDialog,
+  openDeleteApiKeyDialog,
+  openCreatePaymentDialog,
+  openPaymentDetailsDialog,
+  openCancelPaymentDialog,
+  closePaymentsDialog,
+} from './events';
+

package/src/layouts/PaymentsLayout/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Payments Layout Types
+ */
+
+// Tab types for navigation
+export type PaymentTab = 'overview' | 'payments' | 'transactions' | 'apikeys' | 'tariffs';
+
+// Re-export API types for convenience
+export type {
+  Payment,
+  UserBalance,
+  Currency,
+  APIKeyDetail,
+  PaginatedPaymentListList,
+  PaginatedUserBalanceList,
+  PaginatedCurrencyListList,
+  PaginatedAPIKeyListList,
+} from '@djangocfg/api/cfg/contexts';
+

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

@@ -0,0 +1,109 @@
+/**
+ * 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>
+  );
+};
+

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

@@ -0,0 +1,194 @@
+/**
+ * API Keys List Component
+ * Display and manage API keys
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Skeleton,
+  useCopy,
+} from '@djangocfg/ui';
+import { Plus, MoreHorizontal, Edit, Trash2, Key, Copy, CheckCircle2 } from 'lucide-react';
+import { useApiKeysContext } from '@djangocfg/api/cfg/contexts';
+import { paymentsLogger } from '../../../../../utils/logger';
+import { openCreateApiKeyDialog, openEditApiKeyDialog, openDeleteApiKeyDialog } from '../../../events';
+
+export const ApiKeysList: React.FC = () => {
+  const { apiKeys, isLoadingApiKeys, deleteApiKey } = useApiKeysContext();
+  const { copyToClipboard } = useCopy({
+    successMessage: 'API key copied to clipboard',
+    errorMessage: 'Failed to copy API key',
+  });
+
+  const keysList = apiKeys?.results || [];
+
+  const getStatusVariant = (isActive?: boolean | null) => {
+    return isActive ? 'default' : 'secondary';
+  };
+
+  const getStatusLabel = (isActive?: boolean | null) => {
+    return isActive ? 'Active' : 'Inactive';
+  };
+
+  const getRelativeTime = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+
+    const now = new Date();
+    const target = new Date(date);
+    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1000);
+
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  };
+
+  const formatApiKey = (key: string) => {
+    if (!key) return '';
+    if (key.length <= 12) return key;
+    return `${key.slice(0, 8)}...${key.slice(-4)}`;
+  };
+
+  const handleCopyKey = async (keyValue: string) => {
+    await copyToClipboard(keyValue);
+  };
+
+  const handleDelete = async (keyId: string) => {
+    try {
+      await deleteApiKey(keyId);
+    } catch (error) {
+      paymentsLogger.error('Failed to delete key:', error);
+    }
+  };
+
+  if (isLoadingApiKeys) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <span>API Keys</span>
+            <Button disabled>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Key
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <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 className="space-y-2 flex-1">
+                  <Skeleton className="h-4 w-32" />
+                  <Skeleton className="h-3 w-48" />
+                </div>
+                <Skeleton className="h-8 w-8 rounded-full" />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>API Keys</span>
+          <Button onClick={() => openCreateApiKeyDialog()}>
+            <Plus className="h-4 w-4 mr-2" />
+            Create Key
+          </Button>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {keysList.length === 0 ? (
+          <div className="text-center py-12">
+            <Key className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No API Keys</h3>
+            <p className="text-muted-foreground mb-4">
+              Create your first API key to get started
+            </p>
+            <Button onClick={() => openCreateApiKeyDialog()}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Key
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {keysList.map((key) => (
+              <div
+                key={key.id}
+                className="flex items-center justify-between p-4 border rounded-lg hover:bg-accent/50 transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h3 className="font-medium truncate">{key.name || 'Unnamed Key'}</h3>
+                    <Badge variant={getStatusVariant(key.is_active)}>
+                      {getStatusLabel(key.is_active)}
+                    </Badge>
+                  </div>
+
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <code className="text-sm bg-muted px-2 py-1 rounded font-mono">
+                        {formatApiKey(key.id)}
+                      </code>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleCopyKey(key.id)}
+                      >
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                      <span>Created {getRelativeTime(key.created_at)}</span>
+                      {key.last_used_at && (
+                        <span>Last used {getRelativeTime(key.last_used_at)}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => openEditApiKeyDialog(key.id)}>
+                      <Edit className="h-4 w-4 mr-2" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => openDeleteApiKeyDialog(key.id)}
+                      className="text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+

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

@@ -0,0 +1,3 @@
+export { ApiKeysList } from './ApiKeysList';
+export { ApiKeyMetrics } from './ApiKeyMetrics';
+

package/src/layouts/PaymentsLayout/views/apikeys/index.tsx

@@ -0,0 +1,19 @@
+/**
+ * API Keys View
+ * Manage API keys for secure platform access
+ */
+
+'use client';
+
+import React from 'react';
+import { ApiKeyMetrics, ApiKeysList } from './components';
+
+export const ApiKeysView: React.FC = () => {
+  return (
+    <div className="space-y-6">
+      <ApiKeyMetrics />
+      <ApiKeysList />
+    </div>
+  );
+};
+

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

@@ -0,0 +1,99 @@
+/**
+ * Balance Card Component
+ * Display user balance with quick actions
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Button,
+  Badge,
+  Skeleton,
+} from '@djangocfg/ui';
+import { Wallet, RefreshCw, Plus } from 'lucide-react';
+import { useBalancesContext } from '@djangocfg/api/cfg/contexts';
+import { openCreatePaymentDialog } from '../../../events';
+
+export const BalanceCard: React.FC = () => {
+  const { 
+    balanceSummary, 
+    isLoadingSummary, 
+    refreshSummary 
+  } = useBalancesContext();
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === null || amount === undefined) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    }).format(amount);
+  };
+
+  if (isLoadingSummary) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Wallet className="h-5 w-5" />
+              Account Balance
+            </div>
+            <Skeleton className="h-8 w-20" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-10 w-32" />
+          <Skeleton className="h-4 w-48" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Wallet className="h-5 w-5" />
+            Account Balance
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={refreshSummary}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Funds
+            </Button>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <div className="text-4xl font-bold">
+            {balanceSummary ? formatCurrency(balanceSummary.balance_usd) : '$0.00'}
+          </div>
+          <p className="text-sm text-muted-foreground mt-1">
+            {balanceSummary?.balance_display || 'No balance available'}
+          </p>
+        </div>
+
+        {balanceSummary && (
+          <div className="flex items-center gap-2">
+            <Badge variant={balanceSummary.has_transactions ? 'default' : 'secondary'}>
+              {balanceSummary.has_transactions ? 'Active' : 'New Account'}
+            </Badge>
+            {balanceSummary.is_empty && <Badge variant="outline">Empty Balance</Badge>}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+

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

@@ -0,0 +1,103 @@
+/**
+ * Metrics Cards Component
+ * Display key payment metrics in cards
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Skeleton,
+} from '@djangocfg/ui';
+import { Wallet, TrendingUp, CreditCard, DollarSign } from 'lucide-react';
+import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+
+export const MetricsCards: React.FC = () => {
+  const { metrics, isLoadingOverview } = useOverviewContext();
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === null || amount === undefined) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    }).format(amount);
+  };
+
+  if (isLoadingOverview) {
+    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-20 mb-1" />
+              <Skeleton className="h-3 w-32" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  const metricsData = [
+    {
+      title: 'Current Balance',
+      value: formatCurrency(metrics?.balance?.current_balance),
+      description: 'Available funds',
+      icon: Wallet,
+      trend: null,
+    },
+    {
+      title: 'Total Payments',
+      value: metrics?.payments?.total_payments?.toString() || '0',
+      description: 'All-time payments',
+      icon: CreditCard,
+      trend: null,
+    },
+    {
+      title: 'Total Spent',
+      value: formatCurrency(metrics?.balance?.total_spent),
+      description: 'Lifetime spending',
+      icon: DollarSign,
+      trend: null,
+    },
+    {
+      title: 'Active API Keys',
+      value: metrics?.api_keys?.active_keys?.toString() || '0',
+      description: 'Currently active',
+      icon: TrendingUp,
+      trend: null,
+    },
+  ];
+
+  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 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>
+  );
+};
+