From 5d0dc3b367087544eb97abf6d47664a132836566 Mon Sep 17 00:00:00 2001
From: Leon <leonmoreira199@gmail.com>
Date: Thu, 5 Mar 2026 15:31:04 -0300
Subject: [PATCH] feat: teste

---
 src/app/pages/geral/geral.html | 84 ++++++++++++++++++++++++++--------
 src/app/pages/geral/geral.scss | 12 +++--
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/app/pages/geral/geral.html b/src/app/pages/geral/geral.html
index e2c39ec..6ba0955 100644
--- a/src/app/pages/geral/geral.html
+++ b/src/app/pages/geral/geral.html
@@ -1693,8 +1693,8 @@
 
     <div class="modal-body modern-body bg-light-gray" *ngIf="detailData; else detailLoading">
       <div class="details-dashboard">
-        <div class="dashboard-column">
-          <div class="detail-box h-100">
+        <ng-template #detailIdentificacaoCard>
+          <div class="detail-box">
             <div class="box-header justify-content-center">
               <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
             </div>
@@ -1720,6 +1720,34 @@
                   <span class="lbl">Setor</span>
                   <span class="val">{{ detailData.setorNome || '-' }}</span>
                 </div>
+                <div class="info-item">
+                  <span class="lbl">Item</span>
+                  <span class="val">{{ detailData.item }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Chip (ICCID)</span>
+                  <span class="val small-text">{{ detailData.chip || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="lbl">Tipo de Chip</span>
+                  <span class="val">{{ detailData.tipoDeChip || '-' }}</span>
+                </div>
+                <div class="info-item" *ngIf="isClientRestricted">
+                  <span class="lbl">Franquia Line</span>
+                  <span class="val">{{ formatFranquia(detailData.franquiaLine) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template #detailAparelhoCard>
+          <div class="detail-box">
+            <div class="box-header justify-content-center">
+              <span><i class="bi bi-phone me-2"></i> Aparelho</span>
+            </div>
+            <div class="box-body compact-padding">
+              <div class="info-grid compact-gap">
                 <div class="info-item span-2">
                   <span class="lbl">Aparelho</span>
                   <span class="val">{{ detailData.aparelhoNome || '-' }}</span>
@@ -1758,25 +1786,22 @@
                     </ng-template>
                   </span>
                 </div>
-                <div class="info-item">
-                  <span class="lbl">Item</span>
-                  <span class="val">{{ detailData.item }}</span>
-                </div>
-                <div class="info-item">
-                  <span class="lbl">Chip (ICCID)</span>
-                  <span class="val small-text">{{ detailData.chip || '-' }}</span>
-                </div>
-                <div class="info-item">
-                  <span class="lbl">Tipo de Chip</span>
-                  <span class="val">{{ detailData.tipoDeChip || '-' }}</span>
-                </div>
-                <div class="info-item" *ngIf="isClientRestricted">
-                  <span class="lbl">Franquia Line</span>
-                  <span class="val">{{ formatFranquia(detailData.franquiaLine) }}</span>
-                </div>
               </div>
             </div>
           </div>
+        </ng-template>
+
+        <div class="dashboard-column d-flex flex-column gap-2" *ngIf="!isClientRestricted">
+          <ng-container *ngTemplateOutlet="detailIdentificacaoCard"></ng-container>
+          <ng-container *ngTemplateOutlet="detailAparelhoCard"></ng-container>
+        </div>
+
+        <div class="dashboard-column" *ngIf="isClientRestricted">
+          <ng-container *ngTemplateOutlet="detailIdentificacaoCard"></ng-container>
+        </div>
+
+        <div class="dashboard-column" *ngIf="isClientRestricted">
+          <ng-container *ngTemplateOutlet="detailAparelhoCard"></ng-container>
         </div>
 
         <div class="dashboard-column d-flex flex-column gap-2" *ngIf="!isClientRestricted">
@@ -1964,7 +1989,7 @@
         <div class="edit-sections" *ngIf="isClientRestricted">
           <details open class="detail-box">
             <summary class="box-header">
-              <span><i class="bi bi-person-badge me-2"></i> Dados Permitidos para Cliente</span>
+              <span><i class="bi bi-person-badge me-2"></i> Identificação</span>
               <i class="bi bi-chevron-down ms-auto transition-icon"></i>
             </summary>
             <div class="box-body">
@@ -1985,6 +2010,17 @@
                   <label>Centro de Custos</label>
                   <input class="form-control form-control-sm" [(ngModel)]="editModel.centroDeCustos" />
                 </div>
+              </div>
+            </div>
+          </details>
+
+          <details open class="detail-box">
+            <summary class="box-header">
+              <span><i class="bi bi-phone me-2"></i> Aparelho</span>
+              <i class="bi bi-chevron-down ms-auto transition-icon"></i>
+            </summary>
+            <div class="box-body">
+              <div class="form-grid">
                 <div class="form-field span-2">
                   <label>Aparelho (Nome)</label>
                   <input class="form-control form-control-sm" [(ngModel)]="editModel.aparelhoNome" />
@@ -2043,7 +2079,15 @@
                 <div class="form-field"><label>Usuário</label><input class="form-control form-control-sm" [(ngModel)]="editModel.usuario" /></div>
                 <div class="form-field"><label>Centro de Custos</label><input class="form-control form-control-sm" [(ngModel)]="editModel.centroDeCustos" /></div>
                 <div class="form-field"><label>Setor</label><input class="form-control form-control-sm" [(ngModel)]="editModel.setorNome" /></div>
-                <div class="form-field"><label>Aparelho (Nome)</label><input class="form-control form-control-sm" [(ngModel)]="editModel.aparelhoNome" /></div>
+              </div>
+            </div>
+          </details>
+
+          <details open class="detail-box">
+            <summary class="box-header"><span><i class="bi bi-phone me-2"></i> Aparelho</span><i class="bi bi-chevron-down ms-auto transition-icon"></i></summary>
+            <div class="box-body">
+              <div class="form-grid">
+                <div class="form-field span-2"><label>Aparelho (Nome)</label><input class="form-control form-control-sm" [(ngModel)]="editModel.aparelhoNome" /></div>
                 <div class="form-field"><label>Aparelho (Cor)</label><input class="form-control form-control-sm" [(ngModel)]="editModel.aparelhoCor" /></div>
                 <div class="form-field"><label>Aparelho (IMEI)</label><input class="form-control form-control-sm" [(ngModel)]="editModel.aparelhoImei" /></div>
                 <div class="form-field span-2">
diff --git a/src/app/pages/geral/geral.scss b/src/app/pages/geral/geral.scss
index c1f9f1e..e8dda84 100644
--- a/src/app/pages/geral/geral.scss
+++ b/src/app/pages/geral/geral.scss
@@ -518,12 +518,18 @@
 .modal-body .box-body { overflow: visible; }
 .modal-xl-custom { width: min(1100px, 95vw); max-height: 85vh; }
 .modal-card.modal-client-detail {
-  width: min(560px, 95vw);
+  width: min(980px, 96vw);
 }
 .modal-card.modal-client-detail .details-dashboard {
-  grid-template-columns: 1fr;
-  max-width: 520px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  max-width: 940px;
   margin: 0 auto;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+    max-width: 520px;
+  }
 }
 .modal-card.modal-create { width: min(1280px, 96vw); max-height: 92vh; }
 .modal-card.modal-create.batch-mode { width: min(1560px, 99vw); }