refactor: update ESLint configuration and improve type safety across components

app/[locale]/(user)/aimodels/[modelId]/AIModelDetailsPage.tsx

@@ -12,7 +12,7 @@ import Metadata from './components/Metadata';
 import PrimaryData from './components/PrimaryData';
 import Versions from './components/Versions';
 
-const aiModelQuery: any = graphql(`
+const aiModelQuery = graphql(`
   query getAIModel($modelId: Int!) {
     getAiModel(modelId: $modelId) {
       id
@@ -102,7 +102,7 @@ export default function AIModelDetailsPage({
     }
   );
 
-  const modelData = (data as any)?.getAiModel;
+  const modelData = data?.getAiModel;
 
   const jsonLd = generateJsonLd({
     '@context': 'https://schema.org',

app/[locale]/(user)/aimodels/[modelId]/components/Details/index.tsx

@@ -2,8 +2,25 @@
 
 import { Text } from 'opub-ui';
 
+interface ModelEndpoint {
+  id?: string | number;
+  url?: string;
+  isPrimary?: boolean;
+  httpMethod?: string;
+  authType?: string;
+  timeoutSeconds?: number;
+  isActive?: boolean;
+}
+
+interface DetailsData {
+  inputSchema?: Record<string, unknown> | null;
+  outputSchema?: Record<string, unknown> | null;
+  metadata?: Record<string, unknown> | null;
+  endpoints?: ModelEndpoint[] | null;
+}
+
 interface DetailsProps {
-  data: any;
+  data: DetailsData;
 }
 
 export default function Details({ data }: DetailsProps) {
@@ -71,7 +88,7 @@ export default function Details({ data }: DetailsProps) {
             API Endpoints
           </Text>
           <div className="flex flex-col gap-3">
-            {data.endpoints.map((endpoint: any, index: number) => (
+            {data.endpoints.map((endpoint, index) => (
               <div
                 key={endpoint.id || index}
                 className="rounded-lg border border-greyExtralight p-4"

app/[locale]/(user)/aimodels/[modelId]/components/Metadata/index.tsx

@@ -4,8 +4,40 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Divider, Tag, Text, Tooltip } from 'opub-ui';
 
+interface MetadataProvider {
+  provider: string;
+  isPrimary?: boolean;
+}
+
+interface MetadataVersion {
+  isLatest?: boolean;
+  providers?: MetadataProvider[] | null;
+}
+
+interface MetadataData {
+  organization?: {
+    id: string;
+    name: string;
+    slug?: string | null;
+    logo?: { url: string } | null;
+  } | null;
+  user?: {
+    id: string;
+    fullName: string;
+    profilePicture?: { url: string } | null;
+  } | null;
+  modelType: string;
+  domain?: string | null;
+  versions?: MetadataVersion[] | null;
+  metadata?: {
+    usageLicense?: string;
+  } | null;
+  sectors?: Array<{ name: string }> | null;
+  geographies?: Array<{ name: string }> | null;
+}
+
 interface MetadataProps {
-  data: any;
+  data: MetadataData;
 }
 
 export default function Metadata({ data }: MetadataProps) {
@@ -67,9 +99,9 @@ export default function Metadata({ data }: MetadataProps) {
 
   // Get primary version info
   const primaryVersion =
-    data.versions?.find((v: any) => v.isLatest) || data.versions?.[0];
+    data.versions?.find((v) => v.isLatest) || data.versions?.[0];
   const primaryProvider =
-    primaryVersion?.providers?.find((p: any) => p.isPrimary) ||
+    primaryVersion?.providers?.find((p) => p.isPrimary) ||
     primaryVersion?.providers?.[0];
 
   const providerLabels: Record<string, string> = {
@@ -212,7 +244,7 @@ export default function Metadata({ data }: MetadataProps) {
               Sector
             </Text>
             <div className="flex flex-wrap gap-2">
-              {data.sectors.map((sector: any, index: number) => (
+              {data.sectors.map((sector, index) => (
                 <Tooltip content={sector.name} key={index}>
                   <Image
                     src={`/Sectors/${sector.name}.svg`}
@@ -237,7 +269,7 @@ export default function Metadata({ data }: MetadataProps) {
               Geography
             </Text>
             <div className="flex flex-wrap gap-2">
-              {data.geographies.map((geo: any, index: number) => (
+              {data.geographies.map((geo, index) => (
                 <Tag
                   key={index}
                   fillColor="var(--orange-secondary-color)"

app/[locale]/(user)/aimodels/[modelId]/components/PrimaryData/index.tsx

@@ -3,8 +3,18 @@
 import RichTextRenderer from '@/components/RichTextRenderer/RichTextRenderer';
 import { Tag, Text } from 'opub-ui';
 
+interface PrimaryDataModel {
+  displayName?: string | null;
+  name: string;
+  description?: string | null;
+  tags?: Array<{ id: string; value: string }> | null;
+  metadata?: {
+    keyFeatures?: string[];
+  } | null;
+}
+
 interface PrimaryDataProps {
-  data: any;
+  data: PrimaryDataModel;
   isLoading: boolean;
 }
 
@@ -17,7 +27,7 @@ export default function PrimaryData({ data, isLoading }: PrimaryDataProps) {
 
       {data.tags && data.tags.length > 0 && (
         <div className="flex flex-wrap gap-2">
-          {data.tags.map((tag: any) => (
+          {data.tags.map((tag) => (
             <Tag
               key={tag.id}
               fillColor="var(--accent-tertiary-color)"

app/[locale]/(user)/aimodels/[modelId]/components/Versions/index.tsx

@@ -11,8 +11,46 @@ import {
   Text,
 } from 'opub-ui';
 
+interface VersionProvider {
+  id: number;
+  provider: string;
+  providerModelId?: string | null;
+  isPrimary: boolean;
+  isActive: boolean;
+  apiEndpointUrl?: string | null;
+  hfModelClass?: string | null;
+  framework?: string | null;
+}
+
+interface ModelVersion {
+  id: number;
+  version: string;
+  versionNotes?: string | null;
+  lifecycleStage: string;
+  isLatest: boolean;
+  maxTokens?: number | null;
+  supportedLanguages?: string[] | null;
+  createdAt: string;
+  updatedAt: string;
+  providers: VersionProvider[];
+}
+
+interface VersionTableRow {
+  lifecycleStage: string;
+  providers: VersionProvider[];
+  maxTokens?: number | null;
+  updatedAt: string;
+  createdAt: string;
+}
+
+interface VersionCellProps {
+  row: { original: VersionTableRow };
+}
+
 interface VersionsProps {
-  data: any;
+  data: {
+    versions?: ModelVersion[] | null;
+  };
 }
 
 export default function Versions({ data }: VersionsProps) {
@@ -35,7 +73,7 @@ export default function Versions({ data }: VersionsProps) {
       {
         accessorKey: 'lifecycleStage',
         header: 'Lifecycle Stage',
-        cell: ({ row }: any) => (
+        cell: ({ row }: VersionCellProps) => (
           <Text variant="bodyMd">
             {row.original.lifecycleStage?.replace(/_/g, ' ') || 'Development'}
           </Text>
@@ -44,12 +82,12 @@ export default function Versions({ data }: VersionsProps) {
       {
         accessorKey: 'providers',
         header: 'Access Methods',
-        cell: ({ row }: any) => {
+        cell: ({ row }: VersionCellProps) => {
           const providers = row.original.providers || [];
           if (providers.length === 0) return <Text variant="bodyMd">N/A</Text>;
           return (
             <div className="flex flex-wrap gap-1">
-              {providers.map((p: any) => (
+              {providers.map((p) => (
                 <Badge key={p.id}>
                   {providerLabels[p.provider] || p.provider}
                 </Badge>
@@ -61,7 +99,7 @@ export default function Versions({ data }: VersionsProps) {
       {
         accessorKey: 'maxTokens',
         header: 'Max Tokens',
-        cell: ({ row }: any) => (
+        cell: ({ row }: VersionCellProps) => (
           <Text variant="bodyMd">
             {row.original.maxTokens?.toLocaleString() || 'N/A'}
           </Text>
@@ -70,7 +108,7 @@ export default function Versions({ data }: VersionsProps) {
       {
         accessorKey: 'updatedAt',
         header: 'Last Updated',
-        cell: ({ row }: any) => (
+        cell: ({ row }: VersionCellProps) => (
           <Text variant="bodyMd">
             {formatDate(row.original.updatedAt || row.original.createdAt) || ''}
           </Text>
@@ -79,7 +117,7 @@ export default function Versions({ data }: VersionsProps) {
     ];
   };
 
-  const generateTableData = (version: any) => {
+  const generateTableData = (version: ModelVersion) => {
     return [
       {
         lifecycleStage: version.lifecycleStage,
@@ -100,7 +138,7 @@ export default function Versions({ data }: VersionsProps) {
         </Text>
       </div>
       <div>
-        {data.versions.map((version: any) => (
+        {data.versions.map((version) => (
           <div
             key={version.id}
             className="mt-5 flex flex-col gap-6 border-1 border-solid border-greyExtralight bg-surfaceDefault p-4 lg:mx-0 lg:p-6"
@@ -180,7 +218,7 @@ export default function Versions({ data }: VersionsProps) {
                         Provider Configuration
                       </Text>
                       <div className="flex flex-col gap-3">
-                        {version.providers.map((provider: any) => (
+                        {version.providers.map((provider) => (
                           <div
                             key={provider.id}
                             className="rounded-1 border border-greyExtralight bg-surfaceSubdued p-3"

app/[locale]/(user)/chart/Content.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react';
+import Image from 'next/image';
 import { EChartsOption } from 'echarts-for-react';
 import { ShareDialog, useScreenshot } from 'opub-ui';
 import { BarChart } from 'opub-ui/viz';
@@ -13,6 +14,19 @@ import MapChart from '@/components/MapChart';
 type Props = {
   options: EChartsOption;
 };
+
+interface MapChartOptions {
+  mapProperty: string;
+  mapZoom: number;
+  fillOpacity: number;
+  mapCenter: [number, number];
+  features: unknown;
+}
+
+interface MapInstance {
+  getSize: () => { x: number; y: number };
+}
+
 export function Content({
   bar,
   line,
@@ -22,7 +36,7 @@ export function Content({
   bar: Props;
   line: Props;
   stacked: Props;
-  mapOptions: any;
+  mapOptions: MapChartOptions;
 }) {
   const mapDataFn = (value: number) => {
     return value >= 330
@@ -124,20 +138,24 @@ const ChartMap = ({
   options,
   props,
 }: {
-  options: any;
+  options: MapChartOptions & { mapDataFn: (value: number) => string };
   props: {
     title: string;
   };
 }) => {
   const [svgURL, setSvgURL] = React.useState<string>('');
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
   const ref = React.useRef<HTMLDivElement>(null);
-  const [map, setMap] = React.useState<any>(null);
+  const [map, setMap] = React.useState<MapInstance | null>(null);
 
   const isDesktop = useMediaQuery('(min-width: 768px)');
   const { createSvg, svgToPngURL, downloadFile, domToUrl } = useScreenshot();
 
   async function generateImage() {
+    if (!map) {
+      return;
+    }
+
     setIsLoading(true);
 
     const targetElm = ref.current?.querySelector('.leaflet-map-pane');
@@ -218,7 +236,14 @@ const Template = ({
         {title}
       </p>
       {data ? (
-        <img src={data} {...props} className="w-full" alt="SVG" />
+        <Image
+          src={data}
+          alt="SVG"
+          width={props?.width ?? 1200}
+          height={props?.height ?? 600}
+          className="h-auto w-full"
+          unoptimized
+        />
       ) : (
         'Loading...'
       )}

app/[locale]/(user)/chart/page.tsx

@@ -4,11 +4,12 @@ import { barOptions, lineOptions, stackedOptions } from './chart';
 import { Content } from './Content';
 
 export default async function Home() {
+  const mapCenter: [number, number] = [26.193, 92.3];
   const mapOptions = {
     mapProperty: 'dt_code',
     mapZoom: 7.9,
     fillOpacity: 1,
-    mapCenter: [26.193, 92.3],
+    mapCenter,
     features: json.features,
   };