fix the details about order in the orderbook

src/lib/components/trading/TabelaOrdens.svelte

@@ -12,14 +12,18 @@
     ...d,
     valor: Number(d?.valor ?? 0),
     quantidade: Number(d?.quantidade ?? 0),
-    city: d?.city ?? ''
+    city: d?.city ?? d?.cityName ?? '',
+    cityName: d?.cityName ?? d?.city ?? '',
+    measureUnitName: d?.measureUnitName ?? ''
   }));
   $: listaCompraView = (listaCompra || []).map((o, __idx) => ({ ...o, __idx })).slice().reverse();
   $: listaVenda = (ordensVenda || []).map((d) => ({
     ...d,
     valor: Number(d?.valor ?? 0),
     quantidade: Number(d?.quantidade ?? 0),
-    city: d?.city ?? '',
+    city: d?.city ?? d?.cityName ?? '',
+    cityName: d?.cityName ?? d?.city ?? '',
+    measureUnitName: d?.measureUnitName ?? '',
     raw: d?.raw ?? d
   }));
   $: listaVendaView = (listaVenda || []).map((o, __idx) => ({ ...o, __idx })).slice().reverse();
@@ -44,7 +48,7 @@
     const top = rect.top + (typeof window !== 'undefined' ? window.scrollY : 0) + rect.height / 2;
     const left = rect.right + (typeof window !== 'undefined' ? window.scrollX : 0) + 12;
     hoverTimer = setTimeout(() => {
-      tooltipCity = order?.city || '';
+      tooltipCity = order?.cityName || order?.city || '';
       tooltipPrice = Number(order?.valor ?? 0);
       tooltipQty = Number(order?.quantidade ?? 0);
       tooltipStyle = `top:${top}px;left:${left}px;`;
@@ -135,6 +139,8 @@
                 valor: o.valor,
                 quantidade: o.quantidade,
                 city: o.city,
+                cityName: o.cityName,
+                measureUnitName: o.measureUnitName,
                 orderbookId: o.orderbookId ?? o.orderbook_id ?? o.raw?.orderbook_id ?? null,
                 tokenExternalId: o.tokenExternalId ?? o.token_external_id ?? o.raw?.token_external_id ?? '',
                 raw: o.raw ?? o

src/lib/components/ui/PopUpToken.svelte

@@ -12,11 +12,17 @@
 </script>
 
 {#if visible}
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" on:click={onConfirm}>
-    <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-lg">
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center"
+    role="dialog"
+    aria-modal="true"
+    aria-label={title}
+  >
+    <div class="absolute inset-0 bg-black/50" on:click={onConfirm}></div>
+    <div class="relative bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-lg">
       <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
         <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100">{title}</h3>
-        <button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Fechar" on:click={onConfirm}>✕</button>
+        <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Fechar" on:click={onConfirm}>✕</button>
       </div>
 
       <div class="p-6 text-sm text-gray-700 dark:text-gray-300">
@@ -26,7 +32,7 @@
       </div>
 
       <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-center gap-3">
-        <button class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white" on:click={onConfirm}>{confirmText}</button>
+        <button type="button" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white" on:click={onConfirm}>{confirmText}</button>
       </div>
     </div>
   </div>

src/lib/layout/SideBar.svelte

@@ -100,12 +100,12 @@
     <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-100 ml-2">TooEasy Commodities</h1>
     <!-- Fechar removido: o botão fixo acima faz o toggle no mobile -->
   </div>
-  <div class="mx-4 mt-4 rounded-md border border-red-500 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-200 px-3 py-2 text-sm font-semibold flex items-center gap-2 animate-pulse">
+ <!-- <div class="mx-4 mt-4 rounded-md border border-red-500 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-200 px-3 py-2 text-sm font-semibold flex items-center gap-2 animate-pulse">
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86l-8.17 14.14A1 1 0 0 0 3 19h18a1 1 0 0 0 .88-1.5L13.71 3.86a1 1 0 0 0-1.71 0Z" />
     </svg>
     Aplicação em desenvolvimento
-  </div>
+  </div>-->
   <div class="flex-1 overflow-auto">
     <ul class="mt-4">
       {#each navItems as item}
@@ -139,8 +139,19 @@
   >
     Sair
   </button>
+    <div class="mx-2 rounded-md border border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-200 px-3 py-2 text-sm font-semibold flex items-center gap-2 mb-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86l-8.17 14.14A1 1 0 0 0 3 19h18a1 1 0 0 0 .88-1.5L13.71 3.86a1 1 0 0 0-1.71 0Z" />
+    </svg>
+    Version: 1.0.0
+  </div>
 </aside>
 
 {#if isOpen}
-  <div class="fixed inset-0 bg-black/40 md:hidden z-30" on:click={closeSidebar}></div>
+  <button
+    type="button"
+    class="fixed inset-0 bg-black/40 md:hidden z-30"
+    aria-label="Fechar menu lateral"
+    on:click={closeSidebar}
+  ></button>
 {/if}

src/routes/trading/+page.svelte

@@ -75,6 +75,45 @@
     return raw ? JSON.parse(raw) : null;
   }
 
+  function pickNonEmptyString(source = {}, keys = []) {
+    if (!source || typeof source !== 'object') return '';
+    for (const key of keys) {
+      const value = source?.[key];
+      if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (trimmed) return trimmed;
+      } else if (value !== null && value !== undefined) {
+        return String(value);
+      }
+    }
+    return '';
+  }
+
+  function resolveCityValue(source = {}) {
+    return pickNonEmptyString(source, ['cityName', 'cityname', 'CITYNAME', 'token_city', 'tokenCity', 'city', 'CITY']);
+  }
+
+  function resolveMeasureUnitValue(source = {}) {
+    return pickNonEmptyString(source, [
+      'measureUnitName',
+      'measure_unit_name',
+      'measureunitname',
+      'MEASUREUNITNAME',
+      'measureUnit',
+      'measureunit',
+      'unit',
+      'UNIT'
+    ]);
+  }
+
+  function resolveCityData(order = {}) {
+    return resolveCityValue(order) || resolveCityValue(order?.raw ?? {});
+  }
+
+  function resolveMeasureUnitData(order = {}) {
+    return resolveMeasureUnitValue(order) || resolveMeasureUnitValue(order?.raw ?? {});
+  }
+
   function formatOrderDetailKey(key = '') {
     return key
       .replace(/_/g, ' ')
@@ -98,10 +137,14 @@
 
   function openOrderDetailModal(order = {}) {
     if (!order) return;
+    const resolvedCity = resolveCityData(order);
+    const resolvedMeasureUnit = resolveMeasureUnitData(order);
     orderDetailSelected = {
       valor: order?.valor ?? order?.raw?.token_commodities_value ?? null,
       quantidade: order?.quantidade ?? order?.raw?.orderbook_amount ?? null,
-      city: order?.city ?? order?.raw?.token_city ?? '',
+      city: resolvedCity,
+      cityName: resolvedCity,
+      measureUnitName: resolvedMeasureUnit,
       orderbookId: order?.orderbookId ?? order?.orderbook_id ?? order?.raw?.orderbook_id ?? null,
       tokenExternalId: order?.tokenExternalId ?? order?.token_external_id ?? order?.raw?.token_external_id ?? '',
       raw: order?.raw ?? order
@@ -130,11 +173,15 @@
     const totalValue = Number(item?.token_commodities_value ?? item?.valor ?? 0);
     const quantidade = Number(item?.orderbook_amount ?? item?.token_commodities_amount ?? item?.quantidade ?? 0);
     const valorPorSaca = quantidade ? totalValue / quantidade : totalValue;
+    const resolvedCity = resolveCityValue(item);
+    const resolvedMeasureUnit = resolveMeasureUnitValue(item);
     return {
       valor: Number.isFinite(valorPorSaca) ? valorPorSaca : 0,
       quantidade: Number.isFinite(quantidade) ? quantidade : 0,
       total: Number.isFinite(totalValue) ? totalValue : 0,
-      city: item?.token_city ?? item?.city ?? '',
+      city: resolvedCity,
+      cityName: resolvedCity,
+      measureUnitName: resolvedMeasureUnit,
       orderbookId: item?.orderbook_id ?? item?.orderbookId ?? null,
       tokenExternalId: item?.token_external_id ?? item?.tokenExternalId ?? '',
       raw: item
@@ -434,6 +481,8 @@
           valor: orderPaymentSelectedOrder.valor ?? null,
           quantidade: orderPaymentSelectedOrder.quantidade ?? null,
           city: orderPaymentSelectedOrder.city ?? '',
+          cityName: orderPaymentSelectedOrder.cityName ?? orderPaymentSelectedOrder.city ?? '',
+          measureUnitName: orderPaymentSelectedOrder.measureUnitName ?? '',
           orderbookId: orderPaymentSelectedOrder.orderbookId ?? null,
           tokenExternalId: orderPaymentSelectedOrder.tokenExternalId ?? ''
         }
@@ -687,10 +736,14 @@
     orderPaymentLoadingVisible = true;
     orderPaymentError = '';
     orderPaymentStatusMessage = 'Preparando QR Code...';
+    const resolvedCity = resolveCityData(order);
+    const resolvedMeasureUnit = resolveMeasureUnitData(order);
     orderPaymentSelectedOrder = {
       valor: order?.valor ?? order?.raw?.token_commodities_value ?? null,
       quantidade: order?.quantidade ?? order?.raw?.orderbook_amount ?? null,
-      city: order?.city ?? order?.raw?.token_city ?? '',
+      city: resolvedCity,
+      cityName: resolvedCity,
+      measureUnitName: resolvedMeasureUnit,
       orderbookId,
       tokenExternalId: order?.tokenExternalId ?? order?.token_external_id ?? order?.raw?.token_external_id ?? ''
     };
@@ -1108,11 +1161,16 @@ $: displayPendingSells = pendingSells.map((o) => ({
           </div>
           <div class="flex justify-between">
             <span>Quantidade</span>
-            <span>{formatQty(orderDetailSelected.quantidade)}</span>
+            <span>
+              {formatQty(orderDetailSelected.quantidade)}
+              {#if orderDetailSelected.measureUnitName}
+                <span class="ml-1 text-xs text-gray-500 dark:text-gray-400">{orderDetailSelected.measureUnitName}</span>
+              {/if}
+            </span>
           </div>
           <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
             <span>Cidade</span>
-            <span>{orderDetailSelected.city || 'Não informado'}</span>
+            <span>{orderDetailSelected.cityName || 'Não informado'}</span>
           </div>
         </div>