fix: bunch of UI fixes

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/filters-section.tsx

@@ -65,7 +65,7 @@ export function FiltersSection({
 					return (
 						<div
 							className="inline-flex items-center gap-1 rounded bg-muted/50 px-2 py-1 text-sm transition-colors hover:bg-muted/70"
-							key={`filter-${index}-${filter.field}-${filter.operator}`}
+							key={`filter-${filter.field}-${filter.operator}-${Array.isArray(filter.value) ? filter.value.join('-') : filter.value}-${index}`}
 						>
 							<span
 								className="truncate font-medium text-foreground"

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

@@ -262,7 +262,7 @@ function FilterForm({
 				{Array.from({ length: Math.min(numberOfFilters, 5) }, (_, index) => (
 					<Skeleton
 						className="h-8 w-full"
-						key={`filter-skeleton-${index}-${numberOfFilters}`}
+						key={`filter-skeleton-${index}`}
 					/>
 				))}
 			</div>

apps/dashboard/components/analytics/map-component.tsx

@@ -325,24 +325,21 @@ export function MapComponent({
 
 	const zoom = resolvedHeight ? Math.log2(resolvedHeight / 400) + 1 : 1;
 
-	// Fix map background color after mount
 	useEffect(() => {
 		if (mapRef.current) {
 			const mapContainer = mapRef.current.getContainer();
 			if (mapContainer) {
-				const bgColor = resolvedTheme === 'dark' ? '#1f2937' : '#f8fafc';
+				const bgColor = 'hsl(var(--background))';
 				mapContainer.style.backgroundColor = bgColor;
-				// Also set it on the leaflet-container class
 				const leafletContainer =
 					mapContainer.querySelector('.leaflet-container');
-				if (leafletContainer) {
+				if (leafletContainer) {	
 					(leafletContainer as HTMLElement).style.backgroundColor = bgColor;
 				}
 			}
 		}
 	}, [resolvedTheme]);
 
-	// Helper function to calculate country centroid
 	const calculateCountryCentroid = useCallback(
 		(geometry: Country['features'][number]['geometry']) => {
 			let centroidLat = 0;
@@ -444,10 +441,7 @@ export function MapComponent({
 					ref={mapRef}
 					style={{
 						height: '100%',
-						backgroundColor:
-							resolvedTheme === 'dark'
-								? '#1f2937 !important'
-								: '#fffff !important',
+						backgroundColor: 'hsl(var(--background))',
 						cursor: 'default',
 						outline: 'none',
 						zIndex: '1',

apps/dashboard/components/layout/category-sidebar.tsx

@@ -3,6 +3,7 @@
 import { InfoIcon } from '@phosphor-icons/react';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { NotificationsPopover } from '@/components/notifications/notifications-popover';
@@ -58,7 +59,10 @@ export function CategorySidebar({
 			<div className="flex h-full flex-col">
 				{/* Logo */}
 				<div className="flex h-16 items-center justify-center border-border border-b">
-					<div className="relative flex-shrink-0">
+					<Link 
+						className="relative flex-shrink-0 transition-opacity hover:opacity-80"
+						href="/websites"
+					>
 						<Image
 							alt="DataBuddy Logo"
 							className="drop-shadow-sm invert dark:invert-0"
@@ -67,7 +71,7 @@ export function CategorySidebar({
 							src="/logo.svg"
 							width={32}
 						/>
-					</div>
+					</Link>
 				</div>
 				{categories.map((category) => {
 					const Icon = category.icon;

apps/dashboard/components/layout/navigation/navigation-config.tsx

@@ -247,7 +247,7 @@ export const websiteNavigation: NavigationSection[] = [
 		icon: UsersIcon,
 		items: [
 			{
-				name: 'User Profiles',
+				name: 'Profiles',
 				icon: UserCircleIcon,
 				href: '/profiles',
 			},

apps/dashboard/components/layout/organization-selector.tsx

@@ -190,15 +190,18 @@ export function OrganizationSelector() {
 
 	if (isLoading) {
 		return (
-			<div className="border-border border-b bg-accent/20 px-5 py-3">
-				<div className="flex items-center gap-3">
-					<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
-						<Skeleton className="h-5 w-5 rounded" />
-					</div>
-					<div className="space-y-1">
-						<Skeleton className="h-4 w-24 rounded" />
-						<Skeleton className="h-3 w-16 rounded" />
+			<div className="flex h-16 w-full items-center border-border border-b bg-accent/20 px-5 py-3">
+				<div className="flex w-full items-center justify-between">
+					<div className="flex items-center gap-3">
+						<div className="rounded-lg bg-background/80 p-1.5 shadow-sm ring-1 ring-border/50">
+							<Skeleton className="h-5 w-5 rounded" />
+						</div>
+						<div className="flex min-w-0 flex-1 flex-col items-start">
+							<Skeleton className="h-4 w-24 rounded" />
+							<Skeleton className="mt-1 h-3 w-16 rounded" />
+						</div>
 					</div>
+					<Skeleton className="h-4 w-4 rounded" />
 				</div>
 			</div>
 		);

apps/dashboard/components/layout/sidebar.tsx

@@ -2,6 +2,7 @@
 
 import { ListIcon, XIcon } from '@phosphor-icons/react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
@@ -160,7 +161,10 @@ export function Sidebar() {
 							<ListIcon className="h-5 w-5" weight="duotone" />
 						</Button>
 
-						<div className="flex items-center gap-2">
+						<Link 
+							className="flex items-center gap-2 transition-opacity hover:opacity-80"
+							href="/websites"
+						>
 							<div className="flex h-8 w-8 items-center justify-center">
 								<Image
 									alt="Databuddy Logo"
@@ -172,7 +176,7 @@ export function Sidebar() {
 								/>
 							</div>
 							<span className="font-semibold text-lg">Databuddy</span>
-						</div>
+						</Link>
 					</div>
 				</div>
 			</header>