@djangocfg/ext-payments 1.0.4 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-payments",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Payments system extension for DjangoCFG",
   "keywords": [
     "django",
@@ -59,21 +59,22 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.16",
-    "@djangocfg/ext-base": "^1.0.4",
-    "@djangocfg/ui-nextjs": "^2.1.16",
+    "@djangocfg/api": "^2.1.43",
+    "@djangocfg/ext-base": "^1.0.7",
+    "@djangocfg/ui-nextjs": "^2.1.43",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "next": "^15.5.7",
     "p-retry": "^7.0.0",
     "react": "^18 || ^19",
     "swr": "^2.3.7",
-    "zod": "^4.1.13"
+    "zod": "^4.1.13",
+    "moment": "^2.30.1"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.16",
-    "@djangocfg/ext-base": "^1.0.4",
-    "@djangocfg/typescript-config": "^2.1.16",
+    "@djangocfg/api": "^2.1.43",
+    "@djangocfg/ext-base": "^1.0.7",
+    "@djangocfg/typescript-config": "^2.1.43",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     "consola": "^3.4.2",

package/src/api/generated/ext_payments/CLAUDE.md

@@ -0,0 +1,76 @@
+# Django CFG API - Typescript Client
+
+Auto-generated. **Do not edit manually.**
+
+```bash
+python manage.py generate_client --groups ext_payments --typescript
+```
+
+## Stats
+
+| | |
+|---|---|
+| Version | 3.0.3 |
+| Operations | 8 |
+| Schemas | 6 |
+
+## Resources
+
+- **payments** (8 ops)
+
+## Operations
+
+**payments:**
+- `GET` /cfg/payments/balance/ → `cfg_payments_balance_retrieve`
+- `GET` /cfg/payments/currencies/ → `cfg_payments_currencies_list`
+- `POST` /cfg/payments/payments/{id}/confirm/ → `cfg_payments_payments_confirm_create`
+- `POST` /cfg/payments/payments/create/ → `cfg_payments_payments_create_create`
+- `GET` /cfg/payments/payments/ → `cfg_payments_payments_list`
+- `GET` /cfg/payments/payments/{id}/ → `cfg_payments_payments_retrieve`
+- `GET` /cfg/payments/payments/{id}/status/ → `cfg_payments_payments_status_retrieve`
+- `GET` /cfg/payments/transactions/ → `cfg_payments_transactions_list`
+
+## Usage
+
+```typescript
+import { APIClient } from './';
+
+const client = new APIClient({ baseUrl, token });
+
+await client.payments.list();
+await client.payments.retrieve({ id: 1 });
+await client.payments.create({ ... });
+```
+
+**SWR Hooks:**
+```typescript
+import { usePaymentsList } from './hooks';
+const { data, isLoading } = usePaymentsList();
+```
+
+## How It Works
+
+```
+DRF ViewSets → drf-spectacular → OpenAPI → IR Parser → Generator → This Client
+```
+
+**Configuration** (`api/config.py`):
+```python
+openapi_client = OpenAPIClientConfig(
+    enabled=True,
+    groups=[OpenAPIGroupConfig(name="ext_payments", apps=["..."])],
+    generate_zod_schemas=True,  # → schemas.ts
+    generate_fetchers=True,     # → fetchers.ts
+    generate_swr_hooks=True,    # → hooks.ts
+)
+```
+
+**Copy to Next.js** (if `nextjs_admin` configured):
+```python
+nextjs_admin = NextJsAdminConfig(
+    project_path="../frontend/apps/...",
+    api_output_path="app/_lib/api/generated",
+)
+```
+
+@see https://djangocfg.com/docs/features/api-generation

package/src/api/generated/ext_payments/_utils/fetchers/ext_payments__payments.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Typed fetchers for Payments
  *

package/src/api/generated/ext_payments/_utils/fetchers/index.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Typed Fetchers - Universal API functions
  *

package/src/api/generated/ext_payments/_utils/hooks/ext_payments__payments.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 'use client';
 
 /**

package/src/api/generated/ext_payments/_utils/hooks/index.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 'use client';
 
 /**

package/src/api/generated/ext_payments/_utils/schemas/index.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Zod Schemas - Runtime validation and type inference
  *

package/src/api/generated/ext_payments/api-instance.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Global API Instance - Singleton configuration
  *

package/src/api/generated/ext_payments/enums.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Current payment status
  * * `pending` - Pending

package/src/api/generated/ext_payments/errors.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * API Error Classes
  *

package/src/api/generated/ext_payments/ext_payments__payments/index.ts

@@ -1,2 +1,3 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 export * from "./client";
 export * as Models from "./models";

package/src/api/generated/ext_payments/ext_payments__payments/models.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 import * as Enums from "../enums";
 
 /**

package/src/api/generated/ext_payments/http.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * HTTP Client Adapter Pattern
  *

package/src/api/generated/ext_payments/index.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Django CFG API - API Client with JWT Management
  *

package/src/api/generated/ext_payments/logger.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * API Logger with Consola
  * Beautiful console logging for API requests and responses

package/src/api/generated/ext_payments/retry.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Retry Configuration and Utilities
  *

package/src/api/generated/ext_payments/storage.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Storage adapters for cross-platform token storage.
  *

package/src/api/generated/ext_payments/validation-events.ts

@@ -1,3 +1,4 @@
+// Auto-generated by DjangoCFG - see CLAUDE.md
 /**
  * Zod Validation Events - Browser CustomEvent integration
  *

package/src/api/index.ts

@@ -1,9 +1,10 @@
+import { createExtensionAPI } from '@djangocfg/ext-base/api';
+
 /**
  * Payments Extension API
  *
  * Pre-configured API instance with shared authentication
  */
 import { API } from './generated/ext_payments';
-import { createExtensionAPI } from '@djangocfg/ext-base/api';
 
 export const apiPayments = createExtensionAPI(API);

package/src/config.ts

@@ -3,6 +3,7 @@
  */
 
 import { createExtensionConfig } from '@djangocfg/ext-base';
+
 import packageJson from '../package.json';
 
 export const extensionConfig = createExtensionConfig(packageJson, {

package/src/contexts/BalancesContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
+
 import { apiPayments } from '../api';
 import { usePaymentsBalanceRetrieve } from '../api/generated/ext_payments/_utils/hooks';
 

package/src/contexts/CurrenciesContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
+
 import { apiPayments } from '../api';
 import { usePaymentsCurrenciesList } from '../api/generated/ext_payments/_utils/hooks';
 

package/src/contexts/OverviewContext.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
 import { SWRConfig } from 'swr';
+
 import { apiPayments } from '../api';
 import {
-  usePaymentsBalanceRetrieve,
-  usePaymentsPaymentsList,
-  usePaymentsTransactionsList,
-  useCreatePaymentsPaymentsCreateCreate,
+    useCreatePaymentsPaymentsCreateCreate, usePaymentsBalanceRetrieve, usePaymentsPaymentsList,
+    usePaymentsTransactionsList
 } from '../api/generated/ext_payments/_utils/hooks';
+
 import type {
   PaginatedPaymentListList,
   PaymentList,

package/src/contexts/PaymentsContext.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
-import * as ExtPaymentsFetchers from '../api/generated/ext_payments/_utils/fetchers';
+import React, { createContext, ReactNode, useContext } from 'react';
+
 import { apiPayments } from '../api';
+import * as ExtPaymentsFetchers from '../api/generated/ext_payments/_utils/fetchers';
 import {
-  usePaymentsPaymentsList,
-  useCreatePaymentsPaymentsCreateCreate,
-  useCreatePaymentsPaymentsConfirmCreate,
+    useCreatePaymentsPaymentsConfirmCreate, useCreatePaymentsPaymentsCreateCreate,
+    usePaymentsPaymentsList
 } from '../api/generated/ext_payments/_utils/hooks';
+
 import type {
   PaginatedPaymentListList,
   PaymentDetail,

package/src/contexts/PaymentsExtensionProvider.tsx

@@ -8,12 +8,13 @@
 
 import type { ReactNode } from 'react';
 import { ExtensionProvider } from '@djangocfg/ext-base/hooks';
+
 import { extensionConfig } from '../config';
-import { RootPaymentsProvider } from './RootPaymentsContext';
-import { PaymentsProvider } from './PaymentsContext';
 import { BalancesProvider } from './BalancesContext';
 import { CurrenciesProvider } from './CurrenciesContext';
 import { OverviewProvider } from './OverviewContext';
+import { PaymentsProvider } from './PaymentsContext';
+import { RootPaymentsProvider } from './RootPaymentsContext';
 
 interface PaymentsExtensionProviderProps {
   children: ReactNode;

package/src/contexts/RootPaymentsContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext } from 'react';
+
 import { apiPayments } from '../api';
 import { usePaymentsCurrenciesList } from '../api/generated/ext_payments/_utils/hooks';
 

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -8,18 +8,16 @@
 
 'use client';
 
+import { CreditCard, History, Wallet } from 'lucide-react';
 import React from 'react';
-import {
-  PaymentsProvider,
-  OverviewProvider,
-  RootPaymentsProvider,
-} from '../../contexts';
+
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui-nextjs';
-import { Wallet, CreditCard, History } from 'lucide-react';
+
+import { OverviewProvider, PaymentsProvider, RootPaymentsProvider } from '../../contexts';
+import { CreatePaymentDialog, PaymentDetailsDialog } from './components';
 import { OverviewView } from './views/overview';
 import { PaymentsView } from './views/payments';
 import { TransactionsView } from './views/transactions';
-import { CreatePaymentDialog, PaymentDetailsDialog } from './components';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Payments Layout

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

@@ -6,38 +6,21 @@
 
 'use client';
 
-import React, { useState, useEffect, useMemo } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Button,
-  TokenIcon,
-} from '@djangocfg/ui-nextjs';
 import { Plus, RefreshCw } from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+
+import {
+    Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Form,
+    FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Select,
+    SelectContent, SelectItem, SelectTrigger, SelectValue, TokenIcon
+} from '@djangocfg/ui-nextjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+
 import { usePaymentsContext, useRootPaymentsContext } from '../../../contexts';
-import { PAYMENT_EVENTS, closePaymentsDialog } from '../events';
-import { openPaymentDetailsDialog } from '../events';
 import { paymentsLogger } from '../../../utils/logger';
+import { closePaymentsDialog, openPaymentDetailsDialog, PAYMENT_EVENTS } from '../events';
 
 // Payment creation schema
 const PaymentCreateSchema = z.object({

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

@@ -5,19 +5,15 @@
 
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { AlertCircle, CheckCircle2, Clock, ExternalLink, RefreshCw, XCircle } from 'lucide-react';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  Button,
-  TokenIcon,
-  CopyButton,
+    Button, CopyButton, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader,
+    DialogTitle, TokenIcon
 } from '@djangocfg/ui-nextjs';
-import { ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+
 import { apiPayments } from '../../../api';
 import { usePaymentsPaymentsRetrieve } from '../../../api/generated/ext_payments/_utils/hooks';
 import { PAYMENT_EVENTS } from '../events';
@@ -66,18 +62,19 @@ export const PaymentDetailsDialog: React.FC = () => {
     if (!payment?.expires_at) return;
 
     const updateTimeLeft = () => {
-      const now = new Date().getTime();
-      const expires = new Date(payment.expires_at!).getTime();
-      const diff = expires - now;
+      const now = moment();
+      const expires = moment.utc(payment.expires_at!);
+      const diff = expires.diff(now);
 
       if (diff <= 0) {
         setTimeLeft('Expired');
         return;
       }
 
-      const hours = Math.floor(diff / (1000 * 60 * 60));
-      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+      const duration = moment.duration(diff);
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
 
       setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
     };
@@ -264,7 +261,7 @@ export const PaymentDetailsDialog: React.FC = () => {
             </div>
             <div className="flex justify-between">
               <span>Created</span>
-              <span>{new Date(payment.created_at!).toLocaleString()}</span>
+              <span>{moment.utc(payment.created_at!).local().format('MMM D, YYYY HH:mm')}</span>
             </div>
             {payment.confirmations_count !== undefined && (
               <div className="flex justify-between">

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

@@ -5,17 +5,14 @@
 
 'use client';
 
+import { Plus, RefreshCw, Wallet } from 'lucide-react';
+import moment from 'moment';
 import React from 'react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Skeleton,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Skeleton
 } from '@djangocfg/ui-nextjs';
-import { Wallet, RefreshCw, Plus } from 'lucide-react';
+
 import { useOverviewContext } from '../../../../../contexts';
 import { openCreatePaymentDialog } from '../../../events';
 
@@ -38,11 +35,7 @@ export const BalanceCard: React.FC = () => {
   const formatDate = (dateStr?: string) => {
     if (!dateStr) return 'No transactions yet';
     try {
-      return new Date(dateStr).toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
+      return moment.utc(dateStr).local().format('MMM D, YYYY');
     } catch {
       return 'Invalid date';
     }

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

@@ -5,17 +5,14 @@
 
 'use client';
 
+import { ExternalLink, History } from 'lucide-react';
+import moment from 'moment';
 import React from 'react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Skeleton,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Skeleton
 } from '@djangocfg/ui-nextjs';
-import { History, ExternalLink } from 'lucide-react';
+
 import { useOverviewContext } from '../../../../../contexts';
 import { openPaymentDetailsDialog } from '../../../events';
 
@@ -35,9 +32,9 @@ export const RecentPayments: React.FC = () => {
   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);
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, 'seconds');
 
     if (diffInSeconds < 60) return 'Just now';
     if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;

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

@@ -6,6 +6,7 @@
 'use client';
 
 import React from 'react';
+
 import { BalanceCard, RecentPayments } from './components';
 
 export const OverviewView: React.FC = () => {