add the complete way to create cpr

src/lib/components/containers/cpr/ContractCpr.svelte

@@ -0,0 +1,84 @@
+<script>
+    let outside = false;
+    let creditOperationContractCode = "";
+    let operationNature = "";
+    let transactionDate = "";
+    let netCreditValue = "";
+    let totalCreditValue = "";
+  </script>
+  
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+  <form class="space-y-4 p-4">
+    <!-- Código Contrato da Operação de Crédito -->
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Código Contrato da Operação de Crédito *</label>
+      <input
+        bind:value={creditOperationContractCode}
+        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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="Digite o código do contrato"
+      />
+    </div>
+
+    <!-- Natureza de Operação -->
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Natureza de Operação *</label>
+      <select
+        bind:value={operationNature}
+        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"
+      >
+        <option value="">Selecione a natureza da operação</option>
+        <option value="financiamento">Financiamento</option>
+        <option value="emprestimo">Empréstimo</option>
+        <option value="antecipacao">Antecipação</option>
+        <option value="desconto">Desconto</option>
+      </select>
+    </div>
+
+    <!-- Data da Transação -->
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data da Transação *</label>
+      <input
+        type="date"
+        bind:value={transactionDate}
+        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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+    </div>
+
+    <!-- Valores em grid de 2 colunas -->
+    <div class="grid grid-cols-2 gap-4">
+      <!-- Valor Líquido do Crédito -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Líquido do Crédito (R$) *</label>
+        <input
+          type="number"
+          step="0.01"
+          min="0"
+          bind:value={netCreditValue}
+          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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="0,00"
+        />
+      </div>
+
+      <!-- Valor Total do Crédito -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor Total do Crédito (R$) *</label>
+        <input
+          type="number"
+          step="0.01"
+          min="0"
+          bind:value={totalCreditValue}
+          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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="0,00"
+        />
+      </div>
+    </div>
+
+    <div class="flex gap-4">
+      <label class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+        <input type="checkbox" bind:checked={outside} class="accent-blue-600" />
+        CPR Externo
+      </label>
+    </div>
+  
+  </form>
+  </div>

src/lib/components/containers/cpr/EmissionCpr.svelte

@@ -0,0 +1,71 @@
+<script>
+    let outside = false;
+    let creditOperationContractCode = "";
+    let operationNature = "";
+    let transactionDate = "";
+    let netCreditValue = "";
+    let totalCreditValue = "";
+    let issuerCompanyName = "";
+    let issueLocation = "";
+    let deliveryDate = "";
+    let type = "";
+  </script>
+  
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+  <form class="space-y-4 p-4">
+
+    <!-- Razão Social do Emissor -->
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Razão Social do Emissor *</label>
+      <input
+        bind:value={issuerCompanyName}
+        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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="Digite a razão social do emissor"
+      />
+    </div>
+
+    <!-- Local de Emissão e Data da Entrega em grid -->
+    <div class="grid grid-cols-2 gap-4">
+      <!-- Local de Emissão -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Local de Emissão *</label>
+        <input
+          bind:value={issueLocation}
+          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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Digite o local de emissão"
+        />
+      </div>
+
+      <!-- Data da Entrega -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Data da Entrega *</label>
+        <input
+          type="date"
+          bind:value={deliveryDate}
+          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 placeholder-gray-400 dark:placeholder-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+    </div>
+
+    <!-- Tipo -->
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tipo *</label>
+      <select
+        bind:value={type}
+        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"
+      >
+        <option value="">Selecione...</option>
+        <option value="fisico">Físico</option>
+        <option value="financeiro">Financeiro</option>
+      </select>
+    </div>
+
+    <div class="flex gap-4">
+      <label class="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+        <input type="checkbox" bind:checked={outside} class="accent-blue-600" />
+        CPR Externo
+      </label>
+    </div>
+  
+  </form>
+  </div>

src/lib/components/containers/cpr/RegisterCpr.svelte

@@ -49,8 +49,5 @@
       </label>
     </div>
   
-    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg">
-      Registrar CPR
-    </button>
   </form>
   </div>

src/lib/components/containers/cpr/Tabs.svelte

@@ -1,26 +1,49 @@
-<script>
-    export let tabs = [];
-    export let active = 0;
-  
-    function selectTab(index) {
-      active = index;
-      const event = new CustomEvent("change", { detail: index });
-      dispatchEvent(event);
-    }
-  </script>
-  
-  <div class="flex border-b border-gray-200">
-    {#each tabs as tab, i}
-      <button
-        class={`px-4 py-2 -mb-px border-b-2 ${
-          i === active
-            ? "border-blue-600 text-blue-600 font-medium"
-            : "border-transparent text-gray-500 hover:text-gray-700"
-        }`}
-        on:click={() => selectTab(i)}
-      >
-        {tab}
-      </button>
-    {/each}
-  </div>
+<script>
+    import { createEventDispatcher } from 'svelte';
+    
+    export let tabs = [];
+    export let active = 0;
+    export let showCloseIcon = false;
+    
+    const dispatch = createEventDispatcher();
+  
+    function selectTab(index) {
+      active = index;
+      const event = new CustomEvent("change", { detail: index });
+      dispatch('change', { detail: index });
+    }
+    
+    function handleClose() {
+      dispatch('close');
+    }
+  </script>
+  
+  <div class="flex border-b border-gray-200 justify-between items-center">
+    <div class="flex">
+      {#each tabs as tab, i}
+        <button
+          class={`px-4 py-2 -mb-px border-b-2 ${
+            i === active
+              ? "border-blue-600 text-blue-600 font-medium"
+              : "border-transparent text-gray-500 hover:text-gray-700"
+          }`}
+          on:click={() => selectTab(i)}
+        >
+          {tab}
+        </button>
+      {/each}
+    </div>
+    
+    {#if showCloseIcon}
+      <button
+        class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
+        on:click={handleClose}
+        title="Cancelar criação"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    {/if}
+  </div>
   

src/routes/cpr/+page.svelte

@@ -3,9 +3,11 @@
   import Tabs from '$lib/components/containers/cpr/Tabs.svelte';
   import RegisterCpr from '$lib/components/containers/cpr/RegisterCpr.svelte';
   import Tables from '$lib/components/containers/Tables.svelte';
+  import ContractCpr from '$lib/components/containers/cpr/ContractCpr.svelte';
+  import EmissionCpr from '$lib/components/containers/cpr/EmissionCpr.svelte';
 
   const breadcrumb = [{ label: 'Início' }, { label: 'CPR', active: true }];
-  let activeTab = 0;
+  let activeTab = 4;
   const tabs = ["Contrato", "Registro", "Emissão"];
 
   let columns = [
@@ -20,7 +22,7 @@
 
   function handleAddTop() {
     // Ao clicar em "+", mudar para a aba de Registro (index 1) e exibir Tabs + Form
-    activeTab = 1;
+    activeTab = 0;
   }
 
   function handleDeleteRow(e) {
@@ -36,6 +38,18 @@
       r === row ? { ...r, status: r.status === 'Disponível' ? 'Indisponível' : 'Disponível' } : r
     );
   }
+
+  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;
+  }
 </script>
 
 <div>
@@ -43,7 +57,7 @@
   <div class="p-4">
     <div class="max-w-6xl mx-auto mt-4">
     
-      {#if activeTab === 0}
+      {#if activeTab === 4}
         <Tables
           title="Produtos"
           columns={columns}
@@ -52,11 +66,66 @@
           on:editRow={handleEditRow}
           on:deleteRow={handleDeleteRow}
         />
+      {:else if activeTab === 0}
+      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
+      <div class="mt-4">
+        <ContractCpr />
+      </div>
+      <!-- Navigation Controls -->
+      <div class="flex justify-between mt-6">
+        <button 
+          class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed" 
+          disabled
+        >
+          Anterior
+        </button>
+        <button 
+          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          on:click={() => activeTab = 1}
+        >
+          Próximo
+        </button>
+      </div>
       {:else if activeTab === 1}
-      <Tabs {tabs} bind:active={activeTab} />
+      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
       <div class="mt-4">
         <RegisterCpr />
       </div>
+      <!-- Navigation Controls -->
+      <div class="flex justify-between mt-6">
+        <button 
+          class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
+          on:click={() => activeTab = 0}
+        >
+          Anterior
+        </button>
+        <button 
+          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          on:click={() => activeTab = 2}
+        >
+          Próximo
+        </button>
+      </div>
+      {:else if activeTab === 2}
+      <Tabs {tabs} bind:active={activeTab} showCloseIcon={true} on:close={handleCancel} />
+      <div class="mt-4">
+        <EmissionCpr />
+      </div>
+      <!-- Navigation Controls -->
+      <div class="flex justify-between mt-6">
+        <button 
+          class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
+          on:click={() => activeTab = 1}
+        >
+          Anterior
+        </button>
+        <button 
+          class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold"
+          on:click={handleFinalize}
+        >
+          Finalizar CPR
+        </button>
+      </div>
       {/if}
     </div>
   </div>