@djangocfg/layouts 1.0.3 → 1.0.5

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

@@ -1,194 +0,0 @@
-/**
- * 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

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

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

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

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

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

@@ -1,29 +0,0 @@
-/**
- * Tariffs View
- * View and manage tariff plans
- */
-
-'use client';
-
-import React from 'react';
-import { Card, CardContent } from '@djangocfg/ui';
-import { Crown } from 'lucide-react';
-
-export const TariffsView: React.FC = () => {
-  return (
-    <Card>
-      <CardContent className="py-12">
-        <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
-            <Crown className="w-8 h-8 text-muted-foreground" />
-          </div>
-          <h3 className="text-lg font-semibold mb-2">Tariff Plans Coming Soon</h3>
-          <p className="text-muted-foreground">
-            Subscription tiers and pricing plans will be available here
-          </p>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-