add layout to admin routes

app/(page)/admin/create-news/create-news.tsx

@@ -10,6 +10,7 @@ import {
 // Importe o componente que criámos (ajuste o caminho se necessário)
 import MultiAspectEditor from '../../../components/MultiAspectEditor'; 
 import dynamic from "next/dynamic";
+import { getFlat, type Category } from "@/lib/categories.api";
 // import { keycloak } from '@/app/feature/auth/keycloak-config';
 const Editor = dynamic(
   () => import("@tinymce/tinymce-react").then((mod) => mod.Editor),
@@ -69,8 +70,30 @@ export const CreateNewsPage = () => {
     picture?: string;
   } | null>(null);
 
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [categoriesLoading, setCategoriesLoading] = useState(true);
+  const [categoryId, setCategoryId] = useState<string>("");
+  
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setCategoriesLoading(true);
+      try {
+        const list = await getFlat();
+        if (!cancelled) setCategories(list);
+      } catch {
+        if (!cancelled) setCategories([]);
+      } finally {
+        if (!cancelled) setCategoriesLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
   // 2. Lógica de Upload
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
@@ -191,10 +214,20 @@ export const CreateNewsPage = () => {
             <label className="flex items-center gap-2 text-xs font-bold uppercase text-slate-400 mb-3">
               <Tag size={14}/> Categoria
             </label>
-            <select className="w-full bg-slate-50 border border-slate-100 rounded-lg px-3 py-2 text-sm outline-none">
+            <select
-              <option>Negócios</option>
+              value={categoryId}
-              <option>Tecnologia</option>
+              onChange={(e) => setCategoryId(e.target.value)}
-              <option>Desporto</option>
+              disabled={categoriesLoading}
+              className="w-full bg-slate-50 border border-slate-100 rounded-lg px-3 py-2 text-sm outline-none disabled:opacity-60"
+            >
+              <option value="">
+                {categoriesLoading ? "A carregar categorias…" : "Selecione uma categoria"}
+              </option>
+              {categories.map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name}
+                </option>
+              ))}
             </select>
           </div>
 

app/(page)/admin/create-news/page.tsx

@@ -1,22 +1,7 @@
 import CreateNewsPage from './create-news';
-import { AdminHeaderPage } from '@/app/components/layout/admin/header';
-import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
-
 
 const CreateNews = () => {
-  return (
+  return <CreateNewsPage />;
-    <div className="flex h-screen bg-slate-100/50 text-slate-900 font-sans">    
-
-      {/* Sidebar Lateral */}
-      <AdminSideBar />
-
-      {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
-        <AdminHeaderPage />
-        <CreateNewsPage />
-      </main>
-    </div>
-  );
 };
 
 export default CreateNews;

app/(page)/admin/dashboard/page.tsx

@@ -2,25 +2,16 @@ import React from 'react';
 import {
   Newspaper,
   TrendingUp,
-  Eye,
   Clock,
   AlertCircle,
   ChevronRight,
   Edit3,
   Trash2,
 } from 'lucide-react';
-import { AdminHeaderPage } from '@/app/components/layout/admin/header';
-import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
 
 const DashboardMain = () => {
   return (
-    <div className="flex h-screen bg-[#F1F5F9] text-slate-900 font-sans">
+    <div className="p-8 space-y-8 min-h-full bg-[#F1F5F9]">
-      <AdminSideBar />
-
-      <main className="flex-1 overflow-y-auto flex flex-col min-h-0">
-        <AdminHeaderPage />
-
-        <div className="p-8 space-y-8 flex-1">
           <div className="grid grid-cols-4 gap-6">
             <StatCard
               label="Artigos Publicados"
@@ -111,8 +102,6 @@ const DashboardMain = () => {
             </div>
           </div>
     </div>
-      </main>
-    </div>
   );
 };
 

app/(page)/admin/layout.tsx

@@ -0,0 +1,15 @@
+import { AdminHeaderPage } from '@/app/components/layout/admin/header';
+import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen bg-slate-100/50 text-slate-900 font-sans overflow-hidden">
+      <AdminSideBar />
+
+      <main className="flex-1 min-w-0 min-h-0 overflow-y-auto flex flex-col">
+        <AdminHeaderPage />
+        <div className="flex-1 min-h-0">{children}</div>
+      </main>
+    </div>
+  );
+}

app/(page)/admin/manage-category/page.tsx

@@ -1,16 +1,5 @@
-import { AdminHeaderPage } from '@/app/components/layout/admin/header';
-import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
 import ManageCategoryClient from './manage-category-client';
 
 export default function ManageCategoryPage() {
-  return (
+  return <ManageCategoryClient />;
-    <div className="flex h-screen bg-slate-50 text-slate-900">
-      <AdminSideBar />
-
-      <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-        <AdminHeaderPage />
-        <ManageCategoryClient />
-      </div>
-    </div>
-  );
 }

app/(page)/admin/panel/page.tsx

@@ -1,18 +1,5 @@
-import { AdminHeaderPage } from '@/app/components/layout/admin/header';
-import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
 import PanelEditor from './panel-editor';
 
 export default function PanelPage() {
-  return (
+  return <PanelEditor />;
-    <div className="flex h-screen bg-slate-100 text-slate-900 font-sans overflow-hidden">
-      <AdminSideBar />
-
-      <div className="flex-1 flex flex-col min-h-0 min-w-0">
-        <AdminHeaderPage />
-        <div className="flex-1 min-h-0 overflow-hidden">
-          <PanelEditor />
-        </div>
-      </div>
-    </div>
-  );
 }