svelte
<script>
  import { LucideArrowUpRight, LucideArrowDownRight, LucideMoreVertical } from 'lucide-svelte';
  
  export let transactions = [
    {
      id: 1,
      date: '2023-05-15',
      description: 'iPhone 12 screen replacement',
      type: 'income',
      category: 'Screen Repair',
      amount: 1200000
    },
    {
      id: 2,
      date: '2023-05-14',
      description: 'Bought battery for iPhone X',
      type: 'expense',
      category: 'Battery',
      amount: 350000
    },
    {
      id: 3,
      date: '2023-05-12',
      description: 'Samsung S21 screen repair',
      type: 'income',
      category: 'Screen Repair',
      amount: 900000
    },
    {
      id: 4,
      date: '2023-05-10',
      description: 'Software troubleshooting',
      type: 'income',
      category: 'Software',
      amount: 300000
    }
  ];
</script>

<div class="card">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-slate-900">Recent Transactions</h2>
    <a href="/transactions" class="text-sm text-blue-500 hover:underline">View All</a>
  </div>
  
  <div class="space-y-3">
    {#each transactions as transaction}
      <div class="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
        <div class="flex items-center space-x-3">
          {#if transaction.type === 'income'}
            <div class="p-2 rounded-full bg-green-100 text-green-600">
              <LucideArrowUpRight size={16} />
            </div>
          {:else}
            <div class="p-2 rounded-full bg-red-100 text-red-600">
              <LucideArrowDownRight size={16} />
            </div>
          {/if}
          
          <div>
            <p class="font-medium text-slate-900">{transaction.description}</p>
            <p class="text-xs text-slate-500">
              {transaction.date} • {transaction.category}
            </p>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <p class:font-bold={true} class:text-green-600={transaction.type === 'income'} class:text-red-600={transaction.type === 'expense'}>
            {transaction.type === 'income' ? '+' : '-'}Rp {transaction.amount.toLocaleString()}
          </p>
          <button class="text-slate-400 hover:text-slate-600">
            <LucideMoreVertical size={16} />
          </button>
        </div>
      </div>
    {/each}
  </div>
</div>

</html>