@djangocfg/layouts 1.0.4 → 1.0.5

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,129 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useEffect, type ReactNode } from 'react';
-import { api, Hooks } from '@djangocfg/api';
-import type { API } from '@djangocfg/api';
-import type {
-  Currency,
-  PaginatedCurrencyListList,
-  ProviderCurrency,
-  PaginatedProviderCurrencyList,
-  Network,
-  PaginatedNetworkList,
-} from '@djangocfg/api';
-
-// ─────────────────────────────────────────────────────────────────────────
-// 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,
-  } = Hooks.usePaymentsCurrenciesList({}, api as unknown as API);
-
-  // List all provider currencies
-  const {
-    data: providerCurrencies,
-    error: providerCurrenciesError,
-    isLoading: isLoadingProviderCurrencies,
-    mutate: mutateProviderCurrencies,
-  } = Hooks.usePaymentsProviderCurrenciesList({}, api as unknown as API);
-
-  // List all networks
-  const {
-    data: networks,
-    error: networksError,
-    isLoading: isLoadingNetworks,
-    mutate: mutateNetworks,
-  } = Hooks.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>
-  );
-};
-