feat: add InvoiceCard component and InvoiceListPage with filter and search

Govt-Billing-React/src/components/InvoiceCard.css

@@ -0,0 +1,146 @@
+.invoice-card {
+  border-radius: 14px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  margin: 12px 16px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.invoice-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
+}
+
+.invoice-card__header {
+  padding-bottom: 4px;
+}
+
+.invoice-card__header-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.invoice-card__icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--ion-color-primary-tint, #e8f0fe);
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.invoice-card__doc-icon {
+  font-size: 20px;
+  color: var(--ion-color-primary, #3880ff);
+}
+
+.invoice-card__title-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
+.invoice-card__number {
+  font-weight: 700;
+  font-size: 15px;
+  margin: 0;
+  color: var(--ion-text-color, #1a1a2e);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.invoice-card__org {
+  font-size: 12px;
+  color: var(--ion-color-medium, #92949c);
+  margin: 2px 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.invoice-card__badge {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  flex-shrink: 0;
+}
+
+.invoice-card__content {
+  padding-top: 8px;
+}
+
+.invoice-card__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--ion-color-light, #f4f5f8);
+}
+
+.invoice-card__row:last-of-type {
+  border-bottom: none;
+}
+
+.invoice-card__row-icon {
+  font-size: 16px;
+  color: var(--ion-color-medium, #92949c);
+  flex-shrink: 0;
+}
+
+.invoice-card__row-label {
+  font-size: 12px;
+  color: var(--ion-color-medium, #92949c);
+  width: 52px;
+  flex-shrink: 0;
+}
+
+.invoice-card__row-value {
+  font-size: 13px;
+  color: var(--ion-text-color, #1a1a2e);
+  font-weight: 500;
+}
+
+.invoice-card__amount {
+  font-size: 15px;
+  font-weight: 700;
+  margin-left: auto;
+}
+
+.invoice-card__amount--paid {
+  color: var(--ion-color-success, #2dd36f);
+}
+
+.invoice-card__amount--pending {
+  color: var(--ion-color-warning, #ffc409);
+}
+
+.invoice-card__amount--overdue {
+  color: var(--ion-color-danger, #eb445a);
+}
+
+.invoice-card__amount--draft {
+  color: var(--ion-color-medium, #92949c);
+}
+
+.invoice-card__overdue-text {
+  color: var(--ion-color-danger, #eb445a);
+}
+
+/* IPFS chip */
+.invoice-card__ipfs-row {
+  margin-top: 8px;
+}
+
+.invoice-card__ipfs-chip {
+  font-size: 11px;
+  height: 24px;
+}
+
+.invoice-card__actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}

Govt-Billing-React/src/components/InvoiceCard.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import {
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonBadge,
+  IonIcon,
+  IonButton,
+  IonChip,
+  IonLabel,
+} from "@ionic/react";
+import {
+  documentTextOutline,
+  calendarOutline,
+  personOutline,
+  cashOutline,
+  downloadOutline,
+  eyeOutline,
+} from "ionicons/icons";
+import "./InvoiceCard.css";
+
+export type InvoiceStatus = "paid" | "pending" | "overdue" | "draft";
+
+export interface Invoice {
+  id: string;
+  invoiceNumber: string;
+  recipientName: string;
+  recipientOrg: string;
+  amount: number;
+  currency?: string;
+  issueDate: string;
+  dueDate: string;
+  status: InvoiceStatus;
+  ipfsHash?: string; // Filecoin/IPFS CID if stored on-chain
+}
+
+interface InvoiceCardProps {
+  invoice: Invoice;
+  onView?: (invoice: Invoice) => void;
+  onExport?: (invoice: Invoice) => void;
+}
+
+const STATUS_CONFIG: Record<
+  InvoiceStatus,
+  { label: string; color: string }
+> = {
+  paid: { label: "Paid", color: "success" },
+  pending: { label: "Pending", color: "warning" },
+  overdue: { label: "Overdue", color: "danger" },
+  draft: { label: "Draft", color: "medium" },
+};
+
+const InvoiceCard: React.FC<InvoiceCardProps> = ({
+  invoice,
+  onView,
+  onExport,
+}) => {
+  const {
+    invoiceNumber,
+    recipientName,
+    recipientOrg,
+    amount,
+    currency = "INR",
+    issueDate,
+    dueDate,
+    status,
+    ipfsHash,
+  } = invoice;
+
+  const { label, color } = STATUS_CONFIG[status];
+
+  const formattedAmount = new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 2,
+  }).format(amount);
+
+  return (
+    <IonCard className="invoice-card">
+      {/* Header row: Invoice number + status badge */}
+      <IonCardHeader className="invoice-card__header">
+        <div className="invoice-card__header-row">
+          <div className="invoice-card__icon-wrap">
+            <IonIcon icon={documentTextOutline} className="invoice-card__doc-icon" />
+          </div>
+          <div className="invoice-card__title-wrap">
+            <p className="invoice-card__number">#{invoiceNumber}</p>
+            <p className="invoice-card__org">{recipientOrg}</p>
+          </div>
+          <IonBadge color={color} className="invoice-card__badge">
+            {label}
+          </IonBadge>
+        </div>
+      </IonCardHeader>
+
+      <IonCardContent className="invoice-card__content">
+        {/* Recipient */}
+        <div className="invoice-card__row">
+          <IonIcon icon={personOutline} className="invoice-card__row-icon" />
+          <span className="invoice-card__row-label">Bill To</span>
+          <span className="invoice-card__row-value">{recipientName}</span>
+        </div>
+
+        {/* Amount */}
+        <div className="invoice-card__row">
+          <IonIcon icon={cashOutline} className="invoice-card__row-icon" />
+          <span className="invoice-card__row-label">Amount</span>
+          <span className={`invoice-card__amount invoice-card__amount--${status}`}>
+            {formattedAmount}
+          </span>
+        </div>
+
+        {/* Issue Date */}
+        <div className="invoice-card__row">
+          <IonIcon icon={calendarOutline} className="invoice-card__row-icon" />
+          <span className="invoice-card__row-label">Issued</span>
+          <span className="invoice-card__row-value">{issueDate}</span>
+        </div>
+
+        {/* Due Date */}
+        <div className="invoice-card__row">
+          <IonIcon icon={calendarOutline} className="invoice-card__row-icon" />
+          <span className="invoice-card__row-label">Due</span>
+          <span
+            className={`invoice-card__row-value ${
+              status === "overdue" ? "invoice-card__overdue-text" : ""
+            }`}
+          >
+            {dueDate}
+          </span>
+        </div>
+
+        {/* IPFS chip — shown only if stored on-chain */}
+        {ipfsHash && (
+          <div className="invoice-card__ipfs-row">
+            <IonChip color="tertiary" className="invoice-card__ipfs-chip">
+              <IonLabel>
+                🔗 IPFS: {ipfsHash.slice(0, 10)}…{ipfsHash.slice(-4)}
+              </IonLabel>
+            </IonChip>
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="invoice-card__actions">
+          <IonButton
+            fill="outline"
+            size="small"
+            color="primary"
+            onClick={() => onView?.(invoice)}
+          >
+            <IonIcon slot="start" icon={eyeOutline} />
+            View
+          </IonButton>
+          <IonButton
+            fill="outline"
+            size="small"
+            color="secondary"
+            onClick={() => onExport?.(invoice)}
+          >
+            <IonIcon slot="start" icon={downloadOutline} />
+            Export
+          </IonButton>
+        </div>
+      </IonCardContent>
+    </IonCard>
+  );
+};
+
+export default InvoiceCard;