From 3fc8326a137cb18245d2d1f26f4a14d909756e53 Mon Sep 17 00:00:00 2001
From: Craig Haseler <cahaseler@gmail.com>
Date: Tue, 10 Mar 2026 01:16:54 -0400
Subject: [PATCH 1/4] feat: add category filter to ship catalog page

Adds a Category filter row above the Empire filter on the ships page.
Categories are derived from the ship data (no API change needed).
The class dropdown also scopes to only classes within the selected
category, making it easier for agents to find ships by role.
---
 src/app/ships/page.tsx | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/app/ships/page.tsx b/src/app/ships/page.tsx
index 3817e6b..e748076 100644
--- a/src/app/ships/page.tsx
+++ b/src/app/ships/page.tsx
@@ -246,6 +246,7 @@ export default function ShipsPage() {
   const [error, setError] = useState(false)
 
   const [activeEmpire, setActiveEmpire] = useState<string>('')
+  const [activeCategory, setActiveCategory] = useState<string>('')
   const [activeClasses, setActiveClasses] = useState<Set<string>>(new Set())
   const [activeTier, setActiveTier] = useState<number>(0)
   const [search, setSearch] = useState('')
@@ -321,11 +322,26 @@ export default function ShipsPage() {
     return () => document.removeEventListener('keydown', onKeyDown)
   }, [zoomedShip])
 
+  const categories = useMemo(() => {
+    const seen = new Set<string>()
+    ships.forEach((s) => { if (s.category) seen.add(s.category) })
+    return Array.from(seen).sort()
+  }, [ships])
+
+  const visibleClasses = useMemo(() => {
+    if (!activeCategory) return classes
+    const inCategory = new Set(ships.filter((s) => s.category === activeCategory).map((s) => s.class))
+    return classes.filter((c) => inCategory.has(c))
+  }, [classes, ships, activeCategory])
+
   const filteredShips = useMemo(() => {
     let result = ships.filter((s) => s.empire !== '')
     if (activeEmpire) {
       result = result.filter((s) => s.empire === activeEmpire)
     }
+    if (activeCategory) {
+      result = result.filter((s) => s.category === activeCategory)
+    }
     if (activeClasses.size > 0) {
       result = result.filter((s) => activeClasses.has(s.class))
     }
@@ -343,7 +359,7 @@ export default function ShipsPage() {
       )
     }
     return result
-  }, [ships, activeEmpire, activeClasses, activeTier, search])
+  }, [ships, activeEmpire, activeCategory, activeClasses, activeTier, search])
 
   const toggleExpand = (id: string) => {
     setAllExpanded(false)
@@ -391,6 +407,25 @@ export default function ShipsPage() {
 
       {!loading && !error && ships.length > 0 && (
         <div className={styles.filterSection}>
+          <div className={styles.filterRow}>
+            <span className={styles.filterLabel}>Category</span>
+            <button
+              className={`${styles.filterBtn} ${activeCategory === '' ? styles.filterBtnActive : ''}`}
+              onClick={() => setActiveCategory('')}
+            >
+              All
+            </button>
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                className={`${styles.filterBtn} ${activeCategory === cat ? styles.filterBtnActive : ''}`}
+                onClick={() => setActiveCategory(cat)}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+
           <div className={styles.filterRow}>
             <span className={styles.filterLabel}>Empire</span>
             <button
@@ -451,7 +486,7 @@ export default function ShipsPage() {
                     Clear all
                   </button>
                   <div className={styles.classDropdownList}>
-                    {classes.map((cls) => (
+                    {visibleClasses.map((cls) => (
                       <label key={cls} className={styles.classDropdownItem}>
                         <input
                           type="checkbox"

From 43470402c89dd8285d8cf76ffed956545bd5dd8a Mon Sep 17 00:00:00 2001
From: Craig Haseler <cahaseler@gmail.com>
Date: Tue, 10 Mar 2026 01:25:37 -0400
Subject: [PATCH 2/4] feat: add table view to ship catalog with sortable
 columns

Adds a grid/table toggle to the ship catalog page. Table view shows all
raw stats (hull, shield, armor, speed, fuel, cargo, CPU, power, slots,
price) in a sortable, horizontally-scrollable table. Same filters apply
in both views. Click any row to expand and see the ship image, description,
and lore inline.
---
 src/app/ships/page.module.css | 181 ++++++++++++++++++++++++++++++
 src/app/ships/page.tsx        | 200 ++++++++++++++++++++++++++++++++--
 2 files changed, 373 insertions(+), 8 deletions(-)

diff --git a/src/app/ships/page.module.css b/src/app/ships/page.module.css
index dcb63a4..f8d5e92 100644
--- a/src/app/ships/page.module.css
+++ b/src/app/ships/page.module.css
@@ -803,6 +803,187 @@
   opacity: 0.8;
 }
 
+/* === View Toggle === */
+.filterRowRight {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-left: auto;
+}
+
+.viewToggle {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.viewToggleBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--nebula-blue);
+  border: 1px solid var(--hull-grey);
+  border-radius: 4px;
+  color: var(--chrome-silver);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.viewToggleBtn:hover,
+.viewToggleBtnActive {
+  border-color: var(--plasma-cyan);
+  color: var(--plasma-cyan);
+}
+
+.viewToggleBtnActive {
+  background: rgba(0, 212, 255, 0.1);
+}
+
+/* === Ship Table === */
+.tableWrap {
+  overflow-x: auto;
+  border: 1px solid var(--hull-grey);
+  border-radius: 8px;
+}
+
+.shipTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-jetbrains), 'JetBrains Mono', monospace;
+  font-size: 0.78rem;
+  min-width: 1400px;
+}
+
+.tableHeaderCell {
+  padding: 0.6rem 0.75rem;
+  text-align: left;
+  color: var(--chrome-silver);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  background: rgba(13, 19, 33, 0.9);
+  border-bottom: 1px solid var(--hull-grey);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s ease;
+}
+
+.tableHeaderCell:hover {
+  color: var(--star-white);
+}
+
+.sortActive {
+  color: var(--plasma-cyan);
+}
+
+.sortIndicator {
+  opacity: 0.4;
+  font-size: 0.65rem;
+  margin-left: 0.25rem;
+}
+
+.sortActive .sortIndicator {
+  opacity: 1;
+}
+
+.tableRow {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.tableRow:hover {
+  background: rgba(0, 212, 255, 0.05);
+}
+
+.tableRowExpanded {
+  background: rgba(0, 212, 255, 0.07);
+  border-bottom: none;
+}
+
+.tableCell {
+  padding: 0.45rem 0.75rem;
+  color: var(--chrome-silver);
+  white-space: nowrap;
+}
+
+.tableCellNum {
+  text-align: right;
+  color: var(--star-white);
+  font-weight: 500;
+}
+
+.tableName {
+  color: var(--star-white);
+  font-weight: 600;
+  position: relative;
+  padding-left: 1rem;
+}
+
+.tableEmpireAccent {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 55%;
+  border-radius: 2px;
+}
+
+.tableExpandRow {
+  border-bottom: 1px solid var(--hull-grey);
+}
+
+.tableExpandCell {
+  padding: 0;
+}
+
+.tableExpandContent {
+  display: flex;
+  gap: 1.5rem;
+  padding: 1.25rem 1.5rem;
+  background: rgba(13, 19, 33, 0.6);
+}
+
+.tableExpandImageWrap {
+  position: relative;
+  flex-shrink: 0;
+  width: 280px;
+}
+
+.tableExpandImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.tableExpandText {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tableExpandDescription {
+  font-size: 0.9rem;
+  color: var(--star-white);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.tableExpandLore {
+  font-size: 0.82rem;
+  color: var(--chrome-silver);
+  line-height: 1.75;
+  opacity: 0.85;
+  margin: 0;
+}
+
 /* === Responsive === */
 @media (max-width: 768px) {
   .main {
diff --git a/src/app/ships/page.tsx b/src/app/ships/page.tsx
index e748076..d4eb233 100644
--- a/src/app/ships/page.tsx
+++ b/src/app/ships/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
+import { useState, useEffect, useMemo, useRef, useCallback, Fragment } from 'react'
 import Image from 'next/image'
 import styles from './page.module.css'
 
@@ -58,6 +58,27 @@ interface ShipsResponse {
   tiers: number[]
 }
 
+const TABLE_COLS = [
+  { key: 'name',                 label: 'Name',    title: 'Name',              numeric: false },
+  { key: 'empire_name',          label: 'Empire',  title: 'Empire',            numeric: false },
+  { key: 'category',             label: 'Category',title: 'Category',          numeric: false },
+  { key: 'class',                label: 'Class',   title: 'Class',             numeric: false },
+  { key: 'tier',                 label: 'T',       title: 'Tier',              numeric: true  },
+  { key: 'base_hull',            label: 'Hull',    title: 'Hull HP',           numeric: true  },
+  { key: 'base_shield',          label: 'Shield',  title: 'Shield HP',         numeric: true  },
+  { key: 'base_shield_recharge', label: 'ShRgn',   title: 'Shield Recharge/tick', numeric: true },
+  { key: 'base_armor',           label: 'Armor',   title: 'Armor',             numeric: true  },
+  { key: 'base_speed',           label: 'Speed',   title: 'Speed (AU/tick)',   numeric: true  },
+  { key: 'base_fuel',            label: 'Fuel',    title: 'Fuel Capacity',     numeric: true  },
+  { key: 'cargo_capacity',       label: 'Cargo',   title: 'Cargo Capacity',    numeric: true  },
+  { key: 'cpu_capacity',         label: 'CPU',     title: 'CPU Capacity',      numeric: true  },
+  { key: 'power_capacity',       label: 'Power',   title: 'Power Capacity',    numeric: true  },
+  { key: 'weapon_slots',         label: 'Wpn',     title: 'Weapon Slots',      numeric: true  },
+  { key: 'defense_slots',        label: 'Def',     title: 'Defense Slots',     numeric: true  },
+  { key: 'utility_slots',        label: 'Util',    title: 'Utility Slots',     numeric: true  },
+  { key: 'price',                label: 'Price',   title: 'Base Price (cr)',   numeric: true  },
+] as const
+
 const EMPIRE_COLORS: Record<string, string> = {
   solarian: '#ffd700',
   voidborn: '#9b59b6',
@@ -245,6 +266,11 @@ export default function ShipsPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(false)
 
+  const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid')
+  const [sortCol, setSortCol] = useState<string>('tier')
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
+  const [tableExpandedId, setTableExpandedId] = useState<string | null>(null)
+
   const [activeEmpire, setActiveEmpire] = useState<string>('')
   const [activeCategory, setActiveCategory] = useState<string>('')
   const [activeClasses, setActiveClasses] = useState<Set<string>>(new Set())
@@ -277,6 +303,25 @@ export default function ShipsPage() {
     })
   }, [])
 
+  const setView = useCallback((mode: 'grid' | 'table') => {
+    setViewMode(mode)
+    if (mode === 'table') {
+      setExpandedIds(new Set())
+      setAllExpanded(false)
+    } else {
+      setTableExpandedId(null)
+    }
+  }, [])
+
+  const handleSort = useCallback((col: string) => {
+    if (sortCol === col) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
+    } else {
+      setSortCol(col)
+      setSortDir('asc')
+    }
+  }, [sortCol])
+
   useEffect(() => {
     function onClickOutside(e: MouseEvent) {
       if (classDropdownRef.current && !classDropdownRef.current.contains(e.target as Node)) {
@@ -361,6 +406,20 @@ export default function ShipsPage() {
     return result
   }, [ships, activeEmpire, activeCategory, activeClasses, activeTier, search])
 
+  const tableShips = useMemo(() => {
+    return [...filteredShips].sort((a, b) => {
+      const av = (a as Record<string, unknown>)[sortCol]
+      const bv = (b as Record<string, unknown>)[sortCol]
+      let cmp = 0
+      if (typeof av === 'number' && typeof bv === 'number') {
+        cmp = av - bv
+      } else {
+        cmp = String(av ?? '').localeCompare(String(bv ?? ''))
+      }
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }, [filteredShips, sortCol, sortDir])
+
   const toggleExpand = (id: string) => {
     setAllExpanded(false)
     setExpandedIds((prev) => {
@@ -451,12 +510,41 @@ export default function ShipsPage() {
                 {empire.name}
               </button>
             ))}
-            <button
-              className={`${styles.filterBtn} ${styles.expandAllBtn} ${allExpanded ? styles.filterBtnActive : ''}`}
-              onClick={toggleExpandAll}
-            >
-              {allExpanded ? 'Collapse All' : 'Expand All'}
-            </button>
+            <div className={styles.filterRowRight}>
+              {viewMode === 'grid' && (
+                <button
+                  className={`${styles.filterBtn} ${allExpanded ? styles.filterBtnActive : ''}`}
+                  onClick={toggleExpandAll}
+                >
+                  {allExpanded ? 'Collapse All' : 'Expand All'}
+                </button>
+              )}
+              <div className={styles.viewToggle}>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'grid' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setView('grid')}
+                  title="Grid view"
+                >
+                  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                    <rect x="0.65" y="0.65" width="4.7" height="4.7" rx="0.8" stroke="currentColor" strokeWidth="1.3"/>
+                    <rect x="7.65" y="0.65" width="4.7" height="4.7" rx="0.8" stroke="currentColor" strokeWidth="1.3"/>
+                    <rect x="0.65" y="7.65" width="4.7" height="4.7" rx="0.8" stroke="currentColor" strokeWidth="1.3"/>
+                    <rect x="7.65" y="7.65" width="4.7" height="4.7" rx="0.8" stroke="currentColor" strokeWidth="1.3"/>
+                  </svg>
+                </button>
+                <button
+                  className={`${styles.viewToggleBtn} ${viewMode === 'table' ? styles.viewToggleBtnActive : ''}`}
+                  onClick={() => setView('table')}
+                  title="Table view"
+                >
+                  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                    <line x1="1" y1="2.5" x2="12" y2="2.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
+                    <line x1="1" y1="6.5" x2="12" y2="6.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
+                    <line x1="1" y1="10.5" x2="12" y2="10.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
+                  </svg>
+                </button>
+              </div>
+            </div>
           </div>
 
           <div className={styles.filterRow}>
@@ -547,7 +635,7 @@ export default function ShipsPage() {
         </div>
       )}
 
-      {!loading && !error && filteredShips.length > 0 && (
+      {!loading && !error && filteredShips.length > 0 && viewMode === 'grid' && (
         <div className={styles.shipGrid}>
           {filteredShips.map((ship) => {
             const isExpanded = expandedIds.has(ship.id)
@@ -757,6 +845,102 @@ export default function ShipsPage() {
           })}
         </div>
       )}
+      {!loading && !error && filteredShips.length > 0 && viewMode === 'table' && (
+        <div className={styles.tableWrap}>
+          <table className={styles.shipTable}>
+            <thead>
+              <tr>
+                {TABLE_COLS.map((col) => (
+                  <th
+                    key={col.key}
+                    className={`${styles.tableHeaderCell} ${sortCol === col.key ? styles.sortActive : ''}`}
+                    onClick={() => handleSort(col.key)}
+                    title={col.title}
+                  >
+                    {col.label}
+                    <span className={styles.sortIndicator}>
+                      {sortCol === col.key ? (sortDir === 'asc' ? ' ▲' : ' ▼') : ' ⇅'}
+                    </span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {tableShips.map((ship) => {
+                const isExpanded = tableExpandedId === ship.id
+                const empireColor = EMPIRE_COLORS[ship.empire] || '#888'
+                return (
+                  <Fragment key={ship.id}>
+                    <tr
+                      className={`${styles.tableRow} ${isExpanded ? styles.tableRowExpanded : ''}`}
+                      onClick={() => setTableExpandedId(isExpanded ? null : ship.id)}
+                    >
+                      <td className={`${styles.tableCell} ${styles.tableName}`}>
+                        <span className={styles.tableEmpireAccent} style={{ background: empireColor }} />
+                        {ship.name}
+                      </td>
+                      <td className={styles.tableCell}>
+                        <span className={styles.empireDot} style={{ background: empireColor }} />
+                        {' '}{ship.empire_name}
+                      </td>
+                      <td className={styles.tableCell}>{ship.category}</td>
+                      <td className={styles.tableCell}>{ship.class}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>T{ship.tier}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_hull}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_shield}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_shield_recharge}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_armor}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_speed}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.base_fuel}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.cargo_capacity}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.cpu_capacity}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.power_capacity}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.weapon_slots}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.defense_slots}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.utility_slots}</td>
+                      <td className={`${styles.tableCell} ${styles.tableCellNum}`}>{ship.price.toLocaleString()}</td>
+                    </tr>
+                    {isExpanded && (
+                      <tr className={styles.tableExpandRow}>
+                        <td colSpan={TABLE_COLS.length} className={styles.tableExpandCell}>
+                          <div className={styles.tableExpandContent}>
+                            {!brokenImages.has(ship.id) && (
+                              <div className={styles.tableExpandImageWrap}>
+                                <Image
+                                  src={`/images/ships/catalog/${ship.id}.webp`}
+                                  alt={ship.name}
+                                  width={560}
+                                  height={420}
+                                  className={styles.tableExpandImage}
+                                  onError={() => handleImageError(ship.id)}
+                                />
+                                <button
+                                  className={styles.zoomBtn}
+                                  onClick={(e) => { e.stopPropagation(); setZoomedShip(ship) }}
+                                  aria-label={`View ${ship.name} full size`}
+                                >
+                                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                                    <path d="M1 5V1H5M9 1H13V5M13 9V13H9M5 13H1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                                  </svg>
+                                </button>
+                              </div>
+                            )}
+                            <div className={styles.tableExpandText}>
+                              <p className={styles.tableExpandDescription}>{ship.description}</p>
+                              {ship.lore && <p className={styles.tableExpandLore}>{ship.lore}</p>}
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
       {zoomedShip && (
         <div className={styles.modalOverlay} onClick={() => setZoomedShip(null)}>
           <button className={styles.modalClose} onClick={() => setZoomedShip(null)} aria-label="Close">

From 5b951aef0db22f8dce62d1bc77858874f289aff6 Mon Sep 17 00:00:00 2001
From: Craig Haseler <cahaseler@gmail.com>
Date: Tue, 10 Mar 2026 09:02:05 -0400
Subject: [PATCH 3/4] fix: correct TypeScript cast in table sort comparator

---
 src/app/ships/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/ships/page.tsx b/src/app/ships/page.tsx
index d4eb233..de17c40 100644
--- a/src/app/ships/page.tsx
+++ b/src/app/ships/page.tsx
@@ -408,8 +408,8 @@ export default function ShipsPage() {
 
   const tableShips = useMemo(() => {
     return [...filteredShips].sort((a, b) => {
-      const av = (a as Record<string, unknown>)[sortCol]
-      const bv = (b as Record<string, unknown>)[sortCol]
+      const av = (a as unknown as Record<string, unknown>)[sortCol]
+      const bv = (b as unknown as Record<string, unknown>)[sortCol]
       let cmp = 0
       if (typeof av === 'number' && typeof bv === 'number') {
         cmp = av - bv

From 19fd00b76f4b5dfb127f036cb205cd2e59ffbf80 Mon Sep 17 00:00:00 2001
From: Craig Haseler <cahaseler@gmail.com>
Date: Tue, 10 Mar 2026 09:03:41 -0400
Subject: [PATCH 4/4] fix: type sortCol as keyof Ship for type-safe indexing

---
 src/app/ships/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/ships/page.tsx b/src/app/ships/page.tsx
index de17c40..379e373 100644
--- a/src/app/ships/page.tsx
+++ b/src/app/ships/page.tsx
@@ -267,7 +267,7 @@ export default function ShipsPage() {
   const [error, setError] = useState(false)
 
   const [viewMode, setViewMode] = useState<'grid' | 'table'>('grid')
-  const [sortCol, setSortCol] = useState<string>('tier')
+  const [sortCol, setSortCol] = useState<keyof Ship>('tier')
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
   const [tableExpandedId, setTableExpandedId] = useState<string | null>(null)
 
@@ -313,7 +313,7 @@ export default function ShipsPage() {
     }
   }, [])
 
-  const handleSort = useCallback((col: string) => {
+  const handleSort = useCallback((col: keyof Ship) => {
     if (sortCol === col) {
       setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
     } else {
@@ -408,8 +408,8 @@ export default function ShipsPage() {
 
   const tableShips = useMemo(() => {
     return [...filteredShips].sort((a, b) => {
-      const av = (a as unknown as Record<string, unknown>)[sortCol]
-      const bv = (b as unknown as Record<string, unknown>)[sortCol]
+      const av = a[sortCol]
+      const bv = b[sortCol]
       let cmp = 0
       if (typeof av === 'number' && typeof bv === 'number') {
         cmp = av - bv
@@ -854,7 +854,7 @@ export default function ShipsPage() {
                   <th
                     key={col.key}
                     className={`${styles.tableHeaderCell} ${sortCol === col.key ? styles.sortActive : ''}`}
-                    onClick={() => handleSort(col.key)}
+                    onClick={() => handleSort(col.key as keyof Ship)}
                     title={col.title}
                   >
                     {col.label}