@smartnet360/svelte-components 0.0.131 → 0.0.133

package/dist/core/CellTable/CellHistoryDemo.svelte

@@ -1,68 +1,114 @@
 <script lang="ts">
 	import CellTablePanel from './CellTablePanel.svelte';
-	import type { RowSelectionEvent, CellData } from './types';
+	import type { RowSelectionEvent, CellHistoryData } 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;
+	/**
+	 * Table-ready history record after transformation
+	 */
+	interface HistoryTableRow {
+		id: string;
+		cellName: string;
+		frequency: number;
+		configDate: string;
+		// Current values
+		antenna: string;
+		electricalTilt: number;
+		mechanicalTilt: number;
+		power: number;
+		// Previous values for change comparison
+		prevAntenna: string;
+		prevElectricalTilt: number;
+		prevMechanicalTilt: number;
+		prevPower: number;
+		// Virtual fields for the change columns
+		antennaChange: string;
+		etiltChange: number;
+		mtiltChange: number;
+		powerChange: number;
 	}
 
-	let cellName = $state('2918141');
-	let historyData = $state(generateMockHistory('2918141'));
+	/**
+	 * Transform API history data to table-friendly format
+	 * Maps UPPER_CASE API fields to camelCase and adds virtual fields for change detection
+	 */
+	function transformHistoryData(apiData: CellHistoryData[]): HistoryTableRow[] {
+		return apiData.map((record, index) => ({
+			id: `hist-${index}`,
+			cellName: record.CELLNAME,
+			frequency: record.FREQUENCY,
+			configDate: record.CONFIG_DATE,
+			// Current values
+			antenna: record.ANTENNA_TYPE,
+			electricalTilt: record.ELECTRONIC_TILT,
+			mechanicalTilt: record.MECHANIC_TILT,
+			power: record.ANTOUTPUTPWR,
+			// Previous values for change comparison
+			prevAntenna: record.PREV_ANTENNA_TYPE,
+			prevElectricalTilt: record.PREV_ELECTRONIC_TILT,
+			prevMechanicalTilt: record.PREV_MECHANIC_TILT,
+			prevPower: record.PREV_ANTOUTPUTPWR,
+			// Virtual fields for the change columns (needed for column filtering)
+			antennaChange: record.ANTENNA_TYPE,
+			etiltChange: record.ELECTRONIC_TILT,
+			mtiltChange: record.MECHANIC_TILT,
+			powerChange: record.ANTOUTPUTPWR,
+		}));
+	}
+
+	/**
+	 * Example API data for cell configuration history
+	 */
+	const EXAMPLE_HISTORY_DATA: CellHistoryData[] = [
+		{
+			CELLNAME: '1001141',
+			FREQUENCY: 1800,
+			CONFIG_DATE: '2025-12-03T23:00:00.000Z',
+			ANTENNA_TYPE: 'AQU4521R01v06',
+			PREV_ANTENNA_TYPE: 'AQU4521R01v06',
+			ANTOUTPUTPWR: 20,
+			PREV_ANTOUTPUTPWR: 20,
+			MECHANIC_TILT: 1,
+			PREV_MECHANIC_TILT: 1,
+			ELECTRONIC_TILT: 10,
+			PREV_ELECTRONIC_TILT: 9
+		},
+		{
+			CELLNAME: '1001141',
+			FREQUENCY: 1800,
+			CONFIG_DATE: '2025-09-11T22:00:00.000Z',
+			ANTENNA_TYPE: 'AQU4521R01v06',
+			PREV_ANTENNA_TYPE: 'ADU451602v01',
+			ANTOUTPUTPWR: 20,
+			PREV_ANTOUTPUTPWR: 20,
+			MECHANIC_TILT: 1,
+			PREV_MECHANIC_TILT: 0,
+			ELECTRONIC_TILT: 9,
+			PREV_ELECTRONIC_TILT: 10
+		},
+		{
+			CELLNAME: '1001141',
+			FREQUENCY: 1800,
+			CONFIG_DATE: '2021-02-15T23:00:00.000Z',
+			ANTENNA_TYPE: 'ADU451602v01',
+			PREV_ANTENNA_TYPE: 'ADU451602v01',
+			ANTOUTPUTPWR: 20,
+			PREV_ANTOUTPUTPWR: 20,
+			MECHANIC_TILT: 0,
+			PREV_MECHANIC_TILT: 2,
+			ELECTRONIC_TILT: 10,
+			PREV_ELECTRONIC_TILT: 10
+		}
+	];
+
+	let cellName = $state('1001141');
+	let rawHistoryData = $state<CellHistoryData[]>(EXAMPLE_HISTORY_DATA);
+	let historyData = $derived(transformHistoryData(rawHistoryData));
 	
 	function loadHistory() {
-		historyData = generateMockHistory(cellName);
+		// TODO: Replace with actual API call
+		// For now, just reload the example data
+		console.log(`Loading history for cell: ${cellName}`);
+		rawHistoryData = EXAMPLE_HISTORY_DATA.filter(r => r.CELLNAME === cellName);
 	}
 
 	function handleSelectionChange(event: RowSelectionEvent) {
@@ -72,20 +118,24 @@
 	/**
 	 * Compare two selected history records
 	 */
-	function handleCompareTwoRecords(record1: CellData, record2: CellData) {
+	function handleCompareTwoRecords(record1: HistoryTableRow, record2: HistoryTableRow) {
 		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 frequency (same for both records typically)
+		params.set('freq1', String(record1.frequency || 1800));
+		params.set('freq2', String(record2.frequency || 1800));
+		
 		// Use electrical tilt values
-		params.set('etilt1', String(record1.atollET || 0));
-		params.set('etilt2', String(record2.atollET || 0));
+		params.set('etilt1', String(record1.electricalTilt || 0));
+		params.set('etilt2', String(record2.electricalTilt || 0));
 		
 		// Use mechanical tilt values  
-		params.set('mtilt1', String(record1.atollMT || 0));
-		params.set('mtilt2', String(record2.atollMT || 0));
+		params.set('mtilt1', String(record1.mechanicalTilt || 0));
+		params.set('mtilt2', String(record2.mechanicalTilt || 0));
 		
 		// Add config date as labels
 		params.set('label1', `${record1.cellName} (${record1.configDate})`);
@@ -122,9 +172,16 @@
 	<!-- CellTablePanel with history preset -->
 	<div class="flex-grow-1 overflow-hidden">
 		<CellTablePanel
-			cells={historyData as CellData[]}
+			cells={historyData as unknown as import('./types').CellData[]}
 			groupBy="none"
+			groupOptions={[
+				{ value: 'none', label: 'No Grouping' },
+				{ value: 'antenna', label: 'Antenna Type' },
+				{ value: 'cellname', label: 'Cell Name' },
+
+			]}
 			columnPreset="history"
+			showColumnPresets={false}
 			selectable={true}
 			multiSelect={true}
 			showToolbar={true}
@@ -150,7 +207,7 @@
 							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])}
+							onclick={() => handleCompareTwoRecords(selectedRows[0] as unknown as HistoryTableRow, selectedRows[1] as unknown as HistoryTableRow)}
 						>
 							<i class="bi bi-broadcast-pin"></i>
 							<span class="d-none d-sm-inline ms-1">Compare Antennas</span>

package/dist/core/CellTable/CellTablePanel.svelte

@@ -13,7 +13,8 @@
 		RowContextMenuEvent,
 		DataChangeEvent,
 		TechColorMap,
-		StatusColorMap
+		StatusColorMap,
+		GroupOption
 	} from './types';
 
 	interface Props {
@@ -21,6 +22,8 @@
 		cells: CellData[];
 		/** Initial grouping field */
 		groupBy?: CellTableGroupField;
+		/** Custom grouping options (overrides default tech/fband/status options) */
+		groupOptions?: GroupOption[];
 		/** Initial column preset */
 		columnPreset?: ColumnPreset;
 		/** Enable row selection */
@@ -31,6 +34,8 @@
 		height?: string;
 		/** Show toolbar */
 		showToolbar?: boolean;
+		/** Show column presets dropdown and column picker (set false for simple tables) */
+		showColumnPresets?: boolean;
 		/** Show export buttons */
 		showExport?: boolean;
 		/** Show JSON export button (requires showExport=true) */
@@ -76,11 +81,13 @@
 	let {
 		cells = [],
 		groupBy = $bindable('none'),
+		groupOptions,
 		columnPreset = $bindable('default'),
 		selectable = true,
 		multiSelect = true,
 		height = '100%',
 		showToolbar = true,
+		showColumnPresets = true,
 		showExport = true,
 		showJsonExport = false,
 		techColors,
@@ -435,12 +442,14 @@
 	{#if showToolbar}
 		<CellTableToolbar
 			{groupBy}
+			{groupOptions}
 			{columnPreset}
 			totalCount={cells.length}
 			{filteredCount}
 			{selectedCount}
 			{showExport}
 			{showJsonExport}
+			showPresets={showColumnPresets}
 			ongroupchange={handleGroupChange}
 			onpresetchange={handlePresetChange}
 			onexportcsv={handleExportCSV}

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

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { CellData, CellTableGroupField, ColumnPreset, RowSelectionEvent, RowClickEvent, RowDblClickEvent, TechColorMap, StatusColorMap } from './types';
+import type { CellData, CellTableGroupField, ColumnPreset, RowSelectionEvent, RowClickEvent, RowDblClickEvent, TechColorMap, StatusColorMap, GroupOption } from './types';
 interface Props {
     /** Cell data array to display */
     cells: CellData[];
     /** Initial grouping field */
     groupBy?: CellTableGroupField;
+    /** Custom grouping options (overrides default tech/fband/status options) */
+    groupOptions?: GroupOption[];
     /** Initial column preset */
     columnPreset?: ColumnPreset;
     /** Enable row selection */
@@ -15,6 +17,8 @@ interface Props {
     height?: string;
     /** Show toolbar */
     showToolbar?: boolean;
+    /** Show column presets dropdown and column picker (set false for simple tables) */
+    showColumnPresets?: boolean;
     /** Show export buttons */
     showExport?: boolean;
     /** Show JSON export button (requires showExport=true) */

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { CellTableGroupField, ColumnPreset } from './types';
+	import type { CellTableGroupField, ColumnPreset, GroupOption } from './types';
 	import type { ColumnMeta } from './column-config';
 	import ColumnPicker from './ColumnPicker.svelte';
 
@@ -20,6 +20,8 @@
 		showJsonExport?: boolean;
 		/** Show grouping dropdown */
 		showGrouping?: boolean;
+		/** Custom grouping options (overrides default options) */
+		groupOptions?: GroupOption[];
 		/** Show preset dropdown */
 		showPresets?: boolean;
 		/** Group change event */
@@ -65,6 +67,7 @@
 		showExport = true,
 		showJsonExport = false,
 		showGrouping = true,
+		groupOptions: customGroupOptions,
 		showPresets = true,
 		ongroupchange,
 		onpresetchange,
@@ -84,7 +87,7 @@
 		ontogglescrollspy
 	}: Props = $props();
 
-	const groupOptions: { value: CellTableGroupField; label: string }[] = [
+	const defaultGroupOptions: GroupOption[] = [
 		{ value: 'none', label: 'No Grouping' },
 		{ value: 'tech', label: 'Technology' },
 		{ value: 'fband', label: 'Frequency Band' },
@@ -93,6 +96,9 @@
 		{ value: 'siteId', label: 'Site ID' }
 	];
 
+	// Use custom options if provided, otherwise use defaults
+	const groupOptions = customGroupOptions ?? defaultGroupOptions;
+
 	const presetOptions: { value: ColumnPreset; label: string }[] = [
 		{ value: 'default', label: 'Default' },
 		{ value: 'compact', label: 'Compact' },
@@ -105,8 +111,8 @@
 	];
 
 	function handleGroupChange(e: Event) {
-		const value = (e.target as HTMLSelectElement).value as CellTableGroupField;
-		ongroupchange?.(value);
+		const value = (e.target as HTMLSelectElement).value;
+		ongroupchange?.(value as CellTableGroupField);
 	}
 
 	function handlePresetChange(e: Event) {

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

@@ -1,4 +1,4 @@
-import type { CellTableGroupField, ColumnPreset } from './types';
+import type { CellTableGroupField, ColumnPreset, GroupOption } from './types';
 import type { ColumnMeta } from './column-config';
 interface Props {
     /** Current grouping field */
@@ -17,6 +17,8 @@ interface Props {
     showJsonExport?: boolean;
     /** Show grouping dropdown */
     showGrouping?: boolean;
+    /** Custom grouping options (overrides default options) */
+    groupOptions?: GroupOption[];
     /** Show preset dropdown */
     showPresets?: boolean;
     /** Group change event */

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

@@ -61,6 +61,18 @@ export declare function heightFormatter(cell: CellComponent): string;
  * - Gray: one or both values missing
  */
 export declare function createCompareFormatter(atollField: string, nwtField: string): (cell: CellComponent) => string;
+/**
+ * Create a history change formatter for showing current vs previous values
+ * Highlights changes in yellow/amber, unchanged values in muted style
+ *
+ * @param currentField - Field name for current value
+ * @param prevField - Field name for previous value
+ */
+export declare function createHistoryChangeFormatter(currentField: string, prevField: string): (cell: CellComponent) => string;
+/**
+ * Format ISO date string to YYYY.MM.DD format for history display
+ */
+export declare function historyDateFormatter(cell: CellComponent): string;
 /**
  * Creates a sparkline SVG formatter for KPI time-series data
  * Renders a mini line chart showing trend over time

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

@@ -61,7 +61,7 @@ export const COLUMN_GROUPS = {
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
     compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
     kpi: ['kpiTraffic', 'kpiThroughput', 'kpiAvailability', 'kpiSuccessRate'],
-    history: ['configDate', 'antenna', 'atollET', 'atollMT', 'atollPW'],
+    history: ['configDate', 'frequency', 'antennaChange', 'etiltChange', 'mtiltChange', 'powerChange'],
 };
 /**
  * Create a technology badge formatter
@@ -168,6 +168,49 @@ 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>`;
     };
 }
+/**
+ * Create a history change formatter for showing current vs previous values
+ * Highlights changes in yellow/amber, unchanged values in muted style
+ *
+ * @param currentField - Field name for current value
+ * @param prevField - Field name for previous value
+ */
+export function createHistoryChangeFormatter(currentField, prevField) {
+    return (cell) => {
+        const row = cell.getRow().getData();
+        const currentVal = row[currentField];
+        const prevVal = row[prevField];
+        const currentStr = currentVal !== null && currentVal !== undefined ? String(currentVal) : '-';
+        const prevStr = prevVal !== null && prevVal !== undefined ? String(prevVal) : '-';
+        const hasChanged = currentVal !== prevVal;
+        if (hasChanged) {
+            // Value changed - highlight with amber/warning color
+            return `<span class="badge bg-warning text-dark" style="font-size: 0.75rem; font-weight: 500;" title="Changed from: ${prevStr}">${currentStr}</span>`;
+        }
+        else {
+            // No change - muted style
+            return `<span class="text-muted">${currentStr}</span>`;
+        }
+    };
+}
+/**
+ * Format ISO date string to YYYY.MM.DD format for history display
+ */
+export function historyDateFormatter(cell) {
+    const value = cell.getValue();
+    if (!value)
+        return '-';
+    try {
+        const date = new Date(value);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    catch {
+        return value;
+    }
+}
 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) => {
@@ -331,9 +374,46 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
         {
             title: 'Config Date',
             field: 'configDate',
-            width: 150,
+            width: 120,
+            formatter: historyDateFormatter,
+            ...headerFilterParams,
+        },
+        {
+            title: 'Freq (MHz)',
+            field: 'frequency',
+            width: 100,
+            hozAlign: 'right',
+            ...headerFilterParams,
+        },
+        // History change columns (current vs previous, highlights changes)
+        {
+            title: 'Antenna',
+            field: 'antennaChange',
+            width: 160,
+            formatter: createHistoryChangeFormatter('antenna', 'prevAntenna'),
             ...headerFilterParams,
         },
+        {
+            title: 'E-Tilt',
+            field: 'etiltChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('electricalTilt', 'prevElectricalTilt'),
+        },
+        {
+            title: 'M-Tilt',
+            field: 'mtiltChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('mechanicalTilt', 'prevMechanicalTilt'),
+        },
+        {
+            title: 'Power',
+            field: 'powerChange',
+            width: 80,
+            hozAlign: 'center',
+            formatter: createHistoryChangeFormatter('power', 'prevPower'),
+        },
         // Physical columns
         {
             title: 'Antenna',
@@ -748,6 +828,11 @@ export function getColumnMetadata() {
         { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
         // History
         { field: 'configDate', title: 'Config Date', group: 'History' },
+        { field: 'frequency', title: 'Freq (MHz)', group: 'History' },
+        { field: 'antennaChange', title: 'Antenna (Δ)', group: 'History' },
+        { field: 'etiltChange', title: 'E-Tilt (Δ)', group: 'History' },
+        { field: 'mtiltChange', title: 'M-Tilt (Δ)', group: 'History' },
+        { field: 'powerChange', title: 'Power (Δ)', group: 'History' },
         // Compare (Atoll vs Network)
         { field: 'compareET', title: 'Δ ET', group: 'Compare' },
         { field: 'comparePW', title: 'Δ PW', group: 'Compare' },

package/dist/core/CellTable/history-api-helper.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Cell History API Helper
+ *
+ * Transform functions for converting database records to frontend-ready format.
+ * Use these in your API endpoint before sending the response.
+ */
+/**
+ * Raw database record format (Oracle/SQL style - UPPER_CASE)
+ */
+export interface CellHistoryDbRecord {
+    CELLNAME: string;
+    CONFIG_DATE: string | Date;
+    ANTENNA_TYPE: string;
+    PREV_ANTENNA_TYPE: string;
+    ANTOUTPUTPWR: number;
+    PREV_ANTOUTPUTPWR: number;
+    MECHANIC_TILT: number;
+    PREV_MECHANIC_TILT: number;
+    ELECTRONIC_TILT: number;
+    PREV_ELECTRONIC_TILT: number;
+    [key: string]: unknown;
+}
+/**
+ * Frontend-ready API response format (camelCase)
+ */
+export interface CellHistoryApiResponse {
+    cellName: string;
+    configDate: string;
+    antenna: string;
+    prevAntenna: string;
+    power: number;
+    prevPower: number;
+    mechanicalTilt: number;
+    prevMechanicalTilt: number;
+    electricalTilt: number;
+    prevElectricalTilt: number;
+    hasChanges: boolean;
+    changedFields: string[];
+}
+/**
+ * Format a date to YYYY.MM.DD string
+ */
+export declare function formatConfigDate(date: string | Date): string;
+/**
+ * Transform a single database record to API response format
+ */
+export declare function transformDbRecord(record: CellHistoryDbRecord): CellHistoryApiResponse;
+/**
+ * Transform an array of database records to API response format
+ *
+ * @example
+ * // In your API endpoint:
+ * const dbRecords = await db.query('SELECT * FROM CELL_CONFIG_HISTORY WHERE CELLNAME = ?', [cellName]);
+ * const response = transformDbRecords(dbRecords);
+ * return json(response);
+ */
+export declare function transformDbRecords(records: CellHistoryDbRecord[]): CellHistoryApiResponse[];
+/**
+ * Example usage in a SvelteKit API endpoint:
+ *
+ * ```typescript
+ * // src/routes/api/cell-history/[cellName]/+server.ts
+ * import { json } from '@sveltejs/kit';
+ * import { transformDbRecords } from './history-api-helper';
+ * import { db } from '../../server/database';
+ *
+ * export async function GET({ params }) {
+ *   const { cellName } = params;
+ *
+ *   const dbRecords = await db.query(`
+ *     SELECT * FROM CELL_CONFIG_HISTORY
+ *     WHERE CELLNAME = :cellName
+ *     ORDER BY CONFIG_DATE DESC
+ *   `, { cellName });
+ *
+ *   return json(transformDbRecords(dbRecords));
+ * }
+ * ```
+ */

package/dist/core/CellTable/history-api-helper.js

@@ -0,0 +1,83 @@
+/**
+ * Cell History API Helper
+ *
+ * Transform functions for converting database records to frontend-ready format.
+ * Use these in your API endpoint before sending the response.
+ */
+/**
+ * Format a date to YYYY.MM.DD string
+ */
+export function formatConfigDate(date) {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}.${month}.${day}`;
+}
+/**
+ * Transform a single database record to API response format
+ */
+export function transformDbRecord(record) {
+    // Detect which fields changed
+    const changedFields = [];
+    if (record.ANTENNA_TYPE !== record.PREV_ANTENNA_TYPE) {
+        changedFields.push('antenna');
+    }
+    if (record.ANTOUTPUTPWR !== record.PREV_ANTOUTPUTPWR) {
+        changedFields.push('power');
+    }
+    if (record.MECHANIC_TILT !== record.PREV_MECHANIC_TILT) {
+        changedFields.push('mechanicalTilt');
+    }
+    if (record.ELECTRONIC_TILT !== record.PREV_ELECTRONIC_TILT) {
+        changedFields.push('electricalTilt');
+    }
+    return {
+        cellName: record.CELLNAME,
+        configDate: formatConfigDate(record.CONFIG_DATE),
+        antenna: record.ANTENNA_TYPE,
+        prevAntenna: record.PREV_ANTENNA_TYPE,
+        power: record.ANTOUTPUTPWR,
+        prevPower: record.PREV_ANTOUTPUTPWR,
+        mechanicalTilt: record.MECHANIC_TILT,
+        prevMechanicalTilt: record.PREV_MECHANIC_TILT,
+        electricalTilt: record.ELECTRONIC_TILT,
+        prevElectricalTilt: record.PREV_ELECTRONIC_TILT,
+        hasChanges: changedFields.length > 0,
+        changedFields
+    };
+}
+/**
+ * Transform an array of database records to API response format
+ *
+ * @example
+ * // In your API endpoint:
+ * const dbRecords = await db.query('SELECT * FROM CELL_CONFIG_HISTORY WHERE CELLNAME = ?', [cellName]);
+ * const response = transformDbRecords(dbRecords);
+ * return json(response);
+ */
+export function transformDbRecords(records) {
+    return records.map(transformDbRecord);
+}
+/**
+ * Example usage in a SvelteKit API endpoint:
+ *
+ * ```typescript
+ * // src/routes/api/cell-history/[cellName]/+server.ts
+ * import { json } from '@sveltejs/kit';
+ * import { transformDbRecords } from './history-api-helper';
+ * import { db } from '../../server/database';
+ *
+ * export async function GET({ params }) {
+ *   const { cellName } = params;
+ *
+ *   const dbRecords = await db.query(`
+ *     SELECT * FROM CELL_CONFIG_HISTORY
+ *     WHERE CELLNAME = :cellName
+ *     ORDER BY CONFIG_DATE DESC
+ *   `, { cellName });
+ *
+ *   return json(transformDbRecords(dbRecords));
+ * }
+ * ```
+ */

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

@@ -9,6 +9,7 @@ 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 { transformDbRecord, transformDbRecords, formatConfigDate, type CellHistoryDbRecord, type CellHistoryApiResponse } from './history-api-helper';
 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, 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';
+export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent, CellTableColumn, ColumnGroups, CellHistoryData, GroupOption } from './types';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, createHistoryChangeFormatter, historyDateFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/index.js

@@ -10,9 +10,11 @@ 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';
+// History API helpers (for backend transformation)
+export { transformDbRecord, transformDbRecords, formatConfigDate } from './history-api-helper';
 // Re-export shared demo data utilities for convenience
 // Note: Cell type is NOT re-exported here to avoid conflicts with map-v2
 // Import Cell from '$lib/shared/demo' or '@smartnet360/svelte-components' directly
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS } from '../../shared/demo';
 // Configuration utilities
-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 } from './column-config';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, createHistoryChangeFormatter, historyDateFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

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

@@ -23,6 +23,15 @@ export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'networ
 export interface ColumnVisibility {
     [key: string]: boolean;
 }
+/**
+ * Grouping option for toolbar dropdown
+ */
+export interface GroupOption {
+    /** Field name to group by (or 'none') */
+    value: string;
+    /** Display label in dropdown */
+    label: string;
+}
 /**
  * Technology color mapping
  */
@@ -133,3 +142,31 @@ export interface ColumnGroups {
     kpi: string[];
     history: string[];
 }
+/**
+ * Cell configuration history record
+ * Each record represents a point in time where a cell's configuration changed
+ */
+export interface CellHistoryData {
+    /** Cell name identifier */
+    CELLNAME: string;
+    /** Frequency in MHz (e.g., 1800, 2100, 3500) */
+    FREQUENCY: number;
+    /** Date of configuration change (ISO 8601 format) */
+    CONFIG_DATE: string;
+    /** Current antenna type at this config date */
+    ANTENNA_TYPE: string;
+    /** Previous antenna type before this change */
+    PREV_ANTENNA_TYPE: string;
+    /** Current antenna output power (dBm) */
+    ANTOUTPUTPWR: number;
+    /** Previous antenna output power */
+    PREV_ANTOUTPUTPWR: number;
+    /** Current mechanical tilt (degrees) */
+    MECHANIC_TILT: number;
+    /** Previous mechanical tilt */
+    PREV_MECHANIC_TILT: number;
+    /** Current electrical tilt (degrees) */
+    ELECTRONIC_TILT: number;
+    /** Previous electrical tilt */
+    PREV_ELECTRONIC_TILT: number;
+}

package/package.json

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