Enhance dashboard layout and sidebar functionality; improve session metrics calculations and API error handling

.github/dependabot.yml

@@ -9,18 +9,30 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+      day: "tuesday"
+      time: "03:00"
+      timezone: "Europe/Amsterdam"
 
   - package-ecosystem: "github-actions" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+      day: "tuesday"
+      time: "03:00"
+      timezone: "Europe/Amsterdam"
 
   - package-ecosystem: "docker" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+      day: "tuesday"
+      time: "03:00"
+      timezone: "Europe/Amsterdam"
 
   - package-ecosystem: "docker-compose" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+      day: "tuesday"
+      time: "03:00"
+      timezone: "Europe/Amsterdam"

app/dashboard/layout.tsx

@@ -1,16 +1,44 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useState, useEffect, useCallback } from "react";
-import { useSession, signOut } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import Sidebar from "../../components/Sidebar";
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { status } = useSession();
-  const { data: session, status } = useSession();
   const router = useRouter();
 
-  // Redirect if not authenticated
+  const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const updateStatesBasedOnScreen = () => {
+      const screenIsMobile = window.innerWidth < 640; // sm breakpoint for mobile
+      const screenIsSmallDesktop = window.innerWidth < 768 && !screenIsMobile; // between sm and md
+
+      setIsMobile(screenIsMobile);
+      setIsSidebarExpanded(!screenIsSmallDesktop && !screenIsMobile);
+    };
+
+    updateStatesBasedOnScreen();
+    window.addEventListener("resize", updateStatesBasedOnScreen);
+    return () =>
+      window.removeEventListener("resize", updateStatesBasedOnScreen);
+  }, []);
+
+  // Toggle sidebar handler - used for clicking the toggle button
+  const toggleSidebarHandler = useCallback(() => {
+    setIsSidebarExpanded((prev) => !prev);
+  }, []);
+
+  // Collapse sidebar handler - used when clicking navigation links on mobile
+  const collapseSidebar = useCallback(() => {
+    if (isMobile) {
+      setIsSidebarExpanded(false);
+    }
+  }, [isMobile]);
+
   if (status === "unauthenticated") {
     router.push("/login");
     return (
@@ -20,7 +48,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     );
   }
 
-  // Show loading state while session status is being determined
   if (status === "loading") {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -29,20 +56,26 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     );
   }
 
-  // Defined for potential future use, like adding a logout button in the layout
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const handleLogout = () => {
-    signOut({ callbackUrl: "/login" });
-  };
-
   return (
     <div className="flex h-screen bg-gray-100">
-      {/* Sidebar with logout handler passed as prop */}
+      <Sidebar
-      <Sidebar />
+        isExpanded={isSidebarExpanded}
+        isMobile={isMobile}
+        onToggle={toggleSidebarHandler}
+        onNavigate={collapseSidebar}
+      />
 
-      {/* Main content */}
+      <div
-      <div className="flex-1 overflow-auto p-8">
+        className={`flex-1 overflow-auto transition-all duration-300 py-4 pr-4
-        <div className="mx-auto max-w-7xl">{children}</div>
+          ${
+            isSidebarExpanded
+              ? "pl-4 sm:pl-6 md:pl-10"
+              : "pl-20 sm:pl-20 md:pl-6"
+          }
+          sm:pr-6 md:py-6 md:pr-10`}
+      >
+        {/* <div className="w-full mx-auto">{children}</div> */}
+        <div className="max-w-7xl mx-auto">{children}</div>
       </div>
     </div>
   );

app/dashboard/overview/page.tsx

@@ -41,6 +41,12 @@ function DashboardContent() {
         setLoading(true);
         const res = await fetch("/api/dashboard/metrics");
         const data = await res.json();
+        console.log("Metrics from API:", {
+          avgSessionLength: data.metrics.avgSessionLength,
+          avgSessionTimeTrend: data.metrics.avgSessionTimeTrend,
+          totalSessionDuration: data.metrics.totalSessionDuration,
+          validSessionsForDuration: data.metrics.validSessionsForDuration,
+        });
         setMetrics(data.metrics);
         setCompany(data.company);
         setLoading(false);
@@ -284,7 +290,7 @@ function DashboardContent() {
         />
         <MetricCard
           title="Avg. Session Time"
-          value={`${Math.round(metrics.avgSessionTimeTrend || 0)}m`}
+          value={`${Math.round(metrics.avgSessionLength || 0)}s`}
           icon={
             <svg
               className="h-5 w-5"
@@ -410,11 +416,11 @@ function DashboardContent() {
         />
       </div>
       <div className="bg-white p-6 rounded-xl shadow">
-        <div className="flex justify-between items-center mb-4">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
           <h3 className="font-bold text-lg text-gray-800">
             Token Usage & Costs
           </h3>
-          <div className="flex gap-4">
+          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 w-full sm:w-auto">
             <div className="text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full flex items-center">
               <span className="font-semibold mr-1">Total Tokens:</span>
               {metrics.totalTokens?.toLocaleString() || 0}

components/Sidebar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React from "react"; // No hooks needed since state is now managed by parent
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -110,29 +110,40 @@ const LogoutIcon = () => (
   </svg>
 );
 
-const ToggleIcon = ({ isExpanded }: { isExpanded: boolean }) => (
+const MinimalToggleIcon = ({ isExpanded }: { isExpanded: boolean }) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    className="h-6 w-6 text-gray-600 group-hover:text-sky-700 transition-colors"
-    className={`h-5 w-5 transform transition-transform ${isExpanded ? "rotate-180" : ""}`}
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    strokeWidth={2}
   >
+    {isExpanded ? (
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+    ) : (
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-      strokeWidth={2}
+        d="M4 6h16M4 12h16M4 18h7"
-      d="M9 5l7 7-7 7"
       />
+    )}
   </svg>
 );
 
+export interface SidebarProps {
+  isExpanded: boolean;
+  onToggle: () => void;
+  isMobile?: boolean; // Add this property to indicate mobile viewport
+  onNavigate?: () => void; // Function to call when navigating to a new page
+}
+
 interface NavItemProps {
   href: string;
   label: string;
   icon: React.ReactNode;
   isExpanded: boolean;
   isActive: boolean;
+  onNavigate?: () => void; // Function to call when navigating to a new page
 }
 
 const NavItem: React.FC<NavItemProps> = ({
@@ -141,6 +152,7 @@ const NavItem: React.FC<NavItemProps> = ({
   icon,
   isExpanded,
   isActive,
+  onNavigate,
 }) => (
   <Link
     href={href}
@@ -149,6 +161,11 @@ const NavItem: React.FC<NavItemProps> = ({
         ? "bg-sky-100 text-sky-800 font-medium"
         : "hover:bg-gray-100 text-gray-700 hover:text-gray-900"
     }`}
+    onClick={() => {
+      if (onNavigate) {
+        onNavigate();
+      }
+    }}
   >
     <span className={`flex-shrink-0 ${isExpanded ? "mr-3" : "mx-auto"}`}>
       {icon}
@@ -168,75 +185,99 @@ const NavItem: React.FC<NavItemProps> = ({
   </Link>
 );
 
-export default function Sidebar() {
+export default function Sidebar({
-  const [isExpanded, setIsExpanded] = useState(true);
+  isExpanded,
+  onToggle,
+  isMobile = false,
+  onNavigate,
+}: SidebarProps) {
   const pathname = usePathname() || "";
 
-  const toggleSidebar = () => {
-    setIsExpanded(!isExpanded);
-  };
-
   const handleLogout = () => {
     signOut({ callbackUrl: "/login" });
   };
 
   return (
+    <>
+      {/* Backdrop overlay when sidebar is expanded on mobile */}
+      {isExpanded && isMobile && (
         <div
-      className={`relative h-screen bg-white shadow-md transition-all duration-300 ${
+          className="fixed inset-0 bg-gray-900 bg-opacity-50 z-10 transition-opacity duration-300"
-        isExpanded ? "w-56" : "w-16"
+          onClick={onToggle}
-      } flex flex-col overflow-visible`}
+        />
+      )}
+
+      <div
+        className={`fixed md:relative h-screen bg-white shadow-md transition-all duration-300
+        ${
+          isExpanded ? (isMobile ? "w-full sm:w-80" : "w-56") : "w-16"
+        } flex flex-col overflow-visible z-20`}
       >
-      {/* Logo section - now above toggle button */}
+        <div className="flex flex-col items-center pt-5 pb-3 border-b relative">
-      <div className="flex flex-col items-center pt-5 pb-3">
+          {/* Toggle button when sidebar is collapsed - above logo */}
+          {!isExpanded && (
+            <div className="absolute top-1 left-1/2 transform -translate-x-1/2 z-30">
+              <button
+                onClick={(e) => {
+                  e.preventDefault(); // Prevent any navigation
+                  onToggle();
+                }}
+                className="p-1.5 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-sky-500 transition-colors group"
+                title="Expand sidebar"
+              >
+                <MinimalToggleIcon isExpanded={isExpanded} />
+              </button>
+            </div>
+          )}
+
+          {/* Logo section with link to homepage */}
+          <Link href="/" className="flex flex-col items-center">
             <div
-          className={`relative ${isExpanded ? "w-16" : "w-10"} aspect-square mb-1`}
+              className={`relative ${isExpanded ? "w-16" : "w-10 mt-8"} aspect-square mb-1 transition-all duration-300`}
             >
               <Image
                 src="/favicon.svg"
                 alt="LiveDash Logo"
                 fill
                 className="transition-all duration-300"
-            // Added priority prop for LCP optimization
                 priority
                 style={{
                   objectFit: "contain",
                   maxWidth: "100%",
-              // height: "auto"
                 }}
               />
             </div>
             {isExpanded && (
-          <span className="text-lg font-bold text-sky-700 mt-1">LiveDash</span>
+              <span className="text-lg font-bold text-sky-700 mt-1 transition-opacity duration-300">
+                LiveDash
+              </span>
             )}
+          </Link>
         </div>
-      {/* Toggle button */}
+        {isExpanded && (
-      <div className="flex justify-center border-b border-t py-2">
+          <div className="absolute top-3 right-3 z-30">
             <button
-          onClick={toggleSidebar}
+              onClick={(e) => {
-          className="p-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors relative group"
+                e.preventDefault(); // Prevent any navigation
-          title={isExpanded ? "Collapse sidebar" : "Expand sidebar"}
+                onToggle();
+              }}
+              className="p-1.5 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-sky-500 transition-colors group"
+              title="Collapse sidebar"
             >
-          <ToggleIcon isExpanded={isExpanded} />
+              <MinimalToggleIcon isExpanded={isExpanded} />
-          {!isExpanded && (
-            <div
-              className="fixed ml-6 w-auto p-2 min-w-max rounded-md shadow-md text-xs font-medium
-              text-white bg-gray-800 z-50
-              invisible opacity-0 -translate-x-3 transition-all
-              group-hover:visible group-hover:opacity-100 group-hover:translate-x-0"
-            >
-              {isExpanded ? "Collapse sidebar" : "Expand sidebar"}
-            </div>
-          )}
             </button>
           </div>
-      {/* Navigation items */}
+        )}
-      <nav className="flex-1 py-4 px-2 overflow-y-auto overflow-x-visible">
+        <nav
+          className={`flex-1 py-4 px-2 overflow-y-auto overflow-x-visible ${isExpanded ? "pt-12" : "pt-4"}`}
+        >
           <NavItem
             href="/dashboard"
             label="Dashboard"
             icon={<DashboardIcon />}
             isExpanded={isExpanded}
             isActive={pathname === "/dashboard"}
+            onNavigate={onNavigate}
           />
           <NavItem
             href="/dashboard/overview"
@@ -259,6 +300,7 @@ export default function Sidebar() {
             }
             isExpanded={isExpanded}
             isActive={pathname === "/dashboard/overview"}
+            onNavigate={onNavigate}
           />
           <NavItem
             href="/dashboard/sessions"
@@ -266,6 +308,7 @@ export default function Sidebar() {
             icon={<SessionsIcon />}
             isExpanded={isExpanded}
             isActive={pathname.startsWith("/dashboard/sessions")}
+            onNavigate={onNavigate}
           />
           <NavItem
             href="/dashboard/company"
@@ -273,6 +316,7 @@ export default function Sidebar() {
             icon={<CompanyIcon />}
             isExpanded={isExpanded}
             isActive={pathname === "/dashboard/company"}
+            onNavigate={onNavigate}
           />
           <NavItem
             href="/dashboard/users"
@@ -280,9 +324,9 @@ export default function Sidebar() {
             icon={<UsersIcon />}
             isExpanded={isExpanded}
             isActive={pathname === "/dashboard/users"}
+            onNavigate={onNavigate}
           />
         </nav>
-      {/* Logout at the bottom */}
         <div className="p-4 border-t mt-auto">
           <button
             onClick={handleLogout}
@@ -308,5 +352,6 @@ export default function Sidebar() {
           </button>
         </div>
       </div>
+    </>
   );
 }

components/WordCloud.tsx

@@ -2,15 +2,7 @@
 
 import { useRef, useEffect, useState } from "react";
 import { select } from "d3-selection";
-import cloud from "d3-cloud";
+import cloud, { Word } from "d3-cloud";
-
-interface CloudWord {
-  text: string;
-  size: number;
-  x?: number;
-  y?: number;
-  rotate?: number;
-}
 
 interface WordCloudProps {
   words: {
@@ -53,12 +45,12 @@ export default function WordCloud({
       )
       .padding(5)
       .rotate(() => (~~(Math.random() * 6) - 3) * 15) // Rotate between -45 and 45 degrees
-      .fontSize((d: CloudWord) => d.size)
+      .fontSize((d: Word) => d.size || 10)
       .on("end", draw);
 
     layout.start();
 
-    function draw(words: CloudWord[]) {
+    function draw(words: Word[]) {
       svg
         .append("g")
         .attr("transform", `translate(${width / 2},${height / 2})`)
@@ -66,7 +58,7 @@ export default function WordCloud({
         .data(words)
         .enter()
         .append("text")
-        .style("font-size", (d: CloudWord) => `${d.size}px`)
+        .style("font-size", (d: Word) => `${d.size || 10}px`)
         .style("font-family", "Inter, Arial, sans-serif")
         .style("fill", () => {
           // Create a nice gradient of colors
@@ -85,10 +77,10 @@ export default function WordCloud({
         .attr("text-anchor", "middle")
         .attr(
           "transform",
-          (d: CloudWord) =>
+          (d: Word) =>
             `translate(${d.x || 0},${d.y || 0}) rotate(${d.rotate || 0})`
         )
-        .text((d: CloudWord) => d.text);
+        .text((d: Word) => d.text || "");
     }
 
     // Cleanup function

lib/metrics.ts

@@ -373,19 +373,22 @@ export function sessionMetrics(
         // If times are identical, duration will be 0.
         // If endTime is before startTime, this still yields a positive duration representing the magnitude of the difference.
         const duration = Math.abs(timeDifference);
+        // console.log(
+        //   `[metrics] duration is ${duration} for session ${session.id || session.sessionId}`
+        // );
 
         totalSessionDuration += duration; // Add this duration
 
         if (timeDifference < 0) {
           // Log a specific warning if the original endTime was before startTime
           console.warn(
-            `[metrics] endTime (${session.endTime}) was before startTime (${session.startTime}) for session ${session.id || session.sessionId}. Using absolute difference as duration (${(duration / (1000 * 60)).toFixed(2)} mins).`
+            `[metrics] endTime (${session.endTime}) was before startTime (${session.startTime}) for session ${session.id || session.sessionId}. Using absolute difference as duration (${(duration / 1000).toFixed(2)} seconds).`
           );
         } else if (timeDifference === 0) {
-          // Optionally, log if times are identical, though this might be verbose if common
+          // // Optionally, log if times are identical, though this might be verbose if common
-          console.log(
+          // console.log(
-            `[metrics] startTime and endTime are identical for session ${session.id || session.sessionId}. Duration is 0.`
+          //   `[metrics] startTime and endTime are identical for session ${session.id || session.sessionId}. Duration is 0.`
-          );
+          // );
         }
         // If timeDifference > 0, it's a normal positive duration, no special logging needed here for that case.
 
@@ -399,7 +402,9 @@ export function sessionMetrics(
       }
       if (!session.endTime) {
         // This is a common case for ongoing sessions, might not always be an error
-        // console.log(`[metrics] Missing endTime for session ${session.id || session.sessionId} - likely ongoing or data issue.`);
+        console.log(
+          `[metrics] Missing endTime for session ${session.id || session.sessionId} - likely ongoing or data issue.`
+        );
       }
     }
 
@@ -493,7 +498,7 @@ export function sessionMetrics(
   const uniqueUsers = uniqueUserIds.size;
   const avgSessionLength =
     validSessionsForDuration > 0
-      ? totalSessionDuration / validSessionsForDuration / 1000 / 60 // Convert ms to minutes
+      ? totalSessionDuration / validSessionsForDuration / 1000 // Convert ms to minutes
       : 0;
   const avgResponseTime =
     validSessionsForResponseTime > 0
@@ -510,6 +515,12 @@ export function sessionMetrics(
   const avgSessionsPerDay =
     numDaysWithSessions > 0 ? totalSessions / numDaysWithSessions : 0;
 
+  // console.log("Debug metrics calculation:", {
+  //   totalSessionDuration,
+  //   validSessionsForDuration,
+  //   calculatedAvgSessionLength: avgSessionLength,
+  // });
+
   return {
     totalSessions,
     uniqueUsers,

lib/types.ts

@@ -138,6 +138,10 @@ export interface MetricsResult {
   usersTrend?: number; // e.g., percentage change in uniqueUsers
   avgSessionTimeTrend?: number; // e.g., percentage change in avgSessionLength
   avgResponseTimeTrend?: number; // e.g., percentage change in avgResponseTime
+
+  // Debug properties
+  totalSessionDuration?: number;
+  validSessionsForDuration?: number;
 }
 
 export interface ApiResponse<T> {

pages/api/forgot-password.ts

@@ -1,27 +1,20 @@
 import { prisma } from "../../lib/prisma";
 import { sendEmail } from "../../lib/sendEmail";
 import crypto from "crypto";
-import type { IncomingMessage, ServerResponse } from "http";
+import type { NextApiRequest, NextApiResponse } from "next";
-
-type NextApiRequest = IncomingMessage & {
-  body: {
-    email: string;
-    [key: string]: unknown;
-  };
-};
-
-type NextApiResponse = ServerResponse & {
-  status: (code: number) => NextApiResponse;
-  json: (data: Record<string, unknown>) => void;
-  end: () => void;
-};
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  if (req.method !== "POST") return res.status(405).end();
+  if (req.method !== "POST") {
-  const { email } = req.body;
+    res.setHeader("Allow", ["POST"]);
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+
+  // Type the body with a type assertion
+  const { email } = req.body as { email: string };
+
   const user = await prisma.user.findUnique({ where: { email } });
   if (!user) return res.status(200).end(); // always 200 for privacy
 

pages/api/reset-password.ts

@@ -34,11 +34,8 @@ export default async function handler(
     });
 
     if (!user) {
-      return res
+      return res.status(400).json({
-        .status(400)
+        error: "Invalid or expired token. Please request a new password reset.",
-        .json({
-          error:
-            "Invalid or expired token. Please request a new password reset.",
       });
     }
 
@@ -59,9 +56,7 @@ export default async function handler(
   } catch (error) {
     console.error("Reset password error:", error); // Log the error for server-side debugging
     // Provide a generic error message to the client
-    return res
+    return res.status(500).json({
-      .status(500)
-      .json({
       error: "An internal server error occurred. Please try again later.",
     });
   }