InvoiceCard

invoicecard-1779394643298.tsx

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

const STATUS_STYLES = {
  paid: { bg:'#d1fae5', color:'#065f46', label:'Paid' },
  pending: { bg:'#fef3c7', color:'#92400e', label:'Pending' },
  overdue: { bg:'#fee2e2', color:'#991b1b', label:'Overdue' },
}

export default function InvoiceCard({
  invoiceNo = 'INV-2025-042',
  client = 'Acme Corporation',
  amount = 3840,
  due = 'Jun 30, 2025',
  status = 'pending',
  items = [{ desc:'Empire UI Pro License', qty:1, rate:3840 }],
}) {
  const [paid, setPaid] = useState(status === 'paid')
  const s = STATUS_STYLES[paid?'paid':status]
  return (
    <div style={{ background:'#fff', borderRadius:'16px', padding:'24px', maxWidth:'360px', boxShadow:'0 4px 20px rgba(0,0,0,0.08)' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:'20px' }}>
        <div>
          <div style={{ fontWeight:800, fontSize:'18px', color:'#1e293b' }}>🧾 {invoiceNo}</div>
          <div style={{ fontSize:'13px', color:'#64748b', marginTop:'3px' }}>To: {client}</div>
        </div>
        <span style={{ background:s.bg, color:s.color, padding:'4px 12px', borderRadius:'9999px', fontSize:'12px', fontWeight:700 }}>{s.label}</span>
      </div>
      <div style={{ borderRadius:'10px', overflow:'hidden', border:'1px solid #f1f5f9', marginBottom:'16px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', background:'#f8fafc', padding:'8px 14px' }}>
          {['Description','Qty','Total'].map(h=><div key={h} style={{fontSize:'11px',fontWeight:700,color:'#94a3b8',textTransform:'uppercase'}}>{h}</div>)}
        </div>
        {items.map(item=>(
          <div key={item.desc} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', padding:'12px 14px', borderTop:'1px solid #f1f5f9' }}>
            <div style={{fontSize:'13px',color:'#374151'}}>{item.desc}</div>
            <div style={{fontSize:'13px',color:'#64748b'}}>{item.qty}</div>
            <div style={{fontSize:'13px',fontWeight:600,color:'#1e293b'}}>${item.rate*item.qty}</div>
          </div>
        ))}
        <div style={{ display:'flex', justifyContent:'space-between', padding:'12px 14px', borderTop:'2px solid #e2e8f0', background:'#fafbfc' }}>
          <span style={{fontWeight:700,color:'#1e293b'}}>Total</span>
          <span style={{fontWeight:900,fontSize:'18px',color:'#6d28d9'}}>${amount}</span>
        </div>
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ fontSize:'12px', color:'#94a3b8' }}>Due: <strong style={{color:'#374151'}}>{due}</strong></div>
        {!paid && <button onClick={()=>setPaid(true)} style={{ background:'linear-gradient(135deg,#6d28d9,#2563eb)', color:'#fff', border:'none', borderRadius:'10px', padding:'9px 20px', cursor:'pointer', fontWeight:700, fontSize:'14px' }}>Pay Now</button>}
      </div>
    </div>
  )
}

Component info

CategoryFinance

Frameworkreact

TierFREE

Copies0

About

Invoice summary card with status, due date and payment button

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 } 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',

InvoiceCard

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

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

const BUDGET = [
  { cat:'Housing', budget:1500, spent:1500, icon:'🏠', color:'#6d28d9' },
  { cat:'Food', budget:600, spent:420, icon:'🍔', color:'#f59e0b' },
  { cat:'Transport', budget:300, spent:180,

BudgetTracker

Finance