mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 07:52:10 +01:00
535 lines
18 KiB
TypeScript
535 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
SessionsLineChart,
|
|
CategoriesBarChart,
|
|
LanguagePieChart,
|
|
TokenUsageChart,
|
|
} from "../../../components/Charts";
|
|
import { Company, MetricsResult, WordCloudWord } from "../../../lib/types";
|
|
import MetricCard from "../../../components/MetricCard";
|
|
import DonutChart from "../../../components/DonutChart";
|
|
import WordCloud from "../../../components/WordCloud";
|
|
import GeographicMap from "../../../components/GeographicMap";
|
|
import ResponseTimeDistribution from "../../../components/ResponseTimeDistribution";
|
|
import WelcomeBanner from "../../../components/WelcomeBanner";
|
|
import DateRangePicker from "../../../components/DateRangePicker";
|
|
import TopQuestionsChart from "../../../components/TopQuestionsChart";
|
|
|
|
// Safely wrapped component with useSession
|
|
function DashboardContent() {
|
|
const { data: session, status } = useSession(); // Add status from useSession
|
|
const router = useRouter(); // Initialize useRouter
|
|
const [metrics, setMetrics] = useState<MetricsResult | null>(null);
|
|
const [company, setCompany] = useState<Company | null>(null);
|
|
const [, setLoading] = useState<boolean>(false);
|
|
const [refreshing, setRefreshing] = useState<boolean>(false);
|
|
const [dateRange, setDateRange] = useState<{ minDate: string; maxDate: string } | null>(null);
|
|
const [selectedStartDate, setSelectedStartDate] = useState<string>("");
|
|
const [selectedEndDate, setSelectedEndDate] = useState<string>("");
|
|
|
|
const isAuditor = session?.user?.role === "auditor";
|
|
|
|
// Function to fetch metrics with optional date range
|
|
const fetchMetrics = useCallback(async (startDate?: string, endDate?: string) => {
|
|
setLoading(true);
|
|
try {
|
|
let url = "/api/dashboard/metrics";
|
|
if (startDate && endDate) {
|
|
url += `?startDate=${startDate}&endDate=${endDate}`;
|
|
}
|
|
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
|
|
setMetrics(data.metrics);
|
|
setCompany(data.company);
|
|
|
|
// Set date range from API response (only on initial load)
|
|
if (data.dateRange && !dateRange) {
|
|
setDateRange(data.dateRange);
|
|
setSelectedStartDate(data.dateRange.minDate);
|
|
setSelectedEndDate(data.dateRange.maxDate);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching metrics:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [dateRange]);
|
|
|
|
// Handle date range changes
|
|
const handleDateRangeChange = useCallback((startDate: string, endDate: string) => {
|
|
setSelectedStartDate(startDate);
|
|
setSelectedEndDate(endDate);
|
|
fetchMetrics(startDate, endDate);
|
|
}, [fetchMetrics]);
|
|
|
|
useEffect(() => {
|
|
// Redirect if not authenticated
|
|
if (status === "unauthenticated") {
|
|
router.push("/login");
|
|
return; // Stop further execution in this effect
|
|
}
|
|
|
|
// Fetch metrics and company on mount if authenticated
|
|
if (status === "authenticated") {
|
|
fetchMetrics();
|
|
}
|
|
}, [status, router, fetchMetrics]); // Add fetchMetrics to dependency array
|
|
|
|
async function handleRefresh() {
|
|
if (isAuditor) return; // Prevent auditors from refreshing
|
|
try {
|
|
setRefreshing(true);
|
|
|
|
// Make sure we have a company ID to send
|
|
if (!company?.id) {
|
|
setRefreshing(false);
|
|
alert("Cannot refresh: Company ID is missing");
|
|
return;
|
|
}
|
|
|
|
const res = await fetch("/api/admin/refresh-sessions", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ companyId: company.id }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
// Refetch metrics
|
|
const metricsRes = await fetch("/api/dashboard/metrics");
|
|
const data = await metricsRes.json();
|
|
setMetrics(data.metrics);
|
|
} else {
|
|
const errorData = await res.json();
|
|
alert(`Failed to refresh sessions: ${errorData.error}`);
|
|
}
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
}
|
|
|
|
// Calculate sentiment distribution
|
|
const getSentimentData = () => {
|
|
if (!metrics) return { positive: 0, neutral: 0, negative: 0 };
|
|
|
|
if (
|
|
metrics.sentimentPositiveCount !== undefined &&
|
|
metrics.sentimentNeutralCount !== undefined &&
|
|
metrics.sentimentNegativeCount !== undefined
|
|
) {
|
|
return {
|
|
positive: metrics.sentimentPositiveCount,
|
|
neutral: metrics.sentimentNeutralCount,
|
|
negative: metrics.sentimentNegativeCount,
|
|
};
|
|
}
|
|
|
|
const total = metrics.totalSessions || 1;
|
|
return {
|
|
positive: Math.round(total * 0.6),
|
|
neutral: Math.round(total * 0.3),
|
|
negative: Math.round(total * 0.1),
|
|
};
|
|
};
|
|
|
|
// Prepare token usage data
|
|
const getTokenData = () => {
|
|
if (!metrics || !metrics.tokensByDay) {
|
|
return { labels: [], values: [], costs: [] };
|
|
}
|
|
|
|
const days = Object.keys(metrics.tokensByDay).sort();
|
|
const labels = days.slice(-7);
|
|
const values = labels.map((day) => metrics.tokensByDay?.[day] || 0);
|
|
const costs = labels.map((day) => metrics.tokensCostByDay?.[day] || 0);
|
|
|
|
return { labels, values, costs };
|
|
};
|
|
|
|
// Show loading state while session status is being determined
|
|
if (status === "loading") {
|
|
return <div className="text-center py-10">Loading session...</div>;
|
|
}
|
|
|
|
// If unauthenticated and not redirected yet (should be handled by useEffect, but as a fallback)
|
|
if (status === "unauthenticated") {
|
|
return <div className="text-center py-10">Redirecting to login...</div>;
|
|
}
|
|
|
|
if (!metrics || !company) {
|
|
return <div className="text-center py-10">Loading dashboard...</div>;
|
|
}
|
|
|
|
// Function to prepare word cloud data from metrics.wordCloudData
|
|
const getWordCloudData = (): WordCloudWord[] => {
|
|
if (!metrics || !metrics.wordCloudData) return [];
|
|
return metrics.wordCloudData;
|
|
};
|
|
|
|
// Function to prepare country data for the map using actual metrics
|
|
const getCountryData = () => {
|
|
if (!metrics || !metrics.countries) return {};
|
|
|
|
// Convert the countries object from metrics to the format expected by GeographicMap
|
|
const result = Object.entries(metrics.countries).reduce(
|
|
(acc, [code, count]) => {
|
|
if (code && count) {
|
|
acc[code] = count;
|
|
}
|
|
return acc;
|
|
},
|
|
{} as Record<string, number>
|
|
);
|
|
|
|
return result;
|
|
};
|
|
|
|
// Function to prepare response time distribution data
|
|
const getResponseTimeData = () => {
|
|
const avgTime = metrics.avgResponseTime || 1.5;
|
|
const simulatedData: number[] = [];
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
const randomFactor = 0.5 + Math.random();
|
|
simulatedData.push(avgTime * randomFactor);
|
|
}
|
|
|
|
return simulatedData;
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<WelcomeBanner companyName={company.name} />
|
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center bg-white p-6 rounded-2xl shadow-lg ring-1 ring-slate-200/50">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-800">{company.name}</h1>
|
|
<p className="text-slate-500 mt-1">
|
|
Dashboard updated{" "}
|
|
<span className="font-medium text-slate-600">
|
|
{new Date(metrics.lastUpdated || Date.now()).toLocaleString()}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3 mt-4 sm:mt-0">
|
|
<button
|
|
className="bg-sky-600 text-white py-2 px-5 rounded-lg shadow hover:bg-sky-700 transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex items-center text-sm font-medium"
|
|
onClick={handleRefresh}
|
|
disabled={refreshing || isAuditor}
|
|
>
|
|
{refreshing ? (
|
|
<>
|
|
<svg
|
|
className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
Refreshing...
|
|
</>
|
|
) : (
|
|
"Refresh Data"
|
|
)}
|
|
</button>
|
|
<button
|
|
className="bg-slate-100 text-slate-700 py-2 px-5 rounded-lg shadow hover:bg-slate-200 transition-colors flex items-center text-sm font-medium"
|
|
onClick={() => signOut({ callbackUrl: "/login" })}
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Date Range Picker */}
|
|
{dateRange && (
|
|
<DateRangePicker
|
|
minDate={dateRange.minDate}
|
|
maxDate={dateRange.maxDate}
|
|
onDateRangeChange={handleDateRangeChange}
|
|
initialStartDate={selectedStartDate}
|
|
initialEndDate={selectedEndDate}
|
|
/>
|
|
)}
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4">
|
|
<MetricCard
|
|
title="Total Sessions"
|
|
value={metrics.totalSessions}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"
|
|
/>
|
|
</svg>
|
|
}
|
|
trend={{
|
|
value: metrics.sessionTrend ?? 0,
|
|
isPositive: (metrics.sessionTrend ?? 0) >= 0,
|
|
}}
|
|
/>
|
|
<MetricCard
|
|
title="Unique Users"
|
|
value={metrics.uniqueUsers}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
}
|
|
trend={{
|
|
value: metrics.usersTrend ?? 0,
|
|
isPositive: (metrics.usersTrend ?? 0) >= 0,
|
|
}}
|
|
/>
|
|
<MetricCard
|
|
title="Avg. Session Time"
|
|
value={`${Math.round(metrics.avgSessionLength || 0)}s`}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
trend={{
|
|
value: metrics.avgSessionTimeTrend ?? 0,
|
|
isPositive: (metrics.avgSessionTimeTrend ?? 0) >= 0,
|
|
}}
|
|
/>
|
|
<MetricCard
|
|
title="Avg. Response Time"
|
|
value={`${metrics.avgResponseTime?.toFixed(1) || 0}s`}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
/>
|
|
</svg>
|
|
}
|
|
trend={{
|
|
value: metrics.avgResponseTimeTrend ?? 0,
|
|
isPositive: (metrics.avgResponseTimeTrend ?? 0) <= 0, // Lower response time is better
|
|
}}
|
|
/>
|
|
<MetricCard
|
|
title="Avg. Daily Costs"
|
|
value={`€${metrics.avgDailyCosts?.toFixed(4) || '0.0000'}`}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
/>
|
|
<MetricCard
|
|
title="Peak Usage Time"
|
|
value={metrics.peakUsageTime || 'N/A'}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
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>
|
|
}
|
|
/>
|
|
<MetricCard
|
|
title="Resolved Chats"
|
|
value={`${metrics.resolvedChatsPercentage?.toFixed(1) || '0.0'}%`}
|
|
icon={
|
|
<svg
|
|
className="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
}
|
|
trend={{
|
|
value: metrics.resolvedChatsPercentage ?? 0,
|
|
isPositive: (metrics.resolvedChatsPercentage ?? 0) >= 80, // 80%+ resolution rate is good
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="bg-white p-6 rounded-xl shadow lg:col-span-2">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Sessions Over Time
|
|
</h3>
|
|
<SessionsLineChart sessionsPerDay={metrics.days} />
|
|
</div>
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Conversation Sentiment
|
|
</h3>
|
|
<DonutChart
|
|
data={{
|
|
labels: ["Positive", "Neutral", "Negative"],
|
|
values: [
|
|
getSentimentData().positive,
|
|
getSentimentData().neutral,
|
|
getSentimentData().negative,
|
|
],
|
|
colors: ["#1cad7c", "#a1a1a1", "#dc2626"],
|
|
}}
|
|
centerText={{
|
|
title: "Total",
|
|
value: metrics.totalSessions,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Sessions by Category
|
|
</h3>
|
|
<CategoriesBarChart categories={metrics.categories || {}} />
|
|
</div>
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Languages Used
|
|
</h3>
|
|
<LanguagePieChart languages={metrics.languages || {}} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Geographic Distribution
|
|
</h3>
|
|
<GeographicMap countries={getCountryData()} />
|
|
</div>
|
|
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Common Topics
|
|
</h3>
|
|
<div className="h-[300px]">
|
|
<WordCloud words={getWordCloudData()} width={500} height={400} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Questions Chart */}
|
|
<TopQuestionsChart data={metrics.topQuestions || []} />
|
|
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<h3 className="font-bold text-lg text-gray-800 mb-4">
|
|
Response Time Distribution
|
|
</h3>
|
|
<ResponseTimeDistribution
|
|
data={getResponseTimeData()}
|
|
average={metrics.avgResponseTime || 0}
|
|
/>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-xl shadow">
|
|
<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 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}
|
|
</div>
|
|
<div className="text-sm bg-green-50 text-green-700 px-3 py-1 rounded-full flex items-center">
|
|
<span className="font-semibold mr-1">Total Cost:</span>€
|
|
{metrics.totalTokensEur?.toFixed(4) || 0}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<TokenUsageChart tokenData={getTokenData()} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Our exported component
|
|
export default function DashboardPage() {
|
|
return <DashboardContent />;
|
|
}
|