refactor: tighten TypeScript config and fix all type errors (#246)

Enable noUncheckedIndexedAccess and exactOptionalPropertyTypes in tsconfig.json.
Fix all resulting errors across the codebase including:

- Convert i18n JSON files from JS object literals to valid JSON
- Fix SLATrendChart missing closing brace in early return
- Add explicit | undefined to optional interface properties for EOPT compat
- Fix noUncheckedIndexedAccess violations with non-null assertions
- Fix actionLabel/onAction → primaryAction prop migration in route-state
- Fix various type mismatches in API services, hooks, and components

Closes #160

Author: judithJn

package-lock.json

@@ -144,8 +144,7 @@ export default function SlaConfigPage() {
       <RouteErrorState
         title="Configuration unavailable"
         description={error}
-        actionLabel="Try again"
-        onAction={() => void fetchConfigs()}
+        primaryAction={{ label: "Try again", onClick: () => void fetchConfigs() }}
       />
     );
   }

src/app/config/page.tsx

@@ -49,6 +49,8 @@ export default function OutageDetailsPage() {
   const [isResolveModalOpen, setIsResolveModalOpen] = useState(false);
   const [resolutionPayment, setResolutionPayment] = useState<OutageResolutionPayment | null>(null);
 
+  const isResolved = outage?.status === "resolved";
+
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
   const [editForm, setEditForm] = useState<OutageUpdate>({});
@@ -87,7 +89,7 @@ export default function OutageDetailsPage() {
   // Poll for updates while outage is open
   useEffect(() => {
     const handlePaletteResolve = () => {
-      if (!isResolved && !resolving) {
+      if (!outage || outage.status !== "resolved" && !resolving) {
         setIsResolveModalOpen(true);
       }
     };
@@ -96,7 +98,7 @@ export default function OutageDetailsPage() {
     return () => {
       window.removeEventListener("command-palette:resolve-outage", handlePaletteResolve);
     };
-  }, [isResolved, resolving]);
+  }, [outage, resolving]);
 
   useEffect(() => {
     if (!id || !outage || outage.status === "resolved") return;
@@ -196,8 +198,7 @@ export default function OutageDetailsPage() {
       <RouteErrorState
         title="Error loading outage"
         description={error}
-        actionLabel="Reload page"
-        onAction={() => window.location.reload()}
+        primaryAction={{ label: "Reload page", onClick: () => window.location.reload() }}
       />
     );
   }
@@ -211,7 +212,6 @@ export default function OutageDetailsPage() {
     );
   }
 
-  const isResolved = outage.status === "resolved";
   const timeline = buildTimeline(outage);
 
   return (

src/app/outages/[id]/page.tsx

@@ -454,7 +454,7 @@ export default function SettingsPage() {
     try {
       await api.get(ENDPOINTS.wallets.friendbot(address));
 
-      const statusUserId = wallet?.user_id ?? activeUserId || address;
+      const statusUserId = wallet?.user_id ?? (activeUserId || address);
       const [statusResponse, balanceResponse] = await Promise.all([
         api.get<WalletStatus>(ENDPOINTS.wallets.status(statusUserId)),
         api.get<WalletBalance>(ENDPOINTS.wallets.balance(address)),

src/app/setting/page.tsx

@@ -86,7 +86,8 @@ function parseCSV(text: string): ParsedCSV {
     return result;
   };
 
-  const headers = parseLine(lines[0]).map((h) => h.replace(/^"|"$/g, ""));
+  const firstLine = lines[0];
+  const headers = firstLine ? parseLine(firstLine).map((h) => h.replace(/^"|"$/g, "")) : [];
   const allRows = lines.slice(1).map(parseLine);
 
   return {
@@ -202,7 +203,7 @@ async function buildPreview(file: File): Promise<PreviewState> {
     return { headers: [], rows: [], errors, warnings: [], totalRows: 0 };
   }
 
-  const headers = parsed.length > 0 ? Object.keys(parsed[0]) : [];
+  const headers = parsed.length > 0 && parsed[0] ? Object.keys(parsed[0]) : [];
   const rows = parsed.slice(0, MAX_PREVIEW_ROWS).map((r) => 
     headers.map((h) => String(r[h] ?? ""))
   );

src/components/bulk-import/bulk-import-view.tsx

@@ -44,6 +44,7 @@ const SLATrendChart: React.FC<SLATrendChartProps> = ({ data, onPointClick }) =>
       <p className="text-sm text-gray-500 dark:text-gray-400">No trend data available.</p>
     </div>
   );
+  }
 
   return (
     <div className="rounded-xl bg-white dark:bg-slate-900 p-5 shadow-sm">

src/components/dashboard/SLATrendChart.tsx

@@ -52,14 +52,16 @@ export default function SLADashboardView() {
     queryKey: ["dashboard-metrics", filters],
     queryFn: () => fetchDashboardMetrics(filters),
     staleTime: 30_000,
-    structuralSharing: (oldData, newData) => {
-      if (!oldData || !newData) return newData;
-      if (oldData.sla_compliance_percentage === newData.sla_compliance_percentage &&
-          oldData.penalties.total === newData.penalties.total &&
-          oldData.rewards.total === newData.rewards.total) {
-        return oldData;
+    structuralSharing: (oldData: unknown, newData: unknown) => {
+      if (!oldData || !newData) return newData as DashboardMetrics;
+      const o = oldData as DashboardMetrics;
+      const n = newData as DashboardMetrics;
+      if (o.sla_compliance_percentage === n.sla_compliance_percentage &&
+          o.penalties.total === n.penalties.total &&
+          o.rewards.total === n.rewards.total) {
+        return o;
       }
-      return newData;
+      return n;
     },
   });
 
@@ -119,8 +121,7 @@ export default function SLADashboardView() {
       <RouteErrorState
         title="Dashboard unavailable"
         description="We could not load the latest analytics right now."
-        actionLabel="Retry"
-        onAction={() => void primary.refetch()}
+        primaryAction={{ label: "Retry", onClick: () => void primary.refetch() }}
       />
     );
   }

src/components/dashboard/sla-dashboard-view.tsx

@@ -296,7 +296,7 @@ export function DataTable<TData, TValue>({
       const next = typeof updater === "function" ? updater(rowSelection ?? {}) : updater;
       onRowSelectionChange(next);
     },
-    getRowId,
+    getRowId: getRowId ?? ((row, index) => String(index)),
     manualPagination: !!onPaginationChange,
     manualSorting: !!onSortingChange,
     pageCount: pageCount ?? -1,
@@ -323,8 +323,8 @@ export function DataTable<TData, TValue>({
     estimateSize: () => ROW_ESTIMATED_HEIGHT[density] ?? 48,
     overscan: OVERSCAN,
     getItemKey: (index) => {
-      const row = rows[index];
-      return row?.id ?? String(index);
+      const row = rows[index]!;
+      return row.id ?? String(index);
     },
   });
 
@@ -395,7 +395,7 @@ export function DataTable<TData, TValue>({
               </thead>
               <tbody style={{ display: 'block', height: `${totalSize}px`, position: 'relative' }}>
                 {virtualRows.map((virtualRow) => {
-                  const row = rows[virtualRow.index];
+                  const row = rows[virtualRow.index]!;
                   return (
                     <tr 
                       key={row.id}

src/components/data-table.tsx

@@ -10,7 +10,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { driver, type Config, type Driver } from "driver.js";
+import { driver, type Config, type Driver, type DriveStep } from "driver.js";
 import "driver.js/dist/driver.css";
 
 import { useI18n } from "@/i18n/i18n";
@@ -70,8 +70,9 @@ export default function OnboardingTour() {
     startedRef.current = true;
 
     // Ensure we're on the first step's route before highlighting.
-    if (pathnameRef.current !== TOUR_STEPS[0].route) {
-      routerRef.current.push(TOUR_STEPS[0].route);
+    const firstStep = TOUR_STEPS[0]!;
+    if (pathnameRef.current !== firstStep.route) {
+      routerRef.current.push(firstStep.route);
     }
 
     const steps = TOUR_STEPS.map((step) => ({
@@ -80,9 +81,9 @@ export default function OnboardingTour() {
         title: resolveCopy(`onboarding.steps.${step.id}.title`, step.title),
         description: resolveCopy(`onboarding.steps.${step.id}.body`, step.body),
         side: step.side,
-        align: step.align,
+        align: step.align as "start" | "center" | "end" | undefined,
       },
-    }));
+    })) as DriveStep[];
 
     const config: Config = {
       steps,
@@ -110,7 +111,8 @@ export default function OnboardingTour() {
           d.destroy(); // last step → finish
           return;
         }
-        if (nextStep.route !== TOUR_STEPS[index].route) {
+        const currentStep = TOUR_STEPS[index]!;
+        if (nextStep.route !== currentStep.route) {
           routerRef.current.push(nextStep.route);
         }
         d.moveNext();
@@ -121,7 +123,8 @@ export default function OnboardingTour() {
         const index = d.getActiveIndex() ?? 0;
         const prevStep = TOUR_STEPS[index - 1];
         if (!prevStep) return;
-        if (prevStep.route !== TOUR_STEPS[index].route) {
+        const currentPrevStep = TOUR_STEPS[index]!;
+        if (prevStep.route !== currentPrevStep.route) {
           routerRef.current.push(prevStep.route);
         }
         d.movePrevious();

src/components/onboarding/OnboardingTour.tsx

@@ -39,7 +39,7 @@ interface Props {
 interface ResolvePayload {
   disputeId: string;
   action: "resolve" | "reject";
-  note?: string;
+  note?: string | undefined;
 }
 
 export function SLADisputesPanel({