diff --git a/backend/middleware/auth.middleware.js b/backend/middleware/auth.middleware.js
index 7cff84a..834b63c 100644
--- a/backend/middleware/auth.middleware.js
+++ b/backend/middleware/auth.middleware.js
@@ -1,123 +1,119 @@
 import supabase from "../config/db.js";
 
-function createAuthError(
-  message,
-  code = "AUTHENTICATION_ERROR"
-) {
+/* -------------------------------------------------------------------------- */
+/*                               ERROR HANDLING                               */
+/* -------------------------------------------------------------------------- */
+
+function createAuthError(message, code = "AUTHENTICATION_ERROR") {
   return {
     success: false,
     error: {
       code,
       message,
+      severity: "high",
       timestamp: Date.now(),
+      requestId: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      diagnostics: {
+        nodeEnv: process.env.NODE_ENV || "unknown",
+        service: "auth-middleware",
+      },
     },
   };
 }
 
-function extractBearerToken(
-  authHeader
-) {
-  if (
-    !authHeader ||
-    typeof authHeader !==
-      "string"
-  ) {
-    return null;
-  }
+/* -------------------------------------------------------------------------- */
+/*                              TOKEN UTILITIES                               */
+/* -------------------------------------------------------------------------- */
 
-  if (
-    !authHeader.startsWith(
-      "Bearer "
-    )
-  ) {
-    return null;
-  }
+function extractBearerToken(authHeader) {
+  if (!authHeader) return null;
+  if (typeof authHeader !== "string") return null;
 
-  const token =
-    authHeader
-      .replace(
-        "Bearer ",
-        ""
-      )
-      .trim();
+  const trimmedHeader = authHeader.trim();
 
-  if (!token) {
-    return null;
-  }
+  if (!trimmedHeader.startsWith("Bearer ")) return null;
+
+  const token = trimmedHeader.split("Bearer ")[1]?.trim();
+
+  if (!token || token.length === 0) return null;
 
   return token;
 }
 
-function isValidTokenFormat(
-  token
-) {
-  return (
-    typeof token ===
-      "string" &&
-    token.length > 10
-  );
-}
+function isValidTokenFormat(token) {
+  if (!token) return false;
+  if (typeof token !== "string") return false;
 
-async function resolveUserSession(
-  token
-) {
-  const {
-    data: { user },
-    error,
-  } =
-    await supabase.auth.getUser(
-      token
-    );
+  if (token.length < 10) return false;
+  if (token.includes("undefined")) return false;
+  if (token.includes("null")) return false;
 
-  return {
-    user,
-    error,
-  };
+  return true;
 }
 
-function isAuthenticatedUser(
-  user,
-  error
-) {
-  return !error && !!user;
+/* -------------------------------------------------------------------------- */
+/*                            SUPABASE AUTH HANDLER                           */
+/* -------------------------------------------------------------------------- */
+
+async function resolveUserSession(token) {
+  try {
+    const {
+      data: { user },
+      error,
+    } = await supabase.auth.getUser(token);
+
+    return {
+      user,
+      error,
+      success: !error && !!user,
+    };
+  } catch (err) {
+    return {
+      user: null,
+      error: err,
+      success: false,
+    };
+  }
 }
 
-function createAuthContext(
-  req,
-  token
-) {
+function isAuthenticatedUser(user, error) {
+  return Boolean(user && !error);
+}
+
+/* -------------------------------------------------------------------------- */
+/*                          AUTH CONTEXT BUILDERS                             */
+/* -------------------------------------------------------------------------- */
+
+function createAuthContext(req, token) {
   return {
-    tokenLength:
-      token?.length || 0,
-    requestPath:
-      req.originalUrl,
-    requestMethod:
-      req.method,
-    validatedAt:
-      Date.now(),
+    tokenLength: token?.length || 0,
+    requestPath: req.originalUrl,
+    requestMethod: req.method,
+    userAgent: req.headers["user-agent"] || "unknown",
+    ip: req.ip || req.headers["x-forwarded-for"] || "unknown",
+    validatedAt: Date.now(),
+    sessionScope: "api-request",
   };
 }
 
-function validateRequestIntegrity(
-  req
-) {
-  return Boolean(
-    req &&
-      req.headers &&
-      typeof req.headers ===
-        "object"
-  );
+function validateRequestIntegrity(req) {
+  if (!req) return false;
+  if (!req.headers) return false;
+  if (typeof req.headers !== "object") return false;
+
+  return true;
 }
 
-function createAuthorizationCheckpoint(
-  stage,
-  passed
-) {
+/* -------------------------------------------------------------------------- */
+/*                        AUTHORIZATION LIFECYCLE TRACKING                   */
+/* -------------------------------------------------------------------------- */
+
+function createAuthorizationCheckpoint(stage, passed) {
   return {
     stage,
     passed,
-    timestamp:
-      Date.now(),
+    timestamp: Date.now(),
+    memorySnapshot: process.memoryUsage().heapUsed,
   };
 }
 
@@ -125,165 +121,132 @@ function buildAuthLifecycle() {
   return {
     checkpoints: [],
     validationVersion: 1,
+    startedAt: Date.now(),
+    status: "initializing",
   };
 }
 
-function appendCheckpoint(
-  lifecycle,
-  stage,
-  passed
-) {
+function appendCheckpoint(lifecycle, stage, passed) {
   lifecycle.checkpoints.push(
-    createAuthorizationCheckpoint(
-      stage,
-      passed
-    )
+    createAuthorizationCheckpoint(stage, passed)
   );
 
+  lifecycle.status = passed ? "processing" : "failed";
+
   return lifecycle;
 }
 
-export const authenticateUser =
-  async (
-    req,
-    res,
-    next
-  ) => {
-    try {
-      const authLifecycle =
-        buildAuthLifecycle();
-
-      if (
-        !validateRequestIntegrity(
-          req
-        )
-      ) {
-        return res
-          .status(400)
-          .json(
-            createAuthError(
-              "Malformed request",
-              "REQUEST_INVALID"
-            )
-          );
-      }
-
-      appendCheckpoint(
-        authLifecycle,
-        "request_integrity",
-        true
-      );
+/* -------------------------------------------------------------------------- */
+/*                           ADDITIONAL VALIDATORS                            */
+/* -------------------------------------------------------------------------- */
+
+function isTokenTooLong(token) {
+  return token.length > 2048;
+}
 
-      const authHeader =
-        req.headers.authorization;
+function isSuspiciousToken(token) {
+  return token.includes("..") || token.includes("//");
+}
 
-      const token =
-        extractBearerToken(
-          authHeader
-        );
+function sanitizeToken(token) {
+  return token.trim();
+}
 
-      appendCheckpoint(
-        authLifecycle,
-        "token_extracted",
-        Boolean(token)
-      );
+/* -------------------------------------------------------------------------- */
+/*                              MAIN MIDDLEWARE                               */
+/* -------------------------------------------------------------------------- */
 
-      if (!token) {
-        return res
-          .status(401)
-          .json(
-            createAuthError(
-              "Authorization token missing",
-              "TOKEN_MISSING"
-            )
-          );
-      }
-
-      if (
-        !isValidTokenFormat(
-          token
-        )
-      ) {
-        return res
-          .status(401)
-          .json(
-            createAuthError(
-              "Malformed authorization token",
-              "TOKEN_INVALID_FORMAT"
-            )
-          );
-      }
-
-      appendCheckpoint(
-        authLifecycle,
-        "token_format",
-        true
-      );
+export const authenticateUser = async (req, res, next) => {
+  const authLifecycle = buildAuthLifecycle();
 
-      const authContext =
-        createAuthContext(
-          req,
-          token
-        );
-
-      const {
-        user,
-        error,
-      } =
-        await resolveUserSession(
-          token
-        );
-
-      if (
-        !isAuthenticatedUser(
-          user,
-          error
-        )
-      ) {
-        return res
-          .status(401)
-          .json(
-            createAuthError(
-              "Invalid authentication token",
-              "TOKEN_VERIFICATION_FAILED"
-            )
-          );
-      }
-
-      appendCheckpoint(
-        authLifecycle,
-        "token_verified",
-        true
-      );
+  try {
+    /* ---------------------- REQUEST VALIDATION ---------------------- */
+
+    if (!validateRequestIntegrity(req)) {
+      appendCheckpoint(authLifecycle, "request_integrity", false);
+
+      return res
+        .status(400)
+        .json(createAuthError("Malformed request", "REQUEST_INVALID"));
+    }
+
+    appendCheckpoint(authLifecycle, "request_integrity", true);
+
+    /* ---------------------- TOKEN EXTRACTION ------------------------ */
 
-      req.authContext =
-        authContext;
+    const rawToken = extractBearerToken(req.headers.authorization);
+
+    appendCheckpoint(authLifecycle, "token_extracted", Boolean(rawToken));
+
+    if (!rawToken) {
+      return res
+        .status(401)
+        .json(createAuthError("Authorization token missing", "TOKEN_MISSING"));
+    }
 
-      req.authLifecycle =
-        authLifecycle;
+    const token = sanitizeToken(rawToken);
 
-      req.user = user;
+    /* ---------------------- TOKEN VALIDATION ------------------------ */
 
-      appendCheckpoint(
-        authLifecycle,
-        "authorization_complete",
-        true
+    if (!isValidTokenFormat(token)) {
+      appendCheckpoint(authLifecycle, "token_format", false);
+
+      return res.status(401).json(
+        createAuthError("Malformed authorization token", "TOKEN_INVALID_FORMAT")
       );
+    }
 
-      next();
-    } catch (error) {
-      console.error(
-        "Authentication middleware error:",
-        error
+    if (isTokenTooLong(token) || isSuspiciousToken(token)) {
+      appendCheckpoint(authLifecycle, "token_security", false);
+
+      return res.status(401).json(
+        createAuthError("Suspicious token detected", "TOKEN_SECURITY_RISK")
       );
+    }
 
-      return res
-        .status(500)
-        .json(
-          createAuthError(
-            "Internal authentication failure",
-            "AUTH_INTERNAL_ERROR"
-          )
-        );
+    appendCheckpoint(authLifecycle, "token_format", true);
+    appendCheckpoint(authLifecycle, "token_security", true);
+
+    /* ---------------------- CONTEXT BUILD --------------------------- */
+
+    const authContext = createAuthContext(req, token);
+
+    /* ---------------------- SESSION RESOLUTION ---------------------- */
+
+    const { user, error } = await resolveUserSession(token);
+
+    if (!isAuthenticatedUser(user, error)) {
+      appendCheckpoint(authLifecycle, "token_verified", false);
+
+      return res.status(401).json(
+        createAuthError("Invalid authentication token", "TOKEN_VERIFICATION_FAILED")
+      );
     }
-  };
\ No newline at end of file
+
+    appendCheckpoint(authLifecycle, "token_verified", true);
+
+    /* ---------------------- FINALIZE ------------------------------- */
+
+    req.authContext = authContext;
+    req.authLifecycle = {
+      ...authLifecycle,
+      status: "completed",
+    };
+    req.user = user;
+
+    appendCheckpoint(authLifecycle, "authorization_complete", true);
+
+    return next();
+  } catch (error) {
+    appendCheckpoint(authLifecycle, "system_error", false);
+
+    console.error("Authentication middleware error:", {
+      error,
+      lifecycle: authLifecycle,
+    });
+
+    return res.status(500).json(
+      createAuthError("Internal authentication failure", "AUTH_INTERNAL_ERROR")
+    );
+  }
+};
\ No newline at end of file
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
index 98bbbcb..f265f08 100644
--- a/frontend/app/dashboard/page.tsx
+++ b/frontend/app/dashboard/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { supabase } from "@/app/lib/supabase";
 import Link from "next/link";
 import {
@@ -19,46 +19,39 @@ import {
   YAxis,
 } from "recharts";
 
-function buildChartData(
-  filter: string
-) {
-  if (filter === "This Week") {
-    return [
-      { name: "Mon", value: 10 },
-      { name: "Tue", value: 25 },
-      { name: "Wed", value: 18 },
-      { name: "Thu", value: 40 },
-      { name: "Fri", value: 32 },
-      { name: "Sat", value: 50 },
-      { name: "Sun", value: 45 },
-    ];
-  }
-
-  return [
-    { name: "Week 1", value: 20 },
-    { name: "Week 2", value: 35 },
-    { name: "Week 3", value: 50 },
-    { name: "Week 4", value: 70 },
-  ];
+/* ---------------- CONSTANT DATA ---------------- */
+
+const avatarColors = [
+  "#10b981", "#3b82f6", "#8b5cf6",
+  "#f59e0b", "#ef4444", "#06b6d4",
+];
+
+/* ---------------- PURE FUNCTIONS ---------------- */
+
+function buildChartData(filter: string) {
+  return filter === "This Week"
+    ? [
+        { name: "Mon", value: 10 },
+        { name: "Tue", value: 25 },
+        { name: "Wed", value: 18 },
+        { name: "Thu", value: 40 },
+        { name: "Fri", value: 32 },
+        { name: "Sat", value: 50 },
+        { name: "Sun", value: 45 },
+      ]
+    : [
+        { name: "Week 1", value: 20 },
+        { name: "Week 2", value: 35 },
+        { name: "Week 3", value: 50 },
+        { name: "Week 4", value: 70 },
+      ];
 }
 
 function buildDashboardMetrics() {
   return [
-    {
-      title: "Velocity",
-      value: "—",
-      icon: TrendingUp,
-    },
-    {
-      title: "Deploys",
-      value: "—",
-      icon: Rocket,
-    },
-    {
-      title: "Incidents",
-      value: "—",
-      icon: AlertTriangle,
-    },
+    { title: "Velocity", value: "—", icon: TrendingUp },
+    { title: "Deploys", value: "—", icon: Rocket },
+    { title: "Incidents", value: "—", icon: AlertTriangle },
   ];
 }
 
@@ -70,115 +63,148 @@ function buildProjectInsights() {
   ];
 }
 
+/* ---------------- HELPERS ---------------- */
+
+const getInitials = (name: string) =>
+  name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+const getAvatarColor = (name: string) =>
+  avatarColors[name.charCodeAt(0) % avatarColors.length];
+
+/* ---------------- COMPONENT ---------------- */
+
 export default function Dashboard() {
-  const [filter, setFilter] = useState("This Month");
+  const [filter, setFilter] = useState<"This Week" | "This Month">("This Month");
   const [mounted, setMounted] = useState(false);
 
+  const [user, setUser] = useState({ name: "User", role: "member" });
+  const [team, setTeam] = useState<{ name: string; email: string }[]>([]);
+  const [activity, setActivity] = useState<{ text: string; time: string }[]>([]);
+
+  const [teamLoading, setTeamLoading] = useState(true);
+  const [activityLoading, setActivityLoading] = useState(true);
+
+  /* ---------------- MOUNT GUARD ---------------- */
+
   useEffect(() => {
     setMounted(true);
   }, []);
-  
-  const [user, setUser] = useState({ name: "User", role: "member" });
+
+  /* ---------------- USER FETCH (DEDUPED) ---------------- */
 
   useEffect(() => {
-    const getUser = async () => {
+    let ignore = false;
+
+    const loadUser = async () => {
       if (!supabase) return;
-      const { data: { session } } = await supabase.auth.getSession();
-      if (session?.user) {
+
+      const { data } = await supabase.auth.getSession();
+      const session = data.session;
+
+      if (!ignore && session?.user) {
         const name =
           session.user.user_metadata?.full_name ||
           session.user.email ||
           "User";
+
         setUser({ name, role: "member" });
       }
     };
-    getUser();
-  }, []);
 
-  // ✅ Dynamic chart data based on filter
-  const chartData =
-    buildChartData(filter);
+    loadUser();
+    return () => {
+      ignore = true;
+    };
+  }, []);
 
-  const stats =
-    buildDashboardMetrics();
-
-  const [team, setTeam] = useState<{ name: string; email: string }[]>([]);
-  const [teamLoading, setTeamLoading] = useState(true);
+  /* ---------------- TEAM (SAFE + CLEAN) ---------------- */
 
   useEffect(() => {
-    const fetchTeamMembers = async () => {
+    let ignore = false;
+
+    const fetchTeam = async () => {
       try {
-        if (!supabase) { setTeamLoading(false); return; }
-        const { data: { session } } = await supabase.auth.getSession();
-        if (!session) { setTeamLoading(false); return; }
-        const { data, error } = await supabase
+        if (!supabase) return setTeamLoading(false);
+
+        const { data } = await supabase
           .from("profiles")
           .select("full_name, email")
           .limit(10);
-        if (!error && data) {
+
+        if (!ignore && data) {
           setTeam(
-          data.map((member) => ({
-            name: member.full_name || "User",
-            email: member.email,
-          }))
-        );
-      }
-      } catch (err) {
-        console.error("Failed to fetch team members:", err);
+            data.map((m: any) => ({
+              name: m.full_name || "User",
+              email: m.email,
+            }))
+          );
+        }
       } finally {
-        setTeamLoading(false);
+        if (!ignore) setTeamLoading(false);
       }
     };
-    fetchTeamMembers();
+
+    fetchTeam();
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
-  const [activity, setActivity] = useState<{ text: string; time: string }[]>([]);
-  const [activityLoading, setActivityLoading] = useState(true);
+  /* ---------------- ACTIVITY (SAFE + CLEAN) ---------------- */
 
   useEffect(() => {
+    let ignore = false;
+
     const fetchActivity = async () => {
       try {
-        if (!supabase) { setActivityLoading(false); return; }
-        const { data: { session } } = await supabase.auth.getSession();
-        if (!session) { setActivityLoading(false); return; }
-        const { data, error } = await supabase
+        if (!supabase) return setActivityLoading(false);
+
+        const { data } = await supabase
           .from("projects")
           .select("name, created_at")
           .order("created_at", { ascending: false })
           .limit(5);
-        if (!error && data) {
+
+        if (!ignore && data) {
           setActivity(
-            data.map((p) => ({
+            data.map((p: any) => ({
               text: `Project "${p.name}" created`,
               time: new Date(p.created_at).toLocaleDateString(),
             }))
           );
         }
-      } catch (err) {
-        console.error("Failed to fetch activity:", err);
       } finally {
-        setActivityLoading(false);
+        if (!ignore) setActivityLoading(false);
       }
     };
+
     fetchActivity();
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
-  const getInitials = (name: string) =>
-    name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  /* ---------------- MEMOIZED DERIVED DATA ---------------- */
 
-  const avatarColors = [
-    "#10b981", "#3b82f6", "#8b5cf6",
-    "#f59e0b", "#ef4444", "#06b6d4",
-  ];
+  const chartData = useMemo(() => buildChartData(filter), [filter]);
+  const stats = useMemo(() => buildDashboardMetrics(), []);
+  const insights = useMemo(() => buildProjectInsights(), []);
 
-  const getAvatarColor = (name: string) =>
-    avatarColors[name.charCodeAt(0) % avatarColors.length];
+  /* ---------------- UI ---------------- */
 
   return (
     <div className="min-h-screen bg-slate-50 p-6 md:p-10">
       <div className="mx-auto max-w-7xl space-y-8">
-        {/* 🔍 SEARCH */}
-        <div className="flex items-center gap-3 w-full max-w-2xl bg-white px-5 py-3 rounded-2xl border shadow-sm focus-within:ring-2 focus-within:ring-emerald-500 transition">
+
+        {/* SEARCH */}
+        <div className="flex items-center gap-3 w-full max-w-2xl bg-white px-5 py-3 rounded-2xl border">
           <Search size={18} className="text-slate-400" />
           <input
             placeholder="Search projects, tasks, or messages..."
@@ -186,85 +212,53 @@ export default function Dashboard() {
           />
         </div>
 
-        {/* 👋 HEADER */}
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        {/* HEADER */}
+        <div className="flex flex-col md:flex-row md:justify-between gap-4">
           <div>
-            <h1 className="text-3xl font-bold text-slate-900">
-              Dashboard Overview
-            </h1>
-            <p className="text-slate-500 mt-1">Welcome back, {user.name} 👋</p>
+            <h1 className="text-3xl font-bold">Dashboard Overview</h1>
+            <p className="text-slate-500 mt-1">
+              Welcome back, {user.name} 👋
+            </p>
           </div>
 
-          {/* 🟢 ACTION BUTTONS */}
-          <div className="flex flex-wrap gap-3">
-            <Link
-              href="/projects"
-              className="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 transition"
-            >
-              📁 Projects
+          <div className="flex gap-3 flex-wrap">
+            <Link href="/projects" className="px-4 py-2 bg-emerald-600 text-white rounded-xl">
+              Projects
             </Link>
-            <Link
-              href="/workspace"
-              className="rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-600 transition"
-            >
-              👥 Workspace
+            <Link href="/workspace" className="px-4 py-2 bg-emerald-500 text-white rounded-xl">
+              Workspace
             </Link>
-
-            {/* 🔐 ROLE-BASED BUTTON */}
-            {user.role === "admin" && (
-              <Link
-                href="/projects"
-                className="rounded-xl bg-emerald-700 px-4 py-2 text-sm font-semibold text-white shadow-md hover:bg-emerald-800 transition"
-              >
-                ➕ New Sprint
-              </Link>
-            )}
           </div>
         </div>
 
-        {/* 📊 STATS */}
+        {/* STATS */}
         <div className="grid gap-6 sm:grid-cols-3">
-          {stats.map((stat) => {
-            const Icon = stat.icon;
+          {stats.map((s) => {
+            const Icon = s.icon;
             return (
-              <div
-                key={stat.title}
-                className="bg-white p-6 rounded-2xl border shadow-sm hover:shadow-lg transition hover:-translate-y-1"
-              >
+              <div key={s.title} className="bg-white p-6 rounded-2xl border">
                 <div className="flex justify-between">
-                  <p className="text-sm text-slate-500">{stat.title}</p>
-                  <Icon size={18} className="text-slate-400" />
+                  <p className="text-sm text-slate-500">{s.title}</p>
+                  <Icon size={18} />
                 </div>
-                <p className="mt-3 text-3xl font-bold text-slate-900">
-                  {stat.value}
-                </p>
+                <p className="text-3xl font-bold mt-3">{s.value}</p>
               </div>
             );
           })}
         </div>
 
-        {/* 📈 CHART */}
-        <div className="bg-white p-6 rounded-2xl border shadow-sm">
-          <div className="flex justify-between items-center mb-4">
-            <div>
-              <h2 className="text-lg font-semibold text-slate-900">
-                Productivity Analytics
-              </h2>
-              <p className="text-sm text-slate-500">
-                Track your team&apos;s performance trends over time
-              </p>
-            </div>
+        {/* CHART */}
+        <div className="bg-white p-6 rounded-2xl border">
+          <div className="flex justify-between mb-4">
+            <h2 className="font-semibold">Analytics</h2>
 
-            {/* ✅ FILTER BUTTONS */}
             <div className="flex gap-2 bg-slate-100 p-1 rounded-xl">
               {["This Week", "This Month"].map((item) => (
                 <button
                   key={item}
-                  onClick={() => setFilter(item)}
-                  className={`px-4 py-1.5 text-sm rounded-lg transition ${
-                    filter === item
-                      ? "bg-white shadow text-slate-900"
-                      : "text-slate-500 hover:text-slate-700"
+                  onClick={() => setFilter(item as any)}
+                  className={`px-4 py-1 rounded-lg ${
+                    filter === item ? "bg-white shadow" : ""
                   }`}
                 >
                   {item}
@@ -273,272 +267,63 @@ export default function Dashboard() {
             </div>
           </div>
 
-          {/* ✅ FIX: Use inline styles for guaranteed dimensions */}
-          <div style={{ width: "100%", minWidth: 0, height: "300px", overflow: "hidden" }}>
+          <div style={{ height: 300 }}>
             {mounted && (
-            <ResponsiveContainer width="100%" height={300}>
-              <LineChart data={chartData}>
-                <CartesianGrid strokeDasharray="3 3" opacity={0.2} />
-                <XAxis dataKey="name" />
-                <YAxis />
-                <Tooltip />
-                <Line
-                  type="monotone"
-                  dataKey="value"
-                  stroke="#10b981"
-                  strokeWidth={3}
-                  dot={{ r: 4 }}
-                  activeDot={{ r: 6 }}
-                />
-              </LineChart>
-            </ResponsiveContainer>
+              <ResponsiveContainer width="100%" height={300}>
+                <LineChart data={chartData}>
+                  <CartesianGrid opacity={0.2} />
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Line dataKey="value" stroke="#10b981" />
+                </LineChart>
+              </ResponsiveContainer>
             )}
           </div>
         </div>
 
-        {/* 📊 INSIGHTS OVERVIEW */}
-        <div>
-          <div className="mb-4">
-            <h2 className="text-xl font-semibold text-slate-900">
-              Insights Overview
-            </h2>
-            <p className="text-sm text-slate-500">
-              Key analytics and intelligent recommendations to guide your
-              workflow.
-            </p>
-            <div className="mt-3 flex flex-wrap gap-2">
-              <Link
-                href="/insights/overview"
-                className="rounded-lg border border-emerald-200 bg-white px-3 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-50 transition"
-              >
-                Overview
-              </Link>
-              <Link
-                href="/insights/analytics"
-                className="rounded-lg border border-emerald-200 bg-white px-3 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-50 transition"
-              >
-                Analytics
-              </Link>
-              <Link
-                href="/insights/feed"
-                className="rounded-lg border border-emerald-200 bg-white px-3 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-50 transition"
-              >
-                Feed
-              </Link>
-              <Link
-                href="/insights/tasks"
-                className="rounded-lg border border-emerald-200 bg-white px-3 py-1.5 text-xs font-semibold text-emerald-700 hover:bg-emerald-50 transition"
-              >
-                Tasks
-              </Link>
-            </div>
-          </div>
-
-          <div className="grid gap-6 md:grid-cols-3">
-            {/* 📊 PROJECT INSIGHTS */}
-            <div className="bg-white p-6 rounded-2xl border shadow-sm hover:shadow-md transition">
-              <h3 className="text-lg font-semibold text-slate-900">
-                Project Insights
-              </h3>
-
-              <div className="mt-4 space-y-3 text-sm text-slate-600">
-                {buildProjectInsights().map(
-                  (insight) => (
-                    <p key={insight}>
-                      {insight}
-                    </p>
-                  )
-                )}
-              </div>
-
-              <Link
-                href="/insights/overview"
-                className="mt-5 inline-block text-sm font-medium text-emerald-600 hover:underline"
-              >
-                View detailed report →
-              </Link>
-            </div>
-
-            {/* 🤖 AI INSIGHTS */}
-            <div className="bg-gradient-to-br from-emerald-500 to-emerald-600 text-white p-6 rounded-2xl shadow-sm hover:shadow-md transition">
-              <h3 className="text-lg font-semibold">AI Insights 🤖</h3>
-
-              <p className="mt-3 text-sm text-emerald-100">
-                Your productivity increased by 18%. Completing pending tasks
-                today can further boost efficiency by 10%.
-              </p>
-
-              <Link
-                href="/insights/analytics"
-                className="mt-5 inline-block bg-white text-emerald-700 px-4 py-2 rounded-xl text-sm font-semibold hover:bg-slate-100 transition"
-              >
-                View Recommendations
-              </Link>
-            </div>
-
-            {/* 🚧 PROJECTS IN PROGRESS */}
-            <div className="bg-white p-6 rounded-2xl border shadow-sm hover:shadow-md transition">
-              <h3 className="text-lg font-semibold text-slate-900">
-                Projects In Progress
-              </h3>
-
-              <div className="mt-4 space-y-4">
-                {[
-                  { name: "Project Alpha", progress: "70%" },
-                  { name: "Client Dashboard", progress: "50%" },
-                  { name: "AI Assistant", progress: "85%" },
-                ].map((project) => (
-                  <div key={project.name}>
-                    <div className="flex justify-between text-sm text-slate-600">
-                      <span>{project.name}</span>
-                      <span>{project.progress}</span>
-                    </div>
-
-                    <div className="mt-1 h-2 bg-slate-200 rounded-full">
-                      <div
-                        className="h-2 bg-emerald-500 rounded-full"
-                        style={{ width: project.progress }}
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              <Link
-                href="/insights/tasks"
-                className="mt-5 inline-block text-sm font-medium text-emerald-600 hover:underline"
-              >
-                Manage projects →
-              </Link>
-            </div>
-          </div>
-        </div>
-
-        {/* 👥 TEAM */}
-        <div className="bg-white p-6 rounded-2xl border shadow-sm">
-          <h2 className="text-lg font-semibold mb-4 text-slate-900">
-            Team Members
-          </h2>
+        {/* TEAM */}
+        <div className="bg-white p-6 rounded-2xl border">
+          <h2 className="font-semibold mb-4">Team</h2>
 
           {teamLoading ? (
-            <div className="flex gap-5">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="text-center animate-pulse">
-                  <div className="w-12 h-12 rounded-full bg-slate-200 mx-auto" />
-                  <div className="h-2 w-10 bg-slate-200 rounded mt-2 mx-auto" />
-                </div>
-              ))}
-            </div>
-          ) : team.length > 0 ? (
-            <div className="flex flex-wrap gap-5">
-              {team.map((member) => (
-                <div key={member.email} className="text-center">
+            <p>Loading...</p>
+          ) : (
+            <div className="flex gap-4 flex-wrap">
+              {team.map((m) => (
+                <div key={m.email} className="text-center">
                   <div
-                    className="w-12 h-12 rounded-full flex items-center justify-center text-white text-sm font-semibold hover:scale-105 transition mx-auto"
-                    style={{ backgroundColor: getAvatarColor(member.name) }}
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-white"
+                    style={{ background: getAvatarColor(m.name) }}
                   >
-                    {getInitials(member.name)}
+                    {getInitials(m.name)}
                   </div>
-                  <p className="text-xs mt-2 text-slate-600 max-w-[60px] truncate">
-                    {member.name}
-                  </p>
+                  <p className="text-xs">{m.name}</p>
                 </div>
               ))}
             </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center py-6 text-center">
-              <div className="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mb-3">
-                <svg className="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
-              </div>
-              <p className="text-sm font-medium text-slate-700">No team members yet</p>
-              <p className="text-xs text-slate-400 mt-1">Invite your team to get started</p>
-            </div>
           )}
         </div>
 
-        {/* 📌 BOTTOM */}
-        <div className="grid gap-6 md:grid-cols-2">
-          <div className="bg-white p-6 rounded-2xl border shadow-sm">
-            <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
-            {activityLoading ? (
-              <div className="space-y-3">
-                {[1, 2, 3].map((i) => (
-                  <div key={i} className="animate-pulse flex items-center gap-3">
-                    <div className="w-4 h-4 rounded-full bg-slate-200" />
-                    <div className="h-3 bg-slate-200 rounded w-3/4" />
-                  </div>
-                ))}
-              </div>
-            ) : activity.length > 0 ? (
-              <ul className="text-sm text-slate-600 space-y-3">
-                {activity.map((item, index) => (
-                  <li key={index} className="flex items-start justify-between gap-2">
-                    <span className="flex items-center gap-2">
-                      <span className="text-emerald-500">✔</span>
-                      {item.text}
-                    </span>
-                    <span className="text-xs text-slate-400 whitespace-nowrap">{item.time}</span>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div className="flex flex-col items-center justify-center py-6 text-center">
-                <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-3">
-                  <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                  </svg>
-                </div>
-                <p className="text-sm font-medium text-slate-700">No recent activity yet</p>
-                <p className="text-xs text-slate-400 mt-1">Your project activity will appear here</p>
-              </div>
-            )}
-          </div>
-
-          <div className="bg-slate-900 text-white p-6 rounded-2xl shadow-sm">
-            <h2 className="text-lg font-semibold">Upgrade Workspace 🚀</h2>
-            <p className="text-sm mt-2 text-slate-300">
-              Unlock advanced analytics, integrations, and priority support.
-            </p>
+        {/* ACTIVITY */}
+        <div className="bg-white p-6 rounded-2xl border">
+          <h2 className="font-semibold mb-4">Recent Activity</h2>
 
-            <button className="mt-4 bg-white text-slate-900 px-4 py-2 rounded-xl text-sm font-semibold hover:scale-105 transition">
-              Upgrade Now
-            </button>
-          </div>
+          {activityLoading ? (
+            <p>Loading...</p>
+          ) : (
+            <ul className="text-sm space-y-2">
+              {activity.map((a, i) => (
+                <li key={i} className="flex justify-between">
+                  <span>{a.text}</span>
+                  <span className="text-xs text-slate-400">{a.time}</span>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
-      </div>
-    </div>
-  );
-}
-
-/* 🔹 Buttons */
-const btn =
-  "rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 transition";
 
-const btnLight =
-  "rounded-xl bg-emerald-500 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-600 transition";
-
-const btnStrong =
-  "rounded-xl bg-emerald-700 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-800 transition";
-
-/* 🔹 Card */
-type CardProps = {
-  icon: React.ReactNode;
-  title: string;
-  link: string;
-};
-
-function Card({ icon, title, link }: CardProps) {
-  return (
-    <div className="bg-white p-6 rounded-2xl border shadow-sm hover:shadow-lg transition hover:-translate-y-1">
-      <div className="mb-3 text-slate-700">{icon}</div>
-      <h3 className="font-semibold text-slate-900">{title}</h3>
-      <Link href={link} className="mt-4 inline-block text-sm hover:underline">
-        Open →
-      </Link>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file