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

layout updates

Browse Source
This commit is contained in:
alorig
2025-12-05 13:45:49 +05:00
parent 16134f858d
commit 5b9d1dcfb0
2 changed files with 149 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/components/billing/BillingRecentTransactions.tsx
View File

@@ -4,7 +4,9 @@ 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 }) {
type Variant = 'card' | 'plain';
export default function BillingRecentTransactions({ limit = 10, variant = 'card' }: { limit?: number; variant?: Variant }) {
const toast = useToast();
const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
const [loading, setLoading] = useState(true);
@@ -41,6 +43,44 @@ export default function BillingRecentTransactions({ limit = 10 }: { limit?: numb
return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
};
const content = (
<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>
);
if (variant === 'plain') {
if (loading) {
return <div className="text-center py-8 text-gray-500">Loading...</div>;
}
return content;
}
if (loading) {
return (
<ComponentCard title="Recent Transactions">
@@ -49,36 +89,5 @@ export default function BillingRecentTransactions({ limit = 10 }: { limit?: numb
);
}
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>
);
return <ComponentCard title="Recent Transactions">{content}</ComponentCard>;
}