101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Paper,
|
|
Typography,
|
|
Chip,
|
|
IconButton,
|
|
Box,
|
|
} from '@mui/material';
|
|
import DownloadIcon from '@mui/icons-material/Download';
|
|
import { format } from 'date-fns';
|
|
|
|
interface Invoice {
|
|
id: string;
|
|
date: string;
|
|
amount: number;
|
|
status: 'paid' | 'pending' | 'failed';
|
|
pdfUrl?: string;
|
|
}
|
|
|
|
interface BillingHistoryProps {
|
|
invoices: Invoice[];
|
|
}
|
|
|
|
export const BillingHistory: React.FC<BillingHistoryProps> = ({ invoices }) => {
|
|
if (!invoices || invoices.length === 0) {
|
|
return (
|
|
<Box sx={{ p: 3, textAlign: 'center' }}>
|
|
<Typography variant="body2" color="text.secondary">
|
|
No billing history available
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const getStatusColor = (status: Invoice['status']) => {
|
|
switch (status) {
|
|
case 'paid':
|
|
return 'success';
|
|
case 'pending':
|
|
return 'warning';
|
|
case 'failed':
|
|
return 'error';
|
|
default:
|
|
return 'default';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TableContainer component={Paper} variant="outlined">
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Date</TableCell>
|
|
<TableCell>Amount</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
<TableCell align="right">Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{invoices.map((invoice) => (
|
|
<TableRow key={invoice.id} hover>
|
|
<TableCell>
|
|
{format(new Date(invoice.date), 'MMM dd, yyyy')}
|
|
</TableCell>
|
|
<TableCell>
|
|
${(invoice.amount / 100).toFixed(2)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Chip
|
|
label={invoice.status}
|
|
color={getStatusColor(invoice.status)}
|
|
size="small"
|
|
/>
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
{invoice.pdfUrl && (
|
|
<IconButton
|
|
size="small"
|
|
href={invoice.pdfUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Download invoice PDF"
|
|
>
|
|
<DownloadIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
};
|