refactor: consolidate and cleanup utils

Author: izadoesdev

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

@@ -8,7 +8,7 @@ export const PerformanceBuilders: Record<string, SimpleQueryConfig> = {
 	slow_pages: {
 		table: Analytics.events,
 		fields: [
-			"trimRight(path, '/') as name",
+			"decodeURLComponent(CASE WHEN trimRight(path(path), '/') = '' THEN '/' ELSE trimRight(path(path), '/') END) as name",
 			'COUNT(DISTINCT anonymous_id) as visitors',
 			'AVG(CASE WHEN load_time > 0 THEN load_time ELSE NULL END) as avg_load_time',
 			'quantile(0.50)(CASE WHEN load_time > 0 THEN load_time ELSE NULL END) as p50_load_time',
@@ -24,7 +24,9 @@ export const PerformanceBuilders: Record<string, SimpleQueryConfig> = {
 			'COUNT(*) as pageviews',
 		],
 		where: ["event_name = 'screen_view'", "path != ''", 'load_time > 0'],
-		groupBy: ["trimRight(path, '/')"],
+		groupBy: [
+			"decodeURLComponent(CASE WHEN trimRight(path(path), '/') = '' THEN '/' ELSE trimRight(path(path), '/') END)",
+		],
 		orderBy: 'p95_load_time DESC',
 		limit: 100,
 		timeField: 'time',
@@ -166,7 +168,7 @@ export const PerformanceBuilders: Record<string, SimpleQueryConfig> = {
 	web_vitals_by_page: {
 		table: Analytics.web_vitals,
 		fields: [
-			"trimRight(path, '/') as name",
+			"decodeURLComponent(CASE WHEN trimRight(path(path), '/') = '' THEN '/' ELSE trimRight(path(path), '/') END) as name",
 			'COUNT(DISTINCT anonymous_id) as visitors',
 			'AVG(CASE WHEN fcp > 0 THEN fcp ELSE NULL END) as avg_fcp',
 			'quantile(0.50)(CASE WHEN fcp > 0 THEN fcp ELSE NULL END) as p50_fcp',
@@ -195,7 +197,9 @@ export const PerformanceBuilders: Record<string, SimpleQueryConfig> = {
 			'COUNT(*) as measurements',
 		],
 		where: ["path != ''"],
-		groupBy: ["trimRight(path, '/')"],
+		groupBy: [
+			"decodeURLComponent(CASE WHEN trimRight(path(path), '/') = '' THEN '/' ELSE trimRight(path(path), '/') END)",
+		],
 		orderBy: 'p95_lcp DESC',
 		limit: 100,
 		timeField: 'timestamp',

apps/dashboard/app/(main)/websites/[id]/_components/tabs/overview-tab.tsx

@@ -27,6 +27,7 @@ import {
 	type ReferrerSourceCellData,
 } from '@/components/atomic/ReferrerSourceCell';
 import { MetricsChart } from '@/components/charts/metrics-chart';
+import { BrowserIcon, OSIcon } from '@/components/icon';
 import { useBatchDynamicQuery } from '@/hooks/use-dynamic-query';
 import { useTableTabs } from '@/lib/table-tabs';
 import { getUserTimezone } from '@/lib/timezone';
@@ -39,12 +40,7 @@ import {
 	formatDateByGranularity,
 	getColorVariant,
 } from '../utils/analytics-helpers';
-import {
-	getBrowserIcon,
-	getOSIcon,
-	PercentageBadge,
-	TechnologyIcon,
-} from '../utils/technology-helpers';
+import { PercentageBadge } from '../utils/technology-helpers';
 import type { FullTabProps, MetricPoint } from '../utils/types';
 import { MetricToggles } from '../utils/ui-components';
 
@@ -450,11 +446,10 @@ export function WebsiteOverviewTab({
 
 	const createTechnologyCell = (type: 'browser' | 'os') => (info: CellInfo) => {
 		const entry = info.row.original as TechnologyData;
-		const icon =
-			type === 'browser' ? getBrowserIcon(entry.name) : getOSIcon(entry.name);
+		const IconComponent = type === 'browser' ? BrowserIcon : OSIcon;
 		return (
 			<div className="flex items-center gap-3">
-				<TechnologyIcon entry={{ ...entry, icon, category: type }} size="md" />
+				<IconComponent name={entry.name} size="md" />
 				<span className="font-medium">{entry.name}</span>
 			</div>
 		);

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

@@ -7,7 +7,13 @@ import {
 	Tablet,
 	Tv,
 } from 'lucide-react';
+import Image from 'next/image';
 import type React from 'react';
+import { BrowserIcon, OSIcon } from '@/components/icon';
+
+// Regex patterns for browser name processing
+const MOBILE_PREFIX_REGEX = /^Mobile\s+/;
+const MOBILE_SUFFIX_REGEX = /\s+Mobile$/;
 
 // Types
 export interface DeviceTypeEntry {
@@ -76,62 +82,6 @@ export const getDeviceTypeIcon = (
 	return <HelpCircle className={`${className} text-muted-foreground`} />;
 };
 
-// Enhanced browser icon mapping
-export const getBrowserIcon = (browser: string): string => {
-	const browserLower = browser.toLowerCase();
-
-	const iconMap: Record<string, string> = {
-		chrome: '/browsers/Chrome.svg',
-		firefox: '/browsers/Firefox.svg',
-		safari: '/browsers/Safari.svg',
-		edge: '/browsers/Edge.svg',
-		opera: '/browsers/Opera.svg',
-		ie: '/browsers/IE.svg',
-		'internet explorer': '/browsers/IE.svg',
-		samsung: '/browsers/SamsungInternet.svg',
-		yandex: '/browsers/Yandex.svg',
-		ucbrowser: '/browsers/UCBrowser.svg',
-		qq: '/browsers/QQ.webp',
-		baidu: '/browsers/Baidu.svg',
-		duckduckgo: '/browsers/DuckDuckGo.svg',
-		brave: '/browsers/Brave.svg',
-		vivaldi: '/browsers/Vivaldi.svg',
-	};
-
-	for (const [key, path] of Object.entries(iconMap)) {
-		if (browserLower.includes(key)) {
-			return path;
-		}
-	}
-
-	return '/browsers/Chrome.svg';
-};
-
-// Enhanced OS icon mapping
-export const getOSIcon = (os: string): string => {
-	const osLower = os.toLowerCase();
-
-	const iconMap: Record<string, string> = {
-		windows: '/operating-systems/Windows.svg',
-		mac: '/operating-systems/macOS.svg',
-		darwin: '/operating-systems/macOS.svg',
-		android: '/operating-systems/Android.svg',
-		linux: '/operating-systems/Ubuntu.svg',
-		ubuntu: '/operating-systems/Ubuntu.svg',
-		chrome: '/operating-systems/Chrome.svg',
-		harmony: '/operating-systems/HarmonyOS.svg',
-		ios: '/operating-systems/Apple.svg',
-	};
-
-	for (const [key, path] of Object.entries(iconMap)) {
-		if (osLower.includes(key)) {
-			return path;
-		}
-	}
-
-	return '/operating-systems/Ubuntu.svg';
-};
-
 export const processDeviceData = (
 	deviceTypes: DeviceTypeEntry[]
 ): TechnologyTableEntry[] => {
@@ -163,7 +113,6 @@ export const processDeviceData = (
 		}));
 };
 
-// Process browser data with percentages and enhanced icons
 export const processBrowserData = (
 	browserVersions: BrowserVersionEntry[]
 ): TechnologyTableEntry[] => {
@@ -172,8 +121,8 @@ export const processBrowserData = (
 	for (const item of browserVersions) {
 		let browserName = item.browser || 'Unknown';
 		browserName = browserName
-			.replace(/^Mobile\s+/, '')
-			.replace(/\s+Mobile$/, '');
+			.replace(MOBILE_PREFIX_REGEX, '')
+			.replace(MOBILE_SUFFIX_REGEX, '');
 		browserGroups[browserName] =
 			(browserGroups[browserName] || 0) + (item.visitors || 0);
 	}
@@ -191,12 +140,11 @@ export const processBrowserData = (
 			visitors,
 			percentage:
 				totalVisitors > 0 ? Math.round((visitors / totalVisitors) * 100) : 0,
-			icon: getBrowserIcon(name),
+			iconComponent: <BrowserIcon name={name} size="md" />,
 			category: 'browser',
 		}));
 };
 
-// Enhanced icon component for tables
 export const TechnologyIcon = ({
 	entry,
 	size = 'md',
@@ -208,38 +156,36 @@ export const TechnologyIcon = ({
 		return <>{entry.iconComponent}</>;
 	}
 
-	if (entry.icon) {
-		const sizeClasses = {
-			sm: 'h-3 w-3',
-			md: 'h-4 w-4',
-			lg: 'h-5 w-5',
-		};
-
-		return (
-			<img
-				alt={entry.name}
-				className={`${sizeClasses[size]} object-contain`}
-				onError={(e) => {
-					(e.target as HTMLImageElement).style.display = 'none';
-				}}
-				src={`${entry.icon}`}
-			/>
-		);
+	// Use unified icon components for better consistency
+	if (entry.category === 'browser') {
+		return <BrowserIcon name={entry.name} size={size} />;
 	}
 
-	// For OS entries without icon, use getOSIcon
 	if (entry.category === 'os') {
-		const sizeClasses = {
-			sm: 'h-3 w-3',
-			md: 'h-4 w-4',
-			lg: 'h-5 w-5',
+		return <OSIcon name={entry.name} size={size} />;
+	}
+
+	// Fallback for other categories or when no category is specified
+	if (entry.icon) {
+		const sizeMap = {
+			sm: 12,
+			md: 16,
+			lg: 20,
 		};
+		const iconSize = sizeMap[size];
+
 		return (
-			<img
-				alt={entry.name}
-				className={`${sizeClasses[size]} object-contain`}
-				src={getOSIcon(entry.name)}
-			/>
+			<div
+				className="relative flex-shrink-0"
+				style={{ width: iconSize, height: iconSize }}
+			>
+				<Image
+					alt={entry.name}
+					className="object-contain"
+					fill
+					src={entry.icon}
+				/>
+			</div>
 		);
 	}
 

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

@@ -57,13 +57,8 @@ type ProfileData = {
 	}>;
 };
 
-import {
-	formatDuration,
-	getBrowserIconComponent,
-	getCountryFlag,
-	getDeviceIcon,
-	getOSIconComponent,
-} from './profile-utils';
+import { BrowserIcon, CountryFlag, OSIcon } from '@/components/icon';
+import { formatDuration, getDeviceIcon } from '@/lib/utils';
 
 interface ProfileRowProps {
 	profile: ProfileData;
@@ -152,10 +147,10 @@ export function ProfileRow({
 							</div>
 						</div>
 						<div className="flex flex-shrink-0 items-center gap-2">
-							{getCountryFlag(profile.country)}
+							<CountryFlag country={profile.country} size="md" />
 							{getDeviceIcon(profile.device)}
-							{getBrowserIconComponent(profile.browser)}
-							{getOSIconComponent(profile.os)}
+							<BrowserIcon name={profile.browser} size="md" />
+							<OSIcon name={profile.os} size="md" />
 						</div>
 
 						{/* Profile Info */}

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

@@ -9,7 +9,6 @@ import { useDateFilters } from '@/hooks/use-date-filters';
 import { useProfilesData } from '@/hooks/use-dynamic-query';
 import { dynamicQueryFiltersAtom } from '@/stores/jotai/filterAtoms';
 
-// Type adapter for the new profile data structure
 type ProfileData = {
 	visitor_id: string;
 	first_visit: string;