From 2a40f631427ac0bf0d1f0cb8e854215f77ad51e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=9BGabriel=20Wodtke?= <gabrielwodtke28@gmail.com>
Date: Sat, 4 Apr 2026 19:34:30 -0300
Subject: [PATCH 1/2] =?UTF-8?q?=C2=9BFeat:=20CRUD=20de=20areas=20no=20pain?=
 =?UTF-8?q?el=20do=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/admin/admin.component.ts | 896 +++++++++++++++-----
 1 file changed, 693 insertions(+), 203 deletions(-)

diff --git a/src/app/components/admin/admin.component.ts b/src/app/components/admin/admin.component.ts
index d03a08a..8c6766f 100644
--- a/src/app/components/admin/admin.component.ts
+++ b/src/app/components/admin/admin.component.ts
@@ -1,13 +1,21 @@
-import { Component, OnInit, OnDestroy, inject, signal, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { CompetencyService } from '../../services/competency.service';
-import { Competency, Resource } from '../../models/competency.model';
-
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  inject,
+  signal,
+  ChangeDetectionStrategy,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
+import { Subscription } from "rxjs";
+import { CompetencyService } from "../../services/competency.service";
+import { Competency, Resource } from "../../models/competency.model";
+import { add_new_area } from "../../models/competency.model";
+import { doc } from "firebase/firestore";
 @Component({
-  selector: 'app-admin',
+  selector: "app-admin",
   standalone: true,
   imports: [CommonModule, FormsModule, RouterLink],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,14 +28,16 @@ import { Competency, Resource } from '../../models/competency.model';
         </div>
         <div class="header-actions">
           <button class="btn-save" (click)="saveMap()" [disabled]="saving()">
-            {{ saving() ? '⏳ Salvando...' : '💾 Salvar Alterações' }}
+            {{ saving() ? "⏳ Salvando..." : "💾 Salvar Alterações" }}
           </button>
           <a routerLink="/" class="btn-secondary">← Voltar ao Mapa</a>
         </div>
       </div>
 
       @if (saved()) {
-        <div class="toast success">✅ Mapa salvo com sucesso! Todos os alunos já verão as mudanças.</div>
+        <div class="toast success">
+          ✅ Mapa salvo com sucesso! Todos os alunos já verão as mudanças.
+        </div>
       }
 
       <!-- Árvore de competências -->
@@ -40,10 +50,113 @@ import { Competency, Resource } from '../../models/competency.model';
               class="nav-item"
               [class.active]="selectedArea()?.id === area.id"
               [style.border-left-color]="area.color"
-              (click)="selectArea(area)">
+              (click)="selectArea(area)"
+            >
               {{ area.icon }} {{ area.name }}
             </button>
           }
+          <button class="add-item" id="abrir-modal-admin">
+            + Adicionar Área
+          </button>
+
+          <!-- Modal de adicionar área na tela admin -->
+          <div>
+            <div id="modal_admin" class="modal_admin">
+              <div id="modal_content_admin">
+                <h2>Adicionar Nova Área</h2>
+                <div class="campo">
+                  <label for="area-name">Nome:</label>
+                  <input
+                    id="area-name"
+                    type="text"
+                    placeholder="Ex: Frontend"
+                    [(ngModel)]="areaName"
+                  />
+                </div>
+                <div class="campo">
+                  <label for="area-desc">Descrição:</label>
+                  <input
+                    id="area-desc"
+                    type="text"
+                    placeholder="Brevecd descrição da área"
+                    [(ngModel)]="areaDescription"
+                  />
+                </div>
+                <div class="campo">
+                  <label for="area-color">Cor:</label>
+                  <input
+                    id="area-color"
+                    type="color"
+                    value="#123456"
+                    [(ngModel)]="areaColor"
+                  />
+                </div>
+                <div class="campo">
+                  <label for="area-icon">Ícone:</label>
+                  <input
+                    id="area-icon"
+                    type="text"
+                    placeholder="Emoji ou ícone"
+                    [(ngModel)]="areaIcon"
+                  />
+                </div>
+                <button
+                  class="btn-save"
+                  (click)="
+                    addArea(areaName, areaDescription, areaColor, areaIcon)
+                  "
+                >
+                  Salvar
+                </button>
+              </div>
+            </div>
+            <button class="add-item" id="remover-id-admin">
+              ❌ Remover Área
+            </button>
+          </div>
+
+          <!-- modal de remover item-->
+          <div class="modal_dropdown" id="modal_dropdown_remove">
+            <div
+              class="modal_content_dropdown"
+              id="modal_content_dropdown_remove"
+            >
+              <h3>Deletar área</h3>
+              <div class="dropdown">
+                <button
+                  (click)="dropdown_active()"
+                  id="dropbtn"
+                  class="dropbtn"
+                >
+                  @if (selectedAreaToRemove()) {
+                    {{ selectedAreaToRemove()!.icon }}
+                    {{ selectedAreaToRemove()!.name }}
+                  } @else {
+                    Dropdown
+                  }
+                </button>
+                <div id="myDropdown" class="dropdown-content">
+                  @for (area of areas(); track area.id) {
+                    <button
+                      class="remove-item-dropdown"
+                      [class.active]="selectedAreaToRemove()?.id === area.id"
+                      [style.border-left-color]="area.color"
+                      (click)="selectAreaToRemove(area)"
+                      type="button"
+                    >
+                      {{ area.icon }} {{ area.name }}
+                    </button>
+                  }
+                </div>
+                <button
+                  class="btn-remove-area"
+                  (click)="removeArea(selectedAreaToRemove()!)"
+                >
+                  Remover Área
+                </button>
+              </div>
+            </div>
+          </div>
         </nav>
 
         <!-- Editor direito -->
@@ -56,7 +169,9 @@ import { Competency, Resource } from '../../models/competency.model';
               <div class="node-section">
                 <div class="node-title">
                   <span>{{ node.icon }} {{ node.name }}</span>
-                  <span class="node-badge">{{ node.resources.length }} recursos</span>
+                  <span class="node-badge"
+                    >{{ node.resources.length }} recursos</span
+                  >
                 </div>
 
                 <p class="node-desc">{{ node.description }}</p>
@@ -71,13 +186,30 @@ import { Competency, Resource } from '../../models/competency.model';
                         <option value="article">📄 Artigo</option>
                         <option value="docs">📖 Docs</option>
                       </select>
-                      <select [(ngModel)]="res.language" class="res-lang-select">
+                      <select
+                        [(ngModel)]="res.language"
+                        class="res-lang-select"
+                      >
                         <option value="pt">PT</option>
                         <option value="en">EN</option>
                       </select>
-                      <input [(ngModel)]="res.title" placeholder="Título do recurso" class="res-input" />
-                      <input [(ngModel)]="res.url" placeholder="https://..." class="res-input url-input" />
-                      <button class="btn-remove" (click)="removeResource(node, i)" title="Remover">✕</button>
+                      <input
+                        [(ngModel)]="res.title"
+                        placeholder="Título do recurso"
+                        class="res-input"
+                      />
+                      <input
+                        [(ngModel)]="res.url"
+                        placeholder="https://..."
+                        class="res-input url-input"
+                      />
+                      <button
+                        class="btn-remove"
+                        (click)="removeResource(node, i)"
+                        title="Remover"
+                      >
+                        ✕
+                      </button>
                     </div>
                   }
 
@@ -98,209 +230,456 @@ import { Competency, Resource } from '../../models/competency.model';
       </div>
     </div>
   `,
-  styles: [`
-    .admin {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 2rem;
-    }
+  styles: [
+    `
+      .admin {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+      }
 
-    .admin-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      margin-bottom: 1.5rem;
-      flex-wrap: wrap;
-      gap: 1rem;
-    }
+      .admin-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
 
-    h1 { font-size: 1.8rem; font-weight: 800; margin: 0 0 0.25rem; color: var(--text-primary); }
-    .admin-header > div > p { color: var(--text-secondary); margin: 0; }
-
-    .header-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
-
-    .btn-save {
-      padding: 0.6rem 1.25rem;
-      background: var(--gradient);
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: opacity 0.2s;
-      &:disabled { opacity: 0.6; cursor: not-allowed; }
-    }
+      h1 {
+        font-size: 1.8rem;
+        font-weight: 800;
+        margin: 0 0 0.25rem;
+        color: var(--text-primary);
+      }
+      .admin-header > div > p {
+        color: var(--text-secondary);
+        margin: 0;
+      }
 
-    .btn-secondary {
-      padding: 0.6rem 1rem;
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      color: var(--text-secondary);
-      text-decoration: none;
-      font-size: 0.875rem;
-      transition: all 0.2s;
-      &:hover { border-color: var(--text-primary); color: var(--text-primary); }
-    }
+      .header-actions {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+        flex-wrap: wrap;
+      }
 
-    .toast {
-      padding: 1rem 1.25rem;
-      border-radius: 10px;
-      margin-bottom: 1.5rem;
-      font-weight: 500;
-      &.success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; }
-    }
+      .btn-save {
+        padding: 0.6rem 1.25rem;
+        background: var(--gradient);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s;
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
 
-    .tree-layout {
-      display: grid;
-      grid-template-columns: 220px 1fr;
-      gap: 1.5rem;
-      min-height: 600px;
-    }
+      .btn-secondary {
+        padding: 0.6rem 1rem;
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        color: var(--text-secondary);
+        text-decoration: none;
+        font-size: 0.875rem;
+        transition: all 0.2s;
+        &:hover {
+          border-color: var(--text-primary);
+          color: var(--text-primary);
+        }
+      }
 
-    @media (max-width: 640px) {
-      .tree-layout { grid-template-columns: 1fr; }
-    }
+      .toast {
+        padding: 1rem 1.25rem;
+        border-radius: 10px;
+        margin-bottom: 1.5rem;
+        font-weight: 500;
+        &.success {
+          background: rgba(16, 185, 129, 0.1);
+          border: 1px solid rgba(16, 185, 129, 0.3);
+          color: #10b981;
+        }
+      }
 
-    .tree-nav {
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 1rem;
-      height: fit-content;
-      position: sticky;
-      top: 80px;
-    }
+      .tree-layout {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        gap: 1.5rem;
+        min-height: 600px;
+      }
 
-    .nav-title { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; padding: 0 0.5rem; }
-
-    .nav-item {
-      display: block;
-      width: 100%;
-      text-align: left;
-      padding: 0.6rem 0.75rem;
-      background: transparent;
-      border: none;
-      border-left: 3px solid transparent;
-      border-radius: 0 8px 8px 0;
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      cursor: pointer;
-      transition: all 0.15s;
-      margin-bottom: 0.25rem;
-      &:hover { background: var(--card-bg); color: var(--text-primary); }
-      &.active { background: var(--card-bg); color: var(--text-primary); font-weight: 600; }
-    }
+      @media (max-width: 640px) {
+        .tree-layout {
+          grid-template-columns: 1fr;
+        }
+      }
 
-    .editor-panel {
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 1.5rem;
-    }
+      .tree-nav {
+        background: var(--panel-bg);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 1rem;
+        height: fit-content;
+        position: sticky;
+        top: 80px;
+      }
 
-    h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 1.5rem; color: var(--text-primary); }
+      .nav-title {
+        font-size: 0.7rem;
+        font-weight: 700;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        margin-bottom: 0.75rem;
+        padding: 0 0.5rem;
+      }
 
-    .node-section {
-      background: var(--card-bg);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 1.25rem;
-      margin-bottom: 1rem;
-    }
+      .nav-item {
+        display: block;
+        width: 100%;
+        text-align: left;
+        padding: 0.6rem 0.75rem;
+        background: transparent;
+        border: none;
+        border-left: 3px solid transparent;
+        border-radius: 0 8px 8px 0;
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: all 0.15s;
+        margin-bottom: 0.25rem;
+        &:hover {
+          background: var(--card-bg);
+          color: var(--text-primary);
+        }
+        &.active {
+          background: var(--card-bg);
+          color: var(--text-primary);
+          font-weight: 600;
+        }
+      }
 
-    .node-title {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-weight: 700;
-      font-size: 1rem;
-      color: var(--text-primary);
-      margin-bottom: 0.5rem;
-    }
+      .editor-panel {
+        background: var(--panel-bg);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 1.5rem;
+      }
 
-    .node-badge {
-      font-size: 0.7rem;
-      font-weight: 600;
-      color: var(--text-muted);
-      background: var(--panel-bg);
-      padding: 0.2rem 0.5rem;
-      border-radius: 4px;
-      border: 1px solid var(--border);
-    }
+      h2 {
+        font-size: 1.3rem;
+        font-weight: 700;
+        margin: 0 0 1.5rem;
+        color: var(--text-primary);
+      }
 
-    .node-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; }
+      .node-section {
+        background: var(--card-bg);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        padding: 1.25rem;
+        margin-bottom: 1rem;
+      }
 
-    .res-row {
-      display: grid;
-      grid-template-columns: 110px 60px 1fr 1.5fr 32px;
-      gap: 0.5rem;
-      align-items: center;
-      margin-bottom: 0.5rem;
-    }
+      .node-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 700;
+        font-size: 1rem;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+      }
 
-    @media (max-width: 900px) {
-      .res-row { grid-template-columns: 1fr 1fr; }
-      .url-input { grid-column: span 2; }
-    }
+      .node-badge {
+        font-size: 0.7rem;
+        font-weight: 600;
+        color: var(--text-muted);
+        background: var(--panel-bg);
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+      }
 
-    input, select {
-      padding: 0.45rem 0.6rem;
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text-primary);
-      font-size: 0.8rem;
-      transition: border-color 0.2s;
-      &:focus { outline: none; border-color: var(--accent); }
-    }
+      .node-desc {
+        font-size: 0.8rem;
+        color: var(--text-muted);
+        margin: 0 0 1rem;
+      }
 
-    .btn-remove {
-      width: 32px;
-      height: 32px;
-      background: transparent;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      color: var(--text-muted);
-      cursor: pointer;
-      font-size: 0.9rem;
-      transition: all 0.15s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &:hover { border-color: #ef4444; color: #ef4444; }
-    }
+      .res-row {
+        display: grid;
+        grid-template-columns: 110px 60px 1fr 1.5fr 32px;
+        gap: 0.5rem;
+        align-items: center;
+        margin-bottom: 0.5rem;
+      }
 
-    .btn-add-resource {
-      margin-top: 0.5rem;
-      padding: 0.45rem 1rem;
-      background: transparent;
-      border: 1px dashed var(--border);
-      border-radius: 6px;
-      color: var(--text-muted);
-      font-size: 0.8rem;
-      cursor: pointer;
-      transition: all 0.2s;
-      &:hover { border-color: var(--accent); color: var(--accent); }
-    }
+      @media (max-width: 900px) {
+        .res-row {
+          grid-template-columns: 1fr 1fr;
+        }
+        .url-input {
+          grid-column: span 2;
+        }
+      }
 
-    .editor-placeholder {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: var(--panel-bg);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      gap: 1rem;
-      color: var(--text-muted);
-      font-size: 0.95rem;
-      span { font-size: 3rem; }
-    }
-  `]
+      input,
+      select {
+        padding: 0.45rem 0.6rem;
+        background: var(--panel-bg);
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text-primary);
+        font-size: 0.8rem;
+        transition: border-color 0.2s;
+        &:focus {
+          outline: none;
+          border-color: var(--accent);
+        }
+      }
+
+      .btn-remove {
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: 0.9rem;
+        transition: all 0.15s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+          border-color: #ef4444;
+          color: #ef4444;
+        }
+      }
+
+      .btn-add-resource {
+        margin-top: 0.5rem;
+        padding: 0.45rem 1rem;
+        background: transparent;
+        border: 1px dashed var(--border);
+        border-radius: 6px;
+        color: var(--text-muted);
+        font-size: 0.8rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover {
+          border-color: var(--accent);
+          color: var(--accent);
+        }
+      }
+
+      .editor-placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: var(--panel-bg);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        gap: 1rem;
+        color: var(--text-muted);
+        font-size: 0.95rem;
+        span {
+          font-size: 3rem;
+        }
+      }
+
+      .add-item {
+        margin-top: 0.5rem;
+        padding: 0.45rem 1rem;
+        background: transparent;
+        border: 1px dashed var(--border);
+        border-radius: 6px;
+        color: var(--text-secondary);
+        font-size: 0.8rem;
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover {
+          border-color: var(--accent);
+          color: var(--accent);
+        }
+      }
+
+      .modal_admin {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        background-color: rgba(20, 20, 20, 0.55);
+        justify-content: center;
+        align-items: center;
+      }
+
+      #modal_content_admin {
+        display: flex;
+        width: 500px;
+        gap: 15px;
+        flex-direction: column;
+        background-color: #0f172a;
+        padding: 20px;
+        border-radius: 10px;
+      }
+
+      .campo {
+        background-color: #0f172a;
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        border-radius: 8px;
+      }
+
+      .dropbtn {
+        background-color: transparent;
+        color: white;
+        padding: 16px;
+        font-size: 16px;
+        cursor: pointer;
+        width: 150px;
+
+        border-radius: 10%;
+        text-align: center;
+        font-size: 14px;
+        border-color: #a6b3c5;
+      }
+
+      .dropbtn:hover,
+      .dropbtn:focus {
+        background-color: #297fb93a;
+      }
+
+      .dropdown {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #203147;
+        min-width: 150px;
+        border-radius: 10%;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+      }
+
+      
+
+      .dropdown-content button {
+        color: var(--text-primary); 
+        padding: 0.6rem 1rem;
+        text-decoration: none;
+        display: block;
+        background: transparent;
+        border: none;
+        width: 100%;
+        text-align: left;
+        cursor: pointer;
+        font-size: 0.875rem;
+        transition: background 0.15s ease;
+        &:hover {
+          background: var(--panel-bg);
+        }
+        &.active {
+          background: var(--accent);
+          color: white;
+          font-weight: 600;
+        }
+      }
+
+      .dropdown-content button:hover {
+        background-color: #4b4343;
+      }
+
+      .show {
+        display: block;
+      }
+
+      .modal_dropdown {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(20, 20, 20, 0.55);
+        justify-content: center;
+        align-items: center;
+        z-index: 2000;
+      }
+
+      .modal_dropdown h3 {
+        color: white;
+      }
+
+      .modal_content_dropdown h3 {
+        color: var(--text-primary);
+        font-size: 1.2rem;
+        font-weight: 700;
+        margin: 0 0 0.5rem 0;
+        letter-spacing: 0.01em;
+        text-align: left;
+      }
+
+      .modal_content_dropdown {
+        background: var(--panel-bg);
+        border: 1.5px solid var(--border);
+        border-radius: 14px;
+        box-shadow: 0 8px 32px 0 rgba(16, 23, 42, 0.45);
+        padding: 2rem 2.5rem 1.5rem 2.5rem;
+        min-width: 320px;
+        min-height: 180px;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1.5rem;
+      }
+
+      .btn-remove-area {
+        padding: 0.75rem 1.25rem;
+        background: var(--danger);
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        margin-top: 0.5rem;
+        &:hover {
+          background: #dc2626;
+          transform: translateY(-1px);
+        }
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+          transform: none;
+        }
+      }
+    `,
+  ],
 })
 export class AdminComponent implements OnInit, OnDestroy {
   private competencyService = inject(CompetencyService);
 
+  areaName = "";
+  areaDescription = "";
+  areaColor = "#123456";
+  areaIcon = "";
+
   areas = signal<Competency[]>([]);
   selectedArea = signal<Competency | null>(null);
   saving = signal(false);
@@ -311,19 +690,124 @@ export class AdminComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.sub.add(
-      this.competencyService.map$.subscribe(map => {
+      this.competencyService.map$.subscribe((map) => {
         this.mapRef = map;
         this.areas.set(map.children ?? []);
         // Refresh selected area reference
         if (this.selectedArea()) {
-          const updated = (map.children ?? []).find(a => a.id === this.selectedArea()!.id);
+          const updated = (map.children ?? []).find(
+            (a) => a.id === this.selectedArea()!.id,
+          );
           if (updated) this.selectedArea.set(updated);
         }
-      })
+      }),
     );
+
+    const dropbtn = document.getElementById("dropbtn");
+    const botao_remover = document.getElementById("remover-id-admin");
+    const modal_dropdown = document.getElementById("modal_dropdown_remove");
+    botao_remover?.addEventListener("click", () => {
+      if (modal_dropdown !== null) {
+        modal_dropdown.style.display = "flex";
+      }
+    });
+
+    const modal = document.getElementById("modal_admin");
+    const abrirModal = document.getElementById("abrir-modal-admin");
+    const fecharModal = document.getElementById("salvar-modal-admin");
+    const conteudo = document.getElementById("modal_content_admin");
+
+    abrirModal?.addEventListener("click", () => {
+      if (modal !== null) {
+        modal.style.display = "flex";
+      }
+    });
+
+    modal?.addEventListener("click", (event) => {
+      modal.style.display = "none";
+    });
+
+    conteudo?.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+
+    fecharModal?.addEventListener("click", () => {
+      if (modal !== null) {
+        modal?.classList.add("inactive");
+        modal.style.display = "none";
+        modal?.classList.remove("active");
+      }
+    });
+
+    const modalDropdown = document.getElementById("modal_dropdown_remove");
+    const modalDropdownContent = document.getElementById(
+      "modal_content_dropdown_remove",
+    );
+
+    modalDropdown?.addEventListener("click", (event) => {
+      if (event.target === modalDropdown) {
+        modalDropdown.style.display = "none";
+      }
+    });
+    modalDropdownContent?.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
   }
 
-  ngOnDestroy(): void { this.sub.unsubscribe(); }
+  dropdown_active() {
+    const myDropdown = document.getElementById("myDropdown");
+
+    if (myDropdown !== null) {
+      myDropdown.classList.toggle("show");
+    }
+  }
+
+  dropdown_inactive() {
+    const myDropdown = document.getElementById("myDropdown");
+    const modalDropdown = document.getElementsByClassName(
+      "remove-item-dropdown",
+    );
+
+    modalDropdown[0].addEventListener("click", () => {
+      if (myDropdown !== null) {
+        myDropdown.classList.remove("show");
+      }
+    });
+  }
+
+  addArea(
+    name: string,
+    description: string,
+    color: string,
+    icon: string,
+  ): void {
+    if (this.mapRef) {
+      add_new_area(name, description, color, icon, this.mapRef);
+      this.areas.set(this.mapRef.children ?? []);
+    }
+  }
+
+  selectedAreaToRemove = signal<Competency | null>(null);
+
+  removeArea(area: Competency): void {
+    if (!this.mapRef) return;
+    this.mapRef.children = (this.mapRef.children ?? []).filter(
+      (a) => a.id !== area.id,
+    );
+    this.areas.set(this.mapRef.children);
+  }
+
+  selectAreaToRemove(area: Competency): void {
+    this.selectedAreaToRemove.set(area);
+    const myDropdown = document.getElementById("myDropdown");
+    if (myDropdown) {
+      myDropdown.classList.remove("show");
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
 
   selectArea(area: Competency): void {
     this.selectedArea.set(area);
@@ -334,9 +818,15 @@ export class AdminComponent implements OnInit, OnDestroy {
   }
 
   addResource(node: Competency): void {
-    node.resources = [...node.resources, {
-      title: '', url: '', type: 'video', language: 'pt'
-    }];
+    node.resources = [
+      ...node.resources,
+      {
+        title: "",
+        url: "",
+        type: "video",
+        language: "pt",
+      },
+    ];
   }
 
   removeResource(node: Competency, index: number): void {

From 700d5728b7bbced367f442738aab077fb0a58e46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=9BGabriel=20Wodtke?= <gabrielwodtke28@gmail.com>
Date: Mon, 6 Apr 2026 22:09:15 -0300
Subject: [PATCH 2/2] =?UTF-8?q?Corre=C3=A7=C3=A3o=20da=20fun=C3=A7=C3=A3o?=
 =?UTF-8?q?=20de=20adicionar=20areas=20e=20adiciona=20fun=C3=A7=C3=A3o=20d?=
 =?UTF-8?q?e=20adicionar=20segmentos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/admin/admin.component.ts | 530 ++++++++++++++------
 src/app/models/competency.model.ts          |  55 ++
 2 files changed, 427 insertions(+), 158 deletions(-)

diff --git a/src/app/components/admin/admin.component.ts b/src/app/components/admin/admin.component.ts
index 8c6766f..e52d87f 100644
--- a/src/app/components/admin/admin.component.ts
+++ b/src/app/components/admin/admin.component.ts
@@ -13,7 +13,7 @@ import { Subscription } from "rxjs";
 import { CompetencyService } from "../../services/competency.service";
 import { Competency, Resource } from "../../models/competency.model";
 import { add_new_area } from "../../models/competency.model";
-import { doc } from "firebase/firestore";
+
 @Component({
   selector: "app-admin",
   standalone: true,
@@ -35,9 +35,9 @@ import { doc } from "firebase/firestore";
       </div>
 
       @if (saved()) {
-        <div class="toast success">
-          ✅ Mapa salvo com sucesso! Todos os alunos já verão as mudanças.
-        </div>
+      <div class="toast success">
+        ✅ Mapa salvo com sucesso! Todos os alunos já verão as mudanças.
+      </div>
       }
 
       <!-- Árvore de competências -->
@@ -46,23 +46,32 @@ import { doc } from "firebase/firestore";
         <nav class="tree-nav">
           <div class="nav-title">Áreas</div>
           @for (area of areas(); track area.id) {
-            <button
-              class="nav-item"
-              [class.active]="selectedArea()?.id === area.id"
-              [style.border-left-color]="area.color"
-              (click)="selectArea(area)"
-            >
-              {{ area.icon }} {{ area.name }}
-            </button>
+          <button
+            class="nav-item"
+            [class.active]="selectedArea()?.id === area.id"
+            [style.border-left-color]="area.color"
+            (click)="selectArea(area)"
+          >
+            {{ area.icon }} {{ area.name }}
+          </button>
           }
-          <button class="add-item" id="abrir-modal-admin">
+          <button
+            (click)="openAddAreaModal()"
+            class="add-item"
+            id="abrir-modal-admin"
+          >
             + Adicionar Área
           </button>
 
           <!-- Modal de adicionar área na tela admin -->
           <div>
-            <div id="modal_admin" class="modal_admin">
-              <div id="modal_content_admin">
+            <div
+              id="modal_admin"
+              class="modal_admin"
+              *ngIf="isAddAreaModalVisible"
+              (click)="closeAddAreaModal()"
+            >
+              <div id="modal_content_admin" (click)="$event.stopPropagation()">
                 <h2>Adicionar Nova Área</h2>
                 <div class="campo">
                   <label for="area-name">Nome:</label>
@@ -78,7 +87,7 @@ import { doc } from "firebase/firestore";
                   <input
                     id="area-desc"
                     type="text"
-                    placeholder="Brevecd descrição da área"
+                    placeholder="Breve descrição da área"
                     [(ngModel)]="areaDescription"
                   />
                 </div>
@@ -110,16 +119,26 @@ import { doc } from "firebase/firestore";
                 </button>
               </div>
             </div>
-            <button class="add-item" id="remover-id-admin">
+            <button
+              (click)="openRemoveAreaModal()"
+              class="add-item"
+              id="remover-id-admin"
+            >
               ❌ Remover Área
             </button>
           </div>
 
           <!-- modal de remover item-->
-          <div class="modal_dropdown" id="modal_dropdown_remove">
+          <div
+            class="modal_dropdown"
+            id="modal_dropdown_remove"
+            *ngIf="isRemoveAreaModalVisible"
+            (click)="closeRemoveAreaModal()"
+          >
             <div
               class="modal_content_dropdown"
               id="modal_content_dropdown_remove"
+              (click)="$event.stopPropagation()"
             >
               <h3>Deletar área</h3>
               <div class="dropdown">
@@ -129,28 +148,31 @@ import { doc } from "firebase/firestore";
                   class="dropbtn"
                 >
                   @if (selectedAreaToRemove()) {
-                    {{ selectedAreaToRemove()!.icon }}
-                    {{ selectedAreaToRemove()!.name }}
-                  } @else {
-                    Dropdown
-                  }
+                  {{ selectedAreaToRemove()!.icon }}
+                  {{ selectedAreaToRemove()!.name }}
+                  } @else { Dropdown }
                 </button>
-                <div id="myDropdown" class="dropdown-content">
+                <div
+                  id="myDropdown"
+                  class="dropdown-content"
+                  [ngClass]="{ show: isDropdownOpen }"
+                >
                   @for (area of areas(); track area.id) {
-                    <button
-                      class="remove-item-dropdown"
-                      [class.active]="selectedAreaToRemove()?.id === area.id"
-                      [style.border-left-color]="area.color"
-                      (click)="selectAreaToRemove(area)"
-                      type="button"
-                    >
-                      {{ area.icon }} {{ area.name }}
-                    </button>
+                  <button
+                    class="remove-item-dropdown"
+                    [class.active]="selectedAreaToRemove()?.id === area.id"
+                    [style.border-left-color]="area.color"
+                    (click)="selectAreaToRemove(area)"
+                    type="button"
+                  >
+                    {{ area.icon }} {{ area.name }}
+                  </button>
                   }
                 </div>
                 <button
                   class="btn-remove-area"
                   (click)="removeArea(selectedAreaToRemove()!)"
+                  [disabled]="!selectedAreaToRemove()"
                 >
                   Remover Área
                 </button>
@@ -161,71 +183,176 @@ import { doc } from "firebase/firestore";
 
         <!-- Editor direito -->
         @if (selectedArea()) {
-          <div class="editor-panel">
-            <h2>{{ selectedArea()!.icon }} {{ selectedArea()!.name }}</h2>
-
-            <!-- Todos os nós da área -->
-            @for (node of getNodesForArea(selectedArea()!); track node.id) {
-              <div class="node-section">
-                <div class="node-title">
-                  <span>{{ node.icon }} {{ node.name }}</span>
-                  <span class="node-badge"
-                    >{{ node.resources.length }} recursos</span
-                  >
-                </div>
+        <div class="editor-panel">
+          <h2>{{ selectedArea()!.icon }} {{ selectedArea()!.name }}</h2>
+
+          <!-- Todos os nós da área -->
+          @for (node of getNodesForArea(selectedArea()!); track node.id) {
+          <div class="node-section">
+            <div class="node-title">
+              <span>{{ node.icon }} {{ node.name }}</span>
+              <span class="node-badge"
+                >{{ node.resources.length }} recursos</span
+              >
+            </div>
 
-                <p class="node-desc">{{ node.description }}</p>
-
-                <!-- Lista de recursos -->
-                <div class="resources-editor">
-                  @for (res of node.resources; track $index; let i = $index) {
-                    <div class="res-row">
-                      <select [(ngModel)]="res.type" class="res-type-select">
-                        <option value="video">▶ Vídeo</option>
-                        <option value="course">🎓 Curso</option>
-                        <option value="article">📄 Artigo</option>
-                        <option value="docs">📖 Docs</option>
-                      </select>
-                      <select
-                        [(ngModel)]="res.language"
-                        class="res-lang-select"
-                      >
-                        <option value="pt">PT</option>
-                        <option value="en">EN</option>
-                      </select>
-                      <input
-                        [(ngModel)]="res.title"
-                        placeholder="Título do recurso"
-                        class="res-input"
-                      />
-                      <input
-                        [(ngModel)]="res.url"
-                        placeholder="https://..."
-                        class="res-input url-input"
-                      />
+            <p class="node-desc">{{ node.description }}</p>
+
+            <!-- Lista de recursos -->
+            <div class="resources-editor">
+              @for (res of node.resources; track $index; let i = $index) {
+              <div class="res-row">
+                <select [(ngModel)]="res.type" class="res-type-select">
+                  <option value="video">▶ Vídeo</option>
+                  <option value="course">🎓 Curso</option>
+                  <option value="article">📄 Artigo</option>
+                  <option value="docs">📖 Docs</option>
+                </select>
+                <select [(ngModel)]="res.language" class="res-lang-select">
+                  <option value="pt">PT</option>
+                  <option value="en">EN</option>
+                </select>
+                <input
+                  [(ngModel)]="res.title"
+                  placeholder="Título do recurso"
+                  class="res-input"
+                />
+                <input
+                  [(ngModel)]="res.url"
+                  placeholder="https://..."
+                  class="res-input url-input"
+                />
+                <button
+                  class="btn-remove"
+                  (click)="removeResource(node, i)"
+                  title="Remover"
+                >
+                  ✕
+                </button>
+              </div>
+              }
+
+              <!-- Novo recurso -->
+              <button class="btn-add-resource" (click)="addResource(node)">
+                + Adicionar Recurso
+              </button>
+            </div>
+            
+          </div>
+          }
+          
+          <div style="display: flex; gap: 1rem; margin-top: 1rem;">
+            <button class="btn-add-item" style="flex: 1; border-style: dashed; padding: 1rem; border-color: var(--border); background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer;" (click)="openAddSegmentModal(selectedArea()!)">
+                + Adicionar Segmento
+            </button>
+            <button class="btn-add-item" style="flex: 1; border-style: dashed; padding: 1rem; border-color: var(--border); background: transparent; color: #ef4444; border-radius: 8px; cursor: pointer;" (click)="openRemoveSegmentModal()">
+                ❌ Remover Segmento
+            </button>
+          </div>
+          
+          <!-- Modal de adicionar segmento -->
+          <div
+            id="modal_segment"
+            class="modal_admin"
+            *ngIf="isAddSegmentModalVisible"
+            (click)="closeAddSegmentModal()"
+          >
+            <div id="modal_content_segment" (click)="$event.stopPropagation()">
+              <h2>Adicionar Novo Segmento</h2>
+              <div class="campo">
+                <label for="segment-name">Nome:</label>
+                <input
+                  id="segment-name"
+                  type="text"
+                  placeholder="Ex: Spring Security"
+                  [(ngModel)]="segmentName"
+                />
+              </div>
+              <div class="campo">
+                <label for="segment-desc">Descrição:</label>
+                <input
+                  id="segment-desc"
+                  type="text"
+                  placeholder="Breve descrição do segmento"
+                  [(ngModel)]="segmentDescription"
+                />
+              </div>
+              <div class="campo">
+                <label for="segment-icon">Ícone (Emoji):</label>
+                <input
+                  id="segment-icon"
+                  type="text"
+                  placeholder="Ex: 🚀"
+                  [(ngModel)]="segmentIcon"
+                />
+              </div>
+              <button
+                class="btn-save"
+                (click)="addSegment()"
+              >
+                Salvar
+              </button>
+            </div>
+          </div>
+
+          <!-- Modal de remover segmento -->
+          <div
+            class="modal_dropdown"
+            *ngIf="isRemoveSegmentModalVisible"
+            (click)="closeRemoveSegmentModal()"
+          >
+            <div
+              class="modal_content_dropdown"
+              (click)="$event.stopPropagation()"
+            >
+              <h3>Deletar segmento</h3>
+              <p style="color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.5rem;">Selecione um segmento da área "{{ selectedArea()?.name }}" para remover:</p>
+              <div class="dropdown">
+                <button
+                  (click)="toggleSegmentDropdown()"
+                  class="dropbtn"
+                  style="width: fit-content; min-width: 150px; border-radius: 8px; border: 1px solid var(--border); text-align: center;"
+                >
+                  @if (selectedSegmentToRemove()) {
+                    {{ selectedSegmentToRemove()!.icon }} {{ selectedSegmentToRemove()!.name }}
+                  } @else { Selecione... }
+                </button>
+                <div
+                  class="dropdown-content"
+                  style="min-width: 150px; max-height: 200px; overflow-y: auto;"
+                  [ngClass]="{ show: isSegmentDropdownOpen }"
+                >
+                  @for (node of getNodesForArea(selectedArea()!); track node) {
+                    @if (node.id !== selectedArea()?.id) {
                       <button
-                        class="btn-remove"
-                        (click)="removeResource(node, i)"
-                        title="Remover"
+                        class="remove-item-dropdown"
+                        [class.active]="selectedSegmentToRemove() === node"
+                        (click)="$event.stopPropagation(); selectSegmentToRemove(node)"
+                        type="button"
                       >
-                        ✕
+                        {{ node.icon }} {{ node.name }}
                       </button>
-                    </div>
+                    }
                   }
-
-                  <!-- Novo recurso -->
-                  <button class="btn-add-resource" (click)="addResource(node)">
-                    + Adicionar Recurso
-                  </button>
                 </div>
+                <button
+                  class="btn-remove-area"
+                  (click)="removeSegment(selectedSegmentToRemove()!)"
+                  [disabled]="!selectedSegmentToRemove()"
+                  style="width: fit-content;"
+                >
+                  Remover Segmento
+                </button>
               </div>
-            }
+            </div>
           </div>
+
+        </div>
         } @else {
-          <div class="editor-placeholder">
-            <span>👈</span>
-            <p>Selecione uma área para editar seus recursos</p>
-          </div>
+        <div class="editor-placeholder">
+          <span>👈</span>
+          <p>Selecione uma área para editar seus recursos</p>
+        </div>
         }
       </div>
     </div>
@@ -512,7 +639,7 @@ import { doc } from "firebase/firestore";
       }
 
       .modal_admin {
-        display: none;
+        display: flex;
         position: fixed;
         top: 0;
         left: 0;
@@ -524,7 +651,8 @@ import { doc } from "firebase/firestore";
         align-items: center;
       }
 
-      #modal_content_admin {
+      #modal_content_admin,
+      #modal_content_segment {
         display: flex;
         width: 500px;
         gap: 15px;
@@ -578,10 +706,8 @@ import { doc } from "firebase/firestore";
         z-index: 1;
       }
 
-      
-
       .dropdown-content button {
-        color: var(--text-primary); 
+        color: var(--text-primary);
         padding: 0.6rem 1rem;
         text-decoration: none;
         display: block;
@@ -611,7 +737,7 @@ import { doc } from "firebase/firestore";
       }
 
       .modal_dropdown {
-        display: none;
+        display: flex;
         position: fixed;
         top: 0;
         left: 0;
@@ -696,95 +822,185 @@ export class AdminComponent implements OnInit, OnDestroy {
         // Refresh selected area reference
         if (this.selectedArea()) {
           const updated = (map.children ?? []).find(
-            (a) => a.id === this.selectedArea()!.id,
+            (a) => a.id === this.selectedArea()!.id
           );
           if (updated) this.selectedArea.set(updated);
         }
-      }),
+      })
     );
+  }
 
-    const dropbtn = document.getElementById("dropbtn");
-    const botao_remover = document.getElementById("remover-id-admin");
-    const modal_dropdown = document.getElementById("modal_dropdown_remove");
-    botao_remover?.addEventListener("click", () => {
-      if (modal_dropdown !== null) {
-        modal_dropdown.style.display = "flex";
-      }
-    });
+  isAddAreaModalVisible = false;
+  isRemoveAreaModalVisible = false;
+  isDropdownOpen = false;
 
-    const modal = document.getElementById("modal_admin");
-    const abrirModal = document.getElementById("abrir-modal-admin");
-    const fecharModal = document.getElementById("salvar-modal-admin");
-    const conteudo = document.getElementById("modal_content_admin");
+  openAddAreaModal() {
+    this.isAddAreaModalVisible = true;
+  }
+  closeAddAreaModal() {
+    this.isAddAreaModalVisible = false;
+  }
 
-    abrirModal?.addEventListener("click", () => {
-      if (modal !== null) {
-        modal.style.display = "flex";
-      }
-    });
+  openRemoveAreaModal() {
+    this.isRemoveAreaModalVisible = true;
+  }
+  closeRemoveAreaModal() {
+    this.isRemoveAreaModalVisible = false;
+  }
 
-    modal?.addEventListener("click", (event) => {
-      modal.style.display = "none";
-    });
+  isAddSegmentModalVisible = false;
+  isRemoveSegmentModalVisible = false;
+  isSegmentDropdownOpen = false;
+  segmentName = "";
+  segmentDescription = "";
+  segmentIcon = "";
+  selectedNodeForSegment: Competency | null = null;
+  selectedSegmentToRemove = signal<Competency | null>(null);
+
+  openAddSegmentModal(node: Competency) {
+    this.selectedNodeForSegment = node;
+    this.segmentIcon = node.icon; 
+    this.isAddSegmentModalVisible = true;
+  }
 
-    conteudo?.addEventListener("click", (event) => {
-      event.stopPropagation();
-    });
+  closeAddSegmentModal() {
+    this.isAddSegmentModalVisible = false;
+    this.selectedNodeForSegment = null;
+    this.segmentName = "";
+    this.segmentDescription = "";
+    this.segmentIcon = "";
+  }
 
-    fecharModal?.addEventListener("click", () => {
-      if (modal !== null) {
-        modal?.classList.add("inactive");
-        modal.style.display = "none";
-        modal?.classList.remove("active");
-      }
-    });
+  openRemoveSegmentModal() {
+    this.isRemoveSegmentModalVisible = true;
+    this.selectedSegmentToRemove.set(null);
+    this.isSegmentDropdownOpen = false;
+  }
 
-    const modalDropdown = document.getElementById("modal_dropdown_remove");
-    const modalDropdownContent = document.getElementById(
-      "modal_content_dropdown_remove",
-    );
+  closeRemoveSegmentModal() {
+    this.isRemoveSegmentModalVisible = false;
+    this.selectedSegmentToRemove.set(null);
+    this.isSegmentDropdownOpen = false;
+  }
+
+  toggleSegmentDropdown() {
+    this.isSegmentDropdownOpen = !this.isSegmentDropdownOpen;
+  }
 
-    modalDropdown?.addEventListener("click", (event) => {
-      if (event.target === modalDropdown) {
-        modalDropdown.style.display = "none";
+  selectSegmentToRemove(segment: Competency) {
+    this.selectedSegmentToRemove.set(segment);
+    this.isSegmentDropdownOpen = false;
+  }
+
+  removeSegment(segment: Competency) {
+    if (!this.mapRef || !segment) return;
+    
+    // Alerta: Não permitimos remover o root ou a área selecionada por este botão
+    if (segment.id === 'root' || (this.selectedArea() && segment.id === this.selectedArea()?.id)) {
+      this.closeRemoveSegmentModal();
+      return;
+    }
+
+    // Função recursiva para encontrar o pai e remover o filho usando splice
+    const removeRecursive = (root: Competency, target: Competency): boolean => {
+      if (!root.children) return false;
+      
+      const index = root.children.findIndex(c => 
+        c === target || (target.id && c.id === target.id)
+      );
+      
+      if (index !== -1) {
+        root.children.splice(index, 1);
+        return true;
       }
-    });
-    modalDropdownContent?.addEventListener("click", (event) => {
-      event.stopPropagation();
-    });
+      
+      for (const child of root.children) {
+        if (removeRecursive(child, target)) return true;
+      }
+      return false;
+    };
+
+    if (removeRecursive(this.mapRef, segment)) {
+      this.areas.set([...(this.mapRef.children ?? [])]);
+      
+      if (this.selectedArea()) {
+        const updatedArea = this.findNodeInMap(this.mapRef, this.selectedArea()!.id);
+        if (updatedArea) {
+          this.selectedArea.set({ ...updatedArea });
+        } else {
+          this.selectedArea.set(null);
+        }
+      }
+    }
+    
+    this.closeRemoveSegmentModal();
   }
 
-  dropdown_active() {
-    const myDropdown = document.getElementById("myDropdown");
+  private findNodeInMap(root: Competency, id: string): Competency | null {
+    if (root.id === id) return root;
+    if (root.children) {
+      for (const child of root.children) {
+        const found = this.findNodeInMap(child, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
 
-    if (myDropdown !== null) {
-      myDropdown.classList.toggle("show");
+  addSegment(): void {
+    const areaRef = this.selectedArea();
+    if (!this.segmentName?.trim() || !this.mapRef || !areaRef) {
+      return;
+    }
+    
+    const targetNode = this.findNodeInMap(this.mapRef, areaRef.id);
+    if (targetNode) {
+      if (!targetNode.children) targetNode.children = [];
+      
+      targetNode.children.push({
+        id: "seg_" + Date.now(),
+        name: this.segmentName,
+        description: this.segmentDescription,
+        color: targetNode.color,
+        icon: this.segmentIcon || targetNode.icon,
+        resources: [],
+        children: [],
+      });
+
+      this.selectedArea.set({ ...targetNode });
+      this.areas.set([...(this.mapRef.children ?? [])]);
     }
+    
+    this.closeAddSegmentModal();
   }
 
-  dropdown_inactive() {
-    const myDropdown = document.getElementById("myDropdown");
-    const modalDropdown = document.getElementsByClassName(
-      "remove-item-dropdown",
-    );
+  dropdown_active() {
+    this.isDropdownOpen = !this.isDropdownOpen;
+  }
 
-    modalDropdown[0].addEventListener("click", () => {
-      if (myDropdown !== null) {
-        myDropdown.classList.remove("show");
-      }
-    });
+  closeDropdown() {
+    this.isDropdownOpen = false;
   }
 
   addArea(
     name: string,
     description: string,
     color: string,
-    icon: string,
+    icon: string
   ): void {
+    if (!name?.trim()) {
+      return;
+    }
     if (this.mapRef) {
       add_new_area(name, description, color, icon, this.mapRef);
       this.areas.set(this.mapRef.children ?? []);
+      this.areaName = "";
+      this.areaDescription = "";
+      this.areaColor = "#123456";
+      this.areaIcon = "";
+      this.closeAddAreaModal();
     }
+    
   }
 
   selectedAreaToRemove = signal<Competency | null>(null);
@@ -792,17 +1008,15 @@ export class AdminComponent implements OnInit, OnDestroy {
   removeArea(area: Competency): void {
     if (!this.mapRef) return;
     this.mapRef.children = (this.mapRef.children ?? []).filter(
-      (a) => a.id !== area.id,
+      (a) => a.id !== area.id
     );
     this.areas.set(this.mapRef.children);
+    this.closeRemoveAreaModal();
   }
 
   selectAreaToRemove(area: Competency): void {
     this.selectedAreaToRemove.set(area);
-    const myDropdown = document.getElementById("myDropdown");
-    if (myDropdown) {
-      myDropdown.classList.remove("show");
-    }
+    this.closeDropdown();
   }
 
   ngOnDestroy(): void {
diff --git a/src/app/models/competency.model.ts b/src/app/models/competency.model.ts
index d2b93f8..d5a6749 100644
--- a/src/app/models/competency.model.ts
+++ b/src/app/models/competency.model.ts
@@ -209,3 +209,58 @@ export const DEFAULT_COMPETENCY_MAP: Competency = {
     }
   ]
 };
+
+export function add_new_area(
+  name: string,
+  description: string,
+  color: string,
+  icon: string,
+  node: Competency
+): void {
+  if (!node.children) node.children = [];
+  const newCompetency: Competency = {
+    id: 'area_' + Date.now(),
+    name,
+    description,
+    color,
+    icon,
+    resources: [],
+    children: []
+  };
+  node.children.push(newCompetency);
+}
+
+export function remove_area(competencyId: string, node: Competency): boolean {
+  if (!node.children) return false;
+  const index = node.children.findIndex(c => c.id === competencyId);
+  if (index !== -1) {
+    node.children.splice(index, 1);
+    return true;
+  }
+  else{
+    return false;
+  }
+}
+
+export function add_new_Resource(
+  title: string,
+  url: string,
+  type: 'video' | 'article' | 'course' | 'docs',
+  language: 'pt' | 'en',
+  node: Competency
+): void {
+  if (!node.resources) node.resources = [];
+  const newResource: Resource = {
+    title,
+    url,
+    type,
+    language
+  };
+  node.resources.push(newResource);
+}
+
+export function remove_resource(resourceId: string, nodeId: string): void {
+  if (!DEFAULT_COMPETENCY_MAP.children) return ;
+  const node = DEFAULT_COMPETENCY_MAP.children.find(child => child.id === nodeId);
+  node?.children?.filter(child => child.id === nodeId);
+}