From 61b3af4c53fbb4ed256d08cd3b916fe9c149565a Mon Sep 17 00:00:00 2001
From: Artur Oliveira <artur.oliveira@hittelco.com>
Date: Tue, 16 Dec 2025 13:54:33 -0300
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20componentizar=20header=20?=
 =?UTF-8?q?e=20modais=20-=20Extrai=20brand,=20a=C3=A7=C3=B5es=20e=20modais?=
 =?UTF-8?q?=20para=20componentes=20dedicados=20-=20Mant=C3=A9m=20Header=20?=
 =?UTF-8?q?como=20orquestrador=20de=20estado=20e=20integra=20novos=20tipos?=
 =?UTF-8?q?=20-=20Atualiza=20AGENTS.md=20exigindo=20componentiza=C3=A7?=
 =?UTF-8?q?=C3=A3o=20de=20interfaces=20complexas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                                     |   1 +
 frontend/src/components/Header.tsx            | 245 +++---------------
 .../src/components/header/HeaderActions.tsx   |  46 ++++
 .../src/components/header/HeaderBrand.tsx     |  18 ++
 .../src/components/header/ProfileModal.tsx    |  90 +++++++
 .../src/components/header/ServerModal.tsx     | 117 +++++++++
 frontend/src/components/header/types.ts       |  19 ++
 7 files changed, 329 insertions(+), 207 deletions(-)
 create mode 100644 frontend/src/components/header/HeaderActions.tsx
 create mode 100644 frontend/src/components/header/HeaderBrand.tsx
 create mode 100644 frontend/src/components/header/ProfileModal.tsx
 create mode 100644 frontend/src/components/header/ServerModal.tsx
 create mode 100644 frontend/src/components/header/types.ts

diff --git a/AGENTS.md b/AGENTS.md
index 2ac6773..6cd941e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -12,6 +12,7 @@ Orientações rápidas para agentes ou automações que atuam neste repositório
 - Em componentes React com Tailwind, mova classnames para uma constante `Styles` ao final do arquivo sempre que um elemento tiver mais de 5 classes (referência: `Login.tsx`).
 - Em componentes React com Tailwind, mova classnames para uma constante `Styles` ao final do arquivo sempre que um elemento tiver mais de 5 classes (referência: `Login.tsx`).
 - Quando houverem classnames que se repetem muitas vezes em vários elementos/componentes, mova esses grupos repetidos para a constante `Styles` mesmo que possuam menos de 5 classes — isso ajuda a evitar duplicação e facilita manutenção.
+- Sempre que uma view ou componente começar a crescer demais, quebre a interface em subcomponentes menores e reutilizáveis (ex: dividir headers em partes especializadas) antes de seguir evoluindo o layout.
 
 ## Padrão para mensagens de commit
 **Instrução:** Gere um comando `git commit -m` completo, em português, seguindo o padrão **Conventional Commits**, com base no `diff` abaixo.  
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d12307e..68a8127 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,8 +1,13 @@
 import { type ChangeEvent, type FormEvent, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import api from "../Api";
+import { HeaderActions } from "./header/HeaderActions";
+import { HeaderBrand } from "./header/HeaderBrand";
+import { ProfileModal } from "./header/ProfileModal";
+import { ServerModal } from "./header/ServerModal";
 import type { Applications, DatabaseType, ServersType } from "../types/enums";
 import type { User } from "../types/User";
+import type { ProfileFormState, ServerFormState } from "./header/types";
 
 type ModalType = "addServer" | "editProfile" | null;
 
@@ -13,24 +18,6 @@ interface HeaderProps {
     onProfileUpdated?: (user: User) => void;
 }
 
-type ServerFormState = {
-    name: string;
-    ip: string;
-    port: string;
-    user: string;
-    password: string;
-    type: ServersType;
-    application: Applications;
-    dbType: DatabaseType;
-};
-
-type ProfileFormState = {
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-};
-
 const defaultServerForm: ServerFormState = {
     name: "",
     ip: "",
@@ -83,13 +70,13 @@ export const Header = ({ currentUser, userError, onServerCreated, onProfileUpdat
         setProfileForm((prev) => ({ ...prev, password: "" }));
     };
 
-    const handleServerFormChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-        const { name, value } = e.target;
+    const handleServerFormChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = event.target;
         setServerForm((prev) => ({ ...prev, [name]: value }));
     };
 
-    const handleProfileFormChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const { name, value } = e.target;
+    const handleProfileFormChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
         setProfileForm((prev) => ({ ...prev, [name]: value }));
     };
 
@@ -141,200 +128,44 @@ export const Header = ({ currentUser, userError, onServerCreated, onProfileUpdat
         }
     };
 
-    const renderModalContent = () => {
-        if (activeModal === "addServer") {
-            return (
-                <form onSubmit={handleServerSubmit} className={Styles.form}>
-                    <div className={Styles.formGrid}>
-                        <div className={Styles.field}>
-                            <label htmlFor="name" className={Styles.label}>Nome</label>
-                            <input id="name" name="name" className={Styles.input} value={serverForm.name} onChange={handleServerFormChange} required />
-                        </div>
-                        <div className={Styles.field}>
-                            <label htmlFor="ip" className={Styles.label}>IP</label>
-                            <input id="ip" name="ip" className={Styles.input} value={serverForm.ip} onChange={handleServerFormChange} placeholder="192.168.0.10" required />
-                        </div>
-                    </div>
-                    <div className={Styles.formGrid}>
-                        <div className={Styles.field}>
-                            <label htmlFor="port" className={Styles.label}>Porta</label>
-                            <input id="port" name="port" type="number" min="1" className={Styles.input} value={serverForm.port} onChange={handleServerFormChange} required />
-                        </div>
-                        <div className={Styles.field}>
-                            <label htmlFor="user" className={Styles.label}>Usuário</label>
-                            <input id="user" name="user" className={Styles.input} value={serverForm.user} onChange={handleServerFormChange} required />
-                        </div>
-                    </div>
-                    <div className={Styles.field}>
-                        <label htmlFor="password" className={Styles.label}>Senha</label>
-                        <input id="password" name="password" type="password" className={Styles.input} value={serverForm.password} onChange={handleServerFormChange} required />
-                    </div>
-                    <div className={Styles.formGrid}>
-                        <div className={Styles.field}>
-                            <label htmlFor="type" className={Styles.label}>Tipo</label>
-                            <select id="type" name="type" className={Styles.select} value={serverForm.type} onChange={handleServerFormChange}>
-                                {serverTypeOptions.map((option) => (
-                                    <option key={option} value={option}>{option.toLowerCase()}</option>
-                                ))}
-                            </select>
-                        </div>
-                        <div className={Styles.field}>
-                            <label htmlFor="application" className={Styles.label}>Aplicação</label>
-                            <select id="application" name="application" className={Styles.select} value={serverForm.application} onChange={handleServerFormChange}>
-                                {applicationOptions.map((option) => (
-                                    <option key={option} value={option}>{option.toLowerCase()}</option>
-                                ))}
-                            </select>
-                        </div>
-                    </div>
-                    <div className={Styles.field}>
-                        <label htmlFor="dbType" className={Styles.label}>Banco de dados</label>
-                        <select id="dbType" name="dbType" className={Styles.select} value={serverForm.dbType} onChange={handleServerFormChange}>
-                            {databaseOptions.map((option) => (
-                                <option key={option} value={option}>{option.toLowerCase()}</option>
-                            ))}
-                        </select>
-                    </div>
-                    <div className={Styles.modalActions}>
-                        <button type="button" className={Styles.secondaryButton} onClick={closeModal}>Cancelar</button>
-                        <button type="submit" className={Styles.primaryButton} disabled={serverLoading}>
-                            {serverLoading ? "Salvando..." : "Salvar servidor"}
-                        </button>
-                    </div>
-                </form>
-            );
-        }
-
-        if (activeModal === "editProfile") {
-            if (userError) {
-                return <p className={Styles.helperText}>{userError}</p>;
-            }
-
-            return (
-                <form onSubmit={handleProfileSubmit} className={Styles.form}>
-                    <div className={Styles.formGrid}>
-                        <div className={Styles.field}>
-                            <label htmlFor="firstName" className={Styles.label}>Nome</label>
-                            <input id="firstName" name="firstName" className={Styles.input} value={profileForm.firstName} onChange={handleProfileFormChange} required disabled={!currentUser} />
-                        </div>
-                        <div className={Styles.field}>
-                            <label htmlFor="lastName" className={Styles.label}>Sobrenome</label>
-                            <input id="lastName" name="lastName" className={Styles.input} value={profileForm.lastName} onChange={handleProfileFormChange} required disabled={!currentUser} />
-                        </div>
-                    </div>
-                    <div className={Styles.field}>
-                        <label htmlFor="email" className={Styles.label}>Email</label>
-                        <input id="email" name="email" type="email" className={Styles.input} value={profileForm.email} onChange={handleProfileFormChange} required disabled={!currentUser} />
-                    </div>
-                    <div className={Styles.field}>
-                        <label htmlFor="password" className={Styles.label}>Nova senha</label>
-                        <input id="password" name="password" type="password" className={Styles.input} value={profileForm.password} onChange={handleProfileFormChange} placeholder="Informe uma nova senha" required disabled={!currentUser} />
-                        <p className={Styles.helperText}>Informe uma nova senha para confirmar a alteração.</p>
-                    </div>
-                    <div className={Styles.modalActions}>
-                        <button type="button" className={Styles.secondaryButton} onClick={closeModal}>Cancelar</button>
-                        <button type="submit" className={Styles.primaryButton} disabled={profileLoading || !currentUser}>
-                            {profileLoading ? "Salvando..." : "Salvar alterações"}
-                        </button>
-                    </div>
-                </form>
-            );
-        }
-
-        return null;
-    };
-
     return (
         <>
             <header className={Styles.wrapper}>
-                <div className={Styles.brand}>
-                    <img src="/logo.webp" alt="Logo Hit Communications" className={Styles.logo} />
-                    <div>
-                        <p className={Styles.title}>Hit Communications</p>
-                        <p className={Styles.subtitle}>Servers Manager</p>
-                    </div>
-                </div>
-
-                <div className={Styles.actions}>
-                    <div className="relative">
-                        <button
-                            type="button"
-                            className={Styles.menuTrigger}
-                            aria-haspopup="menu"
-                            aria-expanded={isMenuOpen}
-                            onClick={toggleMenu}
-                        >
-                            Opções
-                        </button>
-                        {isMenuOpen && (
-                            <div className={Styles.dropdown} role="menu">
-                                <button
-                                    type="button"
-                                    className={Styles.dropdownItem}
-                                    onClick={() => openModal("addServer")}
-                                >
-                                    Adicionar servidor
-                                </button>
-                                <button
-                                    type="button"
-                                    className={Styles.dropdownItem}
-                                    onClick={() => openModal("editProfile")}
-                                >
-                                    Editar perfil
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                    <button type="button" className={Styles.logoutButton}>
-                        Sair
-                    </button>
-                </div>
+                <HeaderBrand />
+                <HeaderActions
+                    isMenuOpen={isMenuOpen}
+                    onToggleMenu={toggleMenu}
+                    onAddServer={() => openModal("addServer")}
+                    onEditProfile={() => openModal("editProfile")}
+                />
             </header>
 
-            {activeModal && (
-                <div className={Styles.modalOverlay} role="dialog" aria-modal="true">
-                    <div className={Styles.modal}>
-                        <div className={Styles.modalHeader}>
-                            <h2 className={Styles.modalTitle}>
-                                {activeModal === "addServer" ? "Adicionar novo servidor" : "Editar perfil"}
-                            </h2>
-                            <button type="button" onClick={closeModal} className={Styles.closeButton} aria-label="Fechar modal">
-                                ×
-                            </button>
-                        </div>
-                        <div className={Styles.modalBody}>{renderModalContent()}</div>
-                    </div>
-                </div>
-            )}
+            <ServerModal
+                isOpen={activeModal === "addServer"}
+                form={serverForm}
+                loading={serverLoading}
+                onClose={closeModal}
+                onChange={handleServerFormChange}
+                onSubmit={handleServerSubmit}
+                serverTypeOptions={serverTypeOptions}
+                applicationOptions={applicationOptions}
+                databaseOptions={databaseOptions}
+            />
+
+            <ProfileModal
+                isOpen={activeModal === "editProfile"}
+                currentUser={currentUser}
+                userError={userError}
+                form={profileForm}
+                loading={profileLoading}
+                onClose={closeModal}
+                onChange={handleProfileFormChange}
+                onSubmit={handleProfileSubmit}
+            />
         </>
     );
 };
 
 const Styles = {
     wrapper: "flex items-center justify-between rounded-xl border border-cardBorder bg-card px-6 py-4 shadow-sm",
-    brand: "flex items-center gap-3",
-    logo: "h-10 w-10 object-contain",
-    title: "text-base font-semibold text-text",
-    subtitle: "text-xs uppercase tracking-wide text-text-secondary",
-    actions: "flex items-center gap-3",
-    menuTrigger: "rounded-lg border border-cardBorder bg-white/70 px-4 py-2 text-sm font-medium text-text flex items-center gap-2 hover:bg-white transition-colors",
-    dropdown: "absolute right-0 mt-2 w-48 rounded-lg border border-cardBorder bg-white py-2 shadow-lg z-10",
-    dropdownItem: "w-full px-4 py-2 text-left text-sm text-text-secondary hover:bg-bg hover:text-text transition-colors",
-    logoutButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-hover",
-    modalOverlay: "fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4",
-    modal: "w-full max-w-2xl rounded-2xl border border-cardBorder bg-card p-6 shadow-xl",
-    modalHeader: "flex items-start justify-between gap-4 pb-4 border-b border-cardBorder",
-    modalTitle: "text-lg font-semibold text-text",
-    closeButton: "text-2xl leading-none text-text-secondary hover:text-text",
-    modalBody: "pt-4",
-    form: "space-y-4",
-    formGrid: "grid gap-4 md:grid-cols-2",
-    field: "flex flex-col gap-2",
-    label: "text-xs font-semibold uppercase tracking-wide text-text-secondary",
-    input: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent",
-    select: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent capitalize",
-    helperText: "text-xs text-text-secondary",
-    modalActions: "flex justify-end gap-3 pt-2",
-    secondaryButton: "rounded-md border border-cardBorder px-4 py-2 text-sm font-medium text-text hover:bg-bg disabled:opacity-50",
-    primaryButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-hover disabled:opacity-70",
 };
diff --git a/frontend/src/components/header/HeaderActions.tsx b/frontend/src/components/header/HeaderActions.tsx
new file mode 100644
index 0000000..c9a3c1b
--- /dev/null
+++ b/frontend/src/components/header/HeaderActions.tsx
@@ -0,0 +1,46 @@
+interface HeaderActionsProps {
+    isMenuOpen: boolean;
+    onToggleMenu: () => void;
+    onAddServer: () => void;
+    onEditProfile: () => void;
+    onLogout?: () => void;
+}
+
+export const HeaderActions = ({ isMenuOpen, onToggleMenu, onAddServer, onEditProfile, onLogout }: HeaderActionsProps) => {
+    return (
+        <div className={Styles.actions}>
+            <div className="relative">
+                <button
+                    type="button"
+                    className={Styles.menuTrigger}
+                    aria-haspopup="menu"
+                    aria-expanded={isMenuOpen}
+                    onClick={onToggleMenu}
+                >
+                    Opções
+                </button>
+                {isMenuOpen && (
+                    <div className={Styles.dropdown} role="menu">
+                        <button type="button" className={Styles.dropdownItem} onClick={onAddServer}>
+                            Adicionar servidor
+                        </button>
+                        <button type="button" className={Styles.dropdownItem} onClick={onEditProfile}>
+                            Editar perfil
+                        </button>
+                    </div>
+                )}
+            </div>
+            <button type="button" className={Styles.logoutButton} onClick={onLogout}>
+                Sair
+            </button>
+        </div>
+    );
+};
+
+const Styles = {
+    actions: "flex items-center gap-3",
+    menuTrigger: "rounded-lg border border-cardBorder bg-white/70 px-4 py-2 text-sm font-medium text-text flex items-center gap-2 hover:bg-white transition-colors",
+    dropdown: "absolute right-0 mt-2 w-48 rounded-lg border border-cardBorder bg-white py-2 shadow-lg z-10",
+    dropdownItem: "w-full px-4 py-2 text-left text-sm text-text-secondary hover:bg-bg hover:text-text transition-colors",
+    logoutButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-hover",
+};
diff --git a/frontend/src/components/header/HeaderBrand.tsx b/frontend/src/components/header/HeaderBrand.tsx
new file mode 100644
index 0000000..dea23b1
--- /dev/null
+++ b/frontend/src/components/header/HeaderBrand.tsx
@@ -0,0 +1,18 @@
+export const HeaderBrand = () => {
+    return (
+        <div className={Styles.brand}>
+            <img src="/logo.webp" alt="Logo Hit Communications" className={Styles.logo} />
+            <div>
+                <p className={Styles.title}>Hit Communications</p>
+                <p className={Styles.subtitle}>Servers Manager</p>
+            </div>
+        </div>
+    );
+};
+
+const Styles = {
+    brand: "flex items-center gap-3",
+    logo: "h-10 w-10 object-contain",
+    title: "text-base font-semibold text-text",
+    subtitle: "text-xs uppercase tracking-wide text-text-secondary",
+};
diff --git a/frontend/src/components/header/ProfileModal.tsx b/frontend/src/components/header/ProfileModal.tsx
new file mode 100644
index 0000000..e4e54f7
--- /dev/null
+++ b/frontend/src/components/header/ProfileModal.tsx
@@ -0,0 +1,90 @@
+import type { ChangeEvent, FormEvent } from "react";
+import type { User } from "../../types/User";
+import type { ProfileFormState } from "./types";
+
+interface ProfileModalProps {
+    isOpen: boolean;
+    currentUser: User | null;
+    userError: string | null;
+    form: ProfileFormState;
+    loading: boolean;
+    onClose: () => void;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onSubmit: (event: FormEvent) => void;
+}
+
+export const ProfileModal = ({
+    isOpen,
+    currentUser,
+    userError,
+    form,
+    loading,
+    onClose,
+    onChange,
+    onSubmit,
+}: ProfileModalProps) => {
+    if (!isOpen) return null;
+
+    const isDisabled = !currentUser;
+
+    return (
+        <div className={Styles.modalOverlay} role="dialog" aria-modal="true">
+            <div className={Styles.modal}>
+                <div className={Styles.modalHeader}>
+                    <h2 className={Styles.modalTitle}>Editar perfil</h2>
+                    <button type="button" onClick={onClose} className={Styles.closeButton} aria-label="Fechar modal">
+                        ×
+                    </button>
+                </div>
+                {userError ? (
+                    <p className={Styles.helperText}>{userError}</p>
+                ) : (
+                    <form onSubmit={onSubmit} className={Styles.form}>
+                        <div className={Styles.formGrid}>
+                            <div className={Styles.field}>
+                                <label htmlFor="firstName" className={Styles.label}>Nome</label>
+                                <input id="firstName" name="firstName" className={Styles.input} value={form.firstName} onChange={onChange} required disabled={isDisabled} />
+                            </div>
+                            <div className={Styles.field}>
+                                <label htmlFor="lastName" className={Styles.label}>Sobrenome</label>
+                                <input id="lastName" name="lastName" className={Styles.input} value={form.lastName} onChange={onChange} required disabled={isDisabled} />
+                            </div>
+                        </div>
+                        <div className={Styles.field}>
+                            <label htmlFor="email" className={Styles.label}>Email</label>
+                            <input id="email" name="email" type="email" className={Styles.input} value={form.email} onChange={onChange} required disabled={isDisabled} />
+                        </div>
+                        <div className={Styles.field}>
+                            <label htmlFor="password" className={Styles.label}>Nova senha</label>
+                            <input id="password" name="password" type="password" className={Styles.input} value={form.password} onChange={onChange} placeholder="Informe uma nova senha" required disabled={isDisabled} />
+                            <p className={Styles.helperText}>Informe uma nova senha para confirmar a alteração.</p>
+                        </div>
+                        <div className={Styles.modalActions}>
+                            <button type="button" className={Styles.secondaryButton} onClick={onClose}>Cancelar</button>
+                            <button type="submit" className={Styles.primaryButton} disabled={loading || isDisabled}>
+                                {loading ? "Salvando..." : "Salvar alterações"}
+                            </button>
+                        </div>
+                    </form>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const Styles = {
+    modalOverlay: "fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4",
+    modal: "w-full max-w-2xl rounded-2xl border border-cardBorder bg-card p-6 shadow-xl",
+    modalHeader: "flex items-start justify-between gap-4 pb-4 border-b border-cardBorder",
+    modalTitle: "text-lg font-semibold text-text",
+    closeButton: "text-2xl leading-none text-text-secondary hover:text-text",
+    helperText: "pt-4 text-sm text-text-secondary",
+    form: "pt-4 space-y-4",
+    formGrid: "grid gap-4 md:grid-cols-2",
+    field: "flex flex-col gap-2",
+    label: "text-xs font-semibold uppercase tracking-wide text-text-secondary",
+    input: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent disabled:opacity-70",
+    modalActions: "flex justify-end gap-3 pt-2",
+    secondaryButton: "rounded-md border border-cardBorder px-4 py-2 text-sm font-medium text-text hover:bg-bg disabled:opacity-50",
+    primaryButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-hover disabled:opacity-70",
+};
diff --git a/frontend/src/components/header/ServerModal.tsx b/frontend/src/components/header/ServerModal.tsx
new file mode 100644
index 0000000..e189297
--- /dev/null
+++ b/frontend/src/components/header/ServerModal.tsx
@@ -0,0 +1,117 @@
+import type { ChangeEvent, FormEvent } from "react";
+import type { Applications, DatabaseType, ServersType } from "../../types/enums";
+import type { ServerFormState } from "./types";
+
+interface ServerModalProps {
+    isOpen: boolean;
+    form: ServerFormState;
+    loading: boolean;
+    onClose: () => void;
+    onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    onSubmit: (event: FormEvent) => void;
+    serverTypeOptions: ServersType[];
+    applicationOptions: Applications[];
+    databaseOptions: DatabaseType[];
+}
+
+export const ServerModal = ({
+    isOpen,
+    form,
+    loading,
+    onClose,
+    onChange,
+    onSubmit,
+    serverTypeOptions,
+    applicationOptions,
+    databaseOptions,
+}: ServerModalProps) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className={Styles.modalOverlay} role="dialog" aria-modal="true">
+            <div className={Styles.modal}>
+                <div className={Styles.modalHeader}>
+                    <h2 className={Styles.modalTitle}>Adicionar novo servidor</h2>
+                    <button type="button" onClick={onClose} className={Styles.closeButton} aria-label="Fechar modal">
+                        ×
+                    </button>
+                </div>
+                <form onSubmit={onSubmit} className={Styles.form}>
+                    <div className={Styles.formGrid}>
+                        <div className={Styles.field}>
+                            <label htmlFor="name" className={Styles.label}>Nome</label>
+                            <input id="name" name="name" className={Styles.input} value={form.name} onChange={onChange} required />
+                        </div>
+                        <div className={Styles.field}>
+                            <label htmlFor="ip" className={Styles.label}>IP</label>
+                            <input id="ip" name="ip" className={Styles.input} value={form.ip} onChange={onChange} placeholder="192.168.0.10" required />
+                        </div>
+                    </div>
+                    <div className={Styles.formGrid}>
+                        <div className={Styles.field}>
+                            <label htmlFor="port" className={Styles.label}>Porta</label>
+                            <input id="port" name="port" type="number" min="1" className={Styles.input} value={form.port} onChange={onChange} required />
+                        </div>
+                        <div className={Styles.field}>
+                            <label htmlFor="user" className={Styles.label}>Usuário</label>
+                            <input id="user" name="user" className={Styles.input} value={form.user} onChange={onChange} required />
+                        </div>
+                    </div>
+                    <div className={Styles.field}>
+                        <label htmlFor="password" className={Styles.label}>Senha</label>
+                        <input id="password" name="password" type="password" className={Styles.input} value={form.password} onChange={onChange} required />
+                    </div>
+                    <div className={Styles.formGrid}>
+                        <div className={Styles.field}>
+                            <label htmlFor="type" className={Styles.label}>Tipo</label>
+                            <select id="type" name="type" className={Styles.select} value={form.type} onChange={onChange}>
+                                {serverTypeOptions.map((option) => (
+                                    <option key={option} value={option}>{option.toLowerCase()}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div className={Styles.field}>
+                            <label htmlFor="application" className={Styles.label}>Aplicação</label>
+                            <select id="application" name="application" className={Styles.select} value={form.application} onChange={onChange}>
+                                {applicationOptions.map((option) => (
+                                    <option key={option} value={option}>{option.toLowerCase()}</option>
+                                ))}
+                            </select>
+                        </div>
+                    </div>
+                    <div className={Styles.field}>
+                        <label htmlFor="dbType" className={Styles.label}>Banco de dados</label>
+                        <select id="dbType" name="dbType" className={Styles.select} value={form.dbType} onChange={onChange}>
+                            {databaseOptions.map((option) => (
+                                <option key={option} value={option}>{option.toLowerCase()}</option>
+                            ))}
+                        </select>
+                    </div>
+                    <div className={Styles.modalActions}>
+                        <button type="button" className={Styles.secondaryButton} onClick={onClose}>Cancelar</button>
+                        <button type="submit" className={Styles.primaryButton} disabled={loading}>
+                            {loading ? "Salvando..." : "Salvar servidor"}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+const Styles = {
+    modalOverlay: "fixed inset-0 z-40 flex items-center justify-center bg-black/40 px-4",
+    modal: "w-full max-w-2xl rounded-2xl border border-cardBorder bg-card p-6 shadow-xl",
+    modalHeader: "flex items-start justify-between gap-4 pb-4 border-b border-cardBorder",
+    modalTitle: "text-lg font-semibold text-text",
+    closeButton: "text-2xl leading-none text-text-secondary hover:text-text",
+    form: "pt-4 space-y-4",
+    formGrid: "grid gap-4 md:grid-cols-2",
+    field: "flex flex-col gap-2",
+    label: "text-xs font-semibold uppercase tracking-wide text-text-secondary",
+    input: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent",
+    select: "rounded-lg border border-cardBorder bg-white px-3 py-2 text-sm text-text outline-none focus:border-accent focus:ring-1 focus:ring-accent capitalize",
+    modalActions: "flex justify-end gap-3 pt-2",
+    secondaryButton: "rounded-md border border-cardBorder px-4 py-2 text-sm font-medium text-text hover:bg-bg disabled:opacity-50",
+    primaryButton: "rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white hover:bg-hover disabled:opacity-70",
+};
diff --git a/frontend/src/components/header/types.ts b/frontend/src/components/header/types.ts
new file mode 100644
index 0000000..58733b1
--- /dev/null
+++ b/frontend/src/components/header/types.ts
@@ -0,0 +1,19 @@
+import type { Applications, DatabaseType, ServersType } from "../../types/enums";
+
+export type ServerFormState = {
+    name: string;
+    ip: string;
+    port: string;
+    user: string;
+    password: string;
+    type: ServersType;
+    application: Applications;
+    dbType: DatabaseType;
+};
+
+export type ProfileFormState = {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+};