salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

billing admin account 1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-05 08:01:55 +00:00
parent f91037b729
commit 1e718105f2
12 changed files with 378 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/pages/Admin/AdminBilling.tsx
View File

@@ -65,7 +65,7 @@ const AdminBilling: React.FC = () => {
try {
setLoading(true);
const [statsData, usersData, configsData] = await Promise.all([
fetchAPI('/v1/admin/billing/stats/'),
fetchAPI('/v1/billing/admin/stats/'),
fetchAPI('/v1/admin/users/?limit=100'),
fetchAPI('/v1/admin/credit-costs/'),
]);

2
frontend/src/pages/account/AccountBillingPage.tsx
View File

@@ -205,7 +205,7 @@ export default function AccountBillingPage() {
<h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
<div className="space-y-2">
<Link
to="/account/purchase-credits"
to="/account/credits/purchase"
className="block w-full bg-blue-600 text-white text-center py-2 px-4 rounded hover:bg-blue-700 transition-colors"
>
Purchase Credits

3
frontend/src/pages/account/PurchaseCreditsPage.tsx
View File

@@ -104,6 +104,7 @@ export default function PurchaseCreditsPage() {
setError('');
await createManualPayment({
invoice_id: invoiceData?.invoice_id || invoiceData?.id,
amount: String(selectedPackage?.price || 0),
payment_method: selectedPaymentMethod as 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet',
reference: manualPaymentData.transaction_reference,
@@ -356,7 +357,7 @@ export default function PurchaseCreditsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{paymentMethods.map((method) => (
<div
key={method.type}
key={method.id || method.type}
onClick={() => setSelectedPaymentMethod(method.type)}
className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
selectedPaymentMethod === method.type

10
frontend/src/pages/admin/AdminAllInvoicesPage.tsx
View File

@@ -7,7 +7,7 @@ import { useState, useEffect } from 'react';
import { Search, Filter, Loader2, AlertCircle, Download } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import { getInvoices, type Invoice } from '../../services/billing.api';
import { getAdminInvoices, type Invoice } from '../../services/billing.api';
export default function AdminAllInvoicesPage() {
const [invoices, setInvoices] = useState<Invoice[]>([]);
@@ -23,7 +23,7 @@ export default function AdminAllInvoicesPage() {
const loadInvoices = async () => {
try {
setLoading(true);
const data = await getInvoices({});
const data = await getAdminInvoices({});
setInvoices(data.results || []);
} catch (err: any) {
setError(err.message || 'Failed to load invoices');
@@ -99,6 +99,9 @@ export default function AdminAllInvoicesPage() {
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Invoice #
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Date
</th>
@@ -126,6 +129,9 @@ export default function AdminAllInvoicesPage() {
<td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
{invoice.invoice_number}
</td>
<td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
{invoice.account_name || '—'}
</td>
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
{new Date(invoice.created_at).toLocaleDateString()}
</td>

47
frontend/src/pages/admin/AdminAllPaymentsPage.tsx
View File

@@ -7,20 +7,12 @@ import { useState, useEffect } from 'react';
import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import { fetchAPI } from '../../services/api';
import { getAdminPayments, type Payment } from '../../services/billing.api';
interface Payment {
id: number;
account_name: string;
amount: string;
currency: string;
status: string;
payment_method: string;
created_at: string;
}
type AdminPayment = Payment & { account_name?: string };
export default function AdminAllPaymentsPage() {
const [payments, setPayments] = useState<Payment[]>([]);
const [payments, setPayments] = useState<AdminPayment[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string>('');
const [statusFilter, setStatusFilter] = useState('all');
@@ -32,7 +24,7 @@ export default function AdminAllPaymentsPage() {
const loadPayments = async () => {
try {
setLoading(true);
const data = await fetchAPI('/v1/admin/payments/');
const data = await getAdminPayments();
setPayments(data.results || []);
} catch (err: any) {
setError(err.message || 'Failed to load payments');
@@ -45,6 +37,22 @@ export default function AdminAllPaymentsPage() {
return statusFilter === 'all' || payment.status === statusFilter;
});
const getStatusColor = (status: string) => {
switch (status) {
case 'succeeded':
case 'completed':
return 'success';
case 'processing':
case 'pending':
case 'pending_approval':
return 'warning';
case 'refunded':
return 'info';
default:
return 'error';
}
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
@@ -77,9 +85,13 @@ export default function AdminAllPaymentsPage() {
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
>
<option value="all">All Status</option>
<option value="pending_approval">Pending Approval</option>
<option value="processing">Processing</option>
<option value="succeeded">Succeeded</option>
<option value="completed">Completed</option>
<option value="pending">Pending</option>
<option value="failed">Failed</option>
<option value="cancelled">Cancelled</option>
<option value="refunded">Refunded</option>
</select>
</div>
@@ -90,6 +102,7 @@ export default function AdminAllPaymentsPage() {
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Invoice</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
@@ -106,15 +119,15 @@ export default function AdminAllPaymentsPage() {
filteredPayments.map((payment) => (
<tr key={payment.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<td className="px-6 py-4 font-medium">{payment.account_name}</td>
<td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
{payment.invoice_number || payment.invoice_id || '—'}
</td>
<td className="px-6 py-4 font-semibold">{payment.currency} {payment.amount}</td>
<td className="px-6 py-4 text-sm">{payment.payment_method}</td>
<td className="px-6 py-4 text-sm capitalize">{payment.payment_method.replace('_', ' ')}</td>
<td className="px-6 py-4">
<Badge
variant="light"
color={
payment.status === 'succeeded' ? 'success' :
payment.status === 'pending' ? 'warning' : 'error'
}
color={getStatusColor(payment.status)}
>
{payment.status}
</Badge>

50
frontend/src/services/billing.api.ts
View File

@@ -111,14 +111,16 @@ export interface Invoice {
stripe_invoice_id?: string;
billing_period_start?: string;
billing_period_end?: string;
account_name?: string;
}
export interface Payment {
id: number;
invoice_id: number;
invoice_number?: string;
amount: string;
currency: string;
status: 'pending' | 'processing' | 'succeeded' | 'failed' | 'refunded' | 'cancelled' | 'pending_approval';
status: 'pending' | 'processing' | 'succeeded' | 'failed' | 'refunded' | 'cancelled' | 'pending_approval' | 'completed';
payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet' | 'manual';
created_at: string;
processed_at?: string;
@@ -186,7 +188,7 @@ export interface PendingPayment extends Payment {
// ============================================================================
export async function getCreditBalance(): Promise<CreditBalance> {
return fetchAPI('/v1/billing/credits/balance/balance/');
return fetchAPI('/v1/billing/transactions/balance/');
}
export async function getCreditTransactions(): Promise<{
@@ -259,7 +261,33 @@ export async function getCreditUsageLimits(): Promise<{
// ============================================================================
export async function getAdminBillingStats(): Promise<AdminBillingStats> {
return fetchAPI('/v1/admin/billing/stats/');
return fetchAPI('/v1/billing/admin/stats/');
}
export async function getAdminInvoices(params?: { status?: string; account_id?: number; search?: string }): Promise<{
results: Invoice[];
count: number;
}> {
const queryParams = new URLSearchParams();
if (params?.status) queryParams.append('status', params.status);
if (params?.account_id) queryParams.append('account_id', String(params.account_id));
if (params?.search) queryParams.append('search', params.search);
const url = `/v1/billing/admin/invoices/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
return fetchAPI(url);
}
export async function getAdminPayments(params?: { status?: string; account_id?: number; payment_method?: string }): Promise<{
results: Payment[];
count: number;
}> {
const queryParams = new URLSearchParams();
if (params?.status) queryParams.append('status', params.status);
if (params?.account_id) queryParams.append('account_id', String(params.account_id));
if (params?.payment_method) queryParams.append('payment_method', params.payment_method);
const url = `/v1/billing/admin/payments/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
return fetchAPI(url);
}
export async function getAdminUsers(params?: {
@@ -376,7 +404,7 @@ export async function getPayments(params?: {
}
export async function submitManualPayment(data: {
invoice_id: number;
invoice_id?: number;
payment_method: 'bank_transfer' | 'local_wallet' | 'manual';
amount: string;
currency?: string;
@@ -409,9 +437,12 @@ export async function purchaseCreditPackage(data: {
package_id: number;
payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet';
}): Promise<{
id: number;
status: string;
invoice_id?: number;
invoice_number?: string;
total_amount?: string;
status?: string;
message?: string;
next_action?: string;
stripe_client_secret?: string;
paypal_order_id?: string;
}> {
@@ -467,6 +498,7 @@ export async function getAvailablePaymentMethods(): Promise<{
}
export async function createManualPayment(data: {
invoice_id?: number;
amount: string;
payment_method: string;
reference: string;
@@ -490,7 +522,7 @@ export async function getPendingPayments(): Promise<{
results: PendingPayment[];
count: number;
}> {
return fetchAPI('/v1/admin/payments/pending/');
return fetchAPI('/v1/billing/admin/pending_payments/');
}
export async function approvePayment(paymentId: number, data?: {
@@ -499,7 +531,7 @@ export async function approvePayment(paymentId: number, data?: {
message: string;
payment: Payment;
}> {
return fetchAPI(`/v1/admin/payments/${paymentId}/approve/`, {
return fetchAPI(`/v1/billing/admin/${paymentId}/approve_payment/`, {
method: 'POST',
body: JSON.stringify(data || {}),
});
@@ -512,7 +544,7 @@ export async function rejectPayment(paymentId: number, data: {
message: string;
payment: Payment;
}> {
return fetchAPI(`/v1/admin/payments/${paymentId}/reject/`, {
return fetchAPI(`/v1/billing/admin/${paymentId}/reject_payment/`, {
method: 'POST',
body: JSON.stringify(data),
});