mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 10:52:08 +01:00
Enhance dashboard layout and sidebar functionality; improve session metrics calculations and API error handling
This commit is contained in:
12
.github/dependabot.yml
vendored
12
.github/dependabot.yml
vendored
@ -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"
|
||||
|
||||
@ -1,16 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode } from "react";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { ReactNode, useState, useEffect, useCallback } from "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 { data: session, status } = useSession();
|
||||
const { 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 className="flex-1 overflow-auto p-8">
|
||||
<div className="mx-auto max-w-7xl">{children}</div>
|
||||
<div
|
||||
className={`flex-1 overflow-auto transition-all duration-300 py-4 pr-4
|
||||
${
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,15 +2,7 @@
|
||||
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { select } from "d3-selection";
|
||||
import cloud from "d3-cloud";
|
||||
|
||||
interface CloudWord {
|
||||
text: string;
|
||||
size: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
rotate?: number;
|
||||
}
|
||||
import cloud, { Word } from "d3-cloud";
|
||||
|
||||
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
|
||||
|
||||
@ -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
|
||||
console.log(
|
||||
`[metrics] startTime and endTime are identical for session ${session.id || session.sessionId}. Duration is 0.`
|
||||
);
|
||||
// // Optionally, log if times are identical, though this might be verbose if common
|
||||
// console.log(
|
||||
// `[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,
|
||||
|
||||
@ -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> {
|
||||
|
||||
@ -1,27 +1,20 @@
|
||||
import { prisma } from "../../lib/prisma";
|
||||
import { sendEmail } from "../../lib/sendEmail";
|
||||
import crypto from "crypto";
|
||||
import type { IncomingMessage, ServerResponse } from "http";
|
||||
|
||||
type NextApiRequest = IncomingMessage & {
|
||||
body: {
|
||||
email: string;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
type NextApiResponse = ServerResponse & {
|
||||
status: (code: number) => NextApiResponse;
|
||||
json: (data: Record<string, unknown>) => void;
|
||||
end: () => void;
|
||||
};
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
export default async function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse
|
||||
) {
|
||||
if (req.method !== "POST") return res.status(405).end();
|
||||
const { email } = req.body;
|
||||
if (req.method !== "POST") {
|
||||
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
|
||||
|
||||
|
||||
@ -34,12 +34,9 @@ export default async function handler(
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({
|
||||
error:
|
||||
"Invalid or expired token. Please request a new password reset.",
|
||||
});
|
||||
return res.status(400).json({
|
||||
error: "Invalid or expired token. Please request a new password reset.",
|
||||
});
|
||||
}
|
||||
|
||||
const hash = await bcrypt.hash(password, 10);
|
||||
@ -59,10 +56,8 @@ 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
|
||||
.status(500)
|
||||
.json({
|
||||
error: "An internal server error occurred. Please try again later.",
|
||||
});
|
||||
return res.status(500).json({
|
||||
error: "An internal server error occurred. Please try again later.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user