toeasy-front/src/lib/components/trading/TabelaOrdens.svelte

<script>
  import { ordensCompra, ordensVenda, ultimaVenda } from '$lib/mock/ordens.js';
  function formatBRL(n) { return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0)); }
  function formatQty(n) { return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(Number(n || 0)); }
</script>
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
  <div class="px-4 py-2 bg-yellow-100 dark:bg-yellow-900/40 border-b border-yellow-300 dark:border-yellow-700 text-sm text-yellow-900 dark:text-yellow-200">
    <div class="flex items-center justify-between">
      <span>Última Venda</span>
      <span class="font-medium">{formatBRL(ultimaVenda?.valor)} · {formatQty(ultimaVenda?.quantidade)}</span>
    </div>
  </div>
  <div class="grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700">
    <div class="p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-semibold text-green-600">Ordem de Compra</h3>
        <div class="text-xs text-gray-500">VALOR · QUANTIDADE</div>
      </div>
      <div class="space-y-1">
        {#each ordensCompra as o}
        <div class="flex items-center justify-between text-sm">
          <span class="text-green-600">{formatBRL(o.valor)}</span>
          <span class="text-gray-700 dark:text-gray-200">{formatQty(o.quantidade)}</span>
        </div>
        {/each}
      </div>
    </div>
    <div class="p-4">
      <div class="flex items-center justify-between mb-2">
        <h3 class="text-sm font-semibold text-red-600">Ordem de Venda</h3>
        <div class="text-xs text-gray-500">VALOR · QUANTIDADE</div>
      </div>
      <div class="space-y-1">
        {#each ordensVenda as o}
        <div class="flex items-center justify-between text-sm">
          <span class="text-red-600">{formatBRL(o.valor)}</span>
          <span class="text-gray-700 dark:text-gray-200">{formatQty(o.quantidade)}</span>
        </div>
        {/each}
      </div>
    </div>
  </div>
</div>