@djangocfg/layouts 2.0.4 → 2.0.6

package/src/contexts/payments/OverviewContext.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { SWRConfig } from 'swr';
+import { api } from '@djangocfg/api';
+import {
+  usePaymentsBalanceRetrieve,
+  usePaymentsPaymentsList,
+  usePaymentsTransactionsList,
+  useCreatePaymentsPaymentsCreateCreate,
+} from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+import type {
+  PaginatedPaymentListList,
+  PaymentList,
+} from '@djangocfg/api';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface OverviewContextValue {
+  // Balance data
+  balance: any | undefined;
+  isLoadingBalance: boolean;
+  balanceError: Error | undefined;
+  refreshBalance: () => Promise<void>;
+
+  // Payments data
+  payments: PaginatedPaymentListList | undefined;
+  isLoadingPayments: boolean;
+  paymentsError: Error | undefined;
+  refreshPayments: () => Promise<void>;
+
+  // Transactions data
+  transactions: any | undefined;
+  isLoadingTransactions: boolean;
+  transactionsError: Error | undefined;
+  refreshTransactions: () => Promise<void>;
+
+  // Payment operations
+  createPayment: () => Promise<PaymentList>;
+
+  // Loading states
+  isLoadingOverview: boolean;
+  overviewError: Error | undefined;
+
+  // Operations
+  refreshOverview: () => Promise<void>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const OverviewContext = createContext<OverviewContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export function OverviewProvider({ children }: { children: ReactNode }) {
+  // SWR config for overview data - disable auto-revalidation
+  const swrConfig = {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    revalidateIfStale: false,
+  };
+
+  // Balance
+  const {
+    data: balance,
+    error: balanceError,
+    isLoading: isLoadingBalance,
+    mutate: mutateBalance,
+  } = usePaymentsBalanceRetrieve(api as unknown as API);
+
+  // Payments list
+  const {
+    data: payments,
+    error: paymentsError,
+    isLoading: isLoadingPayments,
+    mutate: mutatePayments,
+  } = usePaymentsPaymentsList({}, api as unknown as API);
+
+  // Transactions
+  const {
+    data: transactions,
+    error: transactionsError,
+    isLoading: isLoadingTransactions,
+    mutate: mutateTransactions,
+  } = usePaymentsTransactionsList({}, api as unknown as API);
+
+  // Payment mutations
+  const createPaymentMutation = useCreatePaymentsPaymentsCreateCreate();
+
+  const isLoadingOverview = isLoadingBalance || isLoadingPayments || isLoadingTransactions;
+  const overviewError = balanceError || paymentsError || transactionsError;
+
+  const refreshBalance = async () => {
+    await mutateBalance();
+  };
+
+  const refreshPayments = async () => {
+    await mutatePayments();
+  };
+
+  const refreshTransactions = async () => {
+    await mutateTransactions();
+  };
+
+  const refreshOverview = async () => {
+    await Promise.all([
+      mutateBalance(),
+      mutatePayments(),
+      mutateTransactions(),
+    ]);
+  };
+
+  // Create payment
+  const createPayment = async (): Promise<PaymentList> => {
+    const result = await createPaymentMutation(api as unknown as API);
+    // Refresh overview data to show new payment
+    await refreshOverview();
+    return result as PaymentList;
+  };
+
+  const value: OverviewContextValue = {
+    balance,
+    isLoadingBalance,
+    balanceError,
+    refreshBalance,
+    payments,
+    isLoadingPayments,
+    paymentsError,
+    refreshPayments,
+    transactions,
+    isLoadingTransactions,
+    transactionsError,
+    refreshTransactions,
+    createPayment,
+    isLoadingOverview,
+    overviewError,
+    refreshOverview,
+  };
+
+  return (
+    <SWRConfig value={swrConfig}>
+      <OverviewContext.Provider value={value}>{children}</OverviewContext.Provider>
+    </SWRConfig>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useOverviewContext(): OverviewContextValue {
+  const context = useContext(OverviewContext);
+  if (!context) {
+    throw new Error('useOverviewContext must be used within OverviewProvider');
+  }
+  return context;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Re-export types
+// ─────────────────────────────────────────────────────────────────────────
+
+export type {
+  PaginatedPaymentListList,
+  PaymentList,
+};
+

package/src/contexts/payments/PaymentsContext.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { api } from '@djangocfg/api';
+import {
+  usePaymentsPaymentsList,
+  usePaymentsPaymentsRetrieve,
+  useCreatePaymentsPaymentsCreateCreate,
+  useCreatePaymentsPaymentsConfirmCreate,
+  usePaymentsPaymentsStatusRetrieve,
+} from '@djangocfg/api';
+import { getPaymentsPaymentsRetrieve } from '@djangocfg/api/cfg/generated/fetchers';
+import { APILogger } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+import type {
+  PaginatedPaymentListList,
+  PaymentDetail,
+  PaymentList,
+} from '@djangocfg/api';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface PaymentsContextValue {
+  // List
+  payments: PaginatedPaymentListList | undefined;
+  isLoadingPayments: boolean;
+  paymentsError: Error | undefined;
+  refreshPayments: () => Promise<void>;
+
+  // Operations
+  getPayment: (id: string) => Promise<PaymentDetail | undefined>;
+  createPayment: () => Promise<PaymentList>;
+  confirmPayment: (id: string) => Promise<PaymentList>;
+  checkPaymentStatus: (id: string) => Promise<PaymentList | undefined>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const PaymentsContext = createContext<PaymentsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export function PaymentsProvider({ children }: { children: ReactNode }) {
+  // List payments (first page only for count)
+  const {
+    data: payments,
+    error: paymentsError,
+    isLoading: isLoadingPayments,
+    mutate: mutatePayments,
+  } = usePaymentsPaymentsList({ page: 1, page_size: 1 }, api as unknown as API);
+
+  const refreshPayments = async () => {
+    await mutatePayments();
+  };
+
+  // Mutations
+  const createPaymentMutation = useCreatePaymentsPaymentsCreateCreate();
+  const confirmPaymentMutation = useCreatePaymentsPaymentsConfirmCreate();
+
+  // Get single payment
+  const getPayment = async (id: string): Promise<PaymentDetail | undefined> => {
+    try {
+      const result = await getPaymentsPaymentsRetrieve(id, api as unknown as API);
+      return result;
+    } catch (error) {
+      new APILogger().error('Failed to retrieve payment:', error);
+      return undefined;
+    }
+  };
+
+  // Create payment
+  const createPayment = async (): Promise<PaymentList> => {
+    const result = await createPaymentMutation(api as unknown as API);
+    await refreshPayments();
+    return result as PaymentList;
+  };
+
+  // Confirm payment (user clicked "I paid")
+  const confirmPayment = async (id: string): Promise<PaymentList> => {
+    const result = await confirmPaymentMutation(id, api as unknown as API);
+    await refreshPayments();
+    return result as PaymentList;
+  };
+
+  // Check payment status
+  const checkPaymentStatus = async (id: string): Promise<PaymentList | undefined> => {
+    const { data } = usePaymentsPaymentsStatusRetrieve(id, api as unknown as API);
+    return data;
+  };
+
+  const value: PaymentsContextValue = {
+    payments,
+    isLoadingPayments,
+    paymentsError,
+    refreshPayments,
+    getPayment,
+    createPayment,
+    confirmPayment,
+    checkPaymentStatus,
+  };
+
+  return <PaymentsContext.Provider value={value}>{children}</PaymentsContext.Provider>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function usePaymentsContext(): PaymentsContextValue {
+  const context = useContext(PaymentsContext);
+  if (!context) {
+    throw new Error('usePaymentsContext must be used within PaymentsProvider');
+  }
+  return context;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Re-export types
+// ─────────────────────────────────────────────────────────────────────────
+
+export type {
+  PaginatedPaymentListList,
+  PaymentDetail,
+  PaymentList,
+};
+

package/src/contexts/payments/README.md

@@ -0,0 +1,201 @@
+# Payments Contexts
+
+Декомпозированные контексты для модуля Payments.
+
+## Структура
+
+### PaymentsContext
+**Файл:** `PaymentsContext.tsx`  
+**Назначение:** Управление платежами
+
+**API:**
+- `payments: PaginatedPaymentListList` - список платежей (пагинированный)
+- `isLoadingPayments: boolean` - статус загрузки
+- `refreshPayments()` - обновить список
+- `getPayment(id)` - получить конкретный платеж
+- `createPayment(data)` - создать платеж
+- `cancelPayment(id, data)` - отменить платеж
+- `checkPaymentStatus(id, data)` - проверить статус платежа
+
+**Использование:**
+```tsx
+import { PaymentsProvider, usePaymentsContext } from '@djangocfg/layouts/contexts';
+
+function PaymentsList() {
+  const { payments, isLoadingPayments, refreshPayments } = usePaymentsContext();
+  // ...
+}
+```
+
+---
+
+### BalancesContext
+**Файл:** `BalancesContext.tsx`  
+**Назначение:** Управление балансами пользователей (read-only)
+
+**API:**
+- `balances: PaginatedUserBalanceList` - список балансов
+- `isLoadingBalances: boolean` - статус загрузки
+- `refreshBalances()` - обновить список
+- `getBalance(id)` - получить конкретный баланс
+- `getBalanceSummary()` - получить сводку по балансу
+
+**Использование:**
+```tsx
+import { BalancesProvider, useBalancesContext } from '@djangocfg/layouts/contexts';
+
+function Balance() {
+  const { balances, getBalanceSummary } = useBalancesContext();
+  // ...
+}
+```
+
+---
+
+### CurrenciesContext
+**Файл:** `CurrenciesContext.tsx`  
+**Назначение:** Управление валютами и курсами обмена (read-only)
+
+**API:**
+- `currencies: PaginatedCurrencyListList` - список валют
+- `isLoadingCurrencies: boolean` - статус загрузки
+- `refreshCurrencies()` - обновить список
+- `getCurrency(id)` - получить конкретную валюту
+- `getCurrencyRates(baseCurrency, currencies)` - получить курсы обмена
+
+**Использование:**
+```tsx
+import { CurrenciesProvider, useCurrenciesContext } from '@djangocfg/layouts/contexts';
+
+function CurrencySelector() {
+  const { currencies, getCurrencyRates } = useCurrenciesContext();
+  // ...
+}
+```
+
+---
+
+### ApiKeysContext
+**Файл:** `ApiKeysContext.tsx`  
+**Назначение:** Управление API ключами
+
+**API:**
+- `apiKeys: PaginatedAPIKeyListList` - список API ключей
+- `isLoadingApiKeys: boolean` - статус загрузки
+- `refreshApiKeys()` - обновить список
+- `getApiKey(id)` - получить конкретный ключ
+- `createApiKey(data)` - создать ключ
+- `deleteApiKey(id)` - удалить ключ
+
+**Использование:**
+```tsx
+import { ApiKeysProvider, useApiKeysContext } from '@djangocfg/layouts/contexts';
+
+function ApiKeysList() {
+  const { apiKeys, createApiKey, deleteApiKey } = useApiKeysContext();
+  // ...
+}
+```
+
+---
+
+### OverviewContext
+**Файл:** `OverviewContext.tsx`  
+**Назначение:** Дашборд и метрики платежной системы (read-only)
+
+**API:**
+- `overview: PaymentsDashboardOverview` - общий обзор
+- `metrics: PaymentsMetrics` - метрики
+- `balanceOverview: BalanceOverview` - обзор баланса
+- `apiKeysOverview: APIKeysOverview` - обзор API ключей
+- `subscriptionOverview: SubscriptionOverview` - обзор подписок
+- `chartData: PaymentsChartResponse` - данные для графиков
+- `recentPayments: PaginatedRecentPaymentList` - последние платежи
+- `recentTransactions: PaginatedRecentTransactionList` - последние транзакции
+- `isLoadingOverview: boolean` - статус загрузки
+- `refreshOverview()` - обновить все данные
+
+**Использование:**
+```tsx
+import { OverviewProvider, useOverviewContext } from '@djangocfg/layouts/contexts';
+
+function Dashboard() {
+  const { overview, metrics, chartData } = useOverviewContext();
+  // ...
+}
+```
+
+---
+
+## Композиция провайдеров
+
+Если нужно использовать несколько контекстов:
+
+```tsx
+import { 
+  PaymentsProvider, 
+  BalancesProvider, 
+  OverviewProvider 
+} from '@djangocfg/layouts/contexts';
+
+function PaymentsDashboard() {
+  return (
+    <OverviewProvider>
+      <PaymentsProvider>
+        <BalancesProvider>
+          <YourComponent />
+        </BalancesProvider>
+      </PaymentsProvider>
+    </OverviewProvider>
+  );
+}
+```
+
+---
+
+## Миграция со старого PaymentsContext
+
+**Было:**
+```tsx
+import { PaymentsProvider, usePaymentsContext } from '@djangocfg/layouts/contexts';
+
+const { payments, balances, apiKeys } = usePaymentsContext();
+```
+
+**Стало:**
+```tsx
+import { 
+  PaymentsProvider, usePaymentsContext,
+  BalancesProvider, useBalancesContext,
+  ApiKeysProvider, useApiKeysContext
+} from '@djangocfg/layouts/contexts';
+
+// В разных компонентах или комбинируя:
+const { payments } = usePaymentsContext();
+const { balances } = useBalancesContext();
+const { apiKeys } = useApiKeysContext();
+```
+
+---
+
+## Преимущества декомпозиции
+
+1. **Модульность** - каждый контекст отвечает за свою область
+2. **Производительность** - меньше ненужных ре-рендеров
+3. **Гибкость** - можно использовать только нужные контексты
+4. **Читаемость** - явное разделение зон ответственности
+5. **Масштабируемость** - проще добавлять новую функциональность
+
+---
+
+## Не включенные сущности
+
+В текущей декомпозиции **не включены** (могут быть добавлены позже):
+- `SubscriptionsContext` - управление подписками (CRUD)
+- `TransactionsContext` - история транзакций (read-only)
+- `TariffsContext` - тарифные планы (read-only)
+- `NetworksContext` - блокчейн сети (read-only)
+- `AdminContext` - админ-функции (для админки)
+
+Эти сущности можно добавить по мере необходимости, следуя той же структуре.
+

package/src/contexts/payments/RootPaymentsContext.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { api } from '@djangocfg/api';
+import {
+  usePaymentsCurrenciesList,
+} from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface RootPaymentsContextValue {
+  // Currencies - simplified to single endpoint
+  currencies: any | undefined;
+  isLoadingCurrencies: boolean;
+  currenciesError: Error | undefined;
+  refreshCurrencies: () => Promise<void>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const RootPaymentsContext = createContext<RootPaymentsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export function RootPaymentsProvider({ children }: { children: ReactNode }) {
+  // Get currencies list from /cfg/payments/currencies/
+  // In v2.0, this returns all currencies with network info embedded
+  const {
+    data: currencies,
+    error: currenciesError,
+    isLoading: isLoadingCurrencies,
+    mutate: mutateCurrencies,
+  } = usePaymentsCurrenciesList(api as unknown as API);
+
+  const refreshCurrencies = async () => {
+    await mutateCurrencies();
+  };
+
+  const value: RootPaymentsContextValue = {
+    currencies,
+    isLoadingCurrencies,
+    currenciesError,
+    refreshCurrencies,
+  };
+
+  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;
+}

package/src/contexts/payments/index.ts

@@ -0,0 +1,50 @@
+// Payments
+export {
+  PaymentsProvider,
+  usePaymentsContext
+} from './PaymentsContext';
+export type {
+  PaymentsContextValue,
+  PaginatedPaymentListList,
+  PaymentDetail,
+  PaymentList,
+} from './PaymentsContext';
+
+// Balances
+export {
+  BalancesProvider,
+  useBalancesContext
+} from './BalancesContext';
+export type {
+  BalancesContextValue,
+} from './BalancesContext';
+
+// Currencies
+export {
+  CurrenciesProvider,
+  useCurrenciesContext
+} from './CurrenciesContext';
+export type {
+  CurrenciesContextValue,
+} from './CurrenciesContext';
+
+// Overview
+export {
+  OverviewProvider,
+  useOverviewContext
+} from './OverviewContext';
+export type {
+  OverviewContextValue,
+  PaginatedPaymentListList as OverviewPaginatedPaymentListList,
+  PaymentList as OverviewPaymentList,
+} from './OverviewContext';
+
+// Root Payments (Global)
+export {
+  RootPaymentsProvider,
+  useRootPaymentsContext
+} from './RootPaymentsContext';
+export type {
+  RootPaymentsContextValue,
+} from './RootPaymentsContext';
+

package/src/index.ts

@@ -37,3 +37,11 @@ export * from './snippets';
 // Components (includes ErrorTrackingProvider)
 export * from './components';
 
+// Utils
+export * from './utils';
+
+// Pages
+export * from './pages';
+
+// Contexts (API contexts for data management)
+export * from './contexts';