From 20e0e73c58cdf10b8f5b8a8a6a1a96dd08ee3c16 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 27 Jan 2026 10:35:14 +0700
Subject: [PATCH] refactor: remove any types and fix TypeScript errors

- Export InfoProductItem, InfoHubItem, InfoSupplierItem, InfoOfferItem types
- Update InfoEntity interface to have explicit fields (no index signature)
- Export CatalogHubItem, CatalogNearestHubItem from useCatalogHubs
- Fix MapItem interfaces to accept nullable GraphQL types
- Fix v-for :key bindings to handle null uuid
- Add null guards in select-location pages
- Update HubCard to accept nullable transportTypes
- Add shims.d.ts for missing module declarations
---
 app/components/catalog/CatalogMap.vue | 26 ++++++++++-------
 app/components/catalog/HubCard.vue    |  4 +--
 app/components/catalog/InfoPanel.vue  | 42 +++++++++++++++------------
 app/components/page/CatalogPage.vue   |  7 ++---
 app/composables/useCatalogHubs.ts     | 10 +++++--
 app/composables/useCatalogInfo.ts     | 42 +++++++++++++++++----------
 app/pages/select-location/index.vue   | 21 ++++++++------
 app/pages/select-location/map.vue     | 12 ++++----
 app/shims.d.ts                        | 38 ++++++++++++++++++++++++
 9 files changed, 133 insertions(+), 69 deletions(-)
 create mode 100644 app/shims.d.ts

diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index e1194e6..f98a1d0 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -20,11 +20,11 @@ import { LngLatBounds } from 'mapbox-gl'
 import type { ClusterPointType } from '~/composables/graphql/public/geo-generated'
 
 interface MapItem {
-  uuid: string
-  name: string
-  latitude: number
-  longitude: number
-  country?: string
+  uuid?: string | null
+  name?: string | null
+  latitude?: number | null
+  longitude?: number | null
+  country?: string | null
 }
 
 export interface MapBounds {
@@ -186,11 +186,13 @@ const mapOptions = computed(() => ({
 // Client-side clustering GeoJSON (when not using server clustering)
 const geoJsonData = computed(() => ({
   type: 'FeatureCollection' as const,
-  features: props.items.map(item => ({
-    type: 'Feature' as const,
-    properties: { uuid: item.uuid, name: item.name, country: item.country },
-    geometry: { type: 'Point' as const, coordinates: [item.longitude, item.latitude] }
-  }))
+  features: props.items
+    .filter(item => item.latitude != null && item.longitude != null)
+    .map(item => ({
+      type: 'Feature' as const,
+      properties: { uuid: item.uuid, name: item.name, country: item.country },
+      geometry: { type: 'Point' as const, coordinates: [item.longitude!, item.latitude!] }
+    }))
 }))
 
 // Server-side clustering GeoJSON
@@ -481,7 +483,9 @@ const initClientClusteringLayers = async (map: MapboxMapType) => {
   if (!didFitBounds.value && props.items.length > 0) {
     const bounds = new LngLatBounds()
     props.items.forEach(item => {
-      bounds.extend([item.longitude, item.latitude])
+      if (item.longitude != null && item.latitude != null) {
+        bounds.extend([item.longitude, item.latitude])
+      }
     })
     map.fitBounds(bounds, { padding: 50, maxZoom: 10 })
     didFitBounds.value = true
diff --git a/app/components/catalog/HubCard.vue b/app/components/catalog/HubCard.vue
index fbde52e..46514b0 100644
--- a/app/components/catalog/HubCard.vue
+++ b/app/components/catalog/HubCard.vue
@@ -48,7 +48,7 @@ interface Hub {
   country?: string | null
   countryCode?: string | null
   distance?: string
-  transportTypes?: string[] | null
+  transportTypes?: (string | null)[] | null
 }
 
 const props = defineProps<{
@@ -81,5 +81,5 @@ const countryFlag = computed(() => {
   return '🌍'
 })
 
-const hasTransport = (type: string) => props.hub.transportTypes?.includes(type)
+const hasTransport = (type: string) => props.hub.transportTypes?.some(t => t === type)
 </script>
diff --git a/app/components/catalog/InfoPanel.vue b/app/components/catalog/InfoPanel.vue
index e8ce47f..bfbac05 100644
--- a/app/components/catalog/InfoPanel.vue
+++ b/app/components/catalog/InfoPanel.vue
@@ -48,7 +48,7 @@
             @click="emit('open-info', 'supplier', entity.teamUuid)"
           >
             <Icon name="lucide:factory" size="14" />
-            {{ entity.teamName || $t('catalog.info.viewSupplier') }}
+            {{ entity.supplierName || entity.teamName || $t('catalog.info.viewSupplier') }}
           </button>
         </div>
 
@@ -66,8 +66,8 @@
           </div>
           <div v-else-if="!loadingProducts" class="flex flex-col gap-2">
             <ProductCard
-              v-for="product in relatedProducts"
-              :key="product.uuid"
+              v-for="(product, index) in relatedProducts"
+              :key="product.uuid ?? index"
               :product="product"
               compact
               selectable
@@ -90,8 +90,8 @@
           </div>
           <div v-else-if="!loadingSuppliers" class="flex flex-col gap-2">
             <SupplierCard
-              v-for="supplier in relatedSuppliers"
-              :key="supplier.uuid"
+              v-for="(supplier, index) in relatedSuppliers"
+              :key="supplier.uuid ?? index"
               :supplier="supplier"
               selectable
               @select="onSupplierSelect(supplier)"
@@ -113,8 +113,8 @@
           </div>
           <div v-else-if="!loadingHubs" class="flex flex-col gap-2">
             <HubCard
-              v-for="hub in relatedHubs"
-              :key="hub.uuid"
+              v-for="(hub, index) in relatedHubs"
+              :key="hub.uuid ?? index"
               :hub="hub"
               selectable
               @select="onHubSelect(hub)"
@@ -134,15 +134,22 @@
 
 <script setup lang="ts">
 import type { InfoEntityType } from '~/composables/useCatalogSearch'
+import type {
+  InfoEntity,
+  InfoProductItem,
+  InfoHubItem,
+  InfoSupplierItem,
+  InfoOfferItem
+} from '~/composables/useCatalogInfo'
 
 const props = defineProps<{
   entityType: InfoEntityType
   entityId: string
-  entity: any
-  relatedProducts?: any[]
-  relatedHubs?: any[]
-  relatedSuppliers?: any[]
-  relatedOffers?: any[]
+  entity: InfoEntity | null
+  relatedProducts?: InfoProductItem[]
+  relatedHubs?: InfoHubItem[]
+  relatedSuppliers?: InfoSupplierItem[]
+  relatedOffers?: InfoOfferItem[]
   selectedProduct?: string | null
   currentTab?: string
   loading?: boolean
@@ -209,20 +216,17 @@ const formatPrice = (price: number | string) => {
 }
 
 // Handlers for selecting related items
-const onProductSelect = (product: any) => {
-  if (product.uuid) {
-    // Navigate to offer info for this product
-    emit('select-product', product.uuid)
-  }
+const onProductSelect = (product: InfoProductItem) => {
+  emit('select-product', product.uuid)
 }
 
-const onHubSelect = (hub: any) => {
+const onHubSelect = (hub: InfoHubItem) => {
   if (hub.uuid) {
     emit('open-info', 'hub', hub.uuid)
   }
 }
 
-const onSupplierSelect = (supplier: any) => {
+const onSupplierSelect = (supplier: InfoSupplierItem) => {
   if (supplier.uuid) {
     emit('open-info', 'supplier', supplier.uuid)
   }
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 13a5723..b6dc557 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -233,12 +233,11 @@ const activeClusterNodeType = computed(() => VIEW_MODE_NODE_TYPES[mapViewMode.va
 const currentBounds = ref<MapBounds | null>(null)
 
 interface MapItem {
-  uuid: string
+  uuid?: string | null
   latitude?: number | null
   longitude?: number | null
-  name?: string
-  country?: string
-  [key: string]: any
+  name?: string | null
+  country?: string | null
 }
 
 const props = withDefaults(defineProps<{
diff --git a/app/composables/useCatalogHubs.ts b/app/composables/useCatalogHubs.ts
index c9306ac..3e9fdce 100644
--- a/app/composables/useCatalogHubs.ts
+++ b/app/composables/useCatalogHubs.ts
@@ -3,9 +3,13 @@ import { HubsListDocument, GetHubCountriesDocument, NearestHubsDocument } from '
 
 const PAGE_SIZE = 24
 
-// Type from codegen
-type HubItem = NonNullable<NonNullable<HubsListQueryResult['hubsList']>[number]>
-type NearestHubItem = NonNullable<NonNullable<NearestHubsQueryResult['nearestHubs']>[number]>
+// Type from codegen - exported for use in pages
+export type CatalogHubItem = NonNullable<NonNullable<HubsListQueryResult['hubsList']>[number]>
+export type CatalogNearestHubItem = NonNullable<NonNullable<NearestHubsQueryResult['nearestHubs']>[number]>
+
+// Internal aliases
+type HubItem = CatalogHubItem
+type NearestHubItem = CatalogNearestHubItem
 
 // Shared state across list and map views
 const items = ref<Array<HubItem | NearestHubItem>>([])
diff --git a/app/composables/useCatalogInfo.ts b/app/composables/useCatalogInfo.ts
index 70fd96a..f6e3bbc 100644
--- a/app/composables/useCatalogInfo.ts
+++ b/app/composables/useCatalogInfo.ts
@@ -26,33 +26,43 @@ type HubItem = NonNullable<NonNullable<NearestHubsQueryResult['nearestHubs']>[nu
 type OfferItem = NonNullable<NonNullable<NearestOffersQueryResult['nearestOffers']>[number]>
 
 // Product type (aggregated from offers)
-interface ProductItem {
+export interface InfoProductItem {
   uuid: string
   name: string
   offersCount?: number
 }
 
-// Extended entity type with optional supplierName
-// Using intersection to allow both coordinate patterns (node vs offer)
-interface InfoEntity {
+// Re-export types for InfoPanel
+export type InfoHubItem = HubItem
+export type InfoSupplierItem = SupplierProfile
+export type InfoOfferItem = OfferItem
+
+// Extended entity type with all known fields (NO index signature!)
+export interface InfoEntity {
   uuid?: string | null
   name?: string | null
   // Node coordinates
   latitude?: number | null
   longitude?: number | null
+  // Location fields
+  address?: string | null
+  city?: string | null
+  country?: string | null
   // Offer coordinates (different field names)
   locationLatitude?: number | null
   locationLongitude?: number | null
-  locationUuid?: string
-  locationName?: string
+  locationUuid?: string | null
+  locationName?: string | null
   // Offer fields
-  productUuid?: string
-  productName?: string
-  teamUuid?: string
-  // Enriched field
-  supplierName?: string
-  // Allow any other fields
-  [key: string]: unknown
+  productUuid?: string | null
+  productName?: string | null
+  teamUuid?: string | null
+  teamName?: string | null
+  pricePerUnit?: number | string | null
+  currency?: string | null
+  unit?: string | null
+  // Enriched field from supplier profile
+  supplierName?: string | null
 }
 
 // Helper to get coordinates from entity (handles both node and offer patterns)
@@ -73,7 +83,7 @@ export function useCatalogInfo() {
   // State with proper types
   const entity = ref<InfoEntity | null>(null)
   const entityType = ref<InfoEntityType | null>(null)
-  const relatedProducts = ref<ProductItem[]>([])
+  const relatedProducts = ref<InfoProductItem[]>([])
   const relatedHubs = ref<HubItem[]>([])
   const relatedSuppliers = ref<SupplierProfile[]>([])
   const relatedOffers = ref<OfferItem[]>([])
@@ -119,7 +129,7 @@ export function useCatalogInfo() {
         'geo'
       ).then(offersData => {
         // Group offers by product
-        const productsMap = new Map<string, ProductItem>()
+        const productsMap = new Map<string, InfoProductItem>()
         const suppliersMap = new Map<string, { uuid: string; name: string; latitude?: number | null; longitude?: number | null }>()
 
         offersData?.nearestOffers?.forEach(offer => {
@@ -224,7 +234,7 @@ export function useCatalogInfo() {
         'geo'
       ).then(offersData => {
         // Group offers by product
-        const productsMap = new Map<string, ProductItem>()
+        const productsMap = new Map<string, InfoProductItem>()
         offersData?.nearestOffers?.forEach(offer => {
           if (!offer || !offer.productUuid || !offer.productName) return
           const existing = productsMap.get(offer.productUuid)
diff --git a/app/pages/select-location/index.vue b/app/pages/select-location/index.vue
index 1ee5fc5..e790a06 100644
--- a/app/pages/select-location/index.vue
+++ b/app/pages/select-location/index.vue
@@ -78,6 +78,8 @@
 
 <script setup lang="ts">
 import { useLocationStore } from '~/stores/location'
+import type { CatalogHubItem, CatalogNearestHubItem } from '~/composables/useCatalogHubs'
+import type { TeamAddress } from '~/composables/graphql/team/teams-generated'
 
 definePageMeta({
   layout: 'topnav'
@@ -107,20 +109,20 @@ const {
 } = useCatalogHubs()
 
 // Selected/hovered hub for map
-const selectedHubId = ref<string>()
-const hoveredHubId = ref<string>()
+const selectedHubId = ref<string | undefined>()
+const hoveredHubId = ref<string | undefined>()
 
 await init()
 
 // Load team addresses
-const teamAddresses = ref<any[]>([])
+const teamAddresses = ref<TeamAddress[]>([])
 
 if (isAuthenticated.value) {
   try {
     const { execute } = useGraphQL()
     const { GetTeamAddressesDocument } = await import('~/composables/graphql/team/teams-generated')
     const data = await execute(GetTeamAddressesDocument, {}, 'team', 'teams')
-    teamAddresses.value = data?.teamAddresses || []
+    teamAddresses.value = (data?.teamAddresses || []).filter((a): a is TeamAddress => a != null)
   } catch {
     // Not critical
   }
@@ -147,11 +149,12 @@ const goToRequestIfReady = () => {
   return false
 }
 
-const selectHub = async (hub: any) => {
+const selectHub = async (hub: CatalogHubItem | CatalogNearestHubItem) => {
+  if (!hub.uuid) return
   selectedHubId.value = hub.uuid
 
   if (isSearchMode.value) {
-    searchStore.setLocation(hub.name)
+    searchStore.setLocation(hub.name ?? '')
     searchStore.setLocationUuid(hub.uuid)
     if (goToRequestIfReady()) return
     router.back()
@@ -159,7 +162,7 @@ const selectHub = async (hub: any) => {
   }
 
   try {
-    const success = await locationStore.select('hub', hub.uuid, hub.name, hub.latitude, hub.longitude)
+    const success = await locationStore.select('hub', hub.uuid, hub.name ?? '', hub.latitude ?? 0, hub.longitude ?? 0)
     if (success) {
       router.back()
     }
@@ -168,7 +171,7 @@ const selectHub = async (hub: any) => {
   }
 }
 
-const selectAddress = async (addr: any) => {
+const selectAddress = async (addr: TeamAddress) => {
   if (isSearchMode.value) {
     searchStore.setLocation(addr.address || addr.name)
     searchStore.setLocationUuid(addr.uuid)
@@ -178,7 +181,7 @@ const selectAddress = async (addr: any) => {
   }
 
   try {
-    const success = await locationStore.select('address', addr.uuid, addr.name, addr.latitude, addr.longitude)
+    const success = await locationStore.select('address', addr.uuid, addr.name, addr.latitude ?? 0, addr.longitude ?? 0)
     if (success) {
       router.back()
     }
diff --git a/app/pages/select-location/map.vue b/app/pages/select-location/map.vue
index eb3fbe0..7517866 100644
--- a/app/pages/select-location/map.vue
+++ b/app/pages/select-location/map.vue
@@ -14,8 +14,8 @@
       >
         <template #cards>
           <HubCard
-            v-for="hub in items"
-            :key="hub.uuid"
+            v-for="(hub, index) in items"
+            :key="hub.uuid ?? index"
             :hub="hub"
             selectable
             :is-selected="selectedItemId === hub.uuid"
@@ -37,6 +37,7 @@
 
 <script setup lang="ts">
 import { useLocationStore } from '~/stores/location'
+import type { CatalogHubItem, CatalogNearestHubItem } from '~/composables/useCatalogHubs'
 
 definePageMeta({
   layout: false
@@ -64,7 +65,8 @@ await init()
 const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
 const selectedItemId = ref<string | null>(null)
 
-const selectItem = async (item: any) => {
+const selectItem = async (item: CatalogHubItem | CatalogNearestHubItem) => {
+  if (!item.uuid) return
   selectedItemId.value = item.uuid
 
   if (item.latitude && item.longitude) {
@@ -73,7 +75,7 @@ const selectItem = async (item: any) => {
 
   // Selection logic
   if (isSearchMode.value) {
-    searchStore.setLocation(item.name)
+    searchStore.setLocation(item.name ?? '')
     searchStore.setLocationUuid(item.uuid)
     if (route.query.after === 'request' && searchStore.searchForm.productUuid && searchStore.searchForm.locationUuid) {
       const query: Record<string, string> = {
@@ -92,7 +94,7 @@ const selectItem = async (item: any) => {
     return
   }
 
-  const success = await locationStore.select('hub', item.uuid, item.name, item.latitude, item.longitude)
+  const success = await locationStore.select('hub', item.uuid, item.name ?? '', item.latitude ?? 0, item.longitude ?? 0)
   if (success) router.push(localePath('/select-location'))
 }
 
diff --git a/app/shims.d.ts b/app/shims.d.ts
new file mode 100644
index 0000000..60aba51
--- /dev/null
+++ b/app/shims.d.ts
@@ -0,0 +1,38 @@
+// Type declarations for modules without TypeScript support
+
+declare module '@lottiefiles/dotlottie-vue' {
+  import type { DefineComponent } from 'vue'
+
+  export const DotLottieVue: DefineComponent<{
+    src?: string
+    autoplay?: boolean
+    loop?: boolean
+    class?: string
+    style?: Record<string, string | number>
+  }>
+}
+
+declare module 'vue-chartjs' {
+  import type { DefineComponent } from 'vue'
+
+  export const Line: DefineComponent
+  export const Bar: DefineComponent
+  export const Pie: DefineComponent
+  export const Doughnut: DefineComponent
+}
+
+declare module 'chart.js' {
+  export const CategoryScale: unknown
+  export const LinearScale: unknown
+  export const PointElement: unknown
+  export const LineElement: unknown
+  export const Title: unknown
+  export const Tooltip: unknown
+  export const Legend: unknown
+  export const Filler: unknown
+  export const Chart: {
+    register: (...args: unknown[]) => void
+  }
+  export type ChartData<T = unknown> = T
+  export type ChartOptions<T = unknown> = T
+}