Merge pull request #573 from CodebilityDev/orgchart/juryyy

feat: updated org chart with tree visual layout and accurate skeleton…

Author: Jecomo-Alyssa-Lyn

apps/codebility/app/(marketing)/profiles/[id]/_components/ProfileCloseButton.tsx

@@ -1,22 +1,25 @@
 "use client";
 
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
 
 export default function ProfileCloseButton() {
+  const router = useRouter();
+
   const handleClose = () => {
-    window.close();
+    // If they came from somewhere within the app, go back. 
+    // In rare cases where they opened directly, they might need to go home, but router.back() handles history.
+    router.back();
   };
 
   return (
-    <Link href="/">
-      <Button
-        variant="hollow"
-        className="bg-black-200 flex gap-2 border-zinc-700 text-white"
-        onClick={handleClose}
-      >
-        Close
-      </Button>
-    </Link>
+    <button
+      onClick={handleClose}
+      aria-label="Go back"
+      className="text-white hover:text-gray-300 transition-colors"
+    >
+      <X className="h-6 w-6" />
+    </button>
   );
 }

apps/codebility/app/home/_components/DynamicMainContent.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ReactNode } from "react";
+import { usePathname } from "next/navigation";
 import { useNavStore } from "@/hooks/use-sidebar";
 
 interface DynamicMainContentProps {
@@ -9,13 +10,16 @@ interface DynamicMainContentProps {
 
 export default function DynamicMainContent({ children }: DynamicMainContentProps) {
   const { isToggleOpen } = useNavStore();
-  
-  // Dynamic margin based on sidebar state - only apply on desktop (lg screens and up)
-  const marginClass = isToggleOpen ? "lg:ml-64" : "lg:ml-20"; // 16rem = ml-64, 5rem = ml-20
-  
+  const pathname = usePathname();
+
+  const isOrgChart = pathname === "/home/orgchart";
+
+
+  const marginClass = isToggleOpen ? "lg:ml-64" : "lg:ml-20";
+
   return (
-    <main 
-      className={`background-lightsection_darksection flex-1 pt-[60px] overflow-y-auto overflow-x-hidden min-h-screen ${marginClass} transition-all duration-300 ease-in-out`}
+    <main
+      className={`background-lightsection_darksection flex-1 pt-[60px] ${isOrgChart ? "lg:overflow-hidden lg:h-[calc(100vh)] overflow-y-auto" : "overflow-y-auto"} overflow-x-hidden h-full ${marginClass} transition-all duration-300 ease-in-out`}
     >
       {children}
     </main>

apps/codebility/app/home/_components/LeftSidebarServer.tsx

@@ -6,16 +6,25 @@ export default async function LeftSidebarServer() {
   const supabase = await createClientServerComponent();
 
   // Get user data server-side
-  const { data: { user } } = await supabase.auth.getUser();
-  if (!user) return null;
+  const { data: authData } = await supabase.auth.getUser();
+  const user = authData?.user;
+  
+  if (!user) {
+    const sidebarData = await getSidebarData(null);
+    return <LeftSidebarClient initialSidebarData={sidebarData} />;
+  }
 
   const { data: userData } = await supabase
     .from("codev")
     .select("role_id, internal_status, availability_status")
     .eq("id", user.id)
     .single();
 
-  if (!userData) return null;
+  if (!userData) {
+    // Fallback if user exists in auth but not in codev table
+    const sidebarData = await getSidebarData(null);
+    return <LeftSidebarClient initialSidebarData={sidebarData} />;
+  }
 
   // Calculate roleId server-side
   const roleId = userData.internal_status === "INACTIVE" || 

apps/codebility/app/home/admin-controls/ticket-support/_components/TicketManagementView.tsx

@@ -35,7 +35,7 @@ export default function TicketManagementView({
   codevList,
 }: TicketManagementViewProps) {
   const router = useRouter();
-  const { closeNav, toggleNav, isToggleOpen } = useNavStore(); 
+  const { } = useNavStore(); 
   const [selectedTicket, setSelectedTicket] = useState<TicketSupport | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [sortField, setSortField] = useState<SortField>("created_at");
@@ -45,8 +45,6 @@ export default function TicketManagementView({
   const [filterAssignedTo, setFilterAssignedTo] = useState<string>("ALL");
   const [showArchived, setShowArchived] = useState(false);
 
-  const [wasSidebarOpen, setWasSidebarOpen] = useState(false);
-
 
   useEffect(() => {
     if (selectedTicket) {
@@ -130,17 +128,10 @@ export default function TicketManagementView({
 
   const handleTicketSelect = (ticket: TicketSupport) => {
     setSelectedTicket(ticket);
-    setWasSidebarOpen(isToggleOpen);
-    if (isToggleOpen) {
-      closeNav(); 
-    }
   };
 
   const handleCloseSidebar = () => {
     setSelectedTicket(null);
-    if (wasSidebarOpen && !isToggleOpen) {
-      toggleNav(); 
-    }
   };
 
   const handleTicketUpdated = () => {