InvoiceCard

invoicecard-1779388705743.tsx

'use client';
import { useState } from 'react';

export default function InvoiceCard() {
  const invoices = [
    { id: 'INV-2024', client: 'Acme Corp', amount: 4800, status: 'paid', date: 'May 15, 2026' },
    { id: 'INV-2025', client: 'Globex Inc', amount: 12500, status: 'pending', date: 'May 20, 2026' },
    { id: 'INV-2026', client: 'Initech LLC', amount: 3200, status: 'overdue', date: 'Apr 30, 2026' },
  ];
  const statusStyle = {
    paid: { bg: 'rgba(74,222,128,0.1)', color: '#4ade80', border: 'rgba(74,222,128,0.2)' },
    pending: { bg: 'rgba(201,168,76,0.1)', color: '#C9A84C', border: 'rgba(201,168,76,0.2)' },
    overdue: { bg: 'rgba(239,68,68,0.1)', color: '#ef4444', border: 'rgba(239,68,68,0.2)' },
  };
  const [hovered, setHovered] = useState(null);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '480px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '15px', fontWeight: 700 }}>Recent Invoices</h3>
        <span style={{ color: '#C9A84C', fontSize: '13px', cursor: 'pointer' }}>View all →</span>
      </div>
      {invoices.map((inv, i) => {
        const s = statusStyle[inv.status];
        return (
          <div key={i}
            onMouseEnter={() => setHovered(i)}
            onMouseLeave={() => setHovered(null)}
            style={{
              display: 'flex', alignItems: 'center', gap: '16px',
              background: hovered === i ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
              border: '1px solid rgba(255,255,255,0.06)',
              borderRadius: '12px', padding: '14px 18px', marginBottom: '8px',
              cursor: 'pointer', transition: 'all 0.2s ease',
            }}>
            <div style={{
              width: '40px', height: '40px', borderRadius: '10px',
              background: 'rgba(201,168,76,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', flexShrink: 0,
            }}>📄</div>
            <div style={{ flex: 1 }}>
              <p style={{ margin: '0 0 2px 0', color: '#F5F5F0', fontSize: '14px', fontWeight: 600 }}>{inv.client}</p>
              <p style={{ margin: 0, color: 'rgba(245,245,240,0.4)', fontSize: '12px' }}>{inv.id} · {inv.date}</p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <p style={{ margin: '0 0 4px 0', color: '#F5F5F0', fontSize: '15px', fontWeight: 700 }}>${inv.amount.toLocaleString()}</p>
              <span style={{
                background: s.bg, color: s.color,
                border: `1px solid ${s.border}`,
                borderRadius: '6px', padding: '2px 8px', fontSize: '11px', fontWeight: 600, textTransform: 'capitalize',
              }}>{inv.status}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Component info

CategoryFinance

Frameworkreact

TierFREE

Copies0

About

Clean invoice summary card with status badge

More from Finance

'use client'
import { useState, useEffect } from 'react'

const BASE_PRICES: Record<string, { price: number; change: number; cap: string; icon: string; color: string }> = {
  BTC: { price: 67420, change: 2.4, cap: '1.32T', icon: '₿', color: '#f59e0b'

CryptoTicker

Finance

'use client';
import { useState, useEffect } from 'react';

export default function CryptoPortfolio() {
  const [assets, setAssets] = useState([
    { symbol: 'BTC', name: 'Bitcoin', amount: 0.42, price: 67420, change: 2.3, color: '#f59e0b', icon: '₿

CryptoPortfolio

Finance