frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Navigate, 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,16 +1,11 @@
-import type { ReactNode } from "react";
-
 interface Props {
-    children: ReactNode;
-    className?: string;
+    children: React.ReactNode
+    className?: string
 }
 
 export const Layout = ({ children, className }: Props) => {
-    const baseClass = "mx-[5%] items-center";
-    const layoutClass = className ? `${baseClass} ${className}` : baseClass;
-
     return (
-        <div className={layoutClass}>
+        <div className={`mx-[5%] items-center ${className}`}>
             {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 rounded-lg shadow-sm border border-cardBorder">
-                            <table className="min-w-full divide-y divide-cardBorder table-auto">
-                                <thead className="bg-gray-50 sticky top-0">
-                                    <tr className="text-left">
+                        <div className="overflow-x-auto">
+                            <table className="min-w-full divide-y divide-cardBorder">
+                                <thead className="bg-gray-50">
+                                    <tr>
                                         <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="bg-white divide-y divide-cardBorder">
+                                <tbody className="divide-y divide-cardBorder bg-white">
                                     {servers.map((server) => (
-                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors even:bg-gray-50/50">
+                                        <tr key={server.id} className="hover:bg-gray-50 transition-colors">
                                             <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="w-36 h-36 mx-auto mb-4" />
+            <img src="/logo.webp " alt="Logo" className={Styles.logo} />
             <div className={Styles.card}>
                 <form onSubmit={handleSubmit}>
                     <div>
-                        <label htmlFor="email" className="block mb-2 text-md font-medium text-text">Email:</label>
+                        <label htmlFor="email" className={Styles.label}>Email:</label>
                         <input 
                             type="email" 
                             id="email" 
@@ -64,8 +64,8 @@ export const Login = () => {
                             className={Styles.input} 
                             onChange={handleChange}/>
                     </div>
-                    <div className="relative">
-                        <label htmlFor="password" className="block mb-2 text-md font-medium text-text">Password:</label>
+                    <div className={Styles.inputWrapper}>
+                        <label htmlFor="password" className={Styles.label}>Password:</label>
                         <input
                             type={showPassword ? "text" : "password"}
                             id="password"
@@ -96,7 +96,10 @@ 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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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';