@smartnet360/svelte-components 0.0.115 → 0.0.117

package/dist/apps/antenna-pattern/components/AntennaDiagrams.svelte

@@ -11,18 +11,52 @@
   // Chart engine types
   type ChartEngineType = 'polar-line' | 'polar-bar' | 'polar-area';
 
+  // Optional props for external initialization (non-breaking - all have defaults)
+  interface Props {
+    /** Initial antenna 1 name to pre-select */
+    initialAntenna1Name?: string;
+    /** Initial antenna 2 name to pre-select */
+    initialAntenna2Name?: string;
+    /** Initial electrical tilt for antenna 1 */
+    initialEtilt1?: number;
+    /** Initial electrical tilt for antenna 2 */
+    initialEtilt2?: number;
+    /** Initial mechanical tilt for antenna 1 */
+    initialMtilt1?: number;
+    /** Initial mechanical tilt for antenna 2 */
+    initialMtilt2?: number;
+    /** Initial view mode */
+    initialViewMode?: 'single' | 'compare';
+    /** Label for antenna 1 (e.g., cell name) */
+    antenna1Label?: string;
+    /** Label for antenna 2 (e.g., cell name) */
+    antenna2Label?: string;
+  }
+
+  let {
+    initialAntenna1Name = undefined,
+    initialAntenna2Name = undefined,
+    initialEtilt1 = 0,
+    initialEtilt2 = 0,
+    initialMtilt1 = 0,
+    initialMtilt2 = 0,
+    initialViewMode = 'single',
+    antenna1Label = undefined,
+    antenna2Label = undefined,
+  }: Props = $props();
+
   let antennas = $state<Antenna[]>([]);
   let selectedAntenna = $state<Antenna | null>(null);
   let selectedAntenna2 = $state<Antenna | null>(null);
 
   // External Bootstrap slider values
-  let ant1ElectricalTilt = $state(0);
-  let ant2ElectricalTilt = $state(0);
-  let ant1MechanicalTilt = $state(0);
-  let ant2MechanicalTilt = $state(0);
+  let ant1ElectricalTilt = $state(initialEtilt1);
+  let ant2ElectricalTilt = $state(initialEtilt2);
+  let ant1MechanicalTilt = $state(initialMtilt1);
+  let ant2MechanicalTilt = $state(initialMtilt2);
 
   // Viewing mode and pattern visibility
-  let viewMode = $state<'single' | 'compare'>('single');
+  let viewMode = $state<'single' | 'compare'>(initialViewMode);
   let patternType = $state<'horizontal' | 'vertical'>('vertical');
   
   // Chart engine selection
@@ -117,14 +151,28 @@
       antennas = await loadAntennas();
         
       if (antennas.length > 0) {
-        // Set default antenna selection for antenna 1
-        selectedAntenna = antennas[0];
+        // Check if initial antenna names were provided (for external initialization)
+        if (initialAntenna1Name) {
+          // Find antenna by name (case-insensitive partial match)
+          const found = antennas.find(a => 
+            a.name.toLowerCase().includes(initialAntenna1Name.toLowerCase())
+          );
+          selectedAntenna = found || antennas[0];
+        } else {
+          selectedAntenna = antennas[0];
+        }
+        
         if (selectedAntenna.tilt) {
           availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
         }
         
-        // Set default antenna selection for antenna 2 (for compare mode)
-        if (antennas.length > 1) {
+        // Set antenna 2 selection (for compare mode)
+        if (initialAntenna2Name) {
+          const found = antennas.find(a => 
+            a.name.toLowerCase().includes(initialAntenna2Name.toLowerCase())
+          );
+          selectedAntenna2 = found || (antennas.length > 1 ? antennas[1] : antennas[0]);
+        } else if (antennas.length > 1) {
           selectedAntenna2 = antennas[1];
         } else {
           selectedAntenna2 = antennas[0]; // Use same antenna if only one available
@@ -138,9 +186,13 @@
   // Generate chart title based on current selection
   function generateChartTitle(): string {
     if (viewMode === 'compare' && selectedAntenna && selectedAntenna2) {
-      return `${selectedAntenna.name} vs ${selectedAntenna2.name}`;
+      // Use custom labels if provided, otherwise use antenna names
+      const label1 = antenna1Label || selectedAntenna.name;
+      const label2 = antenna2Label || selectedAntenna2.name;
+      return `${label1} vs ${label2}`;
     } else if (selectedAntenna) {
-      return `${selectedAntenna.name} - Pattern Analysis`;
+      const label = antenna1Label || selectedAntenna.name;
+      return `${label} - Pattern Analysis`;
     }
     return 'Antenna Pattern Analysis';
   }

package/dist/apps/antenna-pattern/components/AntennaDiagrams.svelte.d.ts

@@ -1,3 +1,23 @@
-declare const AntennaDiagrams: import("svelte").Component<Record<string, never>, {}, "">;
+interface Props {
+    /** Initial antenna 1 name to pre-select */
+    initialAntenna1Name?: string;
+    /** Initial antenna 2 name to pre-select */
+    initialAntenna2Name?: string;
+    /** Initial electrical tilt for antenna 1 */
+    initialEtilt1?: number;
+    /** Initial electrical tilt for antenna 2 */
+    initialEtilt2?: number;
+    /** Initial mechanical tilt for antenna 1 */
+    initialMtilt1?: number;
+    /** Initial mechanical tilt for antenna 2 */
+    initialMtilt2?: number;
+    /** Initial view mode */
+    initialViewMode?: 'single' | 'compare';
+    /** Label for antenna 1 (e.g., cell name) */
+    antenna1Label?: string;
+    /** Label for antenna 2 (e.g., cell name) */
+    antenna2Label?: string;
+}
+declare const AntennaDiagrams: import("svelte").Component<Props, {}, "">;
 type AntennaDiagrams = ReturnType<typeof AntennaDiagrams>;
 export default AntennaDiagrams;

package/dist/core/CellTable/CellHistoryDemo.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import CellTablePanel from './CellTablePanel.svelte';
+	import type { RowSelectionEvent, CellData } from './types';
+
+	// Generate mock history data for a single cell
+	function generateMockHistory(cellName: string, count: number = 20): Partial<CellData>[] {
+		const antennas = [
+			'ADU451R76V06',
+			'ADU451R79V06', 
+			'AAHF4518R3V06',
+			'AAHF4516R1V06',
+			'742215'
+		];
+		
+		const history: Partial<CellData>[] = [];
+		const baseDate = new Date('2025-10-20');
+		
+		let currentAntenna = antennas[0];
+		let currentET = 4;
+		let currentMT = 2;
+		let currentPW = 20;
+		
+		for (let i = 0; i < count; i++) {
+			// Random chance to change values
+			if (Math.random() > 0.7) {
+				currentAntenna = antennas[Math.floor(Math.random() * antennas.length)];
+			}
+			if (Math.random() > 0.6) {
+				currentET = Math.floor(Math.random() * 10);
+			}
+			if (Math.random() > 0.8) {
+				currentMT = Math.floor(Math.random() * 6);
+			}
+			if (Math.random() > 0.7) {
+				currentPW = 15 + Math.floor(Math.random() * 15);
+			}
+			
+			const date = new Date(baseDate);
+			date.setDate(date.getDate() - i * 7); // Weekly snapshots going back
+			
+			history.push({
+				id: `hist-${i}`,
+				cellName: cellName,
+				configDate: date.toLocaleDateString('en-GB', { 
+					day: '2-digit', 
+					month: '2-digit', 
+					year: 'numeric',
+					hour: '2-digit',
+					minute: '2-digit'
+				}),
+				antenna: currentAntenna,
+				atollET: currentET,
+				atollMT: currentMT,
+				atollPW: currentPW,
+			});
+		}
+		
+		return history;
+	}
+
+	let cellName = $state('2918141');
+	let historyData = $state(generateMockHistory('2918141'));
+	
+	function loadHistory() {
+		historyData = generateMockHistory(cellName);
+	}
+
+	function handleSelectionChange(event: RowSelectionEvent) {
+		console.log('Selection changed:', event.ids);
+	}
+	
+	/**
+	 * Compare two selected history records
+	 */
+	function handleCompareTwoRecords(record1: CellData, record2: CellData) {
+		const params = new URLSearchParams();
+		
+		// Use antenna from both records
+		if (record1.antenna) params.set('ant1', record1.antenna);
+		if (record2.antenna) params.set('ant2', record2.antenna);
+		
+		// Use electrical tilt values
+		params.set('etilt1', String(record1.atollET || 0));
+		params.set('etilt2', String(record2.atollET || 0));
+		
+		// Use mechanical tilt values  
+		params.set('mtilt1', String(record1.atollMT || 0));
+		params.set('mtilt2', String(record2.atollMT || 0));
+		
+		// Add config date as labels
+		params.set('label1', `${record1.cellName} (${record1.configDate})`);
+		params.set('label2', `${record2.cellName} (${record2.configDate})`);
+		
+		const url = `/apps/antenna-compare?${params.toString()}`;
+		window.open(url, '_blank');
+	}
+</script>
+
+<div class="cell-history-page vh-100 d-flex flex-column">
+	<!-- Header -->
+	<div class="demo-controls bg-light border-bottom px-3 py-2 d-flex align-items-center gap-3 flex-wrap">
+		<div class="input-group input-group-sm" style="width: auto;">
+			<span class="input-group-text">Cell Name</span>
+			<input 
+				type="text" 
+				class="form-control" 
+				bind:value={cellName}
+				style="width: 120px;"
+			/>
+			<button class="btn btn-outline-primary" onclick={loadHistory}>
+				<i class="bi bi-arrow-clockwise"></i> Load History
+			</button>
+		</div>
+		<span class="badge bg-info">
+			{historyData.length} records
+		</span>
+		<span class="text-muted small">
+			Select 2 rows to compare antenna configurations
+		</span>
+	</div>
+
+	<!-- CellTablePanel with history preset -->
+	<div class="flex-grow-1 overflow-hidden">
+		<CellTablePanel
+			cells={historyData as CellData[]}
+			groupBy="none"
+			columnPreset="history"
+			selectable={true}
+			multiSelect={true}
+			showToolbar={true}
+			showExport={true}
+			headerFilters={true}
+			showDetailsSidebar={false}
+			showScrollSpy={false}
+			title="Cell Configuration History"
+			onselectionchange={handleSelectionChange}
+		>
+			{#snippet footer({ selectedRows, selectedCount })}
+				<div class="d-flex align-items-center justify-content-between">
+					<span class="text-muted small">
+						{#if selectedCount > 0}
+							{selectedCount} record(s) selected
+						{:else}
+							Select rows to compare configurations
+						{/if}
+					</span>
+					<div class="btn-group">
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-success"
+							disabled={selectedCount !== 2}
+							title={selectedCount === 2 ? 'Compare antenna patterns for selected dates' : 'Select exactly 2 records to compare'}
+							onclick={() => handleCompareTwoRecords(selectedRows[0], selectedRows[1])}
+						>
+							<i class="bi bi-broadcast-pin"></i>
+							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>
+						</button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-secondary"
+							disabled={selectedCount === 0}
+							onclick={() => console.log('Export:', selectedRows.map(r => r.configDate))}
+						>
+							<i class="bi bi-download"></i>
+							<span class="d-none d-sm-inline ms-1">Export</span>
+						</button>
+					</div>
+				</div>
+			{/snippet}
+		</CellTablePanel>
+	</div>
+</div>
+
+<style>
+	.cell-history-page {
+		background: var(--bs-body-bg, #f8f9fa);
+	}
+
+	.demo-controls {
+		flex-shrink: 0;
+	}
+</style>

package/dist/core/CellTable/CellHistoryDemo.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CellHistoryDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type CellHistoryDemo = ReturnType<typeof CellHistoryDemo>;
+export default CellHistoryDemo;

package/dist/core/CellTable/CellTable.svelte

@@ -10,6 +10,7 @@
 		RowSelectionEvent,
 		RowClickEvent,
 		RowDblClickEvent,
+		RowContextMenuEvent,
 		DataChangeEvent
 	} from './types';
 	import {
@@ -34,6 +35,8 @@
 		onrowclick?: (event: RowClickEvent) => void;
 		/** Row double-click event */
 		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Row context menu (right-click) event */
+		onrowcontextmenu?: (event: RowContextMenuEvent) => void;
 		/** Data change event (filter, sort, etc.) */
 		ondatachange?: (event: DataChangeEvent) => void;
 	}
@@ -58,6 +61,7 @@
 		onselectionchange,
 		onrowclick,
 		onrowdblclick,
+		onrowcontextmenu,
 		ondatachange
 	}: Props = $props();
 
@@ -67,8 +71,25 @@
 
 	// Reactive column configuration - only changes when preset changes
 	let columns = $derived.by(() => {
-		// Only depend on columnPreset to avoid unnecessary recalculations
-		return getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
+		// Get base columns from preset
+		const baseColumns = getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
+		
+		// Add row selection checkbox column if selectable
+		if (selectable) {
+			const selectColumn = {
+				title: '',
+				formatter: 'rowSelection',
+				titleFormatter: multiSelect ? 'rowSelection' : undefined,
+				hozAlign: 'center' as const,
+				headerSort: false,
+				width: 40,
+				frozen: true,
+				cssClass: 'cell-table-select-column',
+			};
+			return [selectColumn, ...baseColumns];
+		}
+		
+		return baseColumns;
 	});
 
 	// Pre-sort data using our custom multi-level sorter
@@ -152,6 +173,16 @@
 			}
 		});
 
+		table.on('rowContext', (e, row) => {
+			if (onrowcontextmenu) {
+				(e as MouseEvent).preventDefault();
+				onrowcontextmenu({
+					row: (row as RowComponent).getData() as CellData,
+					event: e as MouseEvent
+				});
+			}
+		});
+
 		table.on('rowSelectionChanged', (data, rows) => {
 			if (onselectionchange) {
 				const cellData = data as CellData[];

package/dist/core/CellTable/CellTable.svelte.d.ts

@@ -1,6 +1,6 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
-import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent } from './types';
+import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent } from './types';
 interface Props extends CellTableProps {
     /** Row selection change event */
     onselectionchange?: (event: RowSelectionEvent) => void;
@@ -8,6 +8,8 @@ interface Props extends CellTableProps {
     onrowclick?: (event: RowClickEvent) => void;
     /** Row double-click event */
     onrowdblclick?: (event: RowDblClickEvent) => void;
+    /** Row context menu (right-click) event */
+    onrowcontextmenu?: (event: RowContextMenuEvent) => void;
     /** Data change event (filter, sort, etc.) */
     ondatachange?: (event: DataChangeEvent) => void;
 }

package/dist/core/CellTable/CellTableDemo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CellTablePanel from './CellTablePanel.svelte';
-	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent } from './types';
+	import type { CellTableGroupField, ColumnPreset, RowSelectionEvent, CellData } from './types';
 	import { generateCellsFromPreset, getGeneratorInfo, type GeneratorPreset } from '../../shared/demo';
 
 	let datasetSize: GeneratorPreset = $state('small');
@@ -42,6 +42,53 @@
 		console.log('Selection changed:', event.ids);
 	}
 	
+	// Context menu action handlers
+	function handleViewCell(cell: CellData) {
+		console.log('View cell:', cell.id, cell.cellName);
+		alert(`Viewing cell: ${cell.cellName}`);
+	}
+	
+	function handleEditCell(cell: CellData) {
+		console.log('Edit cell:', cell.id, cell.cellName);
+		alert(`Edit cell: ${cell.cellName}`);
+	}
+	
+	function handleDeleteCell(cell: CellData) {
+		console.log('Delete cell:', cell.id, cell.cellName);
+		if (confirm(`Delete cell ${cell.cellName}?`)) {
+			demoCells = demoCells.filter(c => c.id !== cell.id);
+		}
+	}
+	
+	function handleShowOnMap(cell: CellData) {
+		console.log('Show on map:', cell.latitude, cell.longitude);
+		alert(`Show on map: ${cell.cellName}\nLat: ${cell.latitude}\nLon: ${cell.longitude}`);
+	}
+	
+	/**
+	 * Compare two selected cells' antenna configurations
+	 */
+	function handleCompareTwoCells(cell1: CellData, cell2: CellData) {
+		const params = new URLSearchParams();
+		
+		// Use antenna from both cells
+		if (cell1.antenna) params.set('ant1', cell1.antenna);
+		if (cell2.antenna) params.set('ant2', cell2.antenna);
+		
+		// Use electrical tilt values (parse first value if comma-separated)
+		const etilt1 = cell1.electricalTilt ? parseInt(cell1.electricalTilt.split(',')[0], 10) : 0;
+		const etilt2 = cell2.electricalTilt ? parseInt(cell2.electricalTilt.split(',')[0], 10) : 0;
+		params.set('etilt1', String(etilt1 || 0));
+		params.set('etilt2', String(etilt2 || 0));
+		
+		// Add cell name + status as labels
+		params.set('label1', `${cell1.cellName} (${cell1.status})`);
+		params.set('label2', `${cell2.cellName} (${cell2.status})`);
+		
+		const url = `/apps/antenna-compare?${params.toString()}`;
+		window.open(url, '_blank');
+	}
+	
 	function regenerateData() {
 		demoCells = generateCellsFromPreset(datasetSize);
 	}
@@ -221,6 +268,16 @@
 						{/if}
 					</span>
 					<div class="btn-group">
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-success"
+							disabled={selectedCount !== 2}
+							title={selectedCount === 2 ? 'Compare Atoll antennas of selected cells' : 'Select exactly 2 cells to compare'}
+							onclick={() => handleCompareTwoCells(selectedRows[0], selectedRows[1])}
+						>
+							<i class="bi bi-broadcast-pin"></i>
+							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>
+						</button>
 						<button
 							type="button"
 							class="btn btn-sm btn-outline-primary"
@@ -242,6 +299,28 @@
 					</div>
 				</div>
 			{/snippet}
+
+			{#snippet contextMenu({ row, closeMenu })}
+				<div class="dropdown-menu show shadow-lg" style="min-width: 180px;">
+					<h6 class="dropdown-header text-truncate" style="max-width: 200px;">
+						<i class="bi bi-broadcast me-1"></i>{row.cellName}
+					</h6>
+					<div class="dropdown-divider"></div>
+					<button class="dropdown-item" onclick={() => { handleViewCell(row); closeMenu(); }}>
+						<i class="bi bi-eye me-2 text-primary"></i>View Details
+					</button>
+					<button class="dropdown-item" onclick={() => { handleEditCell(row); closeMenu(); }}>
+						<i class="bi bi-pencil me-2 text-warning"></i>Edit Cell
+					</button>
+					<button class="dropdown-item" onclick={() => { handleShowOnMap(row); closeMenu(); }}>
+						<i class="bi bi-geo-alt me-2 text-info"></i>Show on Map
+					</button>
+					<div class="dropdown-divider"></div>
+					<button class="dropdown-item text-danger" onclick={() => { handleDeleteCell(row); closeMenu(); }}>
+						<i class="bi bi-trash me-2"></i>Delete Cell
+					</button>
+				</div>
+			{/snippet}
 		</CellTablePanel>
 	</div>
 </div>

package/dist/core/CellTable/CellTablePanel.svelte

@@ -10,6 +10,7 @@
 		RowSelectionEvent,
 		RowClickEvent,
 		RowDblClickEvent,
+		RowContextMenuEvent,
 		DataChangeEvent,
 		TechColorMap,
 		StatusColorMap
@@ -68,6 +69,8 @@
 		footer?: Snippet<[{ selectedRows: CellData[]; selectedCount: number }]>;
 		/** Custom details sidebar content */
 		detailsContent?: Snippet<[{ cell: CellData | null; closeSidebar: () => void }]>;
+		/** Custom context menu content (right-click on row) */
+		contextMenu?: Snippet<[{ row: CellData; closeMenu: () => void }]>;
 	}
 
 	let {
@@ -96,9 +99,15 @@
 		headerSearch,
 		headerActions,
 		footer,
-		detailsContent
+		detailsContent,
+		contextMenu
 	}: Props = $props();
 
+	// Context menu state
+	let contextMenuVisible = $state(false);
+	let contextMenuRow: CellData | null = $state(null);
+	let contextMenuPosition = $state({ x: 0, y: 0 });
+
 	// Storage keys
 	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
 	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
@@ -239,6 +248,26 @@
 		updateScrollSpyGroups();
 	}
 
+	function handleRowContextMenu(event: RowContextMenuEvent) {
+		if (contextMenu) {
+			contextMenuRow = event.row;
+			contextMenuPosition = { x: event.event.clientX, y: event.event.clientY };
+			contextMenuVisible = true;
+		}
+	}
+
+	function closeContextMenu() {
+		contextMenuVisible = false;
+		contextMenuRow = null;
+	}
+
+	function handleClickOutside(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		if (!target.closest('.context-menu-container')) {
+			closeContextMenu();
+		}
+	}
+
 	function updateScrollSpyGroups() {
 		if (scrollSpyEnabled && groupBy !== 'none') {
 			// Small delay to ensure table has updated
@@ -477,6 +506,7 @@
 				onselectionchange={handleSelectionChange}
 				ondatachange={handleDataChange}
 				onrowclick={handleRowClick}
+				onrowcontextmenu={handleRowContextMenu}
 				{onrowdblclick}
 			/>
 		</div>
@@ -617,8 +647,21 @@
 			{@render footer({ selectedRows, selectedCount })}
 		</div>
 	{/if}
+
+	<!-- Context Menu (portal-like, fixed position) -->
+	{#if contextMenuVisible && contextMenuRow && contextMenu}
+		<div 
+			class="context-menu-container"
+			style="position: fixed; left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px; z-index: 1050;"
+		>
+			{@render contextMenu({ row: contextMenuRow, closeMenu: closeContextMenu })}
+		</div>
+	{/if}
 </div>
 
+<!-- Click outside handler -->
+<svelte:window onclick={contextMenuVisible ? handleClickOutside : undefined} />
+
 <style>
 	.cell-table-panel {
 		background-color: var(--bs-body-bg, #fff);
@@ -694,4 +737,20 @@
 	.scrollspy-badge:active {
 		transform: translateY(0);
 	}
+
+	/* Context menu styling */
+	.context-menu-container {
+		animation: contextMenuFadeIn 0.1s ease-out;
+	}
+
+	@keyframes contextMenuFadeIn {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
 </style>

package/dist/core/CellTable/CellTablePanel.svelte.d.ts

@@ -61,6 +61,11 @@ interface Props {
         cell: CellData | null;
         closeSidebar: () => void;
     }]>;
+    /** Custom context menu content (right-click on row) */
+    contextMenu?: Snippet<[{
+        row: CellData;
+        closeMenu: () => void;
+    }]>;
 }
 declare const CellTablePanel: import("svelte").Component<Props, {
     getSelectedRows: () => CellData[];

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -100,7 +100,8 @@
 		{ value: 'physical', label: 'Physical' },
 		{ value: 'network', label: 'Network' },
 		{ value: 'planning', label: 'Planning' },
-		{ value: 'compare', label: 'Compare (Atoll/Nwt)' }
+		{ value: 'compare', label: 'Compare (Atoll/NW)' },
+		{ value: 'kpi', label: 'KPI Trends' }
 	];
 
 	function handleGroupChange(e: Event) {

package/dist/core/CellTable/column-config.d.ts

@@ -61,6 +61,23 @@ export declare function heightFormatter(cell: CellComponent): string;
  * - Gray: one or both values missing
  */
 export declare function createCompareFormatter(atollField: string, nwtField: string): (cell: CellComponent) => string;
+/**
+ * Creates a sparkline SVG formatter for KPI time-series data
+ * Renders a mini line chart showing trend over time
+ *
+ * @param options Configuration for the sparkline
+ */
+export interface SparklineOptions {
+    width?: number;
+    height?: number;
+    lineColor?: string;
+    fillColor?: string;
+    showDots?: boolean;
+    showLastValue?: boolean;
+    unit?: string;
+    decimals?: number;
+}
+export declare function createSparklineFormatter(options?: SparklineOptions): (cell: CellComponent) => string;
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500

package/dist/core/CellTable/column-config.js

@@ -60,6 +60,8 @@ export const COLUMN_GROUPS = {
     atoll: ['atollET', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
     compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
+    kpi: ['kpiTraffic', 'kpiThroughput', 'kpiAvailability', 'kpiSuccessRate'],
+    history: ['configDate', 'antenna', 'atollET', 'atollMT', 'atollPW'],
 };
 /**
  * Create a technology badge formatter
@@ -166,6 +168,55 @@ export function createCompareFormatter(atollField, nwtField) {
         return `<span class="badge" style="background-color: ${bgColor}; color: ${textColor}; font-size: 0.75rem; font-weight: normal;">${atollStr} | ${nwtStr}</span>`;
     };
 }
+export function createSparklineFormatter(options = {}) {
+    const { width = 80, height = 24, lineColor = '#0d6efd', fillColor = 'rgba(13,110,253,0.2)', showDots = false, showLastValue = true, unit = '', decimals = 1 } = options;
+    return (cell) => {
+        const data = cell.getValue();
+        if (!data || !Array.isArray(data) || data.length === 0) {
+            return '<span class="text-muted">—</span>';
+        }
+        const values = data.filter(v => typeof v === 'number' && !isNaN(v));
+        if (values.length === 0) {
+            return '<span class="text-muted">—</span>';
+        }
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const range = max - min || 1;
+        const padding = 2;
+        const chartWidth = showLastValue ? width - 35 : width - 4;
+        const chartHeight = height - 4;
+        // Generate SVG path
+        const points = values.map((v, i) => {
+            const x = padding + (i / (values.length - 1 || 1)) * (chartWidth - padding * 2);
+            const y = padding + (1 - (v - min) / range) * (chartHeight - padding * 2);
+            return { x, y, v };
+        });
+        // Line path
+        const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');
+        // Fill path (closed polygon)
+        const fillPath = `${linePath} L ${points[points.length - 1].x.toFixed(1)} ${chartHeight - padding} L ${padding} ${chartHeight - padding} Z`;
+        // Dots
+        const dots = showDots
+            ? points.map(p => `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="1.5" fill="${lineColor}"/>`).join('')
+            : '';
+        // Last value text
+        const lastValue = values[values.length - 1];
+        const valueText = showLastValue
+            ? `<text x="${width - 2}" y="${height / 2 + 4}" text-anchor="end" font-size="10" fill="#333">${lastValue.toFixed(decimals)}${unit}</text>`
+            : '';
+        // Trend indicator (comparing last vs first)
+        const trend = values.length > 1 ? values[values.length - 1] - values[0] : 0;
+        const trendColor = trend >= 0 ? '#198754' : '#dc3545';
+        return `
+			<svg width="${width}" height="${height}" style="vertical-align: middle;">
+				<path d="${fillPath}" fill="${fillColor}" />
+				<path d="${linePath}" fill="none" stroke="${lineColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+				${dots}
+				${valueText}
+			</svg>
+		`.trim().replace(/\s+/g, ' ');
+    };
+}
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
@@ -277,6 +328,12 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             width: 120,
             ...headerFilterParams,
         },
+        {
+            title: 'Config Date',
+            field: 'configDate',
+            width: 150,
+            ...headerFilterParams,
+        },
         // Physical columns
         {
             title: 'Antenna',
@@ -398,6 +455,14 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: numberFormatter(1),
             ...headerFilterParams,
         },
+        {
+            title: 'Atoll MT',
+            field: 'atollMT',
+            width: 90,
+            hozAlign: 'right',
+            formatter: numberFormatter(1),
+            ...headerFilterParams,
+        },
         {
             title: 'Atoll PW',
             field: 'atollPW',
@@ -455,6 +520,63 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: createCompareFormatter('atollBW', 'nwBW'),
             headerTooltip: 'Atoll BW | Network BW',
         },
+        // KPI Sparkline columns
+        {
+            title: 'Traffic',
+            field: 'kpiTraffic',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '',
+                lineColor: '#0d6efd',
+                fillColor: 'rgba(13,110,253,0.15)',
+                decimals: 0
+            }),
+            headerTooltip: 'Traffic volume trend (GB)',
+            headerSort: false,
+        },
+        {
+            title: 'Throughput',
+            field: 'kpiThroughput',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '',
+                lineColor: '#6f42c1',
+                fillColor: 'rgba(111,66,193,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Throughput trend (Mbps)',
+            headerSort: false,
+        },
+        {
+            title: 'Avail %',
+            field: 'kpiAvailability',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '%',
+                lineColor: '#198754',
+                fillColor: 'rgba(25,135,84,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Availability trend (%)',
+            headerSort: false,
+        },
+        {
+            title: 'Success %',
+            field: 'kpiSuccessRate',
+            width: 120,
+            hozAlign: 'center',
+            formatter: createSparklineFormatter({
+                unit: '%',
+                lineColor: '#fd7e14',
+                fillColor: 'rgba(253,126,20,0.15)',
+                decimals: 1
+            }),
+            headerTooltip: 'Success rate trend (%)',
+            headerSort: false,
+        },
         // Position columns
         {
             title: 'Latitude',
@@ -549,6 +671,13 @@ export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, st
         case 'compare':
             visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
             break;
+        case 'kpi':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
+            break;
+        case 'history':
+            // Simplified view for config history - just cellName, date, and config fields
+            visibleFields = ['cellName', ...COLUMN_GROUPS.history];
+            break;
         case 'default':
         default:
             visibleFields = [
@@ -613,14 +742,22 @@ export function getColumnMetadata() {
         { field: 'nwBW', title: 'NW BW', group: 'Network' },
         // Atoll
         { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
+        { field: 'atollMT', title: 'Atoll MT', group: 'Atoll' },
         { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },
         { field: 'atollRS', title: 'Atoll RS', group: 'Atoll' },
         { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
+        // History
+        { field: 'configDate', title: 'Config Date', group: 'History' },
         // Compare (Atoll vs Network)
         { field: 'compareET', title: 'Δ ET', group: 'Compare' },
         { field: 'comparePW', title: 'Δ PW', group: 'Compare' },
         { field: 'compareRS', title: 'Δ RS', group: 'Compare' },
         { field: 'compareBW', title: 'Δ BW', group: 'Compare' },
+        // KPI Trends
+        { field: 'kpiTraffic', title: 'Traffic', group: 'KPI' },
+        { field: 'kpiThroughput', title: 'Throughput', group: 'KPI' },
+        { field: 'kpiAvailability', title: 'Availability', group: 'KPI' },
+        { field: 'kpiSuccessRate', title: 'Success Rate', group: 'KPI' },
         // Position
         { field: 'latitude', title: 'Latitude', group: 'Position' },
         { field: 'longitude', title: 'Longitude', group: 'Position' },
@@ -651,6 +788,10 @@ export function getPresetVisibleFields(preset) {
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
         case 'compare':
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
+        case 'kpi':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
+        case 'history':
+            return ['cellName', ...COLUMN_GROUPS.history];
         case 'default':
         default:
             return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];

package/dist/core/CellTable/index.d.ts

@@ -7,7 +7,8 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
+export { default as CellHistoryDemo } from './CellHistoryDemo.svelte';
 export { default as ColumnPicker } from './ColumnPicker.svelte';
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
-export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
+export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
 export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/index.js

@@ -8,6 +8,7 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
+export { default as CellHistoryDemo } from './CellHistoryDemo.svelte';
 export { default as ColumnPicker } from './ColumnPicker.svelte';
 // Re-export shared demo data utilities for convenience
 // Note: Cell type is NOT re-exported here to avoid conflicts with map-v2

package/dist/core/CellTable/types.d.ts

@@ -16,7 +16,7 @@ export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
  */
-export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare';
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare' | 'kpi' | 'history';
 /**
  * Column visibility configuration
  */
@@ -93,6 +93,13 @@ export interface RowDblClickEvent {
     row: CellData;
     event: MouseEvent;
 }
+/**
+ * Row context menu (right-click) event data
+ */
+export interface RowContextMenuEvent {
+    row: CellData;
+    event: MouseEvent;
+}
 /**
  * Data change event data
  */
@@ -123,4 +130,6 @@ export interface ColumnGroups {
     atoll: string[];
     position: string[];
     compare: string[];
+    kpi: string[];
+    history: string[];
 }

package/dist/shared/demo/cell-generator.js

@@ -4,6 +4,21 @@
  * Generates realistic cell network data with configurable parameters.
  * Supports density zones, multiple technologies, and various site configurations.
  */
+/**
+ * Generate mock KPI time-series data
+ * Creates an array of values with realistic variation
+ */
+function generateMockKpiData(days, min, max, random) {
+    const data = [];
+    let current = min + random() * (max - min);
+    for (let i = 0; i < days; i++) {
+        // Add some realistic variation (±10%)
+        const variation = (random() - 0.5) * 0.2 * (max - min);
+        current = Math.max(min, Math.min(max, current + variation));
+        data.push(Math.round(current * 10) / 10);
+    }
+    return data;
+}
 /**
  * Preset configurations
  */
@@ -211,6 +226,11 @@ export function generateCells(config) {
                     pci: cellCounter % 504,
                     nwRS: 450.0,
                     nwBW: 10.0,
+                    // KPI time-series mock data (7 days)
+                    kpiTraffic: generateMockKpiData(7, 50, 200, random),
+                    kpiThroughput: generateMockKpiData(7, 20, 80, random),
+                    kpiAvailability: generateMockKpiData(7, 95, 100, random),
+                    kpiSuccessRate: generateMockKpiData(7, 90, 100, random),
                     other: {
                         city: ['Tehran', 'Shiraz', 'Isfahan', 'Mashhad', 'Tabriz'][siteNum % 5],
                         bcc: bandIndex % 8,

package/dist/shared/demo/cell-types.d.ts

@@ -35,7 +35,9 @@ export interface Cell {
     siteLongitude: number;
     comment: string;
     planner: string;
+    configDate?: string;
     atollET?: number;
+    atollMT?: number;
     atollPW?: number;
     atollRS?: number;
     atollBW?: number;
@@ -45,6 +47,10 @@ export interface Cell {
     nwBW?: number;
     pci?: number;
     rru: string;
+    kpiTraffic?: number[];
+    kpiThroughput?: number[];
+    kpiAvailability?: number[];
+    kpiSuccessRate?: number[];
     other?: Record<string, unknown>;
     customSubgroup: string;
 }
@@ -60,3 +66,16 @@ export type TechnologyBandKey = string;
  * Grouping fields for views
  */
 export type CellGroupingField = 'tech' | 'fband' | 'frq' | 'status' | 'siteId' | 'none';
+/**
+ * Cell configuration history record
+ * Represents a snapshot of cell configuration at a point in time
+ */
+export interface CellConfigHistory {
+    id: string;
+    cellName: string;
+    configDate: string;
+    antenna: string;
+    antennaPower: number;
+    mechanicalTilt: number;
+    electricalTilt: number;
+}

package/dist/shared/demo/index.d.ts

@@ -3,5 +3,5 @@
  *
  * Provides common demo data generators and types for use across components.
  */
-export type { Cell, CellStatus, CellGroupingField } from './cell-types';
+export type { Cell, CellStatus, CellGroupingField, CellConfigHistory } from './cell-types';
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from './cell-generator';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.115",
+	"version": "0.0.117",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",