feat(portal): align navbar and sidebar with figma style, add notifica…

.gitignore

@@ -18,4 +18,5 @@ docker/.env
 .idea/
 .vscode/
 
-coverage/
+coverage/
+figma/

portal/src/components/AdminRoute.tsx

@@ -13,7 +13,7 @@ export function AdminRoute({ children }: AdminRouteProps) {
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-          <p className="mt-4 text-neutral-600">Carregando...</p>
+          <p className="mt-4 text-neutral-600">Loading...</p>
         </div>
       </div>
     )
@@ -25,7 +25,7 @@ export function AdminRoute({ children }: AdminRouteProps) {
         <div className="text-center p-8 bg-white rounded-xl shadow-soft border border-neutral-200/60">
           <AlertCircle size={48} className="text-red-500 mx-auto mb-4" />
           <h2 className="text-2xl font-bold text-neutral-800 mb-2">Acesso Negado</h2>
-          <p className="text-neutral-600">Você não tem permissão para acessar esta página.</p>
+          <p className="text-neutral-600">You do not have permission to access this page.</p>
         </div>
       </div>
     )

portal/src/components/DataTable.tsx

@@ -32,7 +32,7 @@ function DataTable<T>({
   getRowKey,
   actions,
   searchable = true,
-  searchPlaceholder = 'Buscar...',
+  searchPlaceholder = 'Search...',
 }: DataTableProps<T>) {
   const [searchTerm, setSearchTerm] = useState('')
   const [sortColumn, setSortColumn] = useState<keyof T | string | null>(null)
@@ -193,7 +193,7 @@ function DataTable<T>({
                 <td colSpan={colSpan} className="px-6 py-12 text-center text-neutral-400">
                   <div className="flex items-center justify-center gap-2">
                     <div className={`animate-spin rounded-full h-5 w-5 border-2 ${spinnerClass}`}></div>
-                    <span className="text-sm text-neutral-600">Carregando...</span>
+                    <span className="text-sm text-neutral-600">Loading...</span>
                   </div>
                 </td>
               </tr>

portal/src/components/ProtectedRoute.tsx

@@ -13,7 +13,7 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
       <div className="min-h-screen flex items-center justify-center">
         <div className="text-center">
           <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-          <p className="mt-4 text-neutral-600">Carregando...</p>
+          <p className="mt-4 text-neutral-600">Loading...</p>
         </div>
       </div>
     )

portal/src/pages/Login.tsx

@@ -129,7 +129,7 @@ export default function Login() {
                     if (errors.email) setErrors({ ...errors, email: '' })
                   }}
                   className={`input pl-10 w-full ${errors.email ? 'border-red-500' : ''}`}
-                  placeholder="seu@email.com"
+                  placeholder="your@email.com"
                   autoComplete="email"
                 />
                 {errors.email && (

portal/src/pages/clusters/Clusters.tsx

@@ -390,7 +390,7 @@ function Clusters() {
                   value={formData.name}
                   onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                   className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500/50 focus:border-blue-400 transition-all text-sm"
-                  placeholder="meu-cluster"
+                  placeholder="my-cluster"
                   required
                 />
               </div>

portal/src/pages/users/Users.tsx

@@ -397,7 +397,7 @@ function Users() {
                   value={formData.email}
                   onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                   className="input w-full"
-                  placeholder="usuario@exemplo.com"
+                  placeholder="user@example.com"
                   required
                 />
               </div>

portal/src/shared/components/DataTable.tsx

@@ -32,7 +32,7 @@ function DataTable<T>({
   getRowKey,
   actions,
   searchable = true,
-  searchPlaceholder = 'Buscar...',
+  searchPlaceholder = 'Search...',
 }: DataTableProps<T>) {
   const [searchTerm, setSearchTerm] = useState('')
   const [sortColumn, setSortColumn] = useState<keyof T | string | null>(null)