refactor(frontend): ajusta layout e imports

- Remove Navigate não usado e marca enums apenas como tipo
- Evita classe 'undefined' no Layout ao compor className opcional
- Simplifica estilos do Login para rótulos, logo e wrapper de senha

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
 import { Login } from './pages/Login';
 import { Dashboard } from './pages/Dashboard';

frontend/src/components/Layout.tsx

@@ -1,12 +1,17 @@
+import type { ReactNode } from "react";
+
 interface Props {
-    children: React.ReactNode
+    children: ReactNode;
-    className?: string
+    className?: string;
 }
 
 export const Layout = ({ children, className }: Props) => {
+    const baseClass = "mx-[5%] items-center";
+    const layoutClass = className ? `${baseClass} ${className}` : baseClass;
+
     return (
-        <div className={`mx-[5%] items-center ${className}`}>
+        <div className={layoutClass}>
             {children}
         </div>
     );
-};
+};

frontend/src/pages/Dashboard.tsx

@@ -36,10 +36,10 @@ export const Dashboard = () => {
                         <div className="p-4 text-text-secondary text-sm">Nenhum servidor encontrado.</div>
                     )}
                     {!loading && !error && servers.length > 0 && (
-                        <div className="overflow-x-auto">
+                        <div className="overflow-x-auto rounded-lg shadow-sm border border-cardBorder">
-                            <table className="min-w-full divide-y divide-cardBorder">
+                            <table className="min-w-full divide-y divide-cardBorder table-auto">
-                                <thead className="bg-gray-50">
+                                <thead className="bg-gray-50 sticky top-0">
-                                    <tr>
+                                    <tr className="text-left">
                                         <th className={Styles.tableHeadCell}>Nome</th>
                                         <th className={Styles.tableHeadCell}>IP</th>
                                         <th className={Styles.tableHeadCell}>Porta</th>
@@ -49,9 +49,9 @@ export const Dashboard = () => {
                                         <th className={Styles.tableHeadCell}>Banco</th>
                                     </tr>
                                 </thead>
-                                <tbody className="divide-y divide-cardBorder bg-white">
+                                <tbody className="bg-white divide-y divide-cardBorder">
                                     {servers.map((server) => (
-                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors">
+                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors even:bg-gray-50/50">
                                             <td className={Styles.rowCell}>{server.name}</td>
                                             <td className={Styles.rowCell}>{server.ip}</td>
                                             <td className={Styles.rowCell}>{server.port}</td>

frontend/src/pages/Login.tsx

@@ -50,11 +50,11 @@ export const Login = () => {
 
     return (
         <Layout className={Styles.layout}>
-            <img src="/logo.webp " alt="Logo" className={Styles.logo} />
+            <img src="/logo.webp " alt="Logo" className="w-36 h-36 mx-auto mb-4" />
             <div className={Styles.card}>
                 <form onSubmit={handleSubmit}>
                     <div>
-                        <label htmlFor="email" className={Styles.label}>Email:</label>
+                        <label htmlFor="email" className="block mb-2 text-md font-medium text-text">Email:</label>
                         <input 
                             type="email" 
                             id="email" 
@@ -64,8 +64,8 @@ export const Login = () => {
                             className={Styles.input} 
                             onChange={handleChange}/>
                     </div>
-                    <div className={Styles.inputWrapper}>
+                    <div className="relative">
-                        <label htmlFor="password" className={Styles.label}>Password:</label>
+                        <label htmlFor="password" className="block mb-2 text-md font-medium text-text">Password:</label>
                         <input
                             type={showPassword ? "text" : "password"}
                             id="password"
@@ -96,10 +96,7 @@ export const Login = () => {
 
 const Styles = {
     layout: "h-screen flex flex-col gap-4 justify-center animate-fade-up",
-    logo: "w-36 h-36 mx-auto mb-4",
     card: "w-96 p-8 shadow-lg rounded-lg border border-cardBorder bg-card",
-    label: "block mb-2 text-md font-medium text-text",
-    inputWrapper: "relative",
     input: "bg-gray-50 border border-cardBorder text-text text-md rounded-lg outline-none block w-full p-2.5",
     iconButton: "absolute right-3 top-1/2 text-text p-1 focus:outline-none",
     button: "w-full bg-accent p-2 rounded-md mt-4 text-white font-bold text-lg hover:bg-hover transition duration-150",

frontend/src/types/Server.ts

@@ -0,0 +1,14 @@
+import type { Applications, DatabaseType, ServersType } from "./enums";
+
+export interface Server {
+    id: string;
+    name: string;
+    ip: string;
+    port: number;
+    user: string;
+    type: ServersType;
+    application: Applications;
+    dbType: DatabaseType;
+    createdAt: string;
+    updatedAt: string;
+}

frontend/src/types/enums.ts

@@ -0,0 +1,18 @@
+export type DatabaseType =
+    | 'MYSQL'
+    | 'POSTGRESQL'
+    | 'SQLSERVER'
+    | 'ORACLE'
+    | 'REDIS'
+    | 'MONGODB'
+    | 'MARIADB'
+    | 'NONE';
+
+export type Applications =
+    | 'ASTERISK'
+    | 'HITMANAGER'
+    | 'HITMANAGER_V2'
+    | 'OMNIHIT'
+    | 'HITPHONE';
+
+export type ServersType = 'PRODUCTION' | 'HOMOLOGATION' | 'DATABASE';