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 } from '@inertiajs/react';
import { ArrowDownCircle, ArrowUpCircle } from 'lucide-react';
import { PageHelp } from '@/components/page-help';
import { dashboard } from '@/routes';
import { type BreadcrumbItem } from '@/types';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
interface Transaction {
id: number;
type: 'credit' | 'debit';
amount: number;
description: string;
balance_after: number;
created_at: string;
reference_type?: string;
payment_gateway?: string;
payment_id?: string;
status: string;
}
interface PaginatedData {
data: Transaction[];
current_page: number;
last_page: number;
per_page: number;
total: number;
}
interface Props {
transactions: PaginatedData;
currentBalance: number;
}
export default function History({ transactions, currentBalance = 0 }: Props) {
const transactionArray = transactions?.data || [];
const breadcrumbs: BreadcrumbItem[] = [
{ title: 'Dashboard', href: dashboard().url },
{ title: 'Account Statement', href: '/credit/history' },
];
const helpSections = [
{
title: 'Account Statement Overview',
content: 'Your account statement displays all credit transactions in chronological order - both money added (top-ups) and money spent (calls, SMS, etc.). Monitor your complete financial activity and balance changes.',
},
{
title: 'Current Balance',
content: 'Your current balance is displayed at the top of the page. This represents the total amount of credits available in your account for making calls, sending SMS, and purchasing phone numbers.',
},
{
title: 'Transaction Types',
content: 'Credit transactions (green) add funds to your account from top-ups or refunds. Debit transactions (red) deduct funds for services like calls, SMS, and phone number purchases.',
},
{
title: 'Transaction Details',
content: 'Each transaction shows the date/time, type (credit/debit), description of the activity, amount charged or added, and your balance after the transaction was processed.',
},
{
title: 'Balance After',
content: 'The "Balance After" column shows your account balance immediately after each transaction. This helps you track how your balance changes over time and verify all transactions.',
},
{
title: 'Top Up Credits',
content: 'If your balance is low, visit the Top Up page to add more credits to your account. Regular monitoring of your credit history helps prevent service interruptions.',
},
];
return (