From 16de9f48b8156799abcbd4e2987392212712529c Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Wed, 3 Dec 2025 14:25:51 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionar=20campo=20para=20criar=20cate?=
 =?UTF-8?q?gorias=20customizadas=20na=20adi=C3=A7=C3=A3o/edi=C3=A7=C3=A3o?=
 =?UTF-8?q?=20de=20projetos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/admin/projetos/[id]/editar/page.tsx   | 33 ++++++++++++++++++-
 frontend/src/app/admin/projetos/novo/page.tsx | 33 ++++++++++++++++++-
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/admin/projetos/[id]/editar/page.tsx b/frontend/src/app/admin/projetos/[id]/editar/page.tsx
index 6c2eee5..bf5f409 100644
--- a/frontend/src/app/admin/projetos/[id]/editar/page.tsx
+++ b/frontend/src/app/admin/projetos/[id]/editar/page.tsx
@@ -31,6 +31,8 @@ export default function EditProject({ params }: { params: { id: string } }) {
   const galleryInputRef = useRef<HTMLInputElement | null>(null);
   const [loadingData, setLoadingData] = useState(true);
   const [loading, setLoading] = useState(false);
+  const [categories, setCategories] = useState(CATEGORY_OPTIONS);
+  const [newCategory, setNewCategory] = useState('');
   const [formData, setFormData] = useState({
     title: '',
     category: '',
@@ -276,10 +278,39 @@ export default function EditProject({ params }: { params: { id: string } }) {
                 required
               >
                 <option value="">Selecione uma categoria</option>
-                {CATEGORY_OPTIONS.map((option) => (
+                {categories.map((option) => (
                   <option key={option.value} value={option.value}>{option.label}</option>
                 ))}
               </select>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Não encontra a categoria? Adicione uma nova abaixo</p>
+            </div>
+
+            <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" 
+                  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"
+                  placeholder="Ex: Consultoria Ambiental"
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (newCategory.trim()) {
+                      const newCat = { value: newCategory, label: newCategory };
+                      setCategories([...categories, newCat]);
+                      setFormData({...formData, category: newCategory});
+                      setNewCategory('');
+                      success('Categoria adicionada!');
+                    }
+                  }}
+                  className="px-4 py-3 bg-primary text-white rounded-xl font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
+                >
+                  Adicionar
+                </button>
+              </div>
             </div>
 
             <div>
diff --git a/frontend/src/app/admin/projetos/novo/page.tsx b/frontend/src/app/admin/projetos/novo/page.tsx
index 88819c8..6671b08 100644
--- a/frontend/src/app/admin/projetos/novo/page.tsx
+++ b/frontend/src/app/admin/projetos/novo/page.tsx
@@ -30,6 +30,8 @@ export default function NewProject() {
   const coverInputRef = useRef<HTMLInputElement | null>(null);
   const galleryInputRef = useRef<HTMLInputElement | null>(null);
   const [loading, setLoading] = useState(false);
+  const [categories, setCategories] = useState(CATEGORY_OPTIONS);
+  const [newCategory, setNewCategory] = useState('');
   const [formData, setFormData] = useState({
     title: '',
     category: '',
@@ -217,10 +219,39 @@ export default function NewProject() {
                 required
               >
                 <option value="">Selecione uma categoria</option>
-                {CATEGORY_OPTIONS.map((option) => (
+                {categories.map((option) => (
                   <option key={option.value} value={option.value}>{option.label}</option>
                 ))}
               </select>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">Não encontra a categoria? Adicione uma nova abaixo</p>
+            </div>
+
+            <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" 
+                  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"
+                  placeholder="Ex: Consultoria Ambiental"
+                />
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (newCategory.trim()) {
+                      const newCat = { value: newCategory, label: newCategory };
+                      setCategories([...categories, newCat]);
+                      setFormData({...formData, category: newCategory});
+                      setNewCategory('');
+                      success('Categoria adicionada!');
+                    }
+                  }}
+                  className="px-4 py-3 bg-primary text-white rounded-xl font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
+                >
+                  Adicionar
+                </button>
+              </div>
             </div>
 
             <div>