From f0c0a984bb7f720cbe82345b9bde792604c8dab3 Mon Sep 17 00:00:00 2001
From: Gustavo Soares <gustavo.fe.soares@gmail.com>
Date: Thu, 30 Oct 2025 09:46:44 -0300
Subject: [PATCH 1/2] feat: voltando versao varal de fases

---
 .../transferencia/MonitoramentoCard.vue       | 179 +++++++++---------
 .../transferencia/MonitoramentoCards.vue      |   6 +-
 .../transferencia/VaralDeEtapas.vue           |   7 +-
 3 files changed, 92 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/transferencia/MonitoramentoCard.vue b/frontend/src/components/transferencia/MonitoramentoCard.vue
index 2d79c4cbc7..4e11d5e17a 100644
--- a/frontend/src/components/transferencia/MonitoramentoCard.vue
+++ b/frontend/src/components/transferencia/MonitoramentoCard.vue
@@ -29,73 +29,100 @@ const classeDoStatus = computed(() => {
   return 'card-monitoramento--em-curso';
 });
 
-const recursoItem = computed(() => {
-  const { recurso } = props;
-
-  const columns = [
-    { label: 'Órgão', valor: recurso.orgao_gestor.sigla },
-    { label: 'Nome', valor: recurso.nome },
-    { label: 'Valor do repasse', valor: `R$ ${dinheiro(recurso.valor_total)}` },
-  ];
-
-  if (
-    recurso.historico_status.length > 0
-    && recurso.historico_status[0].nome_responsavel
-  ) {
-    columns.push({ label: 'Responsável', valor: recurso.historico_status[0].nome_responsavel });
-  }
-
-  if (recurso.parlamentares.length) {
-    columns.push({ label: 'Parlamentar(es)', valor: combinadorDeListas(recurso.parlamentares, ', ', 'parlamentar.nome') });
-  }
-
-  columns.push({
-    class: 'card-monitoramento__dl-group--status',
-    label: 'Status - Em',
-    valor: `${recurso.status_atual}\n- ${dateToShortDate(recurso.historico_status?.[0]?.data_troca) || ''}`,
-  });
-
-  if (recurso.historico_status.length > 0) {
-    columns.push({
-      label: 'Motivo',
-      valor: recurso.historico_status[0].motivo,
-    });
-  }
-
-  return columns;
-});
-
 </script>
 <template>
   <article
     class="card-monitoramento"
     :class="classeDoStatus"
   >
-    <dl class="card-monitoramento__lista">
-      <div
-        v-for="(item, itemIndex) in recursoItem"
-        :key="`card-monitoramento--${itemIndex}`"
-        class="card-monitoramento__dl-group"
-        :class="item.class"
-      >
+    <dl>
+      <div class="card-monitoramento__dl-group">
+        <dt class="t13 w300">
+          Órgão
+        </dt>
+        <dd class="t20 w400">
+          {{ recurso.orgao_gestor.sigla }}
+        </dd>
+      </div>
+
+      <div class="card-monitoramento__dl-group">
+        <dt class="t13 w300">
+          Nome
+        </dt>
+        <dd class="t20 w400">
+          {{ recurso.nome }}
+        </dd>
+      </div>
+
+      <div class="card-monitoramento__dl-group">
         <dt class="t13 w300">
-          {{ item.label }}
+          Valor do repasse
         </dt>
+        <dd class="t20 w400">
+          R$ {{ dinheiro(recurso.valor_total) }}
+        </dd>
+      </div>
 
-        <dd class="w700">
-          {{ item.valor }}
+      <template
+        v-if="recurso.historico_status.length > 0
+          && recurso.historico_status[0].nome_responsavel"
+      >
+        <div class="card-monitoramento__dl-group">
+          <dt class="t13 w300">
+            Responsável
+          </dt>
+          <dd class="t20 w400">
+            {{ recurso.historico_status[0].nome_responsavel }}
+          </dd>
+        </div>
+      </template>
+
+      <template v-if="recurso.parlamentares.length">
+        <div class="card-monitoramento__dl-group">
+          <dt class="t13 w300">
+            Parlamentar(es)
+          </dt>
+          <dd class="t20 w400">
+            {{ combinadorDeListas(recurso.parlamentares, ', ', 'parlamentar.nome') }}
+          </dd>
+        </div>
+      </template>
+
+      <div class="card-monitoramento__dl-group card-monitoramento__dl-group--status">
+        <dt class="t13 w300">
+          Status - Em
+        </dt>
+        <dd class="t20 w400">
+          {{ recurso.status_atual }}
+          {{ '- ' + dateToShortDate(recurso.historico_status?.[0]?.data_troca) || '' }}
         </dd>
       </div>
+
+      <template
+        v-if="recurso.historico_status.length > 0
+          && recurso.historico_status[0].motivo"
+      >
+        <div class="card-monitoramento__dl-group">
+          <dt class="t13 w300">
+            Motivo
+          </dt>
+          <dd class="t20 w400">
+            {{ recurso.historico_status[0].motivo }}
+          </dd>
+        </div>
+      </template>
     </dl>
   </article>
 </template>
 <style scoped>
 .card-monitoramento {
-  container-type: inline-size;
-
   --cor-de-tema: #ffda00;
 
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 150px;
   padding: 2rem 1.5rem;
   border-radius: 30px 5px 30px 5px;
   background-color: #fafafa;
@@ -106,31 +133,20 @@ const recursoItem = computed(() => {
   &::after {
     content: '';
     position: absolute;
-
-    width: 20%;
+    top: -4px;
+    left: 37%;
+    right: 7%;
     height: 8px;
     border-radius: 2px;
     background-color: var(--cor-de-tema);
     box-shadow: 0 2px 3px -1px rgba(0,0,0,0.2);
   }
 
-  &::before {
-    top: -4px;
-    right: 5%;
-  }
-
   &::after {
+    top: auto;
     bottom: -4px;
-    left: 4%;
-  }
-}
-
-.card-monitoramento__lista {
-  display: flex;
-  flex-direction: column;
-
-  @container (width > 600px) {
-    flex-direction: row;
+    left: 7%;
+    right: 37%;
   }
 }
 
@@ -153,34 +169,11 @@ const recursoItem = computed(() => {
 .card-monitoramento__dl-group {
   --dl-margin-like-space: 0.8rem;
 
-  border-bottom: 1px solid #d9d9d9;
-  padding-bottom: var(--dl-margin-like-space);
-  margin-bottom: var(--dl-margin-like-space);
-
-  &:last-child {
-    margin-bottom: initial;
-    padding-bottom: initial;
-    border-bottom: initial;
-  }
-
-  @container (width > 600px) {
-    min-width: 0;
-    max-width: 230px;
-
-    border-bottom: initial;
-    padding-bottom: initial;
-    margin-bottom: initial;
-
-    border-right: 1px solid #d9d9d9;
-    padding-right: var(--dl-margin-like-space);
-    margin-right: var(--dl-margin-like-space);
-
-    &:last-child {
-      margin-right: initial;
-      padding-right: initial;
-      border-right: initial;
-    }
-  }
+  display: grid;
+  gap: 0.3rem;
+  border-block-end: 1px solid #d9d9d9;
+  padding-block-end: var(--dl-margin-like-space);
+  margin-block-end: var(--dl-margin-like-space);
 }
 
 .card-monitoramento__item-com-marcador {
diff --git a/frontend/src/components/transferencia/MonitoramentoCards.vue b/frontend/src/components/transferencia/MonitoramentoCards.vue
index 82540eff92..e96f2e925e 100644
--- a/frontend/src/components/transferencia/MonitoramentoCards.vue
+++ b/frontend/src/components/transferencia/MonitoramentoCards.vue
@@ -76,9 +76,9 @@ const listaOrdenada = computed(() => orderBy(lista.value, (recurso) => {
 </template>
 <style scoped>
 .lista-cards {
-  display: flex;
-  flex-direction: column;
-
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 285px;
   gap: 3rem;
   overflow-x: auto;
 
diff --git a/frontend/src/components/transferencia/VaralDeEtapas.vue b/frontend/src/components/transferencia/VaralDeEtapas.vue
index 1f8a5ac761..d7713715a2 100644
--- a/frontend/src/components/transferencia/VaralDeEtapas.vue
+++ b/frontend/src/components/transferencia/VaralDeEtapas.vue
@@ -115,7 +115,7 @@ function formatarTexto(texto) {
       </template>
       <template #botao>
         <button
-          v-if="workflow && temPermissãoPara('CadastroWorkflows.editar')"
+          v-if="temPermissãoPara('CadastroWorkflows.editar')"
           type="button"
           class="btn bgnone outline tcprimary"
           @click="abrirConfigurarWorkflow"
@@ -141,7 +141,7 @@ function formatarTexto(texto) {
         v-else
         ref="listaDeEtapas"
         role="tablist"
-        class="flex varal-etapas mt05 pb0 mb0"
+        class="flex pb1 varal-etapas"
       >
         <li
           v-for="(item, index) in workflow.fluxo"
@@ -400,7 +400,6 @@ function formatarTexto(texto) {
   justify-items: start;
   gap: 1.2rem;
   position: relative;
-  min-height: 170px;
   padding: 1rem 6rem 1.5rem 1.5rem;
 
   &::before {
@@ -456,7 +455,7 @@ function formatarTexto(texto) {
   padding-inline: 1rem;
   text-align: start;
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 1.4rem;
   width: max-content;
 }
 

From 368ad757a52aeb1b9677b6dab73378dd258c47d6 Mon Sep 17 00:00:00 2001
From: Gustavo Soares <gustavo.fe.soares@gmail.com>
Date: Thu, 30 Oct 2025 09:49:00 -0300
Subject: [PATCH 2/2] feat: mudando orientacao varal de etapas

---
 .../transferencia/MonitoramentoCard.vue       | 179 +++++++++---------
 .../transferencia/MonitoramentoCards.vue      |   6 +-
 .../transferencia/VaralDeEtapas.vue           |   7 +-
 3 files changed, 100 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/transferencia/MonitoramentoCard.vue b/frontend/src/components/transferencia/MonitoramentoCard.vue
index 4e11d5e17a..2d79c4cbc7 100644
--- a/frontend/src/components/transferencia/MonitoramentoCard.vue
+++ b/frontend/src/components/transferencia/MonitoramentoCard.vue
@@ -29,100 +29,73 @@ const classeDoStatus = computed(() => {
   return 'card-monitoramento--em-curso';
 });
 
+const recursoItem = computed(() => {
+  const { recurso } = props;
+
+  const columns = [
+    { label: 'Órgão', valor: recurso.orgao_gestor.sigla },
+    { label: 'Nome', valor: recurso.nome },
+    { label: 'Valor do repasse', valor: `R$ ${dinheiro(recurso.valor_total)}` },
+  ];
+
+  if (
+    recurso.historico_status.length > 0
+    && recurso.historico_status[0].nome_responsavel
+  ) {
+    columns.push({ label: 'Responsável', valor: recurso.historico_status[0].nome_responsavel });
+  }
+
+  if (recurso.parlamentares.length) {
+    columns.push({ label: 'Parlamentar(es)', valor: combinadorDeListas(recurso.parlamentares, ', ', 'parlamentar.nome') });
+  }
+
+  columns.push({
+    class: 'card-monitoramento__dl-group--status',
+    label: 'Status - Em',
+    valor: `${recurso.status_atual}\n- ${dateToShortDate(recurso.historico_status?.[0]?.data_troca) || ''}`,
+  });
+
+  if (recurso.historico_status.length > 0) {
+    columns.push({
+      label: 'Motivo',
+      valor: recurso.historico_status[0].motivo,
+    });
+  }
+
+  return columns;
+});
+
 </script>
 <template>
   <article
     class="card-monitoramento"
     :class="classeDoStatus"
   >
-    <dl>
-      <div class="card-monitoramento__dl-group">
-        <dt class="t13 w300">
-          Órgão
-        </dt>
-        <dd class="t20 w400">
-          {{ recurso.orgao_gestor.sigla }}
-        </dd>
-      </div>
-
-      <div class="card-monitoramento__dl-group">
-        <dt class="t13 w300">
-          Nome
-        </dt>
-        <dd class="t20 w400">
-          {{ recurso.nome }}
-        </dd>
-      </div>
-
-      <div class="card-monitoramento__dl-group">
-        <dt class="t13 w300">
-          Valor do repasse
-        </dt>
-        <dd class="t20 w400">
-          R$ {{ dinheiro(recurso.valor_total) }}
-        </dd>
-      </div>
-
-      <template
-        v-if="recurso.historico_status.length > 0
-          && recurso.historico_status[0].nome_responsavel"
+    <dl class="card-monitoramento__lista">
+      <div
+        v-for="(item, itemIndex) in recursoItem"
+        :key="`card-monitoramento--${itemIndex}`"
+        class="card-monitoramento__dl-group"
+        :class="item.class"
       >
-        <div class="card-monitoramento__dl-group">
-          <dt class="t13 w300">
-            Responsável
-          </dt>
-          <dd class="t20 w400">
-            {{ recurso.historico_status[0].nome_responsavel }}
-          </dd>
-        </div>
-      </template>
-
-      <template v-if="recurso.parlamentares.length">
-        <div class="card-monitoramento__dl-group">
-          <dt class="t13 w300">
-            Parlamentar(es)
-          </dt>
-          <dd class="t20 w400">
-            {{ combinadorDeListas(recurso.parlamentares, ', ', 'parlamentar.nome') }}
-          </dd>
-        </div>
-      </template>
-
-      <div class="card-monitoramento__dl-group card-monitoramento__dl-group--status">
         <dt class="t13 w300">
-          Status - Em
+          {{ item.label }}
         </dt>
-        <dd class="t20 w400">
-          {{ recurso.status_atual }}
-          {{ '- ' + dateToShortDate(recurso.historico_status?.[0]?.data_troca) || '' }}
+
+        <dd class="w700">
+          {{ item.valor }}
         </dd>
       </div>
-
-      <template
-        v-if="recurso.historico_status.length > 0
-          && recurso.historico_status[0].motivo"
-      >
-        <div class="card-monitoramento__dl-group">
-          <dt class="t13 w300">
-            Motivo
-          </dt>
-          <dd class="t20 w400">
-            {{ recurso.historico_status[0].motivo }}
-          </dd>
-        </div>
-      </template>
     </dl>
   </article>
 </template>
 <style scoped>
 .card-monitoramento {
+  container-type: inline-size;
+
   --cor-de-tema: #ffda00;
 
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: 150px;
   padding: 2rem 1.5rem;
   border-radius: 30px 5px 30px 5px;
   background-color: #fafafa;
@@ -133,20 +106,31 @@ const classeDoStatus = computed(() => {
   &::after {
     content: '';
     position: absolute;
-    top: -4px;
-    left: 37%;
-    right: 7%;
+
+    width: 20%;
     height: 8px;
     border-radius: 2px;
     background-color: var(--cor-de-tema);
     box-shadow: 0 2px 3px -1px rgba(0,0,0,0.2);
   }
 
+  &::before {
+    top: -4px;
+    right: 5%;
+  }
+
   &::after {
-    top: auto;
     bottom: -4px;
-    left: 7%;
-    right: 37%;
+    left: 4%;
+  }
+}
+
+.card-monitoramento__lista {
+  display: flex;
+  flex-direction: column;
+
+  @container (width > 600px) {
+    flex-direction: row;
   }
 }
 
@@ -169,11 +153,34 @@ const classeDoStatus = computed(() => {
 .card-monitoramento__dl-group {
   --dl-margin-like-space: 0.8rem;
 
-  display: grid;
-  gap: 0.3rem;
-  border-block-end: 1px solid #d9d9d9;
-  padding-block-end: var(--dl-margin-like-space);
-  margin-block-end: var(--dl-margin-like-space);
+  border-bottom: 1px solid #d9d9d9;
+  padding-bottom: var(--dl-margin-like-space);
+  margin-bottom: var(--dl-margin-like-space);
+
+  &:last-child {
+    margin-bottom: initial;
+    padding-bottom: initial;
+    border-bottom: initial;
+  }
+
+  @container (width > 600px) {
+    min-width: 0;
+    max-width: 230px;
+
+    border-bottom: initial;
+    padding-bottom: initial;
+    margin-bottom: initial;
+
+    border-right: 1px solid #d9d9d9;
+    padding-right: var(--dl-margin-like-space);
+    margin-right: var(--dl-margin-like-space);
+
+    &:last-child {
+      margin-right: initial;
+      padding-right: initial;
+      border-right: initial;
+    }
+  }
 }
 
 .card-monitoramento__item-com-marcador {
diff --git a/frontend/src/components/transferencia/MonitoramentoCards.vue b/frontend/src/components/transferencia/MonitoramentoCards.vue
index e96f2e925e..82540eff92 100644
--- a/frontend/src/components/transferencia/MonitoramentoCards.vue
+++ b/frontend/src/components/transferencia/MonitoramentoCards.vue
@@ -76,9 +76,9 @@ const listaOrdenada = computed(() => orderBy(lista.value, (recurso) => {
 </template>
 <style scoped>
 .lista-cards {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 285px;
+  display: flex;
+  flex-direction: column;
+
   gap: 3rem;
   overflow-x: auto;
 
diff --git a/frontend/src/components/transferencia/VaralDeEtapas.vue b/frontend/src/components/transferencia/VaralDeEtapas.vue
index d7713715a2..1f8a5ac761 100644
--- a/frontend/src/components/transferencia/VaralDeEtapas.vue
+++ b/frontend/src/components/transferencia/VaralDeEtapas.vue
@@ -115,7 +115,7 @@ function formatarTexto(texto) {
       </template>
       <template #botao>
         <button
-          v-if="temPermissãoPara('CadastroWorkflows.editar')"
+          v-if="workflow && temPermissãoPara('CadastroWorkflows.editar')"
           type="button"
           class="btn bgnone outline tcprimary"
           @click="abrirConfigurarWorkflow"
@@ -141,7 +141,7 @@ function formatarTexto(texto) {
         v-else
         ref="listaDeEtapas"
         role="tablist"
-        class="flex pb1 varal-etapas"
+        class="flex varal-etapas mt05 pb0 mb0"
       >
         <li
           v-for="(item, index) in workflow.fluxo"
@@ -400,6 +400,7 @@ function formatarTexto(texto) {
   justify-items: start;
   gap: 1.2rem;
   position: relative;
+  min-height: 170px;
   padding: 1rem 6rem 1.5rem 1.5rem;
 
   &::before {
@@ -455,7 +456,7 @@ function formatarTexto(texto) {
   padding-inline: 1rem;
   text-align: start;
   font-weight: 700;
-  font-size: 1.4rem;
+  font-size: 1rem;
   width: max-content;
 }