`components/donations/DonationsTab.tsx`

71 lines
'use client';

import { DollarSign } from 'lucide-react';
import DonationSummary from './DonationSummary';
import DonationInsights from './DonationInsights';

export default function DonationsTab() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      {/* Header */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          padding: '14px 20px',
          borderBottom: '1px solid var(--color-border)',
          flexShrink: 0,
        }}
      >
        <div
          style={{
            width: 36,
            height: 36,
            borderRadius: 'var(--radius-md)',
            background: 'linear-gradient(135deg, rgba(16,185,129,0.25), rgba(34,197,94,0.25))',
            border: '1px solid rgba(16,185,129,0.3)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
          }}
        >
          <DollarSign size={18} style={{ color: '#34d399' }} />
        </div>
        <div>
          <h2
            style={{
              fontSize: 20,
              fontWeight: 600,
              color: 'var(--color-text)',
              margin: 0,
              fontFamily: 'var(--font-heading)',
            }}
          >
            Donations
          </h2>
          <p style={{ fontSize: 13, color: 'var(--color-text-muted)', margin: '2px 0 0' }}>
            Track fundraising performance and donor insights
          </p>
        </div>
      </div>

      {/* Content */}
      <div
        style={{
          flex: 1,
          overflowY: 'auto',
          padding: 20,
          display: 'flex',
          flexDirection: 'column',
          gap: 24,
        }}
      >
        <DonationSummary />
        <DonationInsights />
      </div>
    </div>
  );
}