From 35884f6fb63c3dd7c82bdd043722c051c0188597 Mon Sep 17 00:00:00 2001
From: Iain Collins <me@iaincollins.com>
Date: Wed, 9 Oct 2024 13:50:53 +0100
Subject: [PATCH] Improve system imports/exports

Highlight (and sort by) category, number of importers/exporters and filter out where import demand is zero.
---
 lib/system-exports.js               |  1 +
 lib/system-imports.js               |  2 ++
 package.json                        |  2 +-
 pages/system/[system-name]/index.js | 33 +++++++++++++++++++++++++----
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/lib/system-exports.js b/lib/system-exports.js
index 0357fde..ae240a5 100644
--- a/lib/system-exports.js
+++ b/lib/system-exports.js
@@ -43,4 +43,5 @@ module.exports = async (systemName) => {
 
   return Object.values(exportOrdersGroupedByCommodity)
     .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.category.localeCompare(b.category))
 }
diff --git a/lib/system-imports.js b/lib/system-imports.js
index bbe82c8..148d16e 100644
--- a/lib/system-imports.js
+++ b/lib/system-imports.js
@@ -49,5 +49,7 @@ module.exports = async (systemName) => {
   })
 
   return Object.values(importOrdersGroupedByCommodity)
+    .filter(c => c.totalDemand)
     .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => a.category.localeCompare(b.category))
 }
diff --git a/package.json b/package.json
index 441b018..d48483f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ardent-www",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "description": "Ardent Industry",
   "main": "index.js",
   "scripts": {
diff --git a/pages/system/[system-name]/index.js b/pages/system/[system-name]/index.js
index f2f1e7f..55e51b5 100644
--- a/pages/system/[system-name]/index.js
+++ b/pages/system/[system-name]/index.js
@@ -419,7 +419,10 @@ export default () => {
                       render: (v, r) =>
                         <>
                           <i className='icon icarus-terminal-cargo' />{v}<br />
-                          <small>{r.importOrders.length === 1 ? '1 importer ' : `${r.importOrders.length} importers`}</small>
+                          <div className='is-visible-mobile'>
+                            <small style={{ float: 'right' }}>{r.importOrders.length === 1 ? '1 importer ' : `${r.importOrders.length} importers`}</small>
+                          </div>
+                          <small>{r.category}</small>
                           {r?.consumer === true && <small> | Consumer</small>}
                           <div className='is-visible-mobile'>
                             <table className='data-table--mini data-table--compact two-column-table'>
@@ -440,6 +443,16 @@ export default () => {
                           </div>
                         </>
                     },
+                    {
+                      title: 'Importers',
+                      dataIndex: 'importOrders',
+                      key: 'importOrders',
+                      align: 'center',
+                      width: 100,
+                      className: 'is-hidden-mobile',
+                      render: (v) => <span className='muted'>{v.length === 1 ? '1 ' : `${v.length}`}<i style={{fontSize: '1.25rem', position: 'absolute', top: '1.3rem', marginLeft: '.25rem'}} className='icarus-terminal-settlement muted' /></span>
+                    },
+
                     {
                       title: 'Updated',
                       dataIndex: 'updatedAt',
@@ -454,7 +467,7 @@ export default () => {
                       dataIndex: 'totalDemand',
                       key: 'totalDemand',
                       align: 'right',
-                      width: 150,
+                      width: 200,
                       className: 'is-hidden-mobile no-wrap',
                       render: (v) => <>{v > 0 ? `${v.toLocaleString()} T` : <small>{NO_DEMAND_TEXT}</small>}</>
                     },
@@ -519,7 +532,10 @@ export default () => {
                       render: (v, r) =>
                         <>
                           <i className='icon icarus-terminal-cargo' />{v}<br />
-                          <small>{r.exportOrders.length === 1 ? '1 exporter ' : `${r.exportOrders.length} exporters`}</small>
+                          <div className='is-visible-mobile'>
+                            <small style={{ float: 'right' }}>{r.exportOrders.length === 1 ? '1 exporter ' : `${r.exportOrders.length} exporters`}</small>
+                          </div>
+                          <small>{r.category}</small>
                           {r?.producer === true && <small> | Producer</small>}
                           {r?.rare === true && <small> | Rare</small>}
                           <div className='is-visible-mobile'>
@@ -541,6 +557,15 @@ export default () => {
                           </div>
                         </>
                     },
+                    {
+                      title: 'Exporters',
+                      dataIndex: 'exportOrders',
+                      key: 'exportOrders',
+                      align: 'center',
+                      width: 100,
+                      className: 'is-hidden-mobile',
+                      render: (v) => <span className='muted'>{v.length === 1 ? '1 ' : `${v.length}`}<i style={{fontSize: '1.25rem', position: 'absolute', top: '1.3rem', marginLeft: '.25rem'}} className='icarus-terminal-settlement muted' /></span>
+                    },
                     {
                       title: 'Updated',
                       dataIndex: 'updatedAt',
@@ -555,7 +580,7 @@ export default () => {
                       dataIndex: 'totalStock',
                       key: 'totalStock',
                       align: 'right',
-                      width: 150,
+                      width: 200,
                       className: 'is-hidden-mobile no-wrap',
                       render: (v) => <>{v.toLocaleString()} T</>
                     },