Enhances data handling and geographic mapping

Refactors dashboard to use actual metrics for country data,
removing dummy data for improved accuracy. Integrates the
country-code-lookup package for geographic mapping, adding
comprehensive country coordinates. Increases performance and
data validation across API endpoints and adjusts WordCloud
component size for better visualization.

Enhances session handling with improved validation logic,
and updates configuration for allowed origins.
This commit is contained in:
2025-05-22 12:48:15 +02:00
parent 3bbb20d889
commit a17b66c078
11 changed files with 316 additions and 251 deletions

View File

@ -142,24 +142,22 @@ function DashboardContent() {
return metrics.wordCloudData;
};
// Function to prepare country data for the map - using simulated/dummy data
// Function to prepare country data for the map using actual metrics
const getCountryData = () => {
return {
US: 42,
GB: 25,
DE: 18,
FR: 15,
CA: 12,
AU: 10,
JP: 8,
BR: 6,
IN: 5,
ZA: 3,
ES: 7,
NL: 9,
IT: 6,
SE: 4,
};
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
@ -378,7 +376,7 @@ function DashboardContent() {
<h3 className="font-bold text-lg text-gray-800 mb-4">
Transcript Word Cloud
</h3>
<WordCloud words={getWordCloudData()} width={500} height={300} />
<WordCloud words={getWordCloudData()} width={400} height={300} />
</div>
<div className="bg-white p-6 rounded-xl shadow">
<h3 className="font-bold text-lg text-gray-800 mb-4">

View File

@ -40,6 +40,7 @@ export default function SessionsPage() {
// Pagination states
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [pageSize, setPageSize] = useState(10); // Or make this configurable
useEffect(() => {

View File

@ -92,12 +92,17 @@ export default function DonutChart({ data, centerText }: DonutChartProps) {
{
id: "centerText",
beforeDraw: function (chart: any) {
const width = chart.width;
const height = chart.height;
const ctx = chart.ctx;
ctx.restore();
const centerX = width / 2;
// Calculate the actual chart area width (excluding legend)
// Legend is positioned on the right, so we adjust the center X coordinate
const chartArea = chart.chartArea;
const chartWidth = chartArea.right - chartArea.left;
// Get the center of just the chart area (not including the legend)
const centerX = chartArea.left + chartWidth / 2;
const centerY = height / 2;
// Title text

View File

@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import "leaflet/dist/leaflet.css";
import countryLookup from "country-code-lookup";
// Define types for country data
interface CountryData {
@ -17,25 +18,41 @@ interface GeographicMapProps {
height?: number; // Optional height for the container
}
// Default coordinates for commonly used countries (latitude, longitude)
const DEFAULT_COORDINATES: Record<string, [number, number]> = {
US: [37.0902, -95.7129],
GB: [55.3781, -3.436],
DE: [51.1657, 10.4515],
FR: [46.2276, 2.2137],
CA: [56.1304, -106.3468],
AU: [-25.2744, 133.7751],
JP: [36.2048, 138.2529],
BR: [-14.235, -51.9253],
IN: [20.5937, 78.9629],
ZA: [-30.5595, 22.9375],
ES: [40.4637, -3.7492],
NL: [52.1326, 5.2913],
IT: [41.8719, 12.5674],
SE: [60.1282, 18.6435],
// Add more country coordinates as needed
// Get country coordinates from the country-code-lookup package
const getCountryCoordinates = (): Record<string, [number, number]> => {
// Initialize with some fallback coordinates for common countries that might be missing
const coordinates: Record<string, [number, number]> = {
// These are just in case the lookup fails for common countries
US: [37.0902, -95.7129],
GB: [55.3781, -3.436],
BA: [43.9159, 17.6791],
};
try {
// Get all countries from the package
const allCountries = countryLookup.countries;
// Map through all countries and extract coordinates
allCountries.forEach((country) => {
if (country.iso2 && country.latitude && country.longitude) {
coordinates[country.iso2] = [
parseFloat(country.latitude),
parseFloat(country.longitude),
];
}
});
return coordinates;
} catch (error) {
// eslint-disable-next-line no-console
console.error("Error loading country coordinates:", error);
return coordinates;
}
};
// Load coordinates once when module is imported
const DEFAULT_COORDINATES = getCountryCoordinates();
// Dynamically import the Map component to avoid SSR issues
// This ensures the component only loads on the client side
const Map = dynamic(() => import("./Map"), {
@ -68,9 +85,15 @@ export default function GeographicMap({
// Generate CountryData array for the Map component
const data: CountryData[] = Object.entries(countries)
// Only include countries with known coordinates
.filter(
([code]) => countryCoordinates[code] || DEFAULT_COORDINATES[code]
)
.filter(([code]) => {
// If no coordinates found, log to help with debugging
if (!countryCoordinates[code] && !DEFAULT_COORDINATES[code]) {
// eslint-disable-next-line no-console
console.warn(`Missing coordinates for country code: ${code}`);
return false;
}
return true;
})
.map(([code, count]) => ({
code,
count,
@ -78,6 +101,12 @@ export default function GeographicMap({
DEFAULT_COORDINATES[code] || [0, 0],
}));
// Log for debugging
// eslint-disable-next-line no-console
console.log(
`Found ${data.length} countries with coordinates out of ${Object.keys(countries).length} total countries`
);
setCountryData(data);
} catch (error) {
// eslint-disable-next-line no-console
@ -86,8 +115,9 @@ export default function GeographicMap({
}
}, [countries, countryCoordinates, isClient]);
// Find the max count for scaling circles
const maxCount = Math.max(...Object.values(countries), 1);
// Find the max count for scaling circles - handle empty countries object
const countryValues = Object.values(countries);
const maxCount = countryValues.length > 0 ? Math.max(...countryValues, 1) : 1;
// Show loading state during SSR or until client-side rendering takes over
if (!isClient) {
@ -100,7 +130,13 @@ export default function GeographicMap({
return (
<div style={{ height: `${height}px`, width: "100%" }} className="relative">
<Map countryData={countryData} maxCount={maxCount} />
{countryData.length > 0 ? (
<Map countryData={countryData} maxCount={maxCount} />
) : (
<div className="h-full w-full bg-gray-100 flex items-center justify-center text-gray-500">
No geographic data available
</div>
)}
<style jsx global>{`
.leaflet-control-attribution {
display: none !important;

View File

@ -1,140 +1,140 @@
import { Session as NextAuthSession } from "next-auth";
export interface UserSession extends NextAuthSession {
user: {
id?: string;
name?: string;
email?: string;
image?: string;
companyId: string;
role: string;
};
user: {
id?: string;
name?: string;
email?: string;
image?: string;
companyId: string;
role: string;
};
}
export interface Company {
id: string;
name: string;
csvUrl: string;
csvUsername?: string;
csvPassword?: string;
sentimentAlert?: number; // Match Prisma schema naming
createdAt: Date;
updatedAt: Date;
id: string;
name: string;
csvUrl: string;
csvUsername?: string;
csvPassword?: string;
sentimentAlert?: number; // Match Prisma schema naming
createdAt: Date;
updatedAt: Date;
}
export interface User {
id: string;
email: string;
password: string;
role: string;
companyId: string;
resetToken?: string | null;
resetTokenExpiry?: Date | null;
company?: Company;
createdAt: Date;
updatedAt: Date;
id: string;
email: string;
password: string;
role: string;
companyId: string;
resetToken?: string | null;
resetTokenExpiry?: Date | null;
company?: Company;
createdAt: Date;
updatedAt: Date;
}
export interface ChatSession {
id: string;
sessionId: string;
companyId: string;
userId?: string | null;
category?: string | null;
language?: string | null;
country?: string | null;
ipAddress?: string | null;
sentiment?: number | null;
messagesSent?: number;
startTime: Date;
endTime?: Date | null;
createdAt: Date;
updatedAt: Date;
id: string;
sessionId: string;
companyId: string;
userId?: string | null;
category?: string | null;
language?: string | null;
country?: string | null;
ipAddress?: string | null;
sentiment?: number | null;
messagesSent?: number;
startTime: Date;
endTime?: Date | null;
createdAt: Date;
updatedAt: Date;
// Extended session properties that might be used in metrics
avgResponseTime?: number | null;
escalated?: boolean;
forwardedHr?: boolean;
tokens?: number;
tokensEur?: number;
initialMsg?: string;
fullTranscriptUrl?: string | null;
transcriptContent?: string | null;
// Extended session properties that might be used in metrics
avgResponseTime?: number | null;
escalated?: boolean;
forwardedHr?: boolean;
tokens?: number;
tokensEur?: number;
initialMsg?: string;
fullTranscriptUrl?: string | null;
transcriptContent?: string | null;
}
export interface SessionQuery {
searchTerm?: string;
category?: string;
language?: string;
startDate?: string;
endDate?: string;
sortKey?: string;
sortOrder?: "asc" | "desc";
page?: number;
pageSize?: number;
searchTerm?: string;
category?: string;
language?: string;
startDate?: string;
endDate?: string;
sortKey?: string;
sortOrder?: "asc" | "desc";
page?: number;
pageSize?: number;
}
export interface SessionApiResponse {
sessions: ChatSession[];
totalSessions: number;
sessions: ChatSession[];
totalSessions: number;
}
export interface SessionFilterOptions {
categories: string[];
languages: string[];
categories: string[];
languages: string[];
}
export interface DayMetrics {
[day: string]: number;
[day: string]: number;
}
export interface CategoryMetrics {
[category: string]: number;
[category: string]: number;
}
export interface LanguageMetrics {
[language: string]: number;
[language: string]: number;
}
export interface CountryMetrics {
[country: string]: number;
[country: string]: number;
}
export interface WordCloudWord {
text: string;
value: number;
text: string;
value: number;
}
export interface MetricsResult {
totalSessions: number;
avgSessionsPerDay: number;
avgSessionLength: number | null;
days: DayMetrics;
languages: LanguageMetrics;
categories: CategoryMetrics;
countries: CountryMetrics; // Added for geographic distribution
belowThresholdCount: number;
// Additional properties for dashboard
escalatedCount?: number;
forwardedCount?: number;
avgSentiment?: number;
avgResponseTime?: number;
totalTokens?: number;
totalTokensEur?: number;
sentimentThreshold?: number | null;
lastUpdated?: number; // Timestamp for when metrics were last updated
totalSessions: number;
avgSessionsPerDay: number;
avgSessionLength: number | null;
days: DayMetrics;
languages: LanguageMetrics;
categories: CategoryMetrics;
countries: CountryMetrics; // Added for geographic distribution
belowThresholdCount: number;
// Additional properties for dashboard
escalatedCount?: number;
forwardedCount?: number;
avgSentiment?: number;
avgResponseTime?: number;
totalTokens?: number;
totalTokensEur?: number;
sentimentThreshold?: number | null;
lastUpdated?: number; // Timestamp for when metrics were last updated
// New metrics for enhanced dashboard
sentimentPositiveCount?: number;
sentimentNeutralCount?: number;
sentimentNegativeCount?: number;
tokensByDay?: DayMetrics;
tokensCostByDay?: DayMetrics;
wordCloudData?: WordCloudWord[]; // Added for transcript-based word cloud
// New metrics for enhanced dashboard
sentimentPositiveCount?: number;
sentimentNeutralCount?: number;
sentimentNegativeCount?: number;
tokensByDay?: DayMetrics;
tokensCostByDay?: DayMetrics;
wordCloudData?: WordCloudWord[]; // Added for transcript-based word cloud
}
export interface ApiResponse<T> {
success: boolean;
data?: T;
error?: string;
success: boolean;
data?: T;
error?: string;
}

View File

@ -2,7 +2,12 @@
const nextConfig = {
reactStrictMode: true,
// Allow cross-origin requests from specific origins in development
allowedDevOrigins: ["192.168.1.2", "localhost", "propc"],
allowedDevOrigins: [
"192.168.1.2",
"localhost",
"propc",
"test123.kjanat.com",
],
};
export default nextConfig;

8
package-lock.json generated
View File

@ -11,11 +11,13 @@
"@prisma/client": "^6.8.2",
"@types/d3": "^7.4.3",
"@types/d3-cloud": "^1.2.9",
"@types/geojson": "^7946.0.16",
"@types/leaflet": "^1.9.18",
"@types/node-fetch": "^2.6.12",
"bcryptjs": "^3.0.2",
"chart.js": "^4.0.0",
"chartjs-plugin-annotation": "^3.1.0",
"country-code-lookup": "^0.1.3",
"csv-parse": "^5.5.0",
"d3": "^7.9.0",
"d3-cloud": "^1.2.7",
@ -3029,6 +3031,12 @@
"node": ">= 0.6"
}
},
"node_modules/country-code-lookup": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/country-code-lookup/-/country-code-lookup-0.1.3.tgz",
"integrity": "sha512-gLu+AQKHUnkSQNTxShKgi/4tYd0vEEait3JMrLNZgYlmIZ9DJLkHUjzXE9qcs7dy3xY/kUx2/nOxZ0Z3D9JE+A==",
"license": "MIT"
},
"node_modules/create-require": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",

View File

@ -18,11 +18,13 @@
"@prisma/client": "^6.8.2",
"@types/d3": "^7.4.3",
"@types/d3-cloud": "^1.2.9",
"@types/geojson": "^7946.0.16",
"@types/leaflet": "^1.9.18",
"@types/node-fetch": "^2.6.12",
"bcryptjs": "^3.0.2",
"chart.js": "^4.0.0",
"chartjs-plugin-annotation": "^3.1.0",
"country-code-lookup": "^0.1.3",
"csv-parse": "^5.5.0",
"d3": "^7.9.0",
"d3-cloud": "^1.2.7",

View File

@ -5,66 +5,72 @@ import { prisma } from "../../../lib/prisma";
import { SessionFilterOptions } from "../../../lib/types";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<SessionFilterOptions | { error: string; details?: string; }>
req: NextApiRequest,
res: NextApiResponse<
SessionFilterOptions | { error: string; details?: string }
>
) {
if (req.method !== "GET") {
return res.status(405).json({ error: "Method not allowed" });
}
if (req.method !== "GET") {
return res.status(405).json({ error: "Method not allowed" });
}
const authSession = await getServerSession(req, res, authOptions);
const authSession = await getServerSession(req, res, authOptions);
if (!authSession || !authSession.user?.companyId) {
return res.status(401).json({ error: "Unauthorized" });
}
if (!authSession || !authSession.user?.companyId) {
return res.status(401).json({ error: "Unauthorized" });
}
const companyId = authSession.user.companyId;
const companyId = authSession.user.companyId;
try {
const categories = await prisma.session.findMany({
where: {
companyId,
category: {
not: null, // Ensure category is not null
},
},
distinct: ["category"],
select: {
category: true,
},
orderBy: {
category: "asc",
},
});
try {
const categories = await prisma.session.findMany({
where: {
companyId,
category: {
not: null, // Ensure category is not null
},
},
distinct: ["category"],
select: {
category: true,
},
orderBy: {
category: "asc",
},
});
const languages = await prisma.session.findMany({
where: {
companyId,
language: {
not: null, // Ensure language is not null
},
},
distinct: ["language"],
select: {
language: true,
},
orderBy: {
language: "asc",
},
});
const languages = await prisma.session.findMany({
where: {
companyId,
language: {
not: null, // Ensure language is not null
},
},
distinct: ["language"],
select: {
language: true,
},
orderBy: {
language: "asc",
},
});
const distinctCategories = categories.map((s) => s.category).filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
const distinctLanguages = languages.map((s) => s.language).filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
const distinctCategories = categories
.map((s) => s.category)
.filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
const distinctLanguages = languages
.map((s) => s.language)
.filter(Boolean) as string[]; // Filter out any nulls and assert as string[]
return res
.status(200)
.json({ categories: distinctCategories, languages: distinctLanguages });
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : "An unknown error occurred";
return res.status(500).json({
error: "Failed to fetch filter options",
details: errorMessage,
});
}
return res
.status(200)
.json({ categories: distinctCategories, languages: distinctLanguages });
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : "An unknown error occurred";
return res.status(500).json({
error: "Failed to fetch filter options",
details: errorMessage,
});
}
}

View File

@ -2,11 +2,15 @@ import { NextApiRequest, NextApiResponse } from "next";
import { getServerSession } from "next-auth/next";
import { authOptions } from "../auth/[...nextauth]";
import { prisma } from "../../../lib/prisma";
import { ChatSession, SessionApiResponse, SessionQuery } from "../../../lib/types";
import {
ChatSession,
SessionApiResponse,
SessionQuery,
} from "../../../lib/types";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<SessionApiResponse | { error: string; details?: string; }>
res: NextApiResponse<SessionApiResponse | { error: string; details?: string }>
) {
if (req.method !== "GET") {
return res.status(405).json({ error: "Method not allowed" });
@ -19,25 +23,25 @@ export default async function handler(
}
const companyId = authSession.user.companyId;
const {
searchTerm,
category,
language,
startDate,
endDate,
sortKey,
sortOrder,
page: queryPage,
pageSize: queryPageSize,
} = req.query as SessionQuery;
const {
searchTerm,
category,
language,
startDate,
endDate,
sortKey,
sortOrder,
page: queryPage,
pageSize: queryPageSize,
} = req.query as SessionQuery;
const page = Number(queryPage) || 1;
const pageSize = Number(queryPageSize) || 10;
const page = Number(queryPage) || 1;
const pageSize = Number(queryPageSize) || 10;
try {
const whereClause: any = { companyId };
// Search Term
// Search Term
if (
searchTerm &&
typeof searchTerm === "string" &&
@ -45,7 +49,7 @@ export default async function handler(
) {
const searchConditions = [
{ id: { contains: searchTerm, mode: "insensitive" } },
{ sessionId: { contains: searchTerm, mode: "insensitive" } },
{ sessionId: { contains: searchTerm, mode: "insensitive" } },
{ category: { contains: searchTerm, mode: "insensitive" } },
{ initialMsg: { contains: searchTerm, mode: "insensitive" } },
{ transcriptContent: { contains: searchTerm, mode: "insensitive" } },
@ -53,54 +57,54 @@ export default async function handler(
whereClause.OR = searchConditions;
}
// Category Filter
if (category && typeof category === "string" && category.trim() !== "") {
whereClause.category = category;
}
// Category Filter
if (category && typeof category === "string" && category.trim() !== "") {
whereClause.category = category;
}
// Language Filter
if (language && typeof language === "string" && language.trim() !== "") {
whereClause.language = language;
}
// Language Filter
if (language && typeof language === "string" && language.trim() !== "") {
whereClause.language = language;
}
// Date Range Filter
if (startDate && typeof startDate === "string") {
if (!whereClause.startTime) whereClause.startTime = {};
whereClause.startTime.gte = new Date(startDate);
}
if (endDate && typeof endDate === "string") {
if (!whereClause.startTime) whereClause.startTime = {};
const inclusiveEndDate = new Date(endDate);
inclusiveEndDate.setDate(inclusiveEndDate.getDate() + 1);
whereClause.startTime.lt = inclusiveEndDate;
}
// Date Range Filter
if (startDate && typeof startDate === "string") {
if (!whereClause.startTime) whereClause.startTime = {};
whereClause.startTime.gte = new Date(startDate);
}
if (endDate && typeof endDate === "string") {
if (!whereClause.startTime) whereClause.startTime = {};
const inclusiveEndDate = new Date(endDate);
inclusiveEndDate.setDate(inclusiveEndDate.getDate() + 1);
whereClause.startTime.lt = inclusiveEndDate;
}
// Sorting
let orderByClause: any = { startTime: "desc" };
if (sortKey && typeof sortKey === "string") {
const order =
sortOrder === "asc" || sortOrder === "desc" ? sortOrder : "desc";
const validSortKeys: { [key: string]: string; } = {
startTime: "startTime",
category: "category",
language: "language",
sentiment: "sentiment",
messagesSent: "messagesSent",
avgResponseTime: "avgResponseTime",
};
if (validSortKeys[sortKey]) {
orderByClause = { [validSortKeys[sortKey]]: order };
}
// Sorting
let orderByClause: any = { startTime: "desc" };
if (sortKey && typeof sortKey === "string") {
const order =
sortOrder === "asc" || sortOrder === "desc" ? sortOrder : "desc";
const validSortKeys: { [key: string]: string } = {
startTime: "startTime",
category: "category",
language: "language",
sentiment: "sentiment",
messagesSent: "messagesSent",
avgResponseTime: "avgResponseTime",
};
if (validSortKeys[sortKey]) {
orderByClause = { [validSortKeys[sortKey]]: order };
}
}
const prismaSessions = await prisma.session.findMany({
where: whereClause,
orderBy: orderByClause,
skip: (page - 1) * pageSize,
take: pageSize,
orderBy: orderByClause,
skip: (page - 1) * pageSize,
take: pageSize,
});
const totalSessions = await prisma.session.count({ where: whereClause });
const totalSessions = await prisma.session.count({ where: whereClause });
const sessions: ChatSession[] = prismaSessions.map((ps) => ({
id: ps.id,
@ -127,7 +131,7 @@ export default async function handler(
transcriptContent: ps.transcriptContent ?? null,
}));
return res.status(200).json({ sessions, totalSessions });
return res.status(200).json({ sessions, totalSessions });
} catch (error) {
const errorMessage =
error instanceof Error ? error.message : "An unknown error occurred";