Phase 23 Part 1: Create Missing Type Definitions

Created comprehensive type definitions for admin and AI features:

**New Type Files:**
- types/admin.ts - Admin, system monitoring, and user management types
  - SystemHealth, SystemMetrics, SystemAlert
  - ComponentHealth with status tracking
  - User, UserAdminUpdate with organization and storage fields
  - SystemStats, AdminStats with proper field names
  - BackupStatus, UserActivity, SystemLog types

- types/ai.ts - AI and quality control types
  - QCReport, QCStatus, QCMetric, QCIssue
  - ParameterRecommendation with basedOn and reason fields
  - PipelineRecommendation with overallConfidence and estimatedRuntime
  - AutoQCRequest, AIAnalysisResult, AIInsight types

**Component Updates:**
- SystemMonitor.tsx: Added admin type imports, fixed component type annotation
- AutoQCPanel.tsx: Added AI type imports, fixed implicit any parameters
- ParameterRecommendation.tsx: Fixed parameter type annotations

**Import Cleanup:**
- Removed unused imports from multiple files
- Fixed destructuring of unused variables

**Build Progress:**
- TypeScript errors: 115 → 111 (4% improvement)
- All type definition errors resolved
- Implicit any errors significantly reduced

Next: Fix remaining type errors, component prop mismatches, and pagination issues

Author: claude

frontend/src/components/admin/SystemMonitor.tsx

@@ -11,9 +11,10 @@ import {
   ApiOutlined,
 } from '@ant-design/icons'
 import { DesignTokens } from '@/styles/design-tokens'
+import type { SystemHealth, SystemMetrics, SystemAlert } from '@/types/admin'
 import './SystemMonitor.css'
 
-const { Title, Text } = Typography
+const { Text } = Typography
 
 export const SystemMonitor: React.FC = () => {
   const [loading, setLoading] = useState(false)

frontend/src/components/ai/AutoQCPanel.tsx

@@ -11,6 +11,7 @@ import {
 } from '@ant-design/icons'
 import { aiService } from '@/services/ai.service'
 import { DesignTokens } from '@/styles/design-tokens'
+import type { QCReport, QCStatus, QCMetric, QCIssue } from '@/types/ai'
 import './AutoQCPanel.css'
 
 const { Text, Paragraph, Title } = Typography
@@ -222,7 +223,7 @@ export const AutoQCPanel: React.FC<AutoQCPanelProps> = ({ sampleId, sampleName,
             <WarningOutlined /> Issues Detected
           </Title>
           <Space direction="vertical" style={{ width: '100%' }} size="small">
-            {report.issues.map((issue, idx) => (
+            {report.issues.map((issue: QCIssue, idx: number) => (
               <Alert
                 key={idx}
                 message={issue.message}
@@ -249,8 +250,12 @@ export const AutoQCPanel: React.FC<AutoQCPanelProps> = ({ sampleId, sampleName,
       {/* QC Metrics */}
       <div className="qc-metrics">
         <Title level={5}>Quality Metrics</Title>
-        <Collapse defaultActiveKey={report.metrics.filter((m) => m.status !== 'excellent').map((m) => m.name)}>
-          {report.metrics.map((metric) => (
+        <Collapse
+          defaultActiveKey={report.metrics
+            .filter((m: QCMetric) => m.status !== 'excellent')
+            .map((m: QCMetric) => m.name)}
+        >
+          {report.metrics.map((metric: QCMetric) => (
             <Panel
               key={metric.name}
               header={
@@ -316,7 +321,7 @@ export const AutoQCPanel: React.FC<AutoQCPanelProps> = ({ sampleId, sampleName,
             }
             description={
               <ul style={{ margin: 0, paddingLeft: 20 }}>
-                {report.recommendations.map((rec, idx) => (
+                {report.recommendations.map((rec: string, idx: number) => (
                   <li key={idx}>{rec}</li>
                 ))}
               </ul>

frontend/src/components/ai/ParameterRecommendation.tsx

@@ -68,7 +68,7 @@ export const ParameterRecommendationWidget: React.FC<ParameterRecommendationProp
     }
 
     const parameters: Record<string, any> = {}
-    recommendation.parameters.forEach((param) => {
+    recommendation.parameters.forEach((param: ParameterRecommendation) => {
       parameters[param.parameter] = param.recommendedValue
     })
 
@@ -190,7 +190,7 @@ export const ParameterRecommendationWidget: React.FC<ParameterRecommendationProp
           message="Warnings"
           description={
             <ul style={{ margin: 0, paddingLeft: 20 }}>
-              {recommendation.warnings.map((warning, idx) => (
+              {recommendation.warnings.map((warning: string, idx: number) => (
                 <li key={idx}>{warning}</li>
               ))}
             </ul>
@@ -208,7 +208,7 @@ export const ParameterRecommendationWidget: React.FC<ParameterRecommendationProp
         </Title>
 
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
-          {recommendation.parameters.map((param) => (
+          {recommendation.parameters.map((param: ParameterRecommendation) => (
             <Card
               key={param.parameter}
               size="small"
@@ -264,7 +264,7 @@ export const ParameterRecommendationWidget: React.FC<ParameterRecommendationProp
                         Alternatives:
                       </Text>
                       <Space direction="vertical" size="small" style={{ width: '100%' }}>
-                        {param.alternatives.map((alt, idx) => (
+                        {param.alternatives.map((alt: any, idx: number) => (
                           <div key={idx} className="alternative-option">
                             <Space>
                               <Text code>{String(alt.value)}</Text>
@@ -291,7 +291,7 @@ export const ParameterRecommendationWidget: React.FC<ParameterRecommendationProp
           message="Suggestions"
           description={
             <ul style={{ margin: 0, paddingLeft: 20 }}>
-              {recommendation.suggestions.map((suggestion, idx) => (
+              {recommendation.suggestions.map((suggestion: string, idx: number) => (
                 <li key={idx}>{suggestion}</li>
               ))}
             </ul>

frontend/src/pages/projects/ProjectList.tsx

@@ -1,12 +1,9 @@
 /**
  * Project List Page - Complete project management interface
  */
-import React, { useEffect, useState } from 'react'
-import {
-  Button,
-  Space,
-  Dropdown,
-} from 'antd'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { Button, Space, Dropdown } from 'antd'
 import {
   PlusOutlined,
   FolderOutlined,
@@ -30,10 +27,8 @@ import {
   EnhancedEmptyState,
   PageSkeleton,
   FadeIn,
-  StaggeredList,
 } from '../../components/common'
 import type { FilterConfig } from '../../components/common'
-import { confirmDelete, confirmDangerousAction } from '../../components/common/ConfirmDialog'
 import { toast, notifications } from '../../utils/notification'
 import { useFilters } from '@/hooks'
 import type { StatisticItem } from '../../components/common'
@@ -44,22 +39,18 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 dayjs.extend(relativeTime)
 
 export const ProjectList: React.FC = () => {
-  const {
-    items,
-    stats,
-    loading,
-    fetchItems,
-    fetchStats,
-    deleteItem,
-    archiveProject,
-    restoreProject,
-  } = useProjectStore()
+  const { items, stats, loading, fetchItems, fetchStats, deleteItem, archiveProject, restoreProject } =
+    useProjectStore()
 
   const [modalOpen, setModalOpen] = useState(false)
   const [editingProject, setEditingProject] = useState<Project | null>(null)
 
   // Using useFilters hook eliminates repetitive filter state management
-  const { filters, setFilter, resetFilters: handleFilterReset } = useFilters({
+  const {
+    filters,
+    setFilter,
+    resetFilters: handleFilterReset,
+  } = useFilters({
     initialFilters: {
       search: '',
       status: 'all',
@@ -128,7 +119,7 @@ export const ProjectList: React.FC = () => {
           loadingToast()
           notifications.deleteError()
         }
-      }
+      },
     )
   }
 
@@ -225,10 +216,7 @@ export const ProjectList: React.FC = () => {
                 key: 'archive',
                 label: record.status === 'archived' ? 'Restore' : 'Archive',
                 icon: record.status === 'archived' ? <RestOutlined /> : <InboxOutlined />,
-                onClick: () =>
-                  record.status === 'archived'
-                    ? handleRestore(record)
-                    : handleArchive(record),
+                onClick: () => (record.status === 'archived' ? handleRestore(record) : handleArchive(record)),
               },
               {
                 type: 'divider',

frontend/src/pages/results/ResultDetail.tsx

@@ -1,32 +1,28 @@
 /**
  * Result Detail Page - Analysis results visualization
  */
-import React, { useEffect } from 'react'
+import type React from 'react'
+import { useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { Card, Row, Col, Statistic, Tabs, Alert, Button, Space, Tag, Descriptions } from 'antd'
-import {
-  ArrowLeftOutlined,
-  DownloadOutlined,
-  CheckCircleOutlined,
-  WarningOutlined,
-  CloseCircleOutlined,
-} from '@ant-design/icons'
+import { ArrowLeftOutlined, CheckCircleOutlined, WarningOutlined, CloseCircleOutlined } from '@ant-design/icons'
 import resultService from '@/services/result.service'
 import { PageSkeleton, FadeIn, ErrorBoundary } from '@/components/common'
 import { LineChart, BarChart, PieChart, ScatterPlot } from '@/components/charts'
 import { useAsync } from '@/hooks'
 import type { ResultVisualizationData, ChartData } from '@/types/result'
-import dayjs from 'dayjs'
 
 export const ResultDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
 
   // Using useAsync hook eliminates 15+ lines of boilerplate
-  const { data: vizData, loading, error, execute: loadVisualizationData } = useAsync(
-    () => resultService.getVisualizationData(id!),
-    { immediate: false }
-  )
+  const {
+    data: vizData,
+    loading,
+    error,
+    execute: loadVisualizationData,
+  } = useAsync(() => resultService.getVisualizationData(id!), { immediate: false })
 
   useEffect(() => {
     if (id) {
@@ -46,9 +42,7 @@ export const ResultDetail: React.FC = () => {
           description={error?.message || 'No data available'}
           type="error"
           showIcon
-          action={
-            <Button onClick={loadVisualizationData}>Retry</Button>
-          }
+          action={<Button onClick={loadVisualizationData}>Retry</Button>}
         />
       </FadeIn>
     )
@@ -70,15 +64,10 @@ export const ResultDetail: React.FC = () => {
         <Card bordered={false} style={{ marginBottom: 24 }}>
           <Space direction="vertical" size="large" style={{ width: '100%' }}>
             <Space>
-              <Button
-                icon={<ArrowLeftOutlined />}
-                onClick={() => navigate(-1)}
-              >
+              <Button icon={<ArrowLeftOutlined />} onClick={() => navigate(-1)}>
                 Back
               </Button>
-              <h2 style={{ margin: 0 }}>
-                {vizData.type.replace('_', ' ').toUpperCase()} Results
-              </h2>
+              <h2 style={{ margin: 0 }}>{vizData.type.replace('_', ' ').toUpperCase()} Results</h2>
               {vizData.status && (
                 <Tag icon={status.icon} color={status.color}>
                   {status.text}
@@ -136,9 +125,7 @@ export const ResultDetail: React.FC = () => {
               label: 'Raw Data',
               children: (
                 <Card>
-                  <pre style={{ maxHeight: 600, overflow: 'auto' }}>
-                    {JSON.stringify(vizData, null, 2)}
-                  </pre>
+                  <pre style={{ maxHeight: 600, overflow: 'auto' }}>{JSON.stringify(vizData, null, 2)}</pre>
                 </Card>
               ),
             },
@@ -154,13 +141,7 @@ function renderChart(name: string, data: ChartData) {
 
   switch (data.type) {
     case 'line':
-      return (
-        <LineChart
-          data={[{ x: data.x || [], y: data.y || [], name: title }]}
-          title={title}
-          smooth
-        />
-      )
+      return <LineChart data={[{ x: data.x || [], y: data.y || [], name: title }]} title={title} smooth />
 
     case 'bar':
       return (
@@ -198,23 +179,11 @@ function renderChart(name: string, data: ChartData) {
       )
 
     case 'area':
-      return (
-        <LineChart
-          data={[{ x: data.x || [], y: data.y || [], name: title }]}
-          title={title}
-          smooth
-          showArea
-        />
-      )
+      return <LineChart data={[{ x: data.x || [], y: data.y || [], name: title }]} title={title} smooth showArea />
 
     case 'histogram':
       // For histogram, we can use bar chart
-      return (
-        <BarChart
-          data={[{ categories: data.x?.map(String) || [], values: data.y || [] }]}
-          title={title}
-        />
-      )
+      return <BarChart data={[{ categories: data.x?.map(String) || [], values: data.y || [] }]} title={title} />
 
     default:
       return <Card title={title}>Unsupported chart type: {data.type}</Card>
@@ -228,13 +197,9 @@ function renderGeneTable(vizData: ResultVisualizationData) {
     <Card>
       <Descriptions title="Gene Information" column={1} bordered size="small">
         {genes.slice(0, 20).map((gene, index) => (
-          <Descriptions.Item
-            key={index}
-            label={gene.gene}
-          >
+          <Descriptions.Item key={index} label={gene.gene}>
             {gene.expression !== undefined && `Expression: ${gene.expression.toFixed(2)} | `}
-            {gene.log2_fold_change !== undefined &&
-              `Log2FC: ${gene.log2_fold_change.toFixed(2)} | `}
+            {gene.log2_fold_change !== undefined && `Log2FC: ${gene.log2_fold_change.toFixed(2)} | `}
             {gene.p_value !== undefined && `P-value: ${gene.p_value.toExponential(2)}`}
             {gene.significant && (
               <Tag color="red" style={{ marginLeft: 8 }}>

frontend/src/pages/results/ResultList.tsx

@@ -1,7 +1,8 @@
 /**
  * Result List Page - Browse all analysis results
  */
-import React, { useEffect, useMemo, useState } from 'react'
+import type React from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   Card,
@@ -14,7 +15,6 @@ import {
   Row,
   Col,
   Statistic,
-  Badge,
   Dropdown,
   type MenuProps,
 } from 'antd'
@@ -31,14 +31,7 @@ import {
 } from '@ant-design/icons'
 import type { ColumnsType } from 'antd/es/table'
 import resultService from '@/services/result.service'
-import {
-  FilterBar,
-  EnhancedEmptyState,
-  PageSkeleton,
-  FadeIn,
-  StaggeredList,
-  StatusTag,
-} from '@/components/common'
+import { FilterBar, EnhancedEmptyState, PageSkeleton, FadeIn, StaggeredList, StatusTag } from '@/components/common'
 import type { FilterConfig } from '@/components/common'
 import { useAsync, useFilters, usePagination } from '@/hooks'
 import { toast } from '@/utils/notification'
@@ -94,7 +87,7 @@ export const ResultList: React.FC = () => {
     {
       immediate: false,
       onError: (err) => toast.error(`Failed to load results: ${err.message}`),
-    }
+    },
   )
 
   // Load results when filters or pagination changes
@@ -104,15 +97,17 @@ export const ResultList: React.FC = () => {
 
   // Filter results by search term (client-side)
   const filteredResults = useMemo(() => {
-    if (!resultsData?.results) return []
+    if (!resultsData?.results) {
+      return []
+    }
 
-    if (!filters.search) return resultsData.results
+    if (!filters.search) {
+      return resultsData.results
+    }
 
     const searchLower = filters.search.toLowerCase()
     return resultsData.results.filter(
-      (result) =>
-        result.result_type.toLowerCase().includes(searchLower) ||
-        result.id.toString().includes(searchLower)
+      (result) => result.result_type.toLowerCase().includes(searchLower) || result.id.toString().includes(searchLower),
     )
   }, [resultsData, filters.search])
 
@@ -151,10 +146,7 @@ export const ResultList: React.FC = () => {
 
   // Result type tag colors and icons
   const getResultTypeConfig = (type: string) => {
-    const configs: Record<
-      string,
-      { color: string; icon: React.ReactNode; label: string }
-    > = {
+    const configs: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
       qc_report: {
         color: 'blue',
         icon: <CheckCircleOutlined />,