From 6cd5d490de85744e7ece9ff2d57e510ec6e26ab4 Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Mon, 9 Mar 2026 20:14:35 -0300
Subject: [PATCH] fix: increase upload limit to 15MB and fix infinite loading
 with S3 timeouts

---
 .../app/admin/projetos/[id]/editar/page.tsx   | 56 +++++++++----------
 frontend/src/app/admin/projetos/novo/page.tsx | 54 +++++++++---------
 frontend/src/app/api/upload/route.ts          | 12 +++-
 frontend/src/lib/minio.ts                     |  6 ++
 4 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/admin/projetos/[id]/editar/page.tsx b/frontend/src/app/admin/projetos/[id]/editar/page.tsx
index bf5f409..e797b1a 100644
--- a/frontend/src/app/admin/projetos/[id]/editar/page.tsx
+++ b/frontend/src/app/admin/projetos/[id]/editar/page.tsx
@@ -58,7 +58,7 @@ export default function EditProject({ params }: { params: { id: string } }) {
           throw new Error('Projeto não encontrado');
         }
         const project = await res.json();
-        
+
         setFormData({
           title: project.title || '',
           category: project.category || '',
@@ -98,8 +98,8 @@ export default function EditProject({ params }: { params: { id: string } }) {
   }, [params.id, error, router]);
 
   const uploadFile = async (file: File): Promise<UploadedImage | null> => {
-    if (file.size > 2 * 1024 * 1024) {
-      error('Arquivo maior que 2MB. Escolha uma imagem menor.');
+    if (file.size > 15 * 1024 * 1024) {
+      error('Arquivo maior que 15MB. Escolha uma imagem menor.');
       return null;
     }
 
@@ -236,8 +236,8 @@ export default function EditProject({ params }: { params: { id: string } }) {
   return (
     <div className="max-w-4xl mx-auto">
       <div className="flex items-center gap-4 mb-8">
-        <Link 
-          href="/admin/projetos" 
+        <Link
+          href="/admin/projetos"
           className="w-10 h-10 rounded-xl bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 flex items-center justify-center text-gray-500 hover:text-primary hover:border-primary transition-colors shadow-sm"
         >
           <i className="ri-arrow-left-line text-xl"></i>
@@ -255,14 +255,14 @@ export default function EditProject({ params }: { params: { id: string } }) {
             <i className="ri-information-line text-primary"></i>
             Informações Básicas
           </h2>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="md:col-span-2">
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Título do Projeto</label>
-              <input 
-                type="text" 
+              <input
+                type="text"
                 value={formData.title}
-                onChange={(e) => setFormData({...formData, title: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                 placeholder="Ex: Adequação de Frota Coca-Cola"
                 required
@@ -271,9 +271,9 @@ export default function EditProject({ params }: { params: { id: string } }) {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Categoria</label>
-              <select 
+              <select
                 value={formData.category}
-                onChange={(e) => setFormData({...formData, category: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
                 required
               >
@@ -288,8 +288,8 @@ export default function EditProject({ params }: { params: { id: string } }) {
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Adicionar Nova Categoria</label>
               <div className="flex gap-2">
-                <input 
-                  type="text" 
+                <input
+                  type="text"
                   value={newCategory}
                   onChange={(e) => setNewCategory(e.target.value)}
                   className="flex-1 px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
@@ -301,7 +301,7 @@ export default function EditProject({ params }: { params: { id: string } }) {
                     if (newCategory.trim()) {
                       const newCat = { value: newCategory, label: newCategory };
                       setCategories([...categories, newCat]);
-                      setFormData({...formData, category: newCategory});
+                      setFormData({ ...formData, category: newCategory });
                       setNewCategory('');
                       success('Categoria adicionada!');
                     }
@@ -315,10 +315,10 @@ export default function EditProject({ params }: { params: { id: string } }) {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Cliente</label>
-              <input 
-                type="text" 
+              <input
+                type="text"
                 value={formData.client}
-                onChange={(e) => setFormData({...formData, client: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, client: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                 placeholder="Ex: Coca-Cola FEMSA"
               />
@@ -326,19 +326,19 @@ export default function EditProject({ params }: { params: { id: string } }) {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Data de Conclusão</label>
-              <input 
-                type="date" 
+              <input
+                type="date"
                 value={formData.date}
-                onChange={(e) => setFormData({...formData, date: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
               />
             </div>
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Status</label>
-              <select 
+              <select
                 value={formData.status}
-                onChange={(e) => setFormData({...formData, status: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
               >
                 {STATUS_OPTIONS.map((option) => (
@@ -349,9 +349,9 @@ export default function EditProject({ params }: { params: { id: string } }) {
 
             <div className="md:col-span-2">
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Descrição Detalhada</label>
-              <textarea 
+              <textarea
                 value={formData.description}
-                onChange={(e) => setFormData({...formData, description: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 rows={6}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
                 placeholder="Descreva os detalhes técnicos, desafios e soluções do projeto..."
@@ -413,7 +413,7 @@ export default function EditProject({ params }: { params: { id: string } }) {
                     <p className="text-gray-600 dark:text-gray-300 font-medium mb-1">
                       {uploadingCover ? 'Enviando imagem...' : 'Clique para fazer upload ou arraste e solte'}
                     </p>
-                    <p className="text-xs text-gray-400">PNG, JPG ou WEBP (máximo 2MB)</p>
+                    <p className="text-xs text-gray-400">PNG, JPG ou WEBP (máximo 15MB)</p>
                   </div>
                 )}
                 <input
@@ -480,14 +480,14 @@ export default function EditProject({ params }: { params: { id: string } }) {
 
         {/* Actions */}
         <div className="flex items-center justify-end gap-4 pt-4">
-          <Link 
+          <Link
             href="/admin/projetos"
             className="px-8 py-3 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"
           >
             Cancelar
           </Link>
-          <button 
-            type="submit" 
+          <button
+            type="submit"
             disabled={isSaving}
             className="px-8 py-3 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
           >
diff --git a/frontend/src/app/admin/projetos/novo/page.tsx b/frontend/src/app/admin/projetos/novo/page.tsx
index 6671b08..6abb1dc 100644
--- a/frontend/src/app/admin/projetos/novo/page.tsx
+++ b/frontend/src/app/admin/projetos/novo/page.tsx
@@ -49,8 +49,8 @@ export default function NewProject() {
   const isSaving = loading || uploadingCover || uploadingGallery;
 
   const uploadFile = async (file: File): Promise<UploadedImage | null> => {
-    if (file.size > 2 * 1024 * 1024) {
-      error('Arquivo maior que 2MB. Escolha uma imagem menor.');
+    if (file.size > 15 * 1024 * 1024) {
+      error('Arquivo maior que 15MB. Escolha uma imagem menor.');
       return null;
     }
 
@@ -177,8 +177,8 @@ export default function NewProject() {
   return (
     <div className="max-w-4xl mx-auto">
       <div className="flex items-center gap-4 mb-8">
-        <Link 
-          href="/admin/projetos" 
+        <Link
+          href="/admin/projetos"
           className="w-10 h-10 rounded-xl bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 flex items-center justify-center text-gray-500 hover:text-primary hover:border-primary transition-colors shadow-sm"
         >
           <i className="ri-arrow-left-line text-xl"></i>
@@ -196,14 +196,14 @@ export default function NewProject() {
             <i className="ri-information-line text-primary"></i>
             Informações Básicas
           </h2>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="md:col-span-2">
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Título do Projeto</label>
-              <input 
-                type="text" 
+              <input
+                type="text"
                 value={formData.title}
-                onChange={(e) => setFormData({...formData, title: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                 placeholder="Ex: Adequação de Frota Coca-Cola"
                 required
@@ -212,9 +212,9 @@ export default function NewProject() {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Categoria</label>
-              <select 
+              <select
                 value={formData.category}
-                onChange={(e) => setFormData({...formData, category: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
                 required
               >
@@ -229,8 +229,8 @@ export default function NewProject() {
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Adicionar Nova Categoria</label>
               <div className="flex gap-2">
-                <input 
-                  type="text" 
+                <input
+                  type="text"
                   value={newCategory}
                   onChange={(e) => setNewCategory(e.target.value)}
                   className="flex-1 px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
@@ -242,7 +242,7 @@ export default function NewProject() {
                     if (newCategory.trim()) {
                       const newCat = { value: newCategory, label: newCategory };
                       setCategories([...categories, newCat]);
-                      setFormData({...formData, category: newCategory});
+                      setFormData({ ...formData, category: newCategory });
                       setNewCategory('');
                       success('Categoria adicionada!');
                     }
@@ -256,10 +256,10 @@ export default function NewProject() {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Cliente</label>
-              <input 
-                type="text" 
+              <input
+                type="text"
                 value={formData.client}
-                onChange={(e) => setFormData({...formData, client: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, client: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                 placeholder="Ex: Coca-Cola FEMSA"
               />
@@ -267,19 +267,19 @@ export default function NewProject() {
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Data de Conclusão</label>
-              <input 
-                type="date" 
+              <input
+                type="date"
                 value={formData.date}
-                onChange={(e) => setFormData({...formData, date: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
               />
             </div>
 
             <div>
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Status</label>
-              <select 
+              <select
                 value={formData.status}
-                onChange={(e) => setFormData({...formData, status: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all appearance-none cursor-pointer"
               >
                 {STATUS_OPTIONS.map((option) => (
@@ -290,9 +290,9 @@ export default function NewProject() {
 
             <div className="md:col-span-2">
               <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Descrição Detalhada</label>
-              <textarea 
+              <textarea
                 value={formData.description}
-                onChange={(e) => setFormData({...formData, description: e.target.value})}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                 rows={6}
                 className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
                 placeholder="Descreva os detalhes técnicos, desafios e soluções do projeto..."
@@ -354,7 +354,7 @@ export default function NewProject() {
                     <p className="text-gray-600 dark:text-gray-300 font-medium mb-1">
                       {uploadingCover ? 'Enviando imagem...' : 'Clique para fazer upload ou arraste e solte'}
                     </p>
-                    <p className="text-xs text-gray-400">PNG, JPG ou WEBP (máximo 2MB)</p>
+                    <p className="text-xs text-gray-400">PNG, JPG ou WEBP (máximo 15MB)</p>
                   </div>
                 )}
                 <input
@@ -421,14 +421,14 @@ export default function NewProject() {
 
         {/* Actions */}
         <div className="flex items-center justify-end gap-4 pt-4">
-          <Link 
+          <Link
             href="/admin/projetos"
             className="px-8 py-3 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"
           >
             Cancelar
           </Link>
-          <button 
-            type="submit" 
+          <button
+            type="submit"
             disabled={isSaving}
             className="px-8 py-3 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
           >
diff --git a/frontend/src/app/api/upload/route.ts b/frontend/src/app/api/upload/route.ts
index ab1f071..a0c6b73 100644
--- a/frontend/src/app/api/upload/route.ts
+++ b/frontend/src/app/api/upload/route.ts
@@ -2,7 +2,17 @@ import { NextResponse } from 'next/server';
 import { minioClient, bucketName, ensureBucketExists } from '@/lib/minio';
 import { v4 as uuidv4 } from 'uuid';
 
+export const maxDuration = 60; // 60 segundos
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '15mb',
+    },
+  },
+};
+
 export async function POST(request: Request) {
+  console.log('📤 Recebendo upload de arquivo...');
   try {
     await ensureBucketExists();
 
@@ -15,7 +25,7 @@ export async function POST(request: Request) {
 
     const buffer = Buffer.from(await file.arrayBuffer());
     const filename = `${uuidv4()}-${file.name.replace(/\s+/g, '-')}`; // Sanitize filename
-    
+
     await minioClient.putObject(bucketName, filename, buffer, file.size, {
       'Content-Type': file.type,
     });
diff --git a/frontend/src/lib/minio.ts b/frontend/src/lib/minio.ts
index af88d7d..947ce69 100644
--- a/frontend/src/lib/minio.ts
+++ b/frontend/src/lib/minio.ts
@@ -15,6 +15,8 @@ console.log(`[S3/MinIO] Configurando cliente: ${endpointUrl} (SSL: ${useSSL})`);
 
 export const bucketName = process.env.S3_BUCKET_NAME || process.env.MINIO_BUCKET_NAME || 'occto-images';
 
+import { NodeHttpHandler } from '@smithy/node-http-handler';
+
 export const s3Client = new S3Client({
   region: 'us-east-1',
   endpoint: endpointUrl,
@@ -23,6 +25,10 @@ export const s3Client = new S3Client({
     accessKeyId: process.env.S3_ACCESS_KEY || process.env.MINIO_ACCESS_KEY || 'admin',
     secretAccessKey: process.env.S3_SECRET_KEY || process.env.MINIO_SECRET_KEY || 'adminpassword',
   },
+  requestHandler: new NodeHttpHandler({
+    connectionTimeout: 10000, // 10 segundos
+    socketTimeout: 10000,     // 10 segundos
+  }),
 });
 
 type MetadataMap = Record<string, string> | undefined;