some-improvement

2025-12-05 05:38:58 +00:00
parent 6cf786b03f
commit d92a99ecc3
20 changed files with 376 additions and 3719 deletions
--- a/frontend/src/components/billing/BillingBalancePanel.tsx
+++ b/frontend/src/components/billing/BillingBalancePanel.tsx
@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getCreditBalance } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import Button from '../../components/ui/button/Button';
+import { DollarLineIcon } from '../../icons';
+
+export default function BillingBalancePanel() {
+  const toast = useToast();
+  const [balance, setBalance] = useState<any | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadBalance();
+  }, []);
+
+  const loadBalance = async () => {
+    try {
+      setLoading(true);
+      const data = await getCreditBalance();
+      setBalance(data as any);
+    } catch (error: any) {
+      toast.error(`Failed to load credit balance: ${error?.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="text-gray-500">Loading credit balance...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 space-y-6">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Balance</h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and subscription status</p>
+        </div>
+        <Link to="/account/purchase-credits">
+          <Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
+            Purchase Credits
+          </Button>
+        </Link>
+      </div>
+
+      {balance && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
+            </div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance?.credits ?? 0).toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Subscription Plan</h3>
+            </div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance as any)?.subscription_plan || 'None'}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+              {(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
+            </p>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
+            </div>
+            <div className="mt-2">
+              <Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
+                {(balance as any)?.subscription_status || 'No subscription'}
+              </Badge>
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
+          </Card>
+        </div>
+      )}
+
+    </div>
+  );
+}
--- a/frontend/src/components/billing/BillingRecentTransactions.tsx
+++ b/frontend/src/components/billing/BillingRecentTransactions.tsx
@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import ComponentCard from '../../components/common/ComponentCard';
+import Badge from '../../components/ui/badge/Badge';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getCreditTransactions, type CreditTransaction } from '../../services/billing.api';
+
+export default function BillingRecentTransactions({ limit = 10 }: { limit?: number }) {
+  const toast = useToast();
+  const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const load = async () => {
+    try {
+      setLoading(true);
+      const res = await getCreditTransactions();
+      setTransactions(res.results || []);
+    } catch (err: any) {
+      toast?.error(err?.message || 'Failed to load transactions');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getTransactionTypeColor = (type: string) => {
+    switch (type) {
+      case 'purchase': return 'success';
+      case 'grant': return 'info';
+      case 'deduction': return 'warning';
+      case 'usage': return 'error';
+      case 'refund': return 'primary';
+      case 'adjustment': return 'secondary';
+      default: return 'default';
+    }
+  };
+
+  const formatOperationType = (type: string) => {
+    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+  };
+
+  if (loading) {
+    return (
+      <ComponentCard title="Recent Transactions">
+        <div className="text-center py-8 text-gray-500">Loading...</div>
+      </ComponentCard>
+    );
+  }
+
+  return (
+    <ComponentCard title="Recent Transactions">
+      <div className="space-y-3">
+        {transactions.slice(0, limit).map((transaction) => (
+          <div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
+                  {formatOperationType(transaction.transaction_type)}
+                </Badge>
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {transaction.description}
+                </span>
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                {new Date(transaction.created_at).toLocaleString()}
+                {transaction.reference_id && ` • Ref: ${transaction.reference_id}`}
+              </div>
+            </div>
+            <div className="text-right">
+              <div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
+                {transaction.amount > 0 ? '+' : ''}{transaction.amount}
+              </div>
+            </div>
+          </div>
+        ))}
+        {transactions.length === 0 && (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">No transactions yet</div>
+        )}
+      </div>
+    </ComponentCard>
+  );
+}
--- a/frontend/src/components/billing/BillingUsagePanel.tsx
+++ b/frontend/src/components/billing/BillingUsagePanel.tsx
@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+// Credit costs per operation (copied from Billing usage page)
+const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
+  clustering: { cost: 10, description: 'Per clustering request' },
+  idea_generation: { cost: 15, description: 'Per cluster → ideas request' },
+  content_generation: { cost: '1 per 100 words', description: 'Per 100 words generated' },
+  image_prompt_extraction: { cost: 2, description: 'Per content piece' },
+  image_generation: { cost: 5, description: 'Per image generated' },
+  linking: { cost: 8, description: 'Per content piece' },
+  optimization: { cost: '1 per 200 words', description: 'Per 200 words optimized' },
+  site_structure_generation: { cost: 50, description: 'Per site blueprint' },
+  site_page_generation: { cost: 20, description: 'Per page generated' },
+};
+
+export default function BillingUsagePanel() {
+  const toast = useToast();
+  const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
+  const [balance, setBalance] = useState<CreditBalance | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadUsage();
+  }, []);
+
+  const loadUsage = async () => {
+    try {
+      setLoading(true);
+      const [txnData, balanceData] = await Promise.all([
+        getCreditTransactions(),
+        getCreditBalance()
+      ]);
+      setTransactions(txnData.results || []);
+      setBalance(balanceData as any);
+    } catch (error: any) {
+      toast.error(`Failed to load credit usage: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="text-gray-500">Loading credit usage...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {balance && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Current Balance</h3>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance?.credits ?? 0).toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Available credits</p>
+          </Card>
+
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance?.plan_credits_per_month ?? 0).toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              {(balance as any)?.subscription_plan || 'No plan'}
+            </p>
+          </Card>
+
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
+            <div className="mt-2">
+              <Badge variant="light" className="text-lg">
+                {(balance as any)?.subscription_status || 'No subscription'}
+              </Badge>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Understanding how credits are consumed for each operation type</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
+            <div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <div className="flex-1">
+                <div className="font-medium text-gray-900 dark:text-white capitalize">
+                  {operation.replace(/_/g, ' ')}
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  {info.description}
+                </div>
+              </div>
+              <div className="ml-4 text-right">
+                <Badge variant="light" color="primary" className="font-semibold">
+                  {typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
+                </Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <div>
+        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Activity</h2>
+        <Card className="p-6">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
+                </tr>
+              </thead>
+              <tbody>
+                {transactions.map((txn) => (
+                  <tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
+                    <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{new Date(txn.created_at).toLocaleString()}</td>
+                    <td className="py-3 px-4">
+                      <Badge variant="light" color={txn.amount >= 0 ? 'success' : 'error'}>{txn.transaction_type}</Badge>
+                    </td>
+                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                      {txn.amount >= 0 ? '+' : ''}{txn.amount}
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
+                    <td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">{txn.reference_id || '-'}</td>
+                  </tr>
+                ))}
+                {transactions.length === 0 && (
+                  <tr>
+                    <td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">No transactions yet</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,11 +4,11 @@ import "./index.css";
 import "./styles/igny8-colors.css"; /* IGNY8 custom colors - separate from TailAdmin */
 import "swiper/swiper-bundle.css";
 import "flatpickr/dist/flatpickr.css";
-import App from "./App.tsx";
-import { ThemeProvider } from "./context/ThemeContext.tsx";
-import { ToastProvider } from "./components/ui/toast/ToastContainer.tsx";
-import { HeaderMetricsProvider } from "./context/HeaderMetricsContext.tsx";
-import { ErrorBoundary } from "./components/common/ErrorBoundary.tsx";
+import App from "./App";
+import { ThemeProvider } from "./context/ThemeContext";
+import { ToastProvider } from "./components/ui/toast/ToastContainer";
+import { HeaderMetricsProvider } from "./context/HeaderMetricsContext";
+import { ErrorBoundary } from "./components/common/ErrorBoundary";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
--- a/frontend/src/pages/Billing/Credits.tsx
+++ b/frontend/src/pages/Billing/Credits.tsx
@@ -75,7 +75,7 @@ export default function Credits() {
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {(balance.balance ?? 0).toLocaleString()}
+              {(balance?.credits ?? 0).toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
          </Card>
@@ -85,10 +85,10 @@ export default function Credits() {
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Subscription Plan</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {balance.subscription_plan || 'None'}
+              {(balance as any)?.subscription_plan || 'None'}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
-              {balance.monthly_credits ? `${balance.monthly_credits.toLocaleString()} credits/month` : 'No subscription'}
+              {(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
            </p>
          </Card>

@@ -97,13 +97,9 @@ export default function Credits() {
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
            </div>
            <div className="mt-2">
-              <Badge 
-                variant="light" 
-                color={balance.subscription_status === 'active' ? 'success' : 'secondary'}
-                className="text-base font-semibold"
-              >
-                {balance.subscription_status || 'No subscription'}
-              </Badge>
+                <Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
+                  {(balance as any)?.subscription_status || 'No subscription'}
+                </Badge>
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
          </Card>
--- a/frontend/src/pages/Billing/Usage.tsx
+++ b/frontend/src/pages/Billing/Usage.tsx
@@ -69,7 +69,7 @@ export default function Usage() {
          <Card className="p-6">
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Current Balance</h3>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {balance.balance.toLocaleString()}
+              {(balance?.credits ?? 0).toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Available credits</p>
          </Card>
@@ -77,22 +77,19 @@ export default function Usage() {
          <Card className="p-6">
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {(balance.monthly_credits || 0).toLocaleString()}
+              {(balance?.plan_credits_per_month ?? 0).toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-              {balance.subscription_plan || 'No plan'}
+              { (balance as any)?.subscription_plan || 'No plan' }
            </p>
          </Card>

          <Card className="p-6">
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
            <div className="mt-2">
-              <Badge 
-                variant="light" 
-                className="text-lg"
-              >
-                {balance.subscription_status || 'No subscription'}
-              </Badge>
+                <Badge variant="light" className="text-lg">
+                  {(balance as any)?.subscription_status || 'No subscription'}
+                </Badge>
            </div>
          </Card>
        </div>
--- a/frontend/src/pages/account/AccountBillingPage.tsx
+++ b/frontend/src/pages/account/AccountBillingPage.tsx
@@ -27,6 +27,7 @@ import {
  type CreditBalance,
 } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
+import BillingRecentTransactions from '../../components/billing/BillingRecentTransactions';

 type TabType = 'overview' | 'invoices' | 'payments';

@@ -113,6 +114,11 @@ export default function AccountBillingPage() {
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-3xl font-bold">Plans & Billing</h1>
+            {/* Recent Transactions (moved from Credits & Billing overview) */}
+            <div>
+              <BillingRecentTransactions />
+            </div>
+
            <p className="text-gray-600">Manage your subscription, credits, and billing</p>
          </div>
          <Link
--- a/frontend/src/pages/account/UsageAnalyticsPage.tsx
+++ b/frontend/src/pages/account/UsageAnalyticsPage.tsx
@@ -10,6 +10,8 @@ import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
+import BillingUsagePanel from '../../components/billing/BillingUsagePanel';
+import BillingBalancePanel from '../../components/billing/BillingBalancePanel';

 type TabType = 'credits' | 'api' | 'costs';

@@ -49,6 +51,7 @@ export default function UsageAnalyticsPage() {

  const tabs = [
    { id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
+    { id: 'balance' as TabType, label: 'Credit Balance', icon: <DollarSign className="w-4 h-4" /> },
    { id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
    { id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
  ];
@@ -181,6 +184,17 @@ export default function UsageAnalyticsPage() {
                )}
              </div>
            </Card>
+            {/* Insert Billing usage panel below current credit-analytics content */}
+            <div className="mt-6">
+              <BillingUsagePanel />
+            </div>
+          </div>
+        )}
+
+        {/* Credit Balance Tab (billing/credits moved here) */}
+        {activeTab === 'balance' && (
+          <div className="space-y-6">
+            <BillingBalancePanel />
          </div>
        )}

--- a/frontend/src/services/billing.api.ts.backup
+++ b/frontend/src/services/billing.api.ts.backup
@@ -401,20 +401,20 @@ export async function getInvoices(status?: string): Promise<{ results: Invoice[]
 }

 export async function getInvoice(invoiceId: number): Promise<Invoice> {
-  return fetchAPI(`/v1/billing/v2/invoices/${invoiceId}/`);
+  return fetchAPI(`/v1/billing/invoices/${invoiceId}/`);
 }

 export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {
-  const response = await fetch(`/api/v1/billing/v2/invoices/${invoiceId}/download_pdf/`, {
+  const response = await fetch(`/api/v1/billing/invoices/${invoiceId}/download_pdf/`, {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('access_token')}`,
    },
  });
-  
+
  if (!response.ok) {
    throw new Error('Failed to download invoice');
  }
-  
+
  return response.blob();
 }

@@ -424,7 +424,7 @@ export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {

 export async function getPayments(status?: string): Promise<{ results: Payment[]; count: number }> {
  const params = status ? `?status=${status}` : '';
-  return fetchAPI(`/v1/billing/v2/payments/${params}`);
+  return fetchAPI(`/v1/billing/payments/${params}`);
 }

 export async function getAvailablePaymentMethods(): Promise<{
@@ -434,7 +434,7 @@ export async function getAvailablePaymentMethods(): Promise<{
  bank_transfer: boolean;
  local_wallet: boolean;
 }> {
-  return fetchAPI('/v1/billing/v2/payments/available_methods/');
+  return fetchAPI('/v1/billing/payments/available_methods/');
 }

 export async function createManualPayment(data: {
@@ -447,7 +447,7 @@ export async function createManualPayment(data: {
  status: string;
  message: string;
 }> {
-  return fetchAPI('/v1/billing/v2/payments/create_manual_payment/', {
+  return fetchAPI('/v1/billing/payments/create_manual_payment/', {
    method: 'POST',
    body: JSON.stringify(data),
  });
@@ -477,7 +477,7 @@ export async function getPendingPayments(): Promise<{
  results: PendingPayment[];
  count: number;
 }> {
-  return fetchAPI('/v1/billing/v2/admin/pending_payments/');
+  return fetchAPI('/v1/billing/admin/pending_payments/');
 }

 export async function approvePayment(
@@ -488,7 +488,7 @@ export async function approvePayment(
  status: string;
  message: string;
 }> {
-  return fetchAPI(`/v1/billing/v2/admin/${paymentId}/approve_payment/`, {
+  return fetchAPI(`/v1/billing/admin/${paymentId}/approve_payment/`, {
    method: 'POST',
    body: JSON.stringify({ notes }),
  });
@@ -502,7 +502,7 @@ export async function rejectPayment(
  status: string;
  message: string;
 }> {
-  return fetchAPI(`/v1/billing/v2/admin/${paymentId}/reject_payment/`, {
+  return fetchAPI(`/v1/billing/admin/${paymentId}/reject_payment/`, {
    method: 'POST',
    body: JSON.stringify({ reason }),
  });