fix: unify navigation and UI consistency across Dashboard and Insights (NSOC'26)

frontend/app/components/AppShell.tsx

@@ -1,43 +1,44 @@
 "use client";
-import CommandPalette from "./CommandPalette";
-import NotificationsPanel from "./NotificationsPanel";
 
 import { usePathname } from "next/navigation";
+
+import CommandPalette from "./CommandPalette";
 import Sidebar from "./Sidebar";
+import TopNavbar from "./TopNavbar";
 
-export default function AppShell({ children }: { children: React.ReactNode }) {
+export default function AppShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   const pathname = usePathname();
 
   const isPublicRoute =
-    pathname === "/" || pathname === "/login" || pathname === "/signup";
-  const isInsightsRoute = pathname?.startsWith("/insights");
+    pathname === "/" ||
+    pathname === "/login" ||
+    pathname === "/signup";
+
+  const isInsightsRoute =
+    pathname?.startsWith("/insights");
 
-  const hideSidebar = isPublicRoute || isInsightsRoute;
+  const hideSidebar =
+    isPublicRoute || isInsightsRoute;
 
-  // Let Insights pages control their own padding
+  // Insights pages manage their own spacing
   const mainClass = hideSidebar
     ? "min-w-0 flex-1 overflow-x-hidden"
     : "min-w-0 flex-1 overflow-x-hidden p-6";
 
   return (
-    <div className="flex min-h-screen relative w-full">
+    <div className="flex min-h-screen w-full bg-[#f5f7f2]">
       <CommandPalette />
 
       {!hideSidebar && <Sidebar />}
 
-      <div className="flex-1 flex flex-col">
+      <div className="flex min-w-0 flex-1 flex-col">
         {!isPublicRoute && (
-          <div
-            className="
-              sticky top-0 z-40
-              flex items-center justify-end
-              border-b border-outline-variant
-              bg-white/80
-              px-6 py-4
-              backdrop-blur-xl
-            "
-          >
-            <NotificationsPanel />
+          <div className="sticky top-0 z-40">
+            <TopNavbar />
           </div>
         )}
 
@@ -47,4 +48,4 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
       </div>
     </div>
   );
-}
+}

frontend/app/components/CommandPalette.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 const commands = [
   { id: 1, label: "Dashboard", href: "/dashboard" },
   { id: 2, label: "Projects", href: "/projects" },
-  { id: 3, label: "Insights Analytics", href: "/insights/analytics" },
+  { id: 3, label: "Insights Overview", href: "/insights/overview" },
   { id: 4, label: "Insights Tasks", href: "/insights/tasks" },
   { id: 5, label: "Insights Feed", href: "/insights/feed" },
 ];

frontend/app/components/InsightsSidebar.tsx

@@ -1,68 +1,124 @@
 "use client";
 
-import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { LayoutDashboard, FileBarChart, Blocks, MessageSquare, Plus, Settings, HelpCircle, Route, MessageCircle, BarChart3, LineChart } from "lucide-react";
+import {
+  LayoutDashboard,
+  LineChart,
+  Route,
+  MessageCircle,
+  Plus,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
 
 export default function InsightsSidebar() {
   const pathname = usePathname();
 
   const navItems = [
-    { href: "/insights/overview", label: "Overview", icon: LayoutDashboard },
-    { href: "/insights/analytics", label: "Analytics", icon: LineChart },
-    { href: "/insights/tasks", label: "Tasks", icon: Route },
-    { href: "/insights/feed", label: "Feed", icon: MessageCircle },
+    {
+      href: "/insights/overview",
+      label: "Overview",
+      icon: LayoutDashboard,
+    },
+    {
+      href: "/insights/analytics",
+      label: "Analytics",
+      icon: LineChart,
+    },
+    {
+      href: "/insights/tasks",
+      label: "Tasks",
+      icon: Route,
+    },
+    {
+      href: "/insights/feed",
+      label: "Feed",
+      icon: MessageCircle,
+    },
   ];
 
   return (
-    <aside className="hidden lg:flex flex-col h-screen w-64 p-6 border-r border-[#dbe4d5] sticky top-0 shrink-0" style={{ backgroundColor: 'transparent' }}>
-      <div className="mb-8 px-2 flex flex-col pt-2">
-        <h2 className="text-xl tracking-tight font-extrabold" style={{ color: '#0f766e' }}>
-          Project Alpha
-        </h2>
-        <p className="text-[11px] uppercase tracking-widest text-[#5d6d62] opacity-80 mt-1">
+    <aside className="panel m-2 mb-0 w-64 p-4 md:m-6 md:mb-6 md:h-[calc(100vh-3rem)] flex flex-col">
+      <div className="flex flex-1 flex-col">
+
+        {/* Project Header */}
+        <div className="mb-6">
+          <h2 className="text-xl font-bold tracking-tight text-slate-900 md:text-2xl">
+            Project Alpha
+          </h2>
+
+        <span className="chip mt-2 inline-block px-3 py-1 text-xs font-semibold">
           Enterprise Flow
-        </p>
+        </span>
       </div>
 
-      <nav className="flex-1 flex flex-col gap-1">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = pathname === item.href || pathname?.startsWith(item.href);
-
-          return (
-            <Link 
-              key={item.href} 
-              href={item.href} 
-              className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 font-medium text-[14px] ${
-                isActive 
-                  ? "bg-[#eef2e7] text-[#0f766e] font-bold" 
-                  : "text-[#5d6d62] hover:text-[#115e59] hover:bg-[#eef2e7]/50"
-              }`}
+        {/* Navigation */}
+        <nav className="flex flex-1 flex-col gap-2">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+
+            const isActive =
+              pathname === item.href ||
+              pathname?.startsWith(item.href);
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-2 rounded-xl px-3 py-2 transition ${
+                  isActive
+                    ? "bg-teal-700 text-white shadow-sm"
+                    : "text-slate-700 hover:bg-slate-200"
+               }`}
+              >
+                <Icon size={16} />
+                <span className="text-sm font-medium">
+                  {item.label}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom Actions */}
+        <div className="mt-auto border-t border-slate-200 pt-6">
+
+          <button
+            className="
+              mb-4 flex w-full items-center justify-center gap-2
+              rounded-xl bg-teal-700 px-3 py-2
+              text-white shadow-sm
+              transition hover:bg-teal-800
+            "
+          >
+            <Plus size={16} />
+            <span className="text-sm font-medium">
+              New Insight
+            </span>
+          </button>
+
+          <div className="flex flex-col gap-1">
+            <Link
+              href="#"
+              className="flex items-center gap-2 rounded-xl px-3 py-2 text-slate-700 transition hover:bg-slate-200"
             >
-              <Icon size={18} strokeWidth={isActive ? 2.5 : 2} />
-              <span>{item.label}</span>
+              <Settings size={16} />
+              <span className="text-sm font-medium">
+                Settings
+              </span>
             </Link>
-          );
-        })}
-      </nav>
-
-      <div className="flex flex-col gap-4 pt-8 mt-auto">
-        <button className="text-[13px] py-3.5 px-4 rounded-xl flex items-center justify-center gap-2 hover:shadow-lg active:scale-95 transition-all text-white font-semibold" style={{ backgroundColor: '#0f766e' }}>
-          <Plus size={18} strokeWidth={3} />
-          New Insight
-        </button>
 
-        <div className="flex flex-col border-t border-[#dbe4d5] pt-4 mt-2">
-          <Link className="flex items-center gap-3 px-4 py-2.5 text-[#5d6d62] hover:text-[#0f766e] transition-colors rounded-xl hover:bg-[#eef2e7]/30" href="#">
-            <Settings size={18} />
-            <span className="text-[13px] font-medium">Settings</span>
-          </Link>
-          <Link className="flex items-center gap-3 px-4 py-2.5 text-[#5d6d62] hover:text-[#0f766e] transition-colors rounded-xl hover:bg-[#eef2e7]/30" href="#">
-            <HelpCircle size={18} />
-            <span className="text-[13px] font-medium">Support</span>
-          </Link>
+            <Link
+              href="#"
+              className="flex items-center gap-2 rounded-xl px-3 py-2 text-slate-700 transition hover:bg-slate-200"
+            >
+              <HelpCircle size={16} />
+              <span className="text-sm font-medium">
+                Support
+              </span>
+            </Link>
+          </div>
         </div>
       </div>
     </aside>

frontend/app/components/Overview-comp/OverviewMain.tsx

@@ -57,7 +57,7 @@ export default function OverviewMain() {
 
   return (
     <div className="flex-1">
-      <div className="max-w-4xl mx-auto mb-16">
+      <div className="w-full mb-16">
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8 mb-12">
           <div>
             <div className="inline-flex items-center gap-3 bg-secondary-container30 px-3 py-1 rounded-full mb-6">

frontend/app/components/Tasks-comp/TasksHeader.tsx

@@ -4,46 +4,73 @@ import React from "react";
 
 export default function TasksHeader() {
   return (
-    <header className="flex justify-between items-center w-full px-4 md:px-margin-desktop h-20 bg-transparent z-40 shrink-0">
-      <div className="flex items-center gap-12">
+    <header
+      className="
+        flex items-center justify-between
+        w-full h-20 shrink-0
+        px-4 md:px-margin-desktop
+        border-b border-outline-variant
+        bg-white
+      "
+    >
+      {/* Page Title */}
+      <div className="flex items-center">
         <h1 className="font-headline-md text-[26px] font-bold text-on-surface">
           Flow Insights
         </h1>
-
-        <div className="hidden lg:flex items-center gap-8">
-          <a className="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">
-            Projects
-          </a>
-          <a className="text-on-surface-variant hover:text-primary transition-colors font-label-md text-label-md" href="#">
-            Dashboard
-          </a>
-          <a className="text-primary font-bold border-b-2 border-primary pb-1 font-label-md text-label-md" href="#">
-            Insights
-          </a>
-        </div>
       </div>
 
+      {/* Search + Actions */}
       <div className="flex items-center gap-6">
-        <div className="hidden md:flex items-center bg-surface-container-low/50 backdrop-blur px-4 py-2 rounded-xl border border-outline-variant/50">
-          <span className="material-symbols-outlined text-outline text-[20px]">search</span>
+        <div
+          className="
+            hidden md:flex items-center
+            rounded-xl border border-outline-variant/50
+            bg-surface-container-low/50
+            px-4 py-2
+            backdrop-blur
+          "
+        >
+          <span className="material-symbols-outlined text-[20px] text-outline">
+            search
+          </span>
+
           <input
-            className="bg-transparent border-none focus:ring-0 text-body-md font-body-md w-48 placeholder:text-outline"
-            placeholder="Search tasks..."
             type="text"
+            placeholder="Search tasks..."
+            className="
+              w-48 border-none bg-transparent
+              text-body-md font-body-md
+              placeholder:text-outline
+              focus:ring-0 focus:outline-none
+            "
           />
         </div>
 
         <div className="flex items-center gap-3">
-          <button className="p-2.5 text-on-surface-variant hover:bg-surface-container-low rounded-full transition-all">
-            <span className="material-symbols-outlined text-[22px]">notifications</span>
+          <button
+            className="
+              rounded-full p-2.5
+              text-on-surface-variant
+              transition-all
+              hover:bg-surface-container-low
+            "
+          >
+            <span className="material-symbols-outlined text-[22px]">
+              notifications
+            </span>
           </button>
+
           <img
             alt="User profile"
-            className="w-9 h-9 rounded-full border-2 border-surface shadow-sm ml-2"
             src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkg4vnO8f5CYXs98lXGmEBvpJyvEeFPY6KpI0D_WhJwkurBhewAXswpL7cAddlTuhyR3U9Yk7rCC4QV5tyDr0o5el9lVbLOgvEy_qlV0DyU9TlHmMDHO4uZFtQcTplFQsXMmQOR-dZXVcZUPmKq_m27_2QK0GkIeecDTElHOJNFY7pLXTxpxz2cAsyUuYpFz_aAdJmFIESRW7TrFVHQ8zx3z2-_8VPIKY6tZawlDn4j6nMx6noasR9sKFo1YvfhZp-qJ3HPbjktw5E"
+            className="
+              ml-2 h-9 w-9 rounded-full
+              border-2 border-surface shadow-sm
+            "
           />
         </div>
       </div>
     </header>
   );
-}
+}