refactor: enhance representation info fetching and pass it to relevant components

app/panel/(layout)/layout.js

@@ -2,6 +2,8 @@ import Content from "@/components/panel/Content";
 import { defineAbilitiesFor } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
+import { fetchReq } from "@/lib/req";
 
 async function LayoutPanel({ children }) {
   const user = await getUser();
@@ -11,7 +13,34 @@ async function LayoutPanel({ children }) {
     return redirect("/");
   }
 
-  return <Content children={children} />;
+  let representationInfo = null;
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+  try {
+    const cookieStore = cookies();
+    const userInfo = cookieStore.get("userInfo");
+    const accessToken = cookieStore.get("access_token");
+
+    if (userInfo && accessToken) {
+      const parsedUserInfo = JSON.parse(userInfo.value);
+      const representationUuid = parsedUserInfo?.representation_uuid;
+
+      if (representationUuid) {
+        representationInfo = await fetchReq(
+          `${API_URL}/api/v1/representation/${representationUuid}`,
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken.value}`,
+            },
+          }
+        );
+      }
+    }
+  } catch (error) {
+    console.error("Error fetching representation info:", error);
+  }
+
+  return <Content children={children} representationInfo={representationInfo} />;
 }
 
 export default LayoutPanel;