feat: add frontend subscription page - M4 (refs #55)

frontend/src/features/subscription/components/BillingHistory.tsx

@@ -0,0 +1,100 @@
+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>
+  );
+};