Rotina para listar o monitoramento a partir das ordens

Novo modal para mostrar lista de monitoramento das ordens

src/routes/trading/+page.svelte

@@ -73,6 +73,11 @@
   let isCheckingTransfer = false;
   let orderPaymentBeforeUnloadHandler = null;
 
+  let orderMonitoringModalVisible = false;
+  let orderMonitoringLoading = false;
+  let orderMonitoringError = '';
+  let orderMonitoringRows = [];
+
   async function parseResponse(res) {
     const raw = await res.text();
     return raw ? JSON.parse(raw) : null;
@@ -360,6 +365,68 @@
     orderCancelLoading = false;
   }
 
+  function closeOrderMonitoringModal() {
+    orderMonitoringModalVisible = false;
+    orderMonitoringRows = [];
+    orderMonitoringError = '';
+    orderMonitoringLoading = false;
+  }
+
+  async function openOrderMonitoringModal() {
+    if (!orderDetailSelected) return;
+    if (orderMonitoringLoading) return;
+    orderMonitoringError = '';
+    orderMonitoringRows = [];
+
+    const orderbookIdRaw = resolveOrderbookId(orderDetailSelected);
+    const orderbookId = Number(orderbookIdRaw);
+    if (!Number.isInteger(orderbookId) || orderbookId <= 0) {
+      orderMonitoringError = 'Ordem inválida para consultar monitoramento.';
+      orderMonitoringModalVisible = true;
+      return;
+    }
+
+    const token = get(authToken);
+    if (!token) {
+      orderMonitoringError = 'Sessão expirada. Faça login novamente.';
+      orderMonitoringModalVisible = true;
+      return;
+    }
+
+    orderMonitoringModalVisible = true;
+    orderMonitoringLoading = true;
+    try {
+      const res = await fetch(`${apiUrl}/orderbook/monitoring/list`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify({ orderbook_id: orderbookId })
+      });
+
+      if (res.status === 204) {
+        orderMonitoringRows = [];
+        return;
+      }
+
+      const body = await parseResponse(res);
+      const isSuccess = res.ok && body?.status === 'ok';
+      if (!isSuccess) {
+        throw new Error(body?.msg ?? body?.message ?? 'Falha ao carregar monitoramento.');
+      }
+
+      const list = Array.isArray(body?.data) ? body.data : Array.isArray(body?.data?.data) ? body.data.data : body?.data;
+      orderMonitoringRows = Array.isArray(list) ? list : [];
+    } catch (err) {
+      console.error('[Trading] Falha ao carregar monitoramento da CPR:', err);
+      orderMonitoringError = err?.message ?? 'Não foi possível carregar o monitoramento.';
+      orderMonitoringRows = [];
+    } finally {
+      orderMonitoringLoading = false;
+    }
+  }
+
   async function cancelOrderbookOrder() {
     if (orderCancelLoading) return;
     orderCancelError = '';
@@ -1444,6 +1511,14 @@ $: displayPendingSells = pendingSells.map((o) => ({
         {/if}
 
         <div class="flex flex-col gap-2">
+          <button
+            type="button"
+            class="w-full rounded border border-gray-300 dark:border-gray-600 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-60"
+            on:click={openOrderMonitoringModal}
+            disabled={orderMonitoringLoading}
+          >
+            {orderMonitoringLoading ? 'Carregando monitoramento...' : 'Monitoramento'}
+          </button>
           <button
             class="w-full rounded bg-green-600 hover:bg-green-700 text-white font-semibold py-2 disabled:opacity-60"
             on:click={handleOrderDetailPurchase}
@@ -1467,6 +1542,51 @@ $: displayPendingSells = pendingSells.map((o) => ({
       <p class="text-sm text-gray-500">Selecione uma ordem para ver detalhes.</p>
     {/if}
   </ModalBase>
+  <ModalBase
+    title="Monitoramento"
+    visible={orderMonitoringModalVisible}
+    onClose={closeOrderMonitoringModal}
+  >
+    <div class="space-y-3 text-sm text-gray-800 dark:text-gray-100">
+      {#if orderMonitoringError}
+        <div class="rounded border border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-200 px-3 py-2">
+          {orderMonitoringError}
+        </div>
+      {/if}
+
+      {#if orderMonitoringLoading}
+        <p class="text-sm text-gray-500">Carregando...</p>
+      {:else if orderMonitoringRows.length === 0}
+        <p class="text-sm text-gray-500">Nenhum registro de monitoramento encontrado para esta CPR.</p>
+      {:else}
+        <ul class="space-y-2">
+          {#each orderMonitoringRows as row}
+            <li class="rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/60 p-3">
+              <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                    {row?.preview === true || row?.preview === 1 || row?.preview === 't' || row?.preview === 'true' ? 'Preview' : 'Registro'}
+                    #{row?.id ?? '—'}
+                  </div>
+                  <div class="mt-1 text-sm break-words">{row?.description ?? '—'}</div>
+                </div>
+                {#if row?.link}
+                  <a
+                    class="shrink-0 text-blue-600 hover:text-blue-500 underline text-sm"
+                    href={row.link}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Abrir
+                  </a>
+                {/if}
+              </div>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  </ModalBase>
   <ModalBase
     title="Pagamento via Pix"
     visible={orderPaymentModalVisible}