import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, Link } from '@inertiajs/react'; import { ArrowUpCircle, ArrowDownCircle, TrendingUp, DollarSign } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { PageHelp } from '@/components/page-help'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; interface User { id: number; name: string; email: string; } interface Admin { id: number; name: string; } interface Transaction { id: number; user: User | null; type: 'credit' | 'debit'; amount: number; description: string; balance_after: number; created_at: string; reference_type?: string; payment_gateway?: string; payment_id?: string; status: string; actual_cost?: number; profit_amount?: number; profit_percentage?: number; service_type?: string; admin?: Admin | null; } interface ProfitStats { total_revenue: number; total_costs: number; total_profit: number; average_profit_margin: number; } interface PaginatedData { data: Transaction[]; current_page: number; last_page: number; per_page: number; total: number; } interface Props { transactions: PaginatedData; profitStats: ProfitStats; filters?: { user_id?: number; type?: string; status?: string; reference_type?: string; from_date?: string; to_date?: string; }; } export default function Transactions({ transactions, profitStats, filters = {} }: Props) { const transactionArray = transactions?.data || []; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Credit Management', href: '/admin/credit-management' }, { title: 'All Transactions', href: '/admin/credit-management/transactions' }, ]; const helpSections = [ { title: 'Transaction Overview', content: 'View all credit transactions across the platform with detailed profit tracking. Monitor revenue from top-ups, actual service costs, and profit margins for each transaction.', }, { title: 'Profit Metrics', content: 'Track key financial metrics: Total Revenue (from customer top-ups), Total Costs (actual service expenses), Total Profit (revenue minus costs), and Average Margin (profit percentage).', }, { title: 'Transaction Types', content: 'Credit transactions add funds to user accounts (top-ups). Debit transactions deduct funds when services are used (calls, SMS, etc.). Each debit transaction includes cost and profit data.', }, ]; return (
Total Revenue
${Number(profitStats.total_revenue).toFixed(2)}

From top-ups

 Total Costs
${Number(profitStats.total_costs).toFixed(2)}

Actual service costs

 Total Profit
${Number(profitStats.total_profit).toFixed(2)}

Net profit

 Avg. Margin
{Number(profitStats.average_profit_margin || 0).toFixed(1)}%

Profit margin
Transaction History {transactionArray.length === 0 ? (

No transactions found.

) : (
ID User Type Description Payment Info Amount Cost Profit Margin Date {transactionArray.map((transaction) => ( {transaction.id} {transaction.user ? (
{transaction.user.name}

{transaction.user.email}

) : ( - )} {transaction.type === 'credit' ? ( ) : ( )} {transaction.type}
{transaction.description}
{transaction.reference_type && (
{transaction.reference_type} {transaction.service_type && ` • ${transaction.service_type}`}
)}
{transaction.payment_gateway && transaction.reference_type === 'TopUp' ? (
{transaction.payment_gateway === 'razorpay' ? 'Razorpay' : 'Stripe'} {transaction.payment_id && (
{transaction.payment_id.substring(0, 20)}...
)}
) : ( - )} {transaction.type === 'credit' ? '+' : '-'} ${Number(transaction.amount).toFixed(2)} {transaction.actual_cost ? ( ${Number(transaction.actual_cost).toFixed(4)} ) : ( - )} {transaction.profit_amount ? ( ${Number(transaction.profit_amount).toFixed(4)} ) : ( - )} {transaction.profit_percentage ? ( {Number(transaction.profit_percentage).toFixed(1)}% ) : ( - )} {new Date(transaction.created_at).toLocaleString()} ))}
)}
); }