add the popuptoken and edit trading screem

package-lock.json

@@ -743,7 +743,7 @@
 		"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
 			"version": "4.49.0",
 			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.49.0.tgz",
-			"integrity": "sha512-2QyUyQQ1ZtwZGiq0nvODL+vLJEasyCoiniItC3/5cYN8ncDQcv5avrt2MbKt1XU/vFAJlLta5KujqyHdYtdag4YEjYQ==",
+			"integrity": "sha512-2QyUyQQ1ZtwZGiq0nvODL+vLJEasyTokeniItC3/5cYN8ncDQcv5avrt2MbKt1XU/vFAJlLta5KujqyHdYtdag4YEjYQ==",
 			"cpu": [
 				"loong64"
 			],

src/lib/components/trading/BuyPanel.svelte

@@ -11,18 +11,18 @@
   function formatBRL(n) {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0));
   }
-  function formatEasyCoin(n) {
+  function formatEasyToken(n) {
     return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 6, maximumFractionDigits: 6 }).format(Number(n || 0));
   }
 
   $: priceUsed = tab === 'limit' ? Number(limitPrice) : Number(referencePrice);
-  $: computedEasyCoin = (Number(amountFiat) && priceUsed) ? Number(amountFiat) / priceUsed : 0;
+  $: computedEasyToken = (Number(amountFiat) && priceUsed) ? Number(amountFiat) / priceUsed : 0;
 
   function confirm() {
     const price = priceUsed;
     const total = Number(amountFiat);
     if (!price || !total) return;
-    const amount = computedEasyCoin;
+    const amount = computedEasyToken;
     dispatch('confirm', { type: tab, price, amount, total });
     amountFiat = '';
     limitPrice = '';
@@ -46,18 +46,18 @@
     {/if}
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor (R$)</label>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin (R$)</label>
         <input type="number" min="0" step="0.01" bind:value={amountFiat} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin</label>
-        <input value={formatEasyCoin(computedEasyCoin || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyToken</label>
+        <input value={formatEasyToken(computedEasyToken || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
       </div>
     </div>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor a receber</label>
-        <input value={formatEasyCoin(computedEasyCoin || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin a receber</label>
+        <input value={formatEasyToken(computedEasyToken || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
       </div>
       <div>
         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Preço de referência</label>

src/lib/components/trading/SellPanel.svelte

@@ -5,26 +5,26 @@
   const dispatch = createEventDispatcher();
 
   let tab = 'market';
-  let amountEasyCoin = '';
+  let amountEasyToken = '';
   let limitPrice = '';
 
   function formatBRL(n) {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0));
   }
-  function formatEasyCoin(n) {
+  function formatEasyToken(n) {
     return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 6, maximumFractionDigits: 6 }).format(Number(n || 0));
   }
 
   $: priceUsed = tab === 'limit' ? Number(limitPrice) : Number(referencePrice);
-  $: computedFiat = (Number(amountEasyCoin) && priceUsed) ? Number(amountEasyCoin) * priceUsed : 0;
+  $: computedFiat = (Number(amountEasyToken) && priceUsed) ? Number(amountEasyToken) * priceUsed : 0;
 
   function confirm() {
     const price = priceUsed;
-    const amount = Number(amountEasyCoin);
+    const amount = Number(amountEasyToken);
     if (!price || !amount) return;
     const total = computedFiat;
     dispatch('confirm', { type: tab, price, amount, total });
-    amountEasyCoin = '';
+    amountEasyToken = '';
     limitPrice = '';
   }
 </script>
@@ -33,8 +33,7 @@
   <div class="px-5 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">Vender</h3>
     <div class="inline-flex rounded-md border border-gray-200 dark:border-gray-600 overflow-hidden">
-      <button class={`px-3 py-1.5 text-sm ${tab === 'market' ? 'bg-red-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'}`} on:click={() => (tab = 'market')}>Mercado</button>
-      <button class={`px-3 py-1.5 text-sm border-l border-gray-200 dark:border-gray-600 ${tab === 'limit' ? 'bg-red-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300'}`} on:click={() => (tab = 'limit')}>Limitada</button>
+      <p class={`px-3 py-1.5 text-sm bg-red-600 text-white`}>Mercado</p>
     </div>
   </div>
   <div class="p-5 space-y-4">
@@ -46,17 +45,17 @@
     {/if}
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin</label>
-        <input type="number" min="0" step="0.000001" bind:value={amountEasyCoin} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyToken</label>
+        <input type="number" min="0" step="0.000001" bind:value={amountEasyToken} class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />
       </div>
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor (R$)</label>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin (R$)</label>
         <input value={formatBRL(computedFiat || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
       </div>
     </div>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor a receber</label>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">EasyCoin a receber</label>
         <input value={formatBRL(computedFiat || 0)} readonly class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
       </div>
       <div>

src/lib/components/ui/PopUpToken.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { goto } from '$app/navigation';
+
+  export let visible = false;
+  export let title = 'Seu sessão expirou';
+  export let confirmText = 'Retornar';
+
+  function onConfirm() {
+    goto('/');
+  }
+
+</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="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>
+      </div>
+
+      <div class="p-6 text-sm text-gray-700 dark:text-gray-300">
+        <slot>
+          Seu sessão expirou, retorne para a tela de login e faça login novamente.
+        </slot>
+      </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>
+      </div>
+    </div>
+  </div>
+{/if}

src/routes/+layout.svelte

@@ -4,8 +4,12 @@
 	import logo from '$lib/assets/logo.png';
 	import Sidebar from '$lib/layout/SideBar.svelte';
 	import DashboardGuard from '$lib/components/DashboardGuard.svelte';
+	import PopUpToken from '$lib/components/ui/PopUpToken.svelte';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+
+	//necessario adicionar o endpoint para continuar a validacao de token	
+	let popUpTokenVisible = false;
   
 	let { children } = $props();
   
@@ -35,4 +39,7 @@
 		</main>
 	  {/if}
 	{/if}
+	{#if $page.url.pathname === '/dashboard'}
+		<PopUpToken visible={popUpTokenVisible}/>
+	{/if}
   </div>

src/routes/cpr/+page.svelte

@@ -32,7 +32,6 @@
   ];
 
   function handleAddTop() {
-    // ao clicar em "+", mudar para a aba de Registro (index 1) e exibir Tabs + Form
     activeTab = 0;
   }
 
@@ -52,7 +51,6 @@
   function handleCprSave(e) {
     const { value } = e.detail;
     if (selectedRow) {
-      // Atualiza a linha com os dados editados
       data = data.map((r) => (r === selectedRow ? { ...r, ...value } : r));
     }
     handleCprCancel();
@@ -65,19 +63,15 @@
   }
 
   function handleFinalize() {
-    // Aqui você pode adicionar validação dos campos obrigatórios
-    // Por enquanto, apenas volta para a tabela principal
     alert('CPR finalizado com sucesso!');
     activeTab = 4;
   }
 
   function handleCancel() {
-    // Volta para a tabela principal cancelando o processo
     activeTab = 4;
   }
 
   function confirmDelete() {
-    // Remove pelo objeto (referência) para manter simples no exemplo
     data = data.filter((r) => r !== rowToDelete);
     showDeleteConfirm = false;
     rowToDelete = null;

src/routes/trading/+page.svelte

@@ -11,9 +11,11 @@
 
   const orders = writable([]);
 
-  let currentPrice = 125;
+  let currentPrice = 100;
 
   onMount(() => {
+
+    //remover a parte que ele salva no localstorage porque vai ser conectado o endpoint
     if (browser) {
       try {
         const saved = localStorage.getItem('tradingOrders');
@@ -33,7 +35,7 @@
   function formatBRL(n) {
     return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0));
   }
-  function formatEasyCoin(n) {
+  function formatEasyToken(n) {
     return new Intl.NumberFormat('pt-BR', { minimumFractionDigits: 6, maximumFractionDigits: 6 }).format(Number(n || 0));
   }
 
@@ -42,17 +44,17 @@
 
   let buyAmountFiat = '';
   let buyLimitPrice = '';
-  let sellAmountEasyCoin = '';
+  let sellAmountEasyToken = '';
   let sellLimitPrice = '';
 
 
-  $: buyComputedEasyCoin = buyTab === 'market'
+  $: buyComputedEasyToken = buyTab === 'market'
     ? (Number(buyAmountFiat) && currentPrice ? Number(buyAmountFiat) / currentPrice : 0)
     : (Number(buyAmountFiat) && Number(buyLimitPrice) ? Number(buyAmountFiat) / Number(buyLimitPrice) : 0);
 
   $: sellComputedFiat = sellTab === 'market'
-    ? (Number(sellAmountEasyCoin) && currentPrice ? Number(sellAmountEasyCoin) * currentPrice : 0)
-    : (Number(sellAmountEasyCoin) && Number(sellLimitPrice) ? Number(sellAmountEasyCoin) * Number(sellLimitPrice) : 0);
+    ? (Number(sellAmountEasyToken) && currentPrice ? Number(sellAmountEasyToken) * currentPrice : 0)
+    : (Number(sellAmountEasyToken) && Number(sellLimitPrice) ? Number(sellAmountEasyToken) * Number(sellLimitPrice) : 0);
 
   function confirmBuy() {
     const price = buyTab === 'limit' ? Number(buyLimitPrice) : currentPrice;
@@ -66,19 +68,19 @@
 
   function confirmSell() {
     const price = sellTab === 'limit' ? Number(sellLimitPrice) : currentPrice;
-    const amount = Number(sellAmountEasyCoin);
+    const amount = Number(sellAmountEasyToken);
     if (!price || !amount) return;
     const total = amount * price;
     addOrder({ side: 'Venda', price, amount, total, status: 'Aberta', type: sellTab });
-    sellAmountEasyCoin = '';
+    sellAmountEasyToken = '';
     sellLimitPrice = '';
   }
 
   const orderColumns = [
     { key: 'side', label: 'Tipo' },
-    { key: 'price', label: 'Preço (R$)' },
-    { key: 'amount', label: 'Quantidade (EasyCoin)' },
-    { key: 'total', label: 'Total (R$)' },
+    { key: 'price', label: 'EasyCoin' },
+    { key: 'amount', label: 'EasyToken' },
+    { key: 'total', label: 'Total EasyCoin' },
     { key: 'status', label: 'Status' }
   ];
 
@@ -87,16 +89,16 @@ $: pendingSells = $orders.filter((o) => o.side === 'Venda' && o.type === 'limit'
 
 $: displayPendingBuys = pendingBuys.map((o) => ({
   side: o.side,
-  price: formatBRL(o.price),
-  amount: formatEasyCoin(o.amount),
-  total: formatBRL(o.total),
+  price: formatEasyToken(o.price),
+  amount: formatEasyToken(o.amount),
+  total: formatEasyToken(o.total),
   status: o.status
 }));
 
 $: displayPendingSells = pendingSells.map((o) => ({
   side: o.side,
   price: formatBRL(o.price),
-  amount: formatEasyCoin(o.amount),
+  amount: formatEasyToken(o.amount),
   total: formatBRL(o.total),
   status: o.status
 }));