From 2805440f9f9b4f892a876bcaf386c180d06bd89b Mon Sep 17 00:00:00 2001
From: Artur Oliveira <artur.oliveira@hittelco.com>
Date: Tue, 16 Dec 2025 13:48:47 -0300
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20adicionar=20fluxos=20de=20cri?=
 =?UTF-8?q?a=C3=A7=C3=A3o=20e=20perfil=20-=20Exporta=20utilit=C3=A1rios=20?=
 =?UTF-8?q?de=20token=20no=20cliente=20para=20buscar=20usu=C3=A1rio=20atua?=
 =?UTF-8?q?l=20-=20Implementa=20formul=C3=A1rios=20modais=20para=20novo=20?=
 =?UTF-8?q?servidor=20e=20edi=C3=A7=C3=A3o=20de=20perfil=20-=20Integra=20d?=
 =?UTF-8?q?ashboard=20com=20usu=C3=A1rio=20logado=20e=20atualiza=20lista?=
 =?UTF-8?q?=20ap=C3=B3s=20cria=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/Api.ts                |  23 +-
 frontend/src/components/Header.tsx | 347 ++++++++++++++++++++++++++---
 frontend/src/pages/Dashboard.tsx   |  61 +++--
 frontend/src/types/User.ts         |  10 +
 4 files changed, 386 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/types/User.ts

diff --git a/frontend/src/Api.ts b/frontend/src/Api.ts
index c374fd0..89c661d 100644
--- a/frontend/src/Api.ts
+++ b/frontend/src/Api.ts
@@ -13,11 +13,13 @@ const api = axios.create({
     },
 });
 
-type JwtPayload = {
+export type JwtPayload = {
     exp?: number;
+    sub?: string;
+    [key: string]: unknown;
 };
 
-const getCookieValue = (name: string): string | undefined => {
+export const getCookieValue = (name: string): string | undefined => {
     if (typeof document === "undefined") {
         return undefined;
     }
@@ -30,7 +32,7 @@ const getCookieValue = (name: string): string | undefined => {
     return cookie ? decodeURIComponent(cookie.split("=")[1]) : undefined;
 };
 
-const decodeJwtPayload = (token: string): JwtPayload | null => {
+export const decodeJwtPayload = (token: string): JwtPayload | null => {
     try {
         const [, payload] = token.split(".");
         if (!payload) return null;
@@ -42,6 +44,15 @@ const decodeJwtPayload = (token: string): JwtPayload | null => {
     }
 };
 
+export const getAccessToken = () => getCookieValue(ACCESS_TOKEN_COOKIE);
+
+export const getCurrentUsername = () => {
+    const token = getAccessToken();
+    if (!token) return undefined;
+    const payload = decodeJwtPayload(token);
+    return typeof payload?.sub === "string" ? payload.sub : undefined;
+};
+
 const isTokenExpiringSoon = (token?: string) => {
     if (!token) return false;
     const payload = decodeJwtPayload(token);
@@ -67,7 +78,7 @@ const refreshAccessToken = async () => {
         refreshPromise = api
             .post(REFRESH_ENDPOINT)
             .then(() => {
-                const token = getCookieValue(ACCESS_TOKEN_COOKIE);
+                const token = getAccessToken();
                 setAuthToken(token);
             })
             .catch((error) => {
@@ -85,7 +96,7 @@ api.interceptors.request.use(async (config) => {
     const isRefreshCall = config.url?.includes(REFRESH_ENDPOINT);
 
     if (!isRefreshCall) {
-        const token = getCookieValue(ACCESS_TOKEN_COOKIE);
+        const token = getAccessToken();
         if (isTokenExpiringSoon(token)) {
             try {
                 await refreshAccessToken();
@@ -95,7 +106,7 @@ api.interceptors.request.use(async (config) => {
             }
         }
 
-        const updatedToken = getCookieValue(ACCESS_TOKEN_COOKIE);
+        const updatedToken = getAccessToken();
         if (updatedToken) {
             config.headers = config.headers ?? {};
             config.headers.Authorization = `Bearer ${updatedToken}`;
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d49cedf..d12307e 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,47 +1,312 @@
-import { useState } from "react";
+import { type ChangeEvent, type FormEvent, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import api from "../Api";
+import type { Applications, DatabaseType, ServersType } from "../types/enums";
+import type { User } from "../types/User";
 
-export const Header = () => {
+type ModalType = "addServer" | "editProfile" | null;
+
+interface HeaderProps {
+    currentUser: User | null;
+    userError: string | null;
+    onServerCreated?: () => Promise<void> | void;
+    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: "",
+    port: "",
+    user: "",
+    password: "",
+    type: "PRODUCTION",
+    application: "ASTERISK",
+    dbType: "MYSQL",
+};
+
+const defaultProfileForm: ProfileFormState = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+};
+
+const serverTypeOptions: ServersType[] = ["PRODUCTION", "HOMOLOGATION", "DATABASE"];
+const applicationOptions: Applications[] = ["ASTERISK", "HITMANAGER", "HITMANAGER_V2", "OMNIHIT", "HITPHONE"];
+const databaseOptions: DatabaseType[] = ["MYSQL", "POSTGRESQL", "SQLSERVER", "ORACLE", "REDIS", "MONGODB", "MARIADB", "NONE"];
+
+export const Header = ({ currentUser, userError, onServerCreated, onProfileUpdated }: HeaderProps) => {
     const [isMenuOpen, setMenuOpen] = useState(false);
+    const [activeModal, setActiveModal] = useState<ModalType>(null);
+    const [serverForm, setServerForm] = useState<ServerFormState>(defaultServerForm);
+    const [profileForm, setProfileForm] = useState<ProfileFormState>(defaultProfileForm);
+    const [serverLoading, setServerLoading] = useState(false);
+    const [profileLoading, setProfileLoading] = useState(false);
+
+    useEffect(() => {
+        if (currentUser) {
+            setProfileForm((prev) => ({
+                ...prev,
+                firstName: currentUser.firstName ?? "",
+                lastName: currentUser.lastName ?? "",
+                email: currentUser.email ?? "",
+            }));
+        }
+    }, [currentUser]);
 
     const toggleMenu = () => setMenuOpen((prev) => !prev);
+    const openModal = (modal: ModalType) => {
+        setMenuOpen(false);
+        setActiveModal(modal);
+    };
+    const closeModal = () => {
+        setActiveModal(null);
+        setServerForm(defaultServerForm);
+        setProfileForm((prev) => ({ ...prev, password: "" }));
+    };
+
+    const handleServerFormChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setServerForm((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleProfileFormChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setProfileForm((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleServerSubmit = async (event: FormEvent) => {
+        event.preventDefault();
+        setServerLoading(true);
+        try {
+            await api.post("/api/servers", {
+                ...serverForm,
+                port: Number(serverForm.port),
+            });
+            toast.success("Servidor criado com sucesso!");
+            setServerForm(defaultServerForm);
+            setActiveModal(null);
+            if (onServerCreated) {
+                await Promise.resolve(onServerCreated());
+            }
+        } catch (err: any) {
+            const message = err?.response?.data?.message || "Falha ao criar servidor.";
+            toast.error(message);
+        } finally {
+            setServerLoading(false);
+        }
+    };
+
+    const handleProfileSubmit = async (event: FormEvent) => {
+        event.preventDefault();
+        if (!currentUser) {
+            toast.error("Usuário não identificado.");
+            return;
+        }
+        setProfileLoading(true);
+        try {
+            const { data } = await api.put<User>(`/api/users/${currentUser.id}`, {
+                firstName: profileForm.firstName,
+                lastName: profileForm.lastName,
+                email: profileForm.email,
+                password: profileForm.password,
+            });
+            toast.success("Perfil atualizado com sucesso!");
+            setProfileForm((prev) => ({ ...prev, password: "" }));
+            setActiveModal(null);
+            onProfileUpdated?.(data);
+        } catch (err: any) {
+            const message = err?.response?.data?.message || "Falha ao atualizar o perfil.";
+            toast.error(message);
+        } finally {
+            setProfileLoading(false);
+        }
+    };
+
+    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>
+        <>
+            <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>
 
-            <div className={Styles.actions}>
-                <div className="relative">
-                    <button
-                        type="button"
-                        className={Styles.menuTrigger}
-                        aria-haspopup="menu"
-                        aria-expanded={isMenuOpen}
-                        onClick={toggleMenu}
-                    >
-                        Opções
+                <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>
-                    {isMenuOpen && (
-                        <div className={Styles.dropdown} role="menu">
-                            <button type="button" className={Styles.dropdownItem}>
-                                Adicionar servidor
-                            </button>
-                            <button type="button" className={Styles.dropdownItem}>
-                                Editar perfil
+                </div>
+            </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>
-                <button type="button" className={Styles.logoutButton}>
-                    Sair
-                </button>
-            </div>
-        </header>
+            )}
+        </>
     );
 };
 
@@ -53,7 +318,23 @@ const Styles = {
     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-44 rounded-lg border border-cardBorder bg-white py-2 shadow-lg",
+    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/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 5ef28aa..170e7c8 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,36 +1,65 @@
-import { useEffect, useState } from "react";
-import api from "../Api";
+import { useCallback, useEffect, useState } from "react";
+import api, { getCurrentUsername } from "../Api";
 import { Layout } from "../components/Layout";
 import { Header } from "../components/Header";
 import { ServerCardMetrics } from "../components/ServerCardMetrics";
 import { ServersTable } from "../components/ServersTable";
 import type { Server } from "../types/Server";
+import type { User } from "../types/User";
+import toast from "react-hot-toast";
 
 export const Dashboard = () => {
     const [servers, setServers] = useState<Server[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
+    const [currentUser, setCurrentUser] = useState<User | null>(null);
+    const [userError, setUserError] = useState<string | null>(null);
+
+    const fetchServers = useCallback(async () => {
+        setLoading(true);
+        try {
+            const { data } = await api.get<Server[]>("/api/servers");
+            setServers(data);
+            setError(null);
+        } catch (err: any) {
+            const message = err?.response?.data?.message || "Falha ao carregar servidores.";
+            setError(message);
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    const fetchCurrentUser = useCallback(async () => {
+        try {
+            const username = getCurrentUsername();
+            if (!username) {
+                setUserError("Não foi possível identificar o usuário logado.");
+                return;
+            }
+            const { data } = await api.get<User>(`/api/users/username/${encodeURIComponent(username)}`);
+            setCurrentUser(data);
+            setUserError(null);
+        } catch (err: any) {
+            const message = err?.response?.data?.message || "Falha ao carregar o perfil do usuário.";
+            setUserError(message);
+            toast.error(message);
+        }
+    }, []);
 
     useEffect(() => {
-        const fetchServers = async () => {
-            try {
-                const { data } = await api.get<Server[]>("/api/servers");
-                setServers(data);
-            } catch (err: any) {
-                const message = err?.response?.data?.message || "Falha ao carregar servidores.";
-                setError(message);
-            } finally {
-                setLoading(false);
-            }
-        };
-
         fetchServers();
-    }, []);
+        fetchCurrentUser();
+    }, [fetchServers, fetchCurrentUser]);
 
     return (
         <Layout className="h-screen py-10">
             <div className="space-y-6">
-                <Header />
+                <Header
+                    currentUser={currentUser}
+                    userError={userError}
+                    onServerCreated={fetchServers}
+                    onProfileUpdated={setCurrentUser}
+                />
                 <ServerCardMetrics />
                 <ServersTable servers={servers} loading={loading} error={error} />
             </div>
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
new file mode 100644
index 0000000..574f77a
--- /dev/null
+++ b/frontend/src/types/User.ts
@@ -0,0 +1,10 @@
+export interface User {
+    id: string;
+    username: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    createdAt: string;
+    updatedAt: string;
+    lastLogin: string | null;
+}