@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/builders/filters/FilterBuilder.svelte

@@ -1,641 +1,641 @@
-<script lang="ts" module>
-	function getDefaultValue(type: FilterBuilderColumnConfig['type']): any {
-		switch (type) {
-			case 'string':
-				return '';
-			case 'number':
-				return null;
-			case 'date':
-				return '';
-			case 'boolean':
-				return true;
-			default:
-				return '';
-		}
-	}
-
-	function isFilterValid(filter: FilterBuilderItem): boolean {
-		return !!(filter.column && filter.operator && filter.value !== null && filter.value !== '');
-	}
-
-	function getUniqueFilters(...filterArrays: FilterBuilderItem[][]): FilterBuilderItem[] {
-		const combinedFilters = filterArrays.flat();
-		const uniqueFilters: FilterBuilderItem[] = [];
-		const seen = new Set<string>();
-
-		combinedFilters.forEach((filter) => {
-			// Create a unique identifier based on all filter properties
-			const identifier = `${filter.column}-${filter.operator}-${String(filter.value).toLowerCase()}-${filter.logicalOperator || 'AND'}`;
-
-			if (!seen.has(identifier)) {
-				seen.add(identifier);
-				uniqueFilters.push(filter);
-			}
-		});
-
-		return uniqueFilters;
-	}
-
-	// Alternative version with configurable uniqueness criteria
-	function getUniqueFiltersAdvanced(
-		filterArrays: FilterBuilderItem[][],
-		uniquenessKey: (filter: FilterBuilderItem) => string = defaultUniquenessKey
-	): FilterBuilderItem[] {
-		const combinedFilters = filterArrays.flat();
-		const uniqueFilters: FilterBuilderItem[] = [];
-		const seen = new Set<string>();
-
-		combinedFilters.forEach((filter) => {
-			const key = uniquenessKey(filter);
-
-			if (!seen.has(key)) {
-				seen.add(key);
-				uniqueFilters.push(filter);
-			}
-		});
-
-		return uniqueFilters;
-	}
-
-	// Default uniqueness key function
-	function defaultUniquenessKey(filter: FilterBuilderItem): string {
-		return `${filter.column}-${filter.operator}-${String(filter.value).toLowerCase()}-${filter.logicalOperator || 'AND'}`;
-	}
-</script>
-
-<script lang="ts">
-	import { browser } from '$app/environment';
-
-	import {
-		Button,
-		Datepicker,
-		Input,
-		Label,
-		Select,
-		type FilterBuilderColumnConfig,
-		type FilterBuilderItem,
-		type FilterBuilderProps
-	} from '../../index.js';
-	import { nanoid } from 'nanoid';
-	import { onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
-
-	let { columns = [], filters = $bindable([]), onRunQuery }: FilterBuilderProps = $props();
-
-	// Operator mappings for each type
-	const operatorsByType = {
-		string: [
-			{ value: 'contains', label: 'contains', sqlOp: 'ILIKE' },
-			{ value: '=', label: 'equals', sqlOp: '=' },
-			{ value: '!=', label: 'does not equal', sqlOp: '!=' },
-			{ value: 'starts_with', label: 'starts with', sqlOp: 'ILIKE' }
-		],
-		number: [
-			{ value: '=', label: 'equals', sqlOp: '=' },
-			{ value: '>', label: 'is greater than', sqlOp: '>' },
-			{ value: '<', label: 'is less than', sqlOp: '<' },
-			{ value: '>=', label: 'is at least', sqlOp: '>=' },
-			{ value: '<=', label: 'is at most', sqlOp: '<=' },
-			{ value: '!=', label: 'does not equal', sqlOp: '!=' }
-		],
-		date: [
-			{ value: '=', label: 'is on', sqlOp: '=' },
-			{ value: '>', label: 'is after', sqlOp: '>' },
-			{ value: '<', label: 'is before', sqlOp: '<' },
-			{ value: '>=', label: 'is on or after', sqlOp: '>=' },
-			{ value: '<=', label: 'is on or before', sqlOp: '<=' },
-			{ value: '!=', label: 'is not on', sqlOp: '!=' }
-		],
-		boolean: [
-			{ value: '=', label: 'is', sqlOp: '=' },
-			{ value: '!=', label: 'is not', sqlOp: '!=' }
-		]
-	};
-
-	let activeTab = $state('SQL');
-	let completedFilters = $state<FilterBuilderItem[]>([]);
-
-	function addFilter() {
-		const newFilter: FilterBuilderItem = {
-			id: nanoid(),
-			column: columns[0]?.name || '',
-			operator: operatorsByType[columns[0]?.type || 'string'][0].value,
-			value: getDefaultValue(columns[0]?.type || 'string'),
-			logicalOperator: completedFilters.length > 0 ? 'AND' : undefined
-			// label: getColumnLabel(columns[0]?.name || '')
-		};
-
-		filters = [...filters, newFilter];
-	}
-
-	function clearAllFilters() {
-		filters = [];
-		completedFilters = [];
-	}
-
-	function getColumnType(columnName: string): FilterBuilderColumnConfig['type'] {
-		return columns.find((col) => col.name === columnName)?.type || 'string';
-	}
-
-	function getColumnLabel(columnName: string): string {
-		return columns.find((col) => col.name === columnName)?.label || columnName;
-	}
-
-	function updateFilter(filterId: string, field: keyof FilterBuilderItem, value: any) {
-		const filterIndex = filters.findIndex((f) => f.id === filterId);
-		if (filterIndex === -1) return;
-
-		const updatedFilter = { ...filters[filterIndex], [field]: value };
-
-		// Reset operator and value when column changes
-		if (field === 'column') {
-			const columnType = getColumnType(value);
-			updatedFilter.operator = operatorsByType[columnType][0].value;
-			updatedFilter.value = getDefaultValue(columnType);
-		}
-
-		filters[filterIndex] = updatedFilter;
-		filters = [...filters];
-	}
-
-	function completeFilter(filterId: string) {
-		const filter = filters.find((f) => f.id === filterId);
-		if (filter && isFilterValid(filter) && !completedFilters.some((f) => f.id === filterId)) {
-			completedFilters = [...completedFilters, filter];
-		}
-
-		// console.log('Completed Filters:', completedFilters);
-
-		removeFilter(filterId);
-	}
-
-	function removeFilter(filterId: string) {
-		const filterIndex = filters.findIndex((f) => f.id === filterId);
-		if (filterIndex === -1) return;
-
-		// If removing the first filter and there's a second one, remove the logical operator from the second
-		if (filterIndex === 0 && filters.length > 1) {
-			filters[1].logicalOperator = undefined;
-		}
-
-		filters = filters.filter((f) => f.id !== filterId);
-	}
-
-	function removeCompleteFilter(filterId: string) {
-		completedFilters = completedFilters.filter((f) => f.id !== filterId);
-	}
-
-	function toggleLogicalOperator(filterId: string) {
-		const filter = filters.find((f) => f.id === filterId);
-		if (filter && filter.logicalOperator) {
-			filter.logicalOperator = filter.logicalOperator === 'AND' ? 'OR' : 'AND';
-			filters = [...filters];
-		}
-	}
-
-	function generateSQLQuery(): string {
-		const uniqueFilters = getUniqueFilters(filters, completedFilters);
-		const validFilterList = uniqueFilters.filter(isFilterValid);
-
-		if (validFilterList.length === 0) return '';
-
-		const conditions = validFilterList.map((filter, index) => {
-			let value = filter.value;
-			const columnType = getColumnType(filter.column);
-			const operatorConfig = operatorsByType[columnType].find((op) => op.value === filter.operator);
-			const sqlOperator = operatorConfig?.sqlOp || filter.operator;
-
-			// Handle string values based on operator type
-			if (typeof value === 'string') {
-				if (filter.operator === 'contains') {
-					value = `'%${value}%'`;
-				} else if (filter.operator === 'starts_with') {
-					value = `'${value}%'`;
-				} else {
-					value = `'${value}'`;
-				}
-			}
-
-			const condition = `${filter.column} ${sqlOperator} ${value}`;
-
-			if (index === 0) {
-				return condition;
-			}
-
-			return `${filter.logicalOperator} ${condition}`;
-		});
-
-		return `WHERE ${conditions.join(' ')}`;
-	}
-
-	function generateJSONQuery(): any[] {
-		const uniqueFilters = getUniqueFilters(filters, completedFilters);
-		return uniqueFilters.filter(isFilterValid).map((filter) => ({
-			column: filter.column,
-			operator: filter.operator,
-			value: filter.value,
-			...(filter.logicalOperator && { logicalOperator: filter.logicalOperator })
-		}));
-	}
-
-	function getLogicalOperatorCounts() {
-		const counts = { OR: 0, AND: 0 };
-		const uniqueFilters = getUniqueFilters(filters, completedFilters);
-
-		uniqueFilters.forEach((filter) => {
-			if (filter.logicalOperator) {
-				counts[filter.logicalOperator]++;
-			}
-		});
-		return counts;
-	}
-
-	function getColumnTypeCounts() {
-		const uniqueFilters = getUniqueFilters(filters, completedFilters);
-
-		const usedTypes = new Set(
-			uniqueFilters.filter(isFilterValid).map((filter) => getColumnType(filter.column))
-		);
-		return usedTypes.size;
-	}
-
-	function loadValidFilters() {
-		const uniqueFilters = getUniqueFilters(filters, completedFilters);
-		const validFilterList = uniqueFilters.filter(isFilterValid);
-
-		return validFilterList;
-	}
-
-	function buildDecisionTree() {
-		if (completedFilters.length === 0) return null;
-
-		const tree = {
-			type: 'root',
-			children: []
-		};
-
-		let currentNode = tree;
-
-		completedFilters.forEach((filter, index) => {
-			const filterNode = {
-				type: 'condition',
-				filter: filter,
-				children: []
-			};
-
-			if (index === 0) {
-				currentNode.children.push(filterNode);
-			} else {
-				const operatorNode = {
-					type: 'operator',
-					operator: filter.logicalOperator,
-					children: [filterNode]
-				};
-				currentNode.children.push(operatorNode);
-			}
-		});
-
-		return tree;
-	}
-
-	function renderDecisionNode(node, level = 0) {
-		if (!node) return '';
-
-		const indent = level * 40;
-
-		if (node.type === 'condition') {
-			return `
-
-      <div class="relative flex items-center">
-        <div class="relative">
-            <div class="flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-lg text-sm gap-0.5 w-fit h-fit">
-                ${node.filter.column}<div class="w-2 h-2 bg-red-500 rounded-full"></div>${node.filter.operator}<div class="w-2 h-2 bg-red-500 rounded-full"></div>${node.filter.value}
-            </div>
-            <div class="absolute right-1 top-1">
-              <button onclick="removeCompleteFilter('${node.filter.id}')"  class="p-1 text-gray-400 hover:text-red-500">
-                <iconify-icon class="absolute -top-2 -right-2 text-gray-400 hover:text-red-500" icon="ic:round-close"></iconify-icon>
-              </button>
-            </div>
-        </div>
-        <div class="w-5 h-0.5 bg-gray-300"></div>
-      </div>
-        `;
-		} else if (node.type === 'operator') {
-			const operatorColor =
-				node.operator === 'AND' ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800';
-			return `
-            <div class="flex flex-wrap items-center h-fit">
-                <div class="flex items-center justify-center ${operatorColor} px-2 py-1 rounded text-xs font-semibold mb-2 w-fit">
-                    ${node.operator}
-                </div>
-                <div class="w-5 h-0.5 bg-gray-300"></div>
-                ${node.children.map((child) => renderDecisionNode(child, level + 1)).join('')}
-            </div>
-        `;
-		} else {
-			return node.children.map((child) => renderDecisionNode(child, level)).join('');
-		}
-	}
-
-	// Generate SQL WHERE clause
-	let sqlQuery = $derived(generateSQLQuery());
-	let jsonQuery = $derived(generateJSONQuery());
-	let validFilters = $derived(loadValidFilters());
-	let logicalOperatorCounts = $derived(getLogicalOperatorCounts());
-	let columnTypeCounts = $derived(getColumnTypeCounts());
-	let decisionTree = $derived(buildDecisionTree());
-
-	onMount(() => {
-		if (browser) {
-			(window as any).removeCompleteFilter = removeCompleteFilter;
-		}
-	});
-</script>
-
-<div class="flex h-screen bg-gray-50">
-	<!-- Left Panel - Filter Builder -->
-	<div class="flex w-3/5 flex-col border-r border-gray-200 bg-white">
-		<!-- Header -->
-		<div class="border-b border-gray-200 p-6">
-			<h2 class="mb-2 text-lg font-semibold text-gray-900">Build Filters</h2>
-			<p class="text-sm text-gray-600">Add conditions to filter your data</p>
-		</div>
-
-		<!-- Filter Controls -->
-		<div class="flex-1 overflow-y-auto p-6">
-			<div class="mb-6 flex items-center justify-between">
-				<Button onclick={addFilter}>
-					{#snippet leadingIcon()}
-						<iconify-icon class="me-1.5" style="font-size: 20px;" icon="ei:plus"></iconify-icon>
-					{/snippet}
-					Add Filter
-				</Button>
-
-				<Button color="alternative" onclick={clearAllFilters}>
-					{#snippet leadingIcon()}
-						<iconify-icon class="me-1.5" icon="mi:delete"></iconify-icon>
-					{/snippet}
-					Clear All
-				</Button>
-			</div>
-
-			<!-- Filters List -->
-			<div class="space-y-4">
-				{#each filters as filter, index}
-					<div class="relative rounded-lg bg-gray-50 p-4">
-						<!-- Logical Operator (for filters after the first) -->
-						{#if completedFilters.length > 0}
-							<div class="mt-4 mb-2 flex justify-center">
-								<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white">
-									<button
-										onclick={() => toggleLogicalOperator(filter.id)}
-										class="px-4 py-1 text-sm font-medium transition-colors {filter?.logicalOperator ===
-										'AND'
-											? 'bg-blue-600 text-white'
-											: 'text-gray-600 hover:bg-gray-50'}"
-									>
-										AND
-									</button>
-									<button
-										onclick={() => toggleLogicalOperator(filter.id)}
-										class="px-4 py-1 text-sm font-medium transition-colors {filter?.logicalOperator ===
-										'OR'
-											? 'bg-orange-500 text-white'
-											: 'text-gray-600 hover:bg-gray-50'}"
-									>
-										OR
-									</button>
-								</div>
-							</div>
-						{/if}
-
-						<!-- Column, Operator, Value Row -->
-						<div class="mb-3 grid grid-cols-3 gap-3">
-							<div>
-								<Label class="mb-2 block text-xs font-medium text-gray-700">Column</Label>
-
-								<Select
-									clearable={false}
-									minHeight={40}
-									options={columns}
-									onChange={(e) => {
-										updateFilter(filter.id, 'column', e.name);
-									}}
-								/>
-							</div>
-
-							<div>
-								<Label class="mb-2 block text-xs font-medium text-gray-700">Operator</Label>
-
-								<Select
-									clearable={false}
-									minHeight={40}
-									onChange={(e) => {
-										updateFilter(filter.id, 'operator', e.value);
-									}}
-									options={operatorsByType[getColumnType(filter.column)]}
-								/>
-							</div>
-
-							<div>
-								<Label class="mb-2 block text-xs font-medium text-gray-700">Value</Label>
-
-								{#if getColumnType(filter.column) === 'string'}
-									<Input
-										type="text"
-										oninput={(e) => {
-											updateFilter(filter.id, 'value', e.target.value);
-										}}
-									/>
-								{:else if getColumnType(filter.column) === 'number'}
-									<Input
-										type="number"
-										oninput={(e) =>
-											updateFilter(filter.id, 'value', parseFloat(e.target.value) || 0)}
-									/>
-								{:else if getColumnType(filter.column) === 'date'}
-									<Datepicker
-										onselect={(e) => {
-											updateFilter(filter.id, 'value', e?.toLocaleString());
-										}}
-									/>
-								{:else if getColumnType(filter.column) === 'boolean'}
-									<Select
-										clearable={false}
-										minHeight={40}
-										onChange={(e) => updateFilter(filter.id, 'value', e.value)}
-										options={[
-											{ value: true, label: 'True' },
-											{ value: false, label: 'False' }
-										]}
-									/>
-								{/if}
-							</div>
-						</div>
-
-						<!-- Filter Validation -->
-						{#if isFilterValid(filter)}
-							<div transition:fade class="flex justify-between">
-								<div class="flex items-center text-xs text-green-600">
-									<svg class="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
-										<path
-											fill-rule="evenodd"
-											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-											clip-rule="evenodd"
-										></path>
-									</svg>
-									Filter is valid
-								</div>
-								<Button color="green" size="xs" onclick={() => completeFilter(filter.id)}
-									>Done</Button
-								>
-							</div>
-						{/if}
-
-						<!-- Remove Button -->
-						<button
-							aria-label="removeFilter"
-							onclick={() => removeFilter(filter.id)}
-							class="absolute top-2 right-2 p-1 text-gray-400 transition-colors hover:text-red-500"
-						>
-							<iconify-icon icon="ic:round-close"></iconify-icon>
-						</button>
-					</div>
-				{/each}
-			</div>
-			{#if decisionTree}
-				<div class="space-y-4">
-					<div class="rounded-lg bg-green-50 p-4">
-						<div class="rounded-lg border bg-white p-4">
-							{#if decisionTree}
-								<div class="flex flex-wrap space-y-3">
-									{@html renderDecisionNode(decisionTree)}
-								</div>
-							{:else}
-								<div class="flex h-32 items-center justify-center text-gray-500">
-									<p class="text-sm">No decision tree to display</p>
-								</div>
-							{/if}
-						</div>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-
-	<!-- Right Panel - Generated Query -->
-	<div class="flex w-2/5 flex-col bg-white">
-		<!-- Header -->
-		<div class="flex justify-between border-b border-gray-200 p-6">
-			<div class="flex flex-col">
-				<div class="mb-2 flex items-center justify-between">
-					<div class="flex items-center gap-2">
-						<h2 class="text-lg font-semibold text-gray-900">Generated Query</h2>
-						<div class="flex items-center text-sm text-gray-600">
-							<span
-								class="mr-2 inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800"
-							>
-								{validFilters.length} active filters
-							</span>
-						</div>
-					</div>
-				</div>
-				<p class="text-sm text-gray-600">Live preview of your filter conditions</p>
-			</div>
-			<div class="flex items-center">
-				<Button
-					color="blue"
-					onclick={() => onRunQuery({ jsonBuild: jsonQuery, sqlBuild: sqlQuery })}>Run Query</Button
-				>
-			</div>
-		</div>
-
-		<!-- Tabs -->
-		<div class="border-b border-gray-200">
-			<div class="flex">
-				<button
-					onclick={() => (activeTab = 'SQL')}
-					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'SQL'
-						? 'border-blue-500 text-blue-600'
-						: 'border-transparent text-gray-600 hover:text-gray-800'}"
-				>
-					SQL
-				</button>
-				<button
-					onclick={() => (activeTab = 'JSON')}
-					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'JSON'
-						? 'border-blue-500 text-blue-600'
-						: 'border-transparent text-gray-600 hover:text-gray-800'}"
-				>
-					JSON
-				</button>
-			</div>
-		</div>
-
-		<!-- Query Content -->
-		<div class="flex-1 overflow-y-auto p-6">
-			{#if validFilters.length === 0}
-				<div class="flex h-32 items-center justify-center text-gray-500">
-					<div class="text-center">
-						<svg
-							class="mx-auto mb-2 h-8 w-8 opacity-50"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
-							></path>
-						</svg>
-						<p class="text-sm">No active filters</p>
-					</div>
-				</div>
-			{:else if activeTab === 'SQL'}
-				<div class="space-y-4">
-					<div class="rounded-lg bg-gray-50 p-4">
-						<h3 class="mb-2 text-sm font-medium text-gray-900">SQL WHERE Clause</h3>
-						<div class="rounded border bg-white p-3 font-mono text-sm">
-							<span class="text-blue-600">WHERE</span>
-							{sqlQuery.replace('WHERE ', '')}
-						</div>
-					</div>
-				</div>
-			{:else}
-				<div class="space-y-4">
-					<div class="rounded-lg bg-gray-50 p-4">
-						<h3 class="mb-2 text-sm font-medium text-gray-900">Filter Objects</h3>
-						<pre
-							class="overflow-x-auto rounded border bg-white p-3 text-xs text-gray-800">{JSON.stringify(
-								jsonQuery,
-								null,
-								2
-							)}</pre>
-					</div>
-				</div>
-			{/if}
-
-			<!-- Statistics -->
-			<div class="mt-6 grid grid-cols-2 gap-4">
-				<div class="rounded-lg bg-blue-50 p-4">
-					<h4 class="mb-2 text-sm font-medium text-blue-900">Logical Operators</h4>
-					<div class="space-y-1">
-						<div class="text-xl font-bold text-blue-600">{logicalOperatorCounts.OR}</div>
-						<div class="text-xs text-blue-800">{logicalOperatorCounts.OR} OR</div>
-						<div class="text-xs text-blue-800">{logicalOperatorCounts.AND} AND</div>
-					</div>
-				</div>
-
-				<div class="rounded-lg bg-green-50 p-4">
-					<h4 class="mb-2 text-sm font-medium text-green-900">Column Types</h4>
-					<div class="space-y-1">
-						<div class="text-xl font-bold text-green-600">{columnTypeCounts}</div>
-						<div class="text-xs text-green-800">types used</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+<script lang="ts" module>
+	function getDefaultValue(type: FilterBuilderColumnConfig['type']): any {
+		switch (type) {
+			case 'string':
+				return '';
+			case 'number':
+				return null;
+			case 'date':
+				return '';
+			case 'boolean':
+				return true;
+			default:
+				return '';
+		}
+	}
+
+	function isFilterValid(filter: FilterBuilderItem): boolean {
+		return !!(filter.column && filter.operator && filter.value !== null && filter.value !== '');
+	}
+
+	function getUniqueFilters(...filterArrays: FilterBuilderItem[][]): FilterBuilderItem[] {
+		const combinedFilters = filterArrays.flat();
+		const uniqueFilters: FilterBuilderItem[] = [];
+		const seen = new Set<string>();
+
+		combinedFilters.forEach((filter) => {
+			// Create a unique identifier based on all filter properties
+			const identifier = `${filter.column}-${filter.operator}-${String(filter.value).toLowerCase()}-${filter.logicalOperator || 'AND'}`;
+
+			if (!seen.has(identifier)) {
+				seen.add(identifier);
+				uniqueFilters.push(filter);
+			}
+		});
+
+		return uniqueFilters;
+	}
+
+	// Alternative version with configurable uniqueness criteria
+	function getUniqueFiltersAdvanced(
+		filterArrays: FilterBuilderItem[][],
+		uniquenessKey: (filter: FilterBuilderItem) => string = defaultUniquenessKey
+	): FilterBuilderItem[] {
+		const combinedFilters = filterArrays.flat();
+		const uniqueFilters: FilterBuilderItem[] = [];
+		const seen = new Set<string>();
+
+		combinedFilters.forEach((filter) => {
+			const key = uniquenessKey(filter);
+
+			if (!seen.has(key)) {
+				seen.add(key);
+				uniqueFilters.push(filter);
+			}
+		});
+
+		return uniqueFilters;
+	}
+
+	// Default uniqueness key function
+	function defaultUniquenessKey(filter: FilterBuilderItem): string {
+		return `${filter.column}-${filter.operator}-${String(filter.value).toLowerCase()}-${filter.logicalOperator || 'AND'}`;
+	}
+</script>
+
+<script lang="ts">
+	import { browser } from '$app/environment';
+
+	import {
+		Button,
+		Datepicker,
+		Input,
+		Label,
+		Select,
+		type FilterBuilderColumnConfig,
+		type FilterBuilderItem,
+		type FilterBuilderProps
+	} from '../../index.js';
+	import { nanoid } from 'nanoid';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	let { columns = [], filters = $bindable([]), onRunQuery }: FilterBuilderProps = $props();
+
+	// Operator mappings for each type
+	const operatorsByType = {
+		string: [
+			{ value: 'contains', label: 'contains', sqlOp: 'ILIKE' },
+			{ value: '=', label: 'equals', sqlOp: '=' },
+			{ value: '!=', label: 'does not equal', sqlOp: '!=' },
+			{ value: 'starts_with', label: 'starts with', sqlOp: 'ILIKE' }
+		],
+		number: [
+			{ value: '=', label: 'equals', sqlOp: '=' },
+			{ value: '>', label: 'is greater than', sqlOp: '>' },
+			{ value: '<', label: 'is less than', sqlOp: '<' },
+			{ value: '>=', label: 'is at least', sqlOp: '>=' },
+			{ value: '<=', label: 'is at most', sqlOp: '<=' },
+			{ value: '!=', label: 'does not equal', sqlOp: '!=' }
+		],
+		date: [
+			{ value: '=', label: 'is on', sqlOp: '=' },
+			{ value: '>', label: 'is after', sqlOp: '>' },
+			{ value: '<', label: 'is before', sqlOp: '<' },
+			{ value: '>=', label: 'is on or after', sqlOp: '>=' },
+			{ value: '<=', label: 'is on or before', sqlOp: '<=' },
+			{ value: '!=', label: 'is not on', sqlOp: '!=' }
+		],
+		boolean: [
+			{ value: '=', label: 'is', sqlOp: '=' },
+			{ value: '!=', label: 'is not', sqlOp: '!=' }
+		]
+	};
+
+	let activeTab = $state('SQL');
+	let completedFilters = $state<FilterBuilderItem[]>([]);
+
+	function addFilter() {
+		const newFilter: FilterBuilderItem = {
+			id: nanoid(),
+			column: columns[0]?.name || '',
+			operator: operatorsByType[columns[0]?.type || 'string'][0].value,
+			value: getDefaultValue(columns[0]?.type || 'string'),
+			logicalOperator: completedFilters.length > 0 ? 'AND' : undefined
+			// label: getColumnLabel(columns[0]?.name || '')
+		};
+
+		filters = [...filters, newFilter];
+	}
+
+	function clearAllFilters() {
+		filters = [];
+		completedFilters = [];
+	}
+
+	function getColumnType(columnName: string): FilterBuilderColumnConfig['type'] {
+		return columns.find((col) => col.name === columnName)?.type || 'string';
+	}
+
+	function getColumnLabel(columnName: string): string {
+		return columns.find((col) => col.name === columnName)?.label || columnName;
+	}
+
+	function updateFilter(filterId: string, field: keyof FilterBuilderItem, value: any) {
+		const filterIndex = filters.findIndex((f) => f.id === filterId);
+		if (filterIndex === -1) return;
+
+		const updatedFilter = { ...filters[filterIndex], [field]: value };
+
+		// Reset operator and value when column changes
+		if (field === 'column') {
+			const columnType = getColumnType(value);
+			updatedFilter.operator = operatorsByType[columnType][0].value;
+			updatedFilter.value = getDefaultValue(columnType);
+		}
+
+		filters[filterIndex] = updatedFilter;
+		filters = [...filters];
+	}
+
+	function completeFilter(filterId: string) {
+		const filter = filters.find((f) => f.id === filterId);
+		if (filter && isFilterValid(filter) && !completedFilters.some((f) => f.id === filterId)) {
+			completedFilters = [...completedFilters, filter];
+		}
+
+		// console.log('Completed Filters:', completedFilters);
+
+		removeFilter(filterId);
+	}
+
+	function removeFilter(filterId: string) {
+		const filterIndex = filters.findIndex((f) => f.id === filterId);
+		if (filterIndex === -1) return;
+
+		// If removing the first filter and there's a second one, remove the logical operator from the second
+		if (filterIndex === 0 && filters.length > 1) {
+			filters[1].logicalOperator = undefined;
+		}
+
+		filters = filters.filter((f) => f.id !== filterId);
+	}
+
+	function removeCompleteFilter(filterId: string) {
+		completedFilters = completedFilters.filter((f) => f.id !== filterId);
+	}
+
+	function toggleLogicalOperator(filterId: string) {
+		const filter = filters.find((f) => f.id === filterId);
+		if (filter && filter.logicalOperator) {
+			filter.logicalOperator = filter.logicalOperator === 'AND' ? 'OR' : 'AND';
+			filters = [...filters];
+		}
+	}
+
+	function generateSQLQuery(): string {
+		const uniqueFilters = getUniqueFilters(filters, completedFilters);
+		const validFilterList = uniqueFilters.filter(isFilterValid);
+
+		if (validFilterList.length === 0) return '';
+
+		const conditions = validFilterList.map((filter, index) => {
+			let value = filter.value;
+			const columnType = getColumnType(filter.column);
+			const operatorConfig = operatorsByType[columnType].find((op) => op.value === filter.operator);
+			const sqlOperator = operatorConfig?.sqlOp || filter.operator;
+
+			// Handle string values based on operator type
+			if (typeof value === 'string') {
+				if (filter.operator === 'contains') {
+					value = `'%${value}%'`;
+				} else if (filter.operator === 'starts_with') {
+					value = `'${value}%'`;
+				} else {
+					value = `'${value}'`;
+				}
+			}
+
+			const condition = `${filter.column} ${sqlOperator} ${value}`;
+
+			if (index === 0) {
+				return condition;
+			}
+
+			return `${filter.logicalOperator} ${condition}`;
+		});
+
+		return `WHERE ${conditions.join(' ')}`;
+	}
+
+	function generateJSONQuery(): any[] {
+		const uniqueFilters = getUniqueFilters(filters, completedFilters);
+		return uniqueFilters.filter(isFilterValid).map((filter) => ({
+			column: filter.column,
+			operator: filter.operator,
+			value: filter.value,
+			...(filter.logicalOperator && { logicalOperator: filter.logicalOperator })
+		}));
+	}
+
+	function getLogicalOperatorCounts() {
+		const counts = { OR: 0, AND: 0 };
+		const uniqueFilters = getUniqueFilters(filters, completedFilters);
+
+		uniqueFilters.forEach((filter) => {
+			if (filter.logicalOperator) {
+				counts[filter.logicalOperator]++;
+			}
+		});
+		return counts;
+	}
+
+	function getColumnTypeCounts() {
+		const uniqueFilters = getUniqueFilters(filters, completedFilters);
+
+		const usedTypes = new Set(
+			uniqueFilters.filter(isFilterValid).map((filter) => getColumnType(filter.column))
+		);
+		return usedTypes.size;
+	}
+
+	function loadValidFilters() {
+		const uniqueFilters = getUniqueFilters(filters, completedFilters);
+		const validFilterList = uniqueFilters.filter(isFilterValid);
+
+		return validFilterList;
+	}
+
+	function buildDecisionTree() {
+		if (completedFilters.length === 0) return null;
+
+		const tree = {
+			type: 'root',
+			children: []
+		};
+
+		let currentNode = tree;
+
+		completedFilters.forEach((filter, index) => {
+			const filterNode = {
+				type: 'condition',
+				filter: filter,
+				children: []
+			};
+
+			if (index === 0) {
+				currentNode.children.push(filterNode);
+			} else {
+				const operatorNode = {
+					type: 'operator',
+					operator: filter.logicalOperator,
+					children: [filterNode]
+				};
+				currentNode.children.push(operatorNode);
+			}
+		});
+
+		return tree;
+	}
+
+	function renderDecisionNode(node, level = 0) {
+		if (!node) return '';
+
+		const indent = level * 40;
+
+		if (node.type === 'condition') {
+			return `
+
+      <div class="relative flex items-center">
+        <div class="relative">
+            <div class="flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-lg text-sm gap-0.5 w-fit h-fit">
+                ${node.filter.column}<div class="w-2 h-2 bg-red-500 rounded-full"></div>${node.filter.operator}<div class="w-2 h-2 bg-red-500 rounded-full"></div>${node.filter.value}
+            </div>
+            <div class="absolute right-1 top-1">
+              <button onclick="removeCompleteFilter('${node.filter.id}')"  class="p-1 text-gray-400 hover:text-red-500">
+                <iconify-icon class="absolute -top-2 -right-2 text-gray-400 hover:text-red-500" icon="ic:round-close"></iconify-icon>
+              </button>
+            </div>
+        </div>
+        <div class="w-5 h-0.5 bg-gray-300"></div>
+      </div>
+        `;
+		} else if (node.type === 'operator') {
+			const operatorColor =
+				node.operator === 'AND' ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800';
+			return `
+            <div class="flex flex-wrap items-center h-fit">
+                <div class="flex items-center justify-center ${operatorColor} px-2 py-1 rounded text-xs font-semibold mb-2 w-fit">
+                    ${node.operator}
+                </div>
+                <div class="w-5 h-0.5 bg-gray-300"></div>
+                ${node.children.map((child) => renderDecisionNode(child, level + 1)).join('')}
+            </div>
+        `;
+		} else {
+			return node.children.map((child) => renderDecisionNode(child, level)).join('');
+		}
+	}
+
+	// Generate SQL WHERE clause
+	let sqlQuery = $derived(generateSQLQuery());
+	let jsonQuery = $derived(generateJSONQuery());
+	let validFilters = $derived(loadValidFilters());
+	let logicalOperatorCounts = $derived(getLogicalOperatorCounts());
+	let columnTypeCounts = $derived(getColumnTypeCounts());
+	let decisionTree = $derived(buildDecisionTree());
+
+	onMount(() => {
+		if (browser) {
+			(window as any).removeCompleteFilter = removeCompleteFilter;
+		}
+	});
+</script>
+
+<div class="flex h-screen bg-gray-50">
+	<!-- Left Panel - Filter Builder -->
+	<div class="flex w-3/5 flex-col border-r border-gray-200 bg-white">
+		<!-- Header -->
+		<div class="border-b border-gray-200 p-6">
+			<h2 class="mb-2 text-lg font-semibold text-gray-900">Build Filters</h2>
+			<p class="text-sm text-gray-600">Add conditions to filter your data</p>
+		</div>
+
+		<!-- Filter Controls -->
+		<div class="flex-1 overflow-y-auto p-6">
+			<div class="mb-6 flex items-center justify-between">
+				<Button onclick={addFilter}>
+					{#snippet leadingIcon()}
+						<iconify-icon class="me-1.5" style="font-size: 20px;" icon="ei:plus"></iconify-icon>
+					{/snippet}
+					Add Filter
+				</Button>
+
+				<Button color="alternative" onclick={clearAllFilters}>
+					{#snippet leadingIcon()}
+						<iconify-icon class="me-1.5" icon="mi:delete"></iconify-icon>
+					{/snippet}
+					Clear All
+				</Button>
+			</div>
+
+			<!-- Filters List -->
+			<div class="space-y-4">
+				{#each filters as filter, index}
+					<div class="relative rounded-lg bg-gray-50 p-4">
+						<!-- Logical Operator (for filters after the first) -->
+						{#if completedFilters.length > 0}
+							<div class="mt-4 mb-2 flex justify-center">
+								<div class="flex overflow-hidden rounded-md border border-gray-300 bg-white">
+									<button
+										onclick={() => toggleLogicalOperator(filter.id)}
+										class="px-4 py-1 text-sm font-medium transition-colors {filter?.logicalOperator ===
+										'AND'
+											? 'bg-blue-600 text-white'
+											: 'text-gray-600 hover:bg-gray-50'}"
+									>
+										AND
+									</button>
+									<button
+										onclick={() => toggleLogicalOperator(filter.id)}
+										class="px-4 py-1 text-sm font-medium transition-colors {filter?.logicalOperator ===
+										'OR'
+											? 'bg-orange-500 text-white'
+											: 'text-gray-600 hover:bg-gray-50'}"
+									>
+										OR
+									</button>
+								</div>
+							</div>
+						{/if}
+
+						<!-- Column, Operator, Value Row -->
+						<div class="mb-3 grid grid-cols-3 gap-3">
+							<div>
+								<Label class="mb-2 block text-xs font-medium text-gray-700">Column</Label>
+
+								<Select
+									clearable={false}
+									minHeight={40}
+									options={columns}
+									onChange={(e) => {
+										updateFilter(filter.id, 'column', e.name);
+									}}
+								/>
+							</div>
+
+							<div>
+								<Label class="mb-2 block text-xs font-medium text-gray-700">Operator</Label>
+
+								<Select
+									clearable={false}
+									minHeight={40}
+									onChange={(e) => {
+										updateFilter(filter.id, 'operator', e.value);
+									}}
+									options={operatorsByType[getColumnType(filter.column)]}
+								/>
+							</div>
+
+							<div>
+								<Label class="mb-2 block text-xs font-medium text-gray-700">Value</Label>
+
+								{#if getColumnType(filter.column) === 'string'}
+									<Input
+										type="text"
+										oninput={(e) => {
+											updateFilter(filter.id, 'value', e.target.value);
+										}}
+									/>
+								{:else if getColumnType(filter.column) === 'number'}
+									<Input
+										type="number"
+										oninput={(e) =>
+											updateFilter(filter.id, 'value', parseFloat(e.target.value) || 0)}
+									/>
+								{:else if getColumnType(filter.column) === 'date'}
+									<Datepicker
+										onselect={(e) => {
+											updateFilter(filter.id, 'value', e?.toLocaleString());
+										}}
+									/>
+								{:else if getColumnType(filter.column) === 'boolean'}
+									<Select
+										clearable={false}
+										minHeight={40}
+										onChange={(e) => updateFilter(filter.id, 'value', e.value)}
+										options={[
+											{ value: true, label: 'True' },
+											{ value: false, label: 'False' }
+										]}
+									/>
+								{/if}
+							</div>
+						</div>
+
+						<!-- Filter Validation -->
+						{#if isFilterValid(filter)}
+							<div transition:fade class="flex justify-between">
+								<div class="flex items-center text-xs text-green-600">
+									<svg class="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
+										<path
+											fill-rule="evenodd"
+											d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+											clip-rule="evenodd"
+										></path>
+									</svg>
+									Filter is valid
+								</div>
+								<Button color="green" size="xs" onclick={() => completeFilter(filter.id)}
+									>Done</Button
+								>
+							</div>
+						{/if}
+
+						<!-- Remove Button -->
+						<button
+							aria-label="removeFilter"
+							onclick={() => removeFilter(filter.id)}
+							class="absolute top-2 right-2 p-1 text-gray-400 transition-colors hover:text-red-500"
+						>
+							<iconify-icon icon="ic:round-close"></iconify-icon>
+						</button>
+					</div>
+				{/each}
+			</div>
+			{#if decisionTree}
+				<div class="space-y-4">
+					<div class="rounded-lg bg-green-50 p-4">
+						<div class="rounded-lg border bg-white p-4">
+							{#if decisionTree}
+								<div class="flex flex-wrap space-y-3">
+									{@html renderDecisionNode(decisionTree)}
+								</div>
+							{:else}
+								<div class="flex h-32 items-center justify-center text-gray-500">
+									<p class="text-sm">No decision tree to display</p>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Right Panel - Generated Query -->
+	<div class="flex w-2/5 flex-col bg-white">
+		<!-- Header -->
+		<div class="flex justify-between border-b border-gray-200 p-6">
+			<div class="flex flex-col">
+				<div class="mb-2 flex items-center justify-between">
+					<div class="flex items-center gap-2">
+						<h2 class="text-lg font-semibold text-gray-900">Generated Query</h2>
+						<div class="flex items-center text-sm text-gray-600">
+							<span
+								class="mr-2 inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800"
+							>
+								{validFilters.length} active filters
+							</span>
+						</div>
+					</div>
+				</div>
+				<p class="text-sm text-gray-600">Live preview of your filter conditions</p>
+			</div>
+			<div class="flex items-center">
+				<Button
+					color="blue"
+					onclick={() => onRunQuery({ jsonBuild: jsonQuery, sqlBuild: sqlQuery })}>Run Query</Button
+				>
+			</div>
+		</div>
+
+		<!-- Tabs -->
+		<div class="border-b border-gray-200">
+			<div class="flex">
+				<button
+					onclick={() => (activeTab = 'SQL')}
+					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'SQL'
+						? 'border-blue-500 text-blue-600'
+						: 'border-transparent text-gray-600 hover:text-gray-800'}"
+				>
+					SQL
+				</button>
+				<button
+					onclick={() => (activeTab = 'JSON')}
+					class="border-b-2 px-4 py-2 text-sm font-medium transition-colors {activeTab === 'JSON'
+						? 'border-blue-500 text-blue-600'
+						: 'border-transparent text-gray-600 hover:text-gray-800'}"
+				>
+					JSON
+				</button>
+			</div>
+		</div>
+
+		<!-- Query Content -->
+		<div class="flex-1 overflow-y-auto p-6">
+			{#if validFilters.length === 0}
+				<div class="flex h-32 items-center justify-center text-gray-500">
+					<div class="text-center">
+						<svg
+							class="mx-auto mb-2 h-8 w-8 opacity-50"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+							></path>
+						</svg>
+						<p class="text-sm">No active filters</p>
+					</div>
+				</div>
+			{:else if activeTab === 'SQL'}
+				<div class="space-y-4">
+					<div class="rounded-lg bg-gray-50 p-4">
+						<h3 class="mb-2 text-sm font-medium text-gray-900">SQL WHERE Clause</h3>
+						<div class="rounded border bg-white p-3 font-mono text-sm">
+							<span class="text-blue-600">WHERE</span>
+							{sqlQuery.replace('WHERE ', '')}
+						</div>
+					</div>
+				</div>
+			{:else}
+				<div class="space-y-4">
+					<div class="rounded-lg bg-gray-50 p-4">
+						<h3 class="mb-2 text-sm font-medium text-gray-900">Filter Objects</h3>
+						<pre
+							class="overflow-x-auto rounded border bg-white p-3 text-xs text-gray-800">{JSON.stringify(
+								jsonQuery,
+								null,
+								2
+							)}</pre>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Statistics -->
+			<div class="mt-6 grid grid-cols-2 gap-4">
+				<div class="rounded-lg bg-blue-50 p-4">
+					<h4 class="mb-2 text-sm font-medium text-blue-900">Logical Operators</h4>
+					<div class="space-y-1">
+						<div class="text-xl font-bold text-blue-600">{logicalOperatorCounts.OR}</div>
+						<div class="text-xs text-blue-800">{logicalOperatorCounts.OR} OR</div>
+						<div class="text-xs text-blue-800">{logicalOperatorCounts.AND} AND</div>
+					</div>
+				</div>
+
+				<div class="rounded-lg bg-green-50 p-4">
+					<h4 class="mb-2 text-sm font-medium text-green-900">Column Types</h4>
+					<div class="space-y-1">
+						<div class="text-xl font-bold text-green-600">{columnTypeCounts}</div>
+						<div class="text-xs text-green-800">types used</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>