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

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>