toeasy-front/src/lib/components/commodities/cpr/RegisterCpr.svelte

<script>
  export let formData = {};
  export let onFieldChange = () => {};
  export let requiredFields = new Set();

  const indicatorOptions = [
    { label: 'Selecione...', value: '' },
    { label: 'Sim', value: 'S' },
    { label: 'Não', value: 'N' }
  ];

  const sections = [
    {
      title: 'Informações Gerais',
      description: 'Dados básicos da CPR e status cadastral.',
      columns: 2,
      fields: [
        { key: 'cpr_type_code', label: 'Tipo da CPR' },
        // { key: 'cpr_internal_control_number', label: 'Controle Interno' },
        // { key: 'cpr_isin_code', label: 'Código ISIN' },
        // { key: 'cpr_reference_date', label: 'Data de Referência', type: 'date' },
        { key: 'cpr_electronic_emission_indicator', label: 'Emissão Eletrônica', type: 'select', options: indicatorOptions },
        { key: 'cpr_automatic_expiration_indicator', label: 'Expiração Automática', type: 'select', options: indicatorOptions }
      ]
    },
    {
      title: 'Contas OTC e Liquidação',
      description: 'Vinculação das contas na câmara de registro e liquidação.',
      columns: 2,
      fields: [
        { key: 'cpr_otc_register_account_code', label: 'Conta OTC de Registro' },
        { key: 'cpr_otc_payment_agent_account_code', label: 'Conta OTC Agente de Pagamento' },
        { key: 'cpr_otc_custodian_account_code', label: 'Conta OTC Custódia' },
        { key: 'cpr_otc_favored_account_code', label: 'Conta OTC Favorecido' },
        { key: 'cpr_settlement_modality_type_code', label: 'Modalidade de Liquidação' },
        { key: 'cpr_otc_settlement_bank_account_code', label: 'Conta Bancária de Liquidação' }
      ]
    },
    // {
    //   title: 'Depósito e Garantias',
    //   description: 'Detalhes complementares sobre garantias e depósitos.',
    //   columns: 3,
    //   fields: [
    //     // { key: 'cpr_ballast_type_code', label: 'Tipo de lastro' },
    //     // { key: 'cpr_lot_number', label: 'Número do lote' },
    //     // { key: 'cpr_ballast_quantity', label: 'Quantidade do lastro' },
    //     // { key: 'cpr_currency_code', label: 'Código da moeda' },
    //     // { key: 'cpr_transaction_identification', label: 'Identificação da operação' },
    //     // { key: 'cpr_guarantee_limit_type_code', label: 'Tipo limite garantia' },
    //     // { key: 'cpr_mother_code', label: 'Código mãe' },
    //     // { key: 'cpr_deposit_quantity', label: 'Quantidade depositada' },
    //     // { key: 'cpr_deposit_unit_price_value', label: 'Valor unitário depósito' },
    //     // { key: 'cpr_deposit_person_type_acronym', label: 'Tipo pessoa depósito' },
    //     // { key: 'cpr_deposit_document_number', label: 'Documento do depositante' }
    //   ]
    // },
    // {
    //   title: 'Eventos e operação',
    //   description: 'Campos relacionados aos eventos e códigos regulatórios.',
    //   columns: 2,
    //   fields: [
    //     // { key: 'cpr_event_type_code', label: 'Tipo do evento' },
    //     // { key: 'cpr_event_original_date', label: 'Data original do evento', type: 'date' },
    //     // { key: 'cpr_operation_modality_type_code', label: 'Modalidade da operação' },
    //     // { key: 'cpr_bacen_reference_code', label: 'Código Bacen' },
    //     // { key: 'cpr_children_codes', label: 'Códigos filhos (separados por vírgula)', type: 'textarea' }
    //   ]
    // },
    {
      title: 'SCR e finalidades',
      description: 'Dados necessários para reporte ao SCR.',
      columns: 2,
      fields: [
        { key: 'cpr_scr_type_code', label: 'Tipo SCR' },
        { key: 'cpr_finality_code', label: 'Finalidade' },
        // { key: 'cpr_scr_customer_detail', label: 'Detalhe do cliente' },
        // { key: 'cpr_scr_person_type_acronym', label: 'Tipo de pessoa SCR' },
        // { key: 'cpr_scr_document_number', label: 'Documento do SCR' },
        { key: 'cpr_contract_code', label: 'Código do contrato principal' }
      ]
    }
  ];

  function getValue(key) {
    return formData?.[key] ?? '';
  }

  function handleInput(key) {
    return (event) => {
      onFieldChange(key, event.currentTarget.value);
    };
  }
</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-6 p-4">
    {#each sections as section}
      <div class="space-y-3">
        <div>
          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{section.title}</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">{section.description}</p>
        </div>
        <div class={`grid gap-4 ${section.columns === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2'} grid-cols-1`}>
          {#each section.fields as field}
            <div class="space-y-1">
              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {field.label}
                {#if requiredFields?.has(field.key)}
                  <span class="text-red-500">*</span>
                {/if}
              </label>
              {#if field.type === 'date'}
                <input
                  type="date"
                  class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={getValue(field.key)}
                  on:input={handleInput(field.key)}
                  required={requiredFields?.has(field.key)}
                />
              {:else if field.type === 'textarea'}
                <textarea
                  rows="3"
                  class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  on:input={handleInput(field.key)}
                  required={requiredFields?.has(field.key)}
                >{getValue(field.key)}</textarea>
              {:else if field.type === 'select'}
                <select
                  class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={getValue(field.key)}
                  on:change={handleInput(field.key)}
                  required={requiredFields?.has(field.key)}
                >
                  {#each field.options as option}
                    <option value={option.value}>{option.label}</option>
                  {/each}
                </select>
              {:else}
                <input
                  type="text"
                  class="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                  value={getValue(field.key)}
                  on:input={handleInput(field.key)}
                  required={requiredFields?.has(field.key)}
                />
              {/if}
            </div>
          {/each}
        </div>
      </div>
    {/each}
  </form>
</div>