Fix TypeScript errors for CI build

- Remove unused imports and variables
- Add null checks for rayforceClient
- Fix type mismatches (cellStyle, getColumn)
- Fix property names (typedArray instead of toTypedArray)
- Remove loading prop from AgGrid (not supported)

Author: singaraiona

apps/dashboard/src/App.tsx

@@ -100,9 +100,9 @@ export function App() {
     });
 
     return () => {
-      rayforceClient.off('connected', handleConnected);
-      rayforceClient.off('disconnected', handleDisconnected);
-      rayforceClient.off('error', handleError);
+      rayforceClient?.off('connected', handleConnected);
+      rayforceClient?.off('disconnected', handleDisconnected);
+      rayforceClient?.off('error', handleError);
       rayforceClient?.disconnect();
     };
   }, [sdkReady, isAuthenticated]); // Only depend on sdkReady and isAuthenticated

apps/dashboard/src/components/DashboardCanvas.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
-import { useLensStore, Widget as WidgetType, Query } from '../store';
+import { useLensStore, Widget as WidgetType } from '../store';
 import { shallow } from 'zustand/shallow';
 import { DataGridWidget, paginateQuery, countQuery } from './widgets/DataGrid';
 import { ChartWidget } from './widgets/Chart';
@@ -14,9 +14,6 @@ export function DashboardCanvas() {
   const setQueryResult = useLensStore(state => state.setQueryResult);
   const setQueryError = useLensStore(state => state.setQueryError);
   const setQueryRunning = useLensStore(state => state.setQueryRunning);
-  const appMode = useLensStore(state => state.appMode);
-  
-  const isDevMode = appMode === 'dev';
 
   const activeDashboard = useLensStore(state => 
     state.workspace.dashboards.find(d => d.id === state.workspace.activeDashboardId)
@@ -45,7 +42,7 @@ export function DashboardCanvas() {
           console.log(`[DashboardCanvas] Running query "${query.name}" (${queryId.slice(0,8)}): ${query.code}`);
           setQueryRunning(query.id, true);
           try {
-            const result = await rayforceClient.execute(query.code);
+            const result = await rayforceClient!.execute(query.code);
             console.log(`[DashboardCanvas] Query "${query.name}" result:`, result.type, result.type === 'error' ? result.data : '');
             if (result.type === 'error') {
               setQueryError(query.id, String(result.data));
@@ -91,7 +88,7 @@ export function DashboardCanvas() {
 
         setQueryRunning(queryId, true);
         try {
-          const result = await rayforceClient.execute(currentQuery.code);
+          const result = await rayforceClient!.execute(currentQuery.code);
           if (result.type === 'error') {
             setQueryError(queryId, String(result.data));
           } else {
@@ -355,7 +352,7 @@ function WidgetWrapper({ widget, isSelected, onSelect }: WidgetWrapperProps) {
 
   // Use page data if available, otherwise use bound query result
   const gridData = pageData || boundQuery?.lastResult;
-  const isServerSidePagination = boundQuery && isSimpleTableQuery(boundQuery.code) !== null;
+  const isServerSidePagination = boundQuery ? isSimpleTableQuery(boundQuery.code) !== null : false;
 
   // Inject totalRows into result for server-side pagination
   const dataWithRowCount = gridData && totalRows !== undefined ? {

apps/dashboard/src/components/Header.tsx

@@ -20,7 +20,6 @@ export function Header({ onConnect }: HeaderProps) {
   const serverUrl = useLensStore(state => state.serverUrl);
   const setServerUrl = useLensStore(state => state.setServerUrl);
   const appMode = useLensStore(state => state.appMode);
-  const toggleAppMode = useLensStore(state => state.toggleAppMode);
   const user = useLensStore(state => state.user);
   const logout = useLensStore(state => state.logout);
 

apps/dashboard/src/components/Sidebar.tsx

@@ -97,7 +97,6 @@ function QueriesPanel() {
   const setQueryResult = useLensStore(state => state.setQueryResult);
   const setQueryError = useLensStore(state => state.setQueryError);
   const setQueryRunning = useLensStore(state => state.setQueryRunning);
-  const connectionStatus = useLensStore(state => state.connectionStatus);
 
   const runQuery = async (queryId: string, code: string) => {
     if (!rayforceClient) {

apps/dashboard/src/components/widgets/Chart.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import ReactECharts from 'echarts-for-react';
 import type { EChartsOption } from 'echarts';
 import type { RayforceResult } from '../../lib/rayforce';
@@ -41,13 +41,13 @@ function extractData(rawData: unknown): { categories: string[]; values: number[]
     // Try to get JS data
     if (result.toJS) {
       try {
-        data = result.toJS();
+        data = result.toJS() as Record<string, unknown>;
       } catch (e) {
         console.error('[Chart] toJS failed:', e);
         return { categories, values, series };
       }
     } else if (result.data !== undefined) {
-      data = result.data;
+      data = result.data as Record<string, unknown>;
     }
   }
 
@@ -311,7 +311,7 @@ export function ChartWidget({ data, chartType }: ChartWidgetProps) {
           },
           series: [{
             type: 'candlestick' as const,
-            data: values.map((v, i) => [v, v * 1.02, v * 0.98, v * 1.01]),
+            data: values.map((v) => [v, v * 1.02, v * 0.98, v * 1.01]),
             itemStyle: {
               color: '#22c55e',
               color0: '#ef4444',

apps/dashboard/src/components/widgets/DataGrid.tsx

@@ -12,7 +12,7 @@ interface CustomHeaderProps extends IHeaderParams {
 }
 
 function CustomHeader(props: CustomHeaderProps) {
-  const { displayName, columnType, column, enableSorting, setSort } = props;
+  const { displayName, columnType, enableSorting, setSort } = props;
   const [sortState, setSortState] = useState<'asc' | 'desc' | null>(null);
 
   const handleSort = () => {
@@ -68,9 +68,6 @@ export interface CellColorRule {
 // Default color rules - empty by default, user can configure via Widget Config
 const DEFAULT_COLOR_RULES: CellColorRule[] = [];
 
-// User-configurable color palettes for categorical columns
-// Empty by default - colors only applied when explicitly configured via Widget Config
-const DEFAULT_CATEGORY_COLORS: Record<string, string> = {};
 
 // ============================================================================
 // CELL RENDERERS
@@ -578,7 +575,7 @@ export function DataGridWidget({
       // Apply user-configured column colors (from columnColorConfigs)
       const colorConfig = columnColorConfigs.find(cc => cc.column === name);
       if (colorConfig) {
-        def.cellStyle = (params: CellClassParams) => {
+        def.cellStyle = (params: CellClassParams): Record<string, string | number> | null | undefined => {
           const val = params.value;
 
           if (colorConfig.type === 'preset' && colorConfig.preset) {
@@ -605,7 +602,7 @@ export function DataGridWidget({
                       matches = numVal >= (rule.min ?? -Infinity) && numVal < (rule.max ?? Infinity);
                       break;
                   }
-                  if (matches) return rule.style as React.CSSProperties;
+                  if (matches) return rule.style as Record<string, string | number>;
                 }
               }
             }
@@ -687,8 +684,7 @@ export function DataGridWidget({
           suppressRowClickSelection={true}
           headerHeight={32}
           rowHeight={28}
-          getRowId={(params: GetRowIdParams) => params.data?.__rowId || params.data?.id || String(params.rowIndex)}
-          loading={isLoading}
+          getRowId={(params: GetRowIdParams) => params.data?.__rowId || params.data?.id || String(Math.random())}
         />
       </div>
 

apps/dashboard/src/components/widgets/Text.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { RayforceResult } from '../../lib/rayforce';
 
 interface TextWidgetProps {

apps/dashboard/src/lib/logger.ts

@@ -122,7 +122,7 @@ class Logger {
     // Use original console to avoid infinite loop
     const msg = `[${source}] ${message}`;
     if (data !== undefined) {
-      (console as Record<string, (...args: unknown[]) => void>)[consoleMethod](msg, data);
+      (console as unknown as Record<string, (...args: unknown[]) => void>)[consoleMethod](msg, data);
     }
   }
 

apps/dashboard/src/lib/rayforce.ts

@@ -87,10 +87,6 @@ interface Table extends RayObject {
   toRows(): Record<string, unknown>[];
 }
 
-interface RayforceGlobal {
-  init(options?: { wasmPath?: string; locateFile?: (file: string) => string }): Promise<RayforceSDK>;
-  Types: typeof Types;
-}
 
 // IPC header constants (from rayforce/core/serde.h)
 // Header: prefix(4) version(1) flags(1) endian(1) msgtype(1) size(8) = 16 bytes
@@ -109,7 +105,7 @@ export interface RayforceResult {
   source?: 'local' | 'remote';
 
   /** Get column as TypedArray (zero-copy) */
-  getColumn?: (name: string) => Float64Array | Int32Array | BigInt64Array | Uint8Array | null;
+  getColumn?: (name: string) => ArrayBufferView | null;
   /** Convert to JS (use sparingly, triggers full copy) */
   toJS?: () => unknown;
 }
@@ -166,7 +162,6 @@ export class RayforceClient {
   private pendingRequests: Map<number, { resolve: (value: RayforceResult) => void; reject: (error: Error) => void }> = new Map();
   private requestId = 0;
   private sdk: RayforceSDK | null = null;
-  private wasmModule: EmscriptenModule | null = null;
 
   constructor() {
     // SDK loaded on demand
@@ -189,7 +184,6 @@ export class RayforceClient {
     }
 
     this.sdk = sdk;
-    this.wasmModule = sdk._wasm;
 
     logInfo('Rayforce', `SDK loaded, version: ${this.sdk.version}`);
   }
@@ -429,7 +423,6 @@ export class RayforceClient {
       setTimeout(() => {
         if (this.pendingRequests.has(id)) {
           this.pendingRequests.delete(id);
-          const execTime = performance.now() - startTime;
           logError('Query', `[REMOTE] Timeout after ${timeout}ms`);
           reject(new Error(`Query timeout after ${timeout}ms`));
         }
@@ -600,7 +593,7 @@ export class RayforceClient {
   }
 
   private parseVector(view: DataView, offset: number, type: number): RayforceResult {
-    const attrs = view.getUint8(offset);
+    // Skip attrs byte
     offset += 1;
     const len = Number(view.getBigInt64(offset, true));
     offset += 8;
@@ -693,7 +686,7 @@ export class RayforceClient {
           columns,
           rowCount,
           toJS: () => rows,
-          getColumn: (name: string) => wasmTable.col(name)?.toTypedArray?.() || null,
+          getColumn: (name: string) => wasmTable.col(name)?.typedArray || null,
         };
       } catch {
         // Fall back to JS-only result
@@ -725,7 +718,7 @@ export class RayforceClient {
     // Simple dict: parse keys and values
     const { data: keys, bytesRead: keyBytes } = this.parseAnyWithSize(view, offset);
     offset += keyBytes;
-    const { data: values, bytesRead: valBytes } = this.parseAnyWithSize(view, offset);
+    const { data: values } = this.parseAnyWithSize(view, offset);
 
     // If keys are symbols and values are vectors, create a table-like structure
     if (Array.isArray(keys) && Array.isArray(values)) {
@@ -994,7 +987,6 @@ export class RayforceClient {
     }
 
     const type = Math.abs(obj.type);
-    const sdk = this.sdk!;
 
     // Table
     if (type === Types.TABLE) {
@@ -1011,7 +1003,7 @@ export class RayforceClient {
         getColumn: (name: string) => {
           const col = table.col(name);
           if (!col) return null;
-          return col.toTypedArray?.() || null;
+          return col.typedArray || null;
         },
         // Lazy JS conversion
         toJS: () => table.toRows(),
@@ -1020,11 +1012,12 @@ export class RayforceClient {
 
     // Vector
     if (obj.isVector) {
+      const vec = obj as Vector;
       return {
         type: 'vector',
         rayObject: obj,
         // Zero-copy access for numeric vectors
-        getColumn: () => obj.toTypedArray?.() || null,
+        getColumn: () => vec.typedArray || null,
         toJS: () => obj.toJS(),
       };
     }