Transaction Management

const response = await fetch('https://dev.api.baanx.com/v1/card/transactions', {
  headers: {
    'X-Client-ID': 'your_client_id',
    'Authorization': `Bearer ${userAccessToken}`
  }
});

const transactions = await response.json();
console.log(`Retrieved ${transactions.length} transactions`);

const params = new URLSearchParams({
  dateFrom: '2024-10-01',
  dateTo: '2024-10-31'
});

const response = await fetch(
  `https://dev.api.baanx.com/v1/card/transactions?${params}`,
  {
    headers: {
      'X-Client-ID': clientId,
      'Authorization': `Bearer ${accessToken}`
    }
  }
);

const transactions = await response.json();

import { useState, useEffect } from 'react';

export function TransactionHistory({ clientId, accessToken }) {
  const [transactions, setTransactions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(0);

  useEffect(() => {
    fetchTransactions();
  }, [page]);

  async function fetchTransactions() {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(
        `/v1/card/transactions?page=${page}`,
        {
          headers: {
            'X-Client-ID': clientId,
            'Authorization': `Bearer ${accessToken}`
          }
        }
      );

      if (!response.ok) {
        throw new Error('Failed to fetch transactions');
      }

      const data = await response.json();
      setTransactions(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  if (loading) return <div>Loading transactions...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="transaction-history">
      <h2>Transaction History</h2>

      <div className="transactions-list">
        {transactions.map((tx) => (
          <TransactionItem key={tx.id} transaction={tx} />
        ))}
      </div>

      <div className="pagination">
        <button
          onClick={() => setPage(Math.max(0, page - 1))}
          disabled={page === 0}
        >
          Previous
        </button>

        <span>Page {page + 1}</span>

        <button
          onClick={() => setPage(page + 1)}
          disabled={transactions.length === 0}
        >
          Next
        </button>
      </div>
    </div>
  );
}

function TransactionItem({ transaction }) {
  const isCredit = transaction.sign === 'CREDIT';
  const statusIcon = {
    CONFIRMED: '✅',
    PENDING: '⏳',
    DECLINED: '❌',
    REVERTED: '↩️'
  }[transaction.status];

  return (
    <div className="transaction-item">
      <div className="transaction-merchant">
        <span className="merchant-name">
          {transaction.merchantNameLocation}
        </span>
        <span className="transaction-date">
          {new Date(transaction.dateTime).toLocaleDateString()}
        </span>
      </div>

      <div className="transaction-details">
        <span className="category-badge">
          {transaction.mccCategory}
        </span>
        <span className={`amount ${isCredit ? 'credit' : 'debit'}`}>
          {isCredit ? '+' : '-'}
          {transaction.transactionCurrency} {transaction.amountInTransactionCurrency}
        </span>
        <span className="status">{statusIcon}</span>
      </div>
    </div>
  );
}

import { useState, useEffect } from 'react';

export function TransactionHistoryWithFilters({ clientId, accessToken }) {
  const [transactions, setTransactions] = useState([]);
  const [loading, setLoading] = useState(false);
  const [filters, setFilters] = useState({
    dateFrom: '',
    dateTo: '',
    searchKey: '',
    mccCategories: [],
    page: 0
  });

  useEffect(() => {
    fetchTransactions();
  }, [filters]);

  async function fetchTransactions() {
    setLoading(true);

    try {
      const params = new URLSearchParams();

      if (filters.dateFrom) params.append('dateFrom', filters.dateFrom);
      if (filters.dateTo) params.append('dateTo', filters.dateTo);
      if (filters.searchKey) params.append('searchKey', filters.searchKey);
      if (filters.mccCategories.length > 0) {
        params.append('mccCategories', filters.mccCategories.join(','));
      }
      params.append('page', filters.page.toString());

      const response = await fetch(
        `/v1/card/transactions?${params}`,
        {
          headers: {
            'X-Client-ID': clientId,
            'Authorization': `Bearer ${accessToken}`
          }
        }
      );

      const data = await response.json();
      setTransactions(data);
    } catch (err) {
      console.error('Failed to fetch transactions:', err);
    } finally {
      setLoading(false);
    }
  }

  function updateFilter(key, value) {
    setFilters(prev => ({ ...prev, [key]: value, page: 0 }));
  }

  function toggleCategory(category) {
    setFilters(prev => ({
      ...prev,
      mccCategories: prev.mccCategories.includes(category)
        ? prev.mccCategories.filter(c => c !== category)
        : [...prev.mccCategories, category],
      page: 0
    }));
  }

  const categories = [
    'FOOD', 'TRAVEL', 'ENTERTAINMENT', 'SUBSCRIPTIONS',
    'HEALTH', 'UTILITIES', 'ATM', 'MISC'
  ];

  return (
    <div className="transaction-history-with-filters">
      <div className="filters">
        <h3>Filters</h3>

        <div className="date-range">
          <input
            type="date"
            placeholder="From"
            value={filters.dateFrom}
            onChange={(e) => updateFilter('dateFrom', e.target.value)}
          />
          <input
            type="date"
            placeholder="To"
            value={filters.dateTo}
            onChange={(e) => updateFilter('dateTo', e.target.value)}
          />
        </div>

        <div className="search">
          <input
            type="text"
            placeholder="Search merchant..."
            value={filters.searchKey}
            onChange={(e) => updateFilter('searchKey', e.target.value)}
          />
        </div>

        <div className="categories">
          {categories.map(category => (
            <button
              key={category}
              onClick={() => toggleCategory(category)}
              className={filters.mccCategories.includes(category) ? 'active' : ''}
            >
              {category}
            </button>
          ))}
        </div>

        <button onClick={() => setFilters({
          dateFrom: '', dateTo: '', searchKey: '',
          mccCategories: [], page: 0
        })}>
          Clear Filters
        </button>
      </div>

      <div className="transactions">
        {loading ? (
          <div>Loading...</div>
        ) : transactions.length > 0 ? (
          transactions.map(tx => (
            <TransactionItem key={tx.id} transaction={tx} />
          ))
        ) : (
          <div>No transactions found</div>
        )}
      </div>
    </div>
  );
}

// Generate CSV statement
const response = await fetch(
  'https://dev.api.baanx.com/v1/card/transactions/statement?dateFrom=2024-10-01&dateTo=2024-10-31',
  {
    headers: {
      'Accept': 'text/csv',
      'X-Client-ID': clientId,
      'Authorization': `Bearer ${accessToken}`
    }
  }
);

const csvData = await response.text();

// Download as file
const blob = new Blob([csvData], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'transactions-october-2024.csv';
link.click();

import { useState } from 'react';

export function StatementGenerator({ clientId, accessToken }) {
  const [loading, setLoading] = useState(false);
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const [format, setFormat] = useState('csv');

  async function generateStatement() {
    setLoading(true);

    try {
      const params = new URLSearchParams();
      if (dateFrom) params.append('dateFrom', dateFrom);
      if (dateTo) params.append('dateTo', dateTo);

      const response = await fetch(
        `/v1/card/transactions/statement?${params}`,
        {
          headers: {
            'Accept': format === 'csv' ? 'text/csv' : 'application/pdf',
            'X-Client-ID': clientId,
            'Authorization': `Bearer ${accessToken}`
          }
        }
      );

      if (!response.ok) {
        throw new Error('Failed to generate statement');
      }

      // Download file
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `statement-${dateFrom || 'all'}-${dateTo || 'latest'}.${format}`;
      link.click();
      URL.revokeObjectURL(url);

    } catch (err) {
      console.error('Statement generation failed:', err);
      alert('Failed to generate statement');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="statement-generator">
      <h3>Generate Statement</h3>

      <div className="date-range">
        <label>
          From:
          <input
            type="date"
            value={dateFrom}
            onChange={(e) => setDateFrom(e.target.value)}
          />
        </label>

        <label>
          To:
          <input
            type="date"
            value={dateTo}
            onChange={(e) => setDateTo(e.target.value)}
          />
        </label>
      </div>

      <div className="format-selector">
        <label>
          <input
            type="radio"
            value="csv"
            checked={format === 'csv'}
            onChange={(e) => setFormat(e.target.value)}
          />
          CSV
        </label>

        <label>
          <input
            type="radio"
            value="pdf"
            checked={format === 'pdf'}
            onChange={(e) => setFormat(e.target.value)}
          />
          PDF
        </label>
      </div>

      <button
        onClick={generateStatement}
        disabled={loading}
        className="btn-generate"
      >
        {loading ? 'Generating...' : 'Download Statement'}
      </button>

      {!dateFrom && !dateTo && (
        <p className="info-text">
          No date range specified - will include all transactions
        </p>
      )}
    </div>
  );
}