fix: sessions

Author: izadoesdev

apps/api/src/query/builders/sessions.ts

@@ -120,7 +120,6 @@ export const SessionsBuilders: Record<string, SimpleQueryConfig> = {
         session_id,
         MIN(time) as first_visit,
         MAX(time) as last_visit,
-        LEAST(dateDiff('second', MIN(time), MAX(time)), 28800) as duration,
         countIf(event_name = 'screen_view') as page_views,
         any(anonymous_id) as visitor_id,
         any(user_agent) as user_agent,
@@ -168,7 +167,6 @@ export const SessionsBuilders: Record<string, SimpleQueryConfig> = {
       sl.session_id,
       sl.first_visit,
       sl.last_visit,
-      sl.duration,
       sl.page_views,
       sl.visitor_id,
       sl.user_agent,

apps/dashboard/app/(main)/websites/[id]/sessions/_components/session-row.tsx

@@ -4,7 +4,6 @@ import {
 	ArrowSquareOutIcon,
 	CaretDownIcon,
 	CaretRightIcon,
-	ClockIcon,
 	EyeIcon,
 	SparkleIcon,
 	WarningIcon,
@@ -128,7 +127,7 @@ function SessionRowInternal({
 							{getBrowserIconComponent(
 								session.browser || session.browser_name || ''
 							)}
-							{getOSIconComponent(session.os || '')}
+							{getOSIconComponent(session.os_name || '')}
 						</div>
 
 						<div className="min-w-0 flex-1">
@@ -172,16 +171,6 @@ function SessionRowInternal({
 					</div>
 
 					<div className="ml-4 flex flex-shrink-0 items-center gap-4 text-sm">
-						<div className="hidden min-w-[60px] flex-col items-center gap-1 sm:flex">
-							<div className="flex items-center gap-1 text-muted-foreground text-xs">
-								<ClockIcon className="h-3 w-3" />
-								<span>Duration</span>
-							</div>
-							<span className="font-semibold text-foreground text-sm">
-								{session.duration_formatted || '0s'}
-							</span>
-						</div>
-
 						<div className="hidden min-w-[60px] flex-col items-center gap-1 sm:flex">
 							<div className="flex items-center gap-1 text-muted-foreground text-xs">
 								<EyeIcon className="h-3 w-3" />
@@ -231,15 +220,7 @@ function SessionRowInternal({
 
 			<CollapsibleContent>
 				<div className="border-t bg-muted/20 px-4 pb-4">
-					<div className="grid grid-cols-1 gap-4 border-b py-4 text-sm sm:grid-cols-2 lg:grid-cols-5">
-						<div className="text-center">
-							<span className="mb-2 block text-muted-foreground text-xs uppercase tracking-wide">
-								Duration
-							</span>
-							<div className="font-bold text-foreground text-lg">
-								{session.duration_formatted || '0s'}
-							</div>
-						</div>
+					<div className="grid grid-cols-1 gap-4 border-b py-4 text-sm sm:grid-cols-2 lg:grid-cols-4">
 						<div className="text-center">
 							<span className="mb-2 block text-muted-foreground text-xs uppercase tracking-wide">
 								Page Views

apps/dashboard/app/(main)/websites/[id]/sessions/_components/session-utils.tsx

@@ -30,14 +30,16 @@ export const getDeviceIcon = (device: string) => {
 export const getBrowserIconComponent = (browser: string) => {
 	const iconPath = getBrowserIcon(browser);
 	return (
-		<img
-			alt={browser}
-			className="h-4 w-4 object-contain"
-			onError={(e) => {
-				(e.target as HTMLImageElement).style.display = 'none';
-			}}
-			src={iconPath}
-		/>
+		<div className="flex h-4 w-4 items-center justify-center">
+			<img
+				alt={browser}
+				className="h-4 w-4 object-contain"
+				onError={(e) => {
+					(e.target as HTMLImageElement).style.display = 'none';
+				}}
+				src={iconPath}
+			/>
+		</div>
 	);
 };
 
@@ -57,7 +59,11 @@ export const getOSIconComponent = (os: string) => {
 
 export const getCountryFlag = (country: string) => {
 	if (!country || country === 'Unknown' || country === '') {
-		return <GlobeIcon className="h-4 w-4 text-muted-foreground" />;
+		return (
+			<div className="flex h-4 w-6 items-center justify-center">
+				<GlobeIcon className="h-4 w-4 text-muted-foreground" />
+			</div>
+		);
 	}
 
 	return (