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

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-5 w-5 transform transition-transform ${isExpanded ? "rotate-180" : ""}`}
+    className="h-6 w-6 text-gray-600 group-hover:text-sky-700 transition-colors"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
+    strokeWidth={2}
   >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      d="M9 5l7 7-7 7"
-    />
+    {isExpanded ? (
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+    ) : (
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4 6h16M4 12h16M4 18h7"
+      />
+    )}
   </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,145 +185,173 @@ const NavItem: React.FC<NavItemProps> = ({
   </Link>
 );
 
-export default function Sidebar() {
-  const [isExpanded, setIsExpanded] = useState(true);
+export default function Sidebar({
+  isExpanded,
+  onToggle,
+  isMobile = false,
+  onNavigate,
+}: SidebarProps) {
   const pathname = usePathname() || "";
 
-  const toggleSidebar = () => {
-    setIsExpanded(!isExpanded);
-  };
-
   const handleLogout = () => {
     signOut({ callbackUrl: "/login" });
   };
 
   return (
-    <div
-      className={`relative h-screen bg-white shadow-md transition-all duration-300 ${
-        isExpanded ? "w-56" : "w-16"
-      } flex flex-col overflow-visible`}
-    >
-      {/* Logo section - now above toggle button */}
-      <div className="flex flex-col items-center pt-5 pb-3">
+    <>
+      {/* Backdrop overlay when sidebar is expanded on mobile */}
+      {isExpanded && isMobile && (
         <div
-          className={`relative ${isExpanded ? "w-16" : "w-10"} aspect-square mb-1`}
-        >
-          <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"
-            }}
-          />
+          className="fixed inset-0 bg-gray-900 bg-opacity-50 z-10 transition-opacity duration-300"
+          onClick={onToggle}
+        />
+      )}
+
+      <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`}
+      >
+        <div className="flex flex-col items-center pt-5 pb-3 border-b relative">
+          {/* 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 mt-8"} aspect-square mb-1 transition-all duration-300`}
+            >
+              <Image
+                src="/favicon.svg"
+                alt="LiveDash Logo"
+                fill
+                className="transition-all duration-300"
+                priority
+                style={{
+                  objectFit: "contain",
+                  maxWidth: "100%",
+                }}
+              />
+            </div>
+            {isExpanded && (
+              <span className="text-lg font-bold text-sky-700 mt-1 transition-opacity duration-300">
+                LiveDash
+              </span>
+            )}
+          </Link>
         </div>
         {isExpanded && (
-          <span className="text-lg font-bold text-sky-700 mt-1">LiveDash</span>
+          <div className="absolute top-3 right-3 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="Collapse sidebar"
+            >
+              <MinimalToggleIcon isExpanded={isExpanded} />
+            </button>
+          </div>
         )}
-      </div>
-      {/* Toggle button */}
-      <div className="flex justify-center border-b border-t py-2">
-        <button
-          onClick={toggleSidebar}
-          className="p-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors relative group"
-          title={isExpanded ? "Collapse sidebar" : "Expand sidebar"}
+        <nav
+          className={`flex-1 py-4 px-2 overflow-y-auto overflow-x-visible ${isExpanded ? "pt-12" : "pt-4"}`}
         >
-          <ToggleIcon 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>
+          <NavItem
+            href="/dashboard"
+            label="Dashboard"
+            icon={<DashboardIcon />}
+            isExpanded={isExpanded}
+            isActive={pathname === "/dashboard"}
+            onNavigate={onNavigate}
+          />
+          <NavItem
+            href="/dashboard/overview"
+            label="Analytics"
+            icon={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                />
+              </svg>
+            }
+            isExpanded={isExpanded}
+            isActive={pathname === "/dashboard/overview"}
+            onNavigate={onNavigate}
+          />
+          <NavItem
+            href="/dashboard/sessions"
+            label="Sessions"
+            icon={<SessionsIcon />}
+            isExpanded={isExpanded}
+            isActive={pathname.startsWith("/dashboard/sessions")}
+            onNavigate={onNavigate}
+          />
+          <NavItem
+            href="/dashboard/company"
+            label="Company Settings"
+            icon={<CompanyIcon />}
+            isExpanded={isExpanded}
+            isActive={pathname === "/dashboard/company"}
+            onNavigate={onNavigate}
+          />
+          <NavItem
+            href="/dashboard/users"
+            label="User Management"
+            icon={<UsersIcon />}
+            isExpanded={isExpanded}
+            isActive={pathname === "/dashboard/users"}
+            onNavigate={onNavigate}
+          />
+        </nav>
+        <div className="p-4 border-t mt-auto">
+          <button
+            onClick={handleLogout}
+            className={`relative flex items-center p-3 w-full rounded-lg text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-all group ${
+              isExpanded ? "" : "justify-center"
+            }`}
+          >
+            <span className={`flex-shrink-0 ${isExpanded ? "mr-3" : ""}`}>
+              <LogoutIcon />
+            </span>
+            {isExpanded ? (
+              <span>Logout</span>
+            ) : (
+              <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"
+              >
+                Logout
+              </div>
+            )}
+          </button>
+        </div>
       </div>
-      {/* Navigation items */}
-      <nav className="flex-1 py-4 px-2 overflow-y-auto overflow-x-visible">
-        <NavItem
-          href="/dashboard"
-          label="Dashboard"
-          icon={<DashboardIcon />}
-          isExpanded={isExpanded}
-          isActive={pathname === "/dashboard"}
-        />
-        <NavItem
-          href="/dashboard/overview"
-          label="Analytics"
-          icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-              />
-            </svg>
-          }
-          isExpanded={isExpanded}
-          isActive={pathname === "/dashboard/overview"}
-        />
-        <NavItem
-          href="/dashboard/sessions"
-          label="Sessions"
-          icon={<SessionsIcon />}
-          isExpanded={isExpanded}
-          isActive={pathname.startsWith("/dashboard/sessions")}
-        />
-        <NavItem
-          href="/dashboard/company"
-          label="Company Settings"
-          icon={<CompanyIcon />}
-          isExpanded={isExpanded}
-          isActive={pathname === "/dashboard/company"}
-        />
-        <NavItem
-          href="/dashboard/users"
-          label="User Management"
-          icon={<UsersIcon />}
-          isExpanded={isExpanded}
-          isActive={pathname === "/dashboard/users"}
-        />
-      </nav>
-      {/* Logout at the bottom */}
-      <div className="p-4 border-t mt-auto">
-        <button
-          onClick={handleLogout}
-          className={`relative flex items-center p-3 w-full rounded-lg text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-all group ${
-            isExpanded ? "" : "justify-center"
-          }`}
-        >
-          <span className={`flex-shrink-0 ${isExpanded ? "mr-3" : ""}`}>
-            <LogoutIcon />
-          </span>
-          {isExpanded ? (
-            <span>Logout</span>
-          ) : (
-            <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"
-            >
-              Logout
-            </div>
-          )}
-        </button>
-      </div>
-    </div>
+    </>
   );
 }