From b89a946d8d7a68185b896bb600e6a14cd2399e21 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Fri, 9 Oct 2026 20:56:21 +0800
Subject: [PATCH 01/13] test: make the engine's own test suite bootable

The dummy app never ran: ember-classic-decorator (unused) crashes on Ember 5,
lazy loading kept the engine's modules out of the test bundle, and the host
services, config and intl data the panels need were missing. Mirrors what
fleetops already does: eager loading when `ember test` runs from this package,
an inert stand-in for the console's extensions module, the API config the
core adapter reads at module scope, and the legacy built-in components the
engine's templates still use.

The dummy intl service ignores missing locale data, since headless Chrome has
no number formats for every bundled locale, and the order details and network
controller tests stub the host router, fetch and app cache the way the widget
tests already do.
---
 index.js                                      |  8 +-
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 84 +++++++++++--------
 tests/dummy/app/services/intl.js              | 18 ++++
 tests/dummy/config/environment.js             | 14 ++++
 .../components/shared-identity-test.js        |  4 +-
 .../storefront/order/details-test.js          | 53 ++++++++++--
 .../components/widget/customers-test.js       |  8 ++
 tests/test-helper.js                          | 11 +++
 .../unit/controllers/customers/index-test.js  |  2 +
 .../networks/index/network/customers-test.js  |  8 ++
 .../networks/index/network/orders-test.js     |  8 ++
 tests/unit/controllers/orders/index-test.js   |  2 +
 13 files changed, 174 insertions(+), 50 deletions(-)
 create mode 100644 tests/dummy/app/services/intl.js

diff --git a/index.js b/index.js
index 005d7714..10a66128 100644
--- a/index.js
+++ b/index.js
@@ -8,8 +8,14 @@ const path = require('path');
 module.exports = buildEngine({
     name,
 
+    // Lazy loading keeps the engine out of the host bundle, but it also keeps the
+    // engine's modules out of the dummy app that `ember test` builds, so every test
+    // importing `@fleetbase/storefront-engine/*` fails to load. Eager loading is
+    // scoped to `ember test` run from this package, so host apps consuming the
+    // engine, including their own test builds, keep lazy loading. Addon index
+    // files are evaluated before ember-cli assigns EMBER_ENV, hence the argv check.
     lazyLoading: {
-        enabled: true,
+        enabled: !(process.argv.includes('test') && process.cwd() === __dirname),
     },
 
     isDevelopingAddon() {
diff --git a/package.json b/package.json
index 344a57db..33417fed 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
         "@babel/core": "^7.23.2",
         "@fleetbase/ember-core": "^0.3.25",
         "@fleetbase/ember-ui": "^0.4.5",
-        "@fleetbase/fleetops-data": "^0.2.3",
+        "@fleetbase/fleetops-data": "^0.2.2",
         "@fortawesome/ember-fontawesome": "^2.0.0",
         "@fortawesome/fontawesome-svg-core": "6.4.0",
         "@fortawesome/free-brands-svg-icons": "6.4.0",
@@ -61,6 +61,7 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.22.15",
         "@babel/plugin-proposal-decorators": "^7.23.2",
+        "@ember/legacy-built-in-components": "^0.4.2",
         "@ember/optional-features": "^2.0.0",
         "@ember/test-helpers": "^3.2.0",
         "@embroider/test-setup": "^3.0.2",
@@ -71,7 +72,6 @@
         "broccoli-funnel": "^3.0.8",
         "broccoli-merge-trees": "^4.2.0",
         "concurrently": "^8.2.2",
-        "ember-classic-decorator": "^3.0.0",
         "ember-cli": "~5.4.1",
         "ember-cli-clean-css": "^3.0.0",
         "ember-cli-dependency-checker": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 676fd872..091b4870 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ importers:
         specifier: ^0.4.5
         version: 0.4.5(fd4e3593913b6af1971bbb09f229d016)
       '@fleetbase/fleetops-data':
-        specifier: ^0.1.37
-        version: 0.1.37(d08c013ce78c1181b04d076f9e3ef4de)
+        specifier: ^0.2.2
+        version: 0.2.2(d08c013ce78c1181b04d076f9e3ef4de)
       '@fortawesome/ember-fontawesome':
         specifier: ^2.0.0
         version: 2.0.0(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(rollup@2.80.0)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3))
@@ -57,6 +57,9 @@ importers:
       '@babel/plugin-proposal-decorators':
         specifier: ^7.23.2
         version: 7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+      '@ember/legacy-built-in-components':
+        specifier: ^0.4.2
+        version: 0.4.2(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)
       '@ember/optional-features':
         specifier: ^2.0.0
         version: 2.3.0(supports-color@8.1.1)
@@ -87,9 +90,6 @@ importers:
       concurrently:
         specifier: ^8.2.2
         version: 8.2.2
-      ember-classic-decorator:
-        specifier: ^3.0.0
-        version: 3.0.1(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
       ember-cli:
         specifier: ~5.4.1
         version: 5.4.2(@babel/core@7.29.7(supports-color@8.1.1))(@types/node@25.9.1)(debug@4.4.3(supports-color@8.1.1))(handlebars@4.7.9)(supports-color@8.1.1)(underscore@1.13.8)
@@ -116,7 +116,7 @@ importers:
         version: 4.12.8(@babel/core@7.29.7(supports-color@8.1.1))(@ember/string@3.1.1(supports-color@8.1.1))(@glimmer/tracking@1.1.2)(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3))
       ember-engines:
         specifier: ^0.9.0
-        version: 0.9.0(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)
+        version: 0.9.0(@babel/core@7.29.7(supports-color@8.1.1))(@ember/legacy-built-in-components@0.4.2(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)
       ember-load-initializers:
         specifier: ^2.1.2
         version: 2.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
@@ -1147,6 +1147,12 @@ packages:
   '@ember/edition-utils@1.2.0':
     resolution: {integrity: sha512-VmVq/8saCaPdesQmftPqbFtxJWrzxNGSQ+e8x8LLe3Hjm36pJ04Q8LeORGZkAeOhldoUX9seLGmSaHeXkIqoog==}
 
+  '@ember/legacy-built-in-components@0.4.2':
+    resolution: {integrity: sha512-rJulbyVQIVe1zEDQDqAQHechHy44DsS2qxO24+NmU/AYxwPFSzWC/OZNCDFSfLU+Y5BVd/00qjxF0pu7Nk+TNA==}
+    engines: {node: 12.* || 14.* || >= 16}
+    peerDependencies:
+      ember-source: '*'
+
   '@ember/optional-features@2.3.0':
     resolution: {integrity: sha512-+M8CkPledQEaDbfIlwlq6Phgpm5jdT3a6WVDJk7b/zadw5xAJkuQKVK7DgR0SFgHGiWlyn6a8AU5p2mCA706RA==}
     engines: {node: 10.* || 12.* || >= 14}
@@ -1283,14 +1289,14 @@ packages:
     resolution: {integrity: sha512-C/+OvMpH5fCKYY5v+CteR6Tx6IAI33nfvOrmo7mFGDnyKDsjplsVVgWpsecLG94fJvpuVVI+CFvaiH50GUM3Mg==}
     engines: {node: '>= 18'}
 
-  '@fleetbase/fleetops-data@0.1.37':
-    resolution: {integrity: sha512-VGVWaGlwQAqHWA9/A80jKAjoDkAM7U9Ve1UVmKkCTlolqUd5/k/Z66rVC0iFUijj8qzkMCdahdh3mBPQ6x71WA==}
-    engines: {node: '>= 18'}
-
   '@fleetbase/fleetops-data@0.1.40':
     resolution: {integrity: sha512-bp4tWaS2cpnitjtmH9hm3T7milwSqgt4j3T/KA8cvsFpbg7p303ADb5CNml5RsribgdBcRYtMsLEFYeYnU9dpg==}
     engines: {node: '>= 18'}
 
+  '@fleetbase/fleetops-data@0.2.2':
+    resolution: {integrity: sha512-HDgcGpJAk8q+sSmV070nCh02o4S0kuFCvwrf+Ltb+IrUkQ2RhDL/w8gdrqM65HrgbgWxQnslIeqzKfF6pV4/DA==}
+    engines: {node: '>= 18'}
+
   '@fleetbase/intl-lint@0.0.1':
     resolution: {integrity: sha512-LkjxJr15hSiGmqh3JwixcpjmkhXNieNAEgQUVv1Duo50jTr/D5WXEyOaeI8wuVnVFhT+FS/DMqm403DgSKlsEg==}
     hasBin: true
@@ -3140,6 +3146,7 @@ packages:
 
   concat-stream@1.6.2:
     resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
+    engines: {'0': node >= 0.8}
 
   concurrently@8.2.2:
     resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==}
@@ -3750,10 +3757,6 @@ packages:
       ember-resolver: '>= 8.0.0'
       ember-source: ^3.28.0 || ^4.0.0 || >=5.0.0
 
-  ember-classic-decorator@3.0.1:
-    resolution: {integrity: sha512-IoocHPX1cY93Sma7VeDGbF0M1+TkBWDJLus+RD01902eD+KHEL2+diwM+iayCyO+1/xaUzdzNGh35J+i+TCxoA==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-cli-babel-plugin-helpers@1.1.1:
     resolution: {integrity: sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -9866,6 +9869,18 @@ snapshots:
 
   '@ember/edition-utils@1.2.0': {}
 
+  '@ember/legacy-built-in-components@0.4.2(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)':
+    dependencies:
+      '@embroider/macros': 1.20.3(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
+      ember-cli-babel: 7.26.11(supports-color@8.1.1)
+      ember-cli-htmlbars: 5.7.2(supports-color@8.1.1)
+      ember-cli-typescript: 4.2.1(supports-color@8.1.1)
+      ember-source: 5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3))
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@glint/template'
+      - supports-color
+
   '@ember/optional-features@2.3.0(supports-color@8.1.1)':
     dependencies:
       chalk: 4.1.2
@@ -9953,7 +9968,7 @@ snapshots:
       find-up: 5.0.0
       lodash: 4.18.1
       resolve: 1.22.12
-      semver: 7.8.1
+      semver: 7.8.5
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -10001,10 +10016,10 @@ snapshots:
       js-string-escape: 1.0.1
       lodash: 4.18.1
       minimatch: 3.1.5
-      pkg-entry-points: 1.1.1
+      pkg-entry-points: 1.1.2
       resolve-package-path: 4.0.3
       resolve.exports: 2.0.3
-      semver: 7.8.1
+      semver: 7.8.5
       typescript-memoize: 1.1.1
     transitivePeerDependencies:
       - supports-color
@@ -10249,6 +10264,7 @@ snapshots:
       - ember-cli-mirage
       - ember-resolver
       - ember-source
+      - encoding
       - eslint
       - miragejs
       - postcss
@@ -10263,7 +10279,7 @@ snapshots:
       - webpack-command
       - yaml
 
-  '@fleetbase/fleetops-data@0.1.37(d08c013ce78c1181b04d076f9e3ef4de)':
+  '@fleetbase/fleetops-data@0.1.40(d08c013ce78c1181b04d076f9e3ef4de)':
     dependencies:
       '@babel/core': 7.29.7(supports-color@8.1.1)
       '@fleetbase/ember-core': 0.3.25(d08c013ce78c1181b04d076f9e3ef4de)
@@ -10284,10 +10300,10 @@ snapshots:
       - utf-8-validate
       - webpack
 
-  '@fleetbase/fleetops-data@0.1.40(d08c013ce78c1181b04d076f9e3ef4de)':
+  '@fleetbase/fleetops-data@0.2.2(d08c013ce78c1181b04d076f9e3ef4de)':
     dependencies:
       '@babel/core': 7.29.7(supports-color@8.1.1)
-      '@fleetbase/ember-core': 0.3.24(d08c013ce78c1181b04d076f9e3ef4de)
+      '@fleetbase/ember-core': 0.3.25(d08c013ce78c1181b04d076f9e3ef4de)
       date-fns: 2.30.0
       ember-cli-babel: 8.3.1(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
       ember-cli-htmlbars: 6.3.0(supports-color@8.1.1)
@@ -10298,6 +10314,7 @@ snapshots:
       - bufferutil
       - ember-resolver
       - ember-source
+      - encoding
       - eslint
       - supports-color
       - typescript
@@ -11055,7 +11072,7 @@ snapshots:
 
   '@types/glob@9.0.0':
     dependencies:
-      glob: 8.1.0
+      glob: 13.0.6
 
   '@types/http-errors@2.0.5': {}
 
@@ -11080,7 +11097,7 @@ snapshots:
 
   '@types/minimatch@6.0.0':
     dependencies:
-      minimatch: 7.4.9
+      minimatch: 10.2.5
 
   '@types/minimist@1.2.5': {}
 
@@ -11586,7 +11603,7 @@ snapshots:
       babel-generator: 6.26.1
       babel-helpers: 6.24.1(supports-color@8.1.1)
       babel-messages: 6.23.0
-      babel-register: 6.26.0
+      babel-register: 6.26.0(supports-color@8.1.1)
       babel-runtime: 6.26.0
       babel-template: 6.26.0(supports-color@8.1.1)
       babel-traverse: 6.26.0(supports-color@8.1.1)
@@ -11742,7 +11759,7 @@ snapshots:
 
   babel-plugin-syntax-dynamic-import@6.18.0: {}
 
-  babel-register@6.26.0:
+  babel-register@6.26.0(supports-color@8.1.1):
     dependencies:
       babel-core: 6.26.3(supports-color@8.1.1)
       babel-runtime: 6.26.0
@@ -11751,6 +11768,8 @@ snapshots:
       lodash: 4.18.1
       mkdirp: 0.5.6
       source-map-support: 0.4.18
+    transitivePeerDependencies:
+      - supports-color
 
   babel-runtime@6.26.0:
     dependencies:
@@ -13512,17 +13531,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  ember-classic-decorator@3.0.1(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1):
-    dependencies:
-      '@embroider/macros': 1.20.3(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
-      babel-plugin-filter-imports: 4.0.0
-      ember-cli-babel: 7.26.11(supports-color@8.1.1)
-      ember-cli-htmlbars: 6.3.0(supports-color@8.1.1)
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@glint/template'
-      - supports-color
-
   ember-cli-babel-plugin-helpers@1.1.1: {}
 
   ember-cli-babel@7.26.11(supports-color@8.1.1):
@@ -13655,7 +13663,7 @@ snapshots:
       hash-for-dep: 1.5.2(supports-color@8.1.1)
       heimdalljs-logger: 0.1.10(supports-color@8.1.1)
       json-stable-stringify: 1.3.0
-      semver: 7.8.1
+      semver: 7.8.5
       silent-error: 1.1.1(supports-color@8.1.1)
       strip-bom: 4.0.0
       walk-sync: 2.2.0
@@ -14173,7 +14181,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-engines@0.9.0(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1):
+  ember-engines@0.9.0(@babel/core@7.29.7(supports-color@8.1.1))(@ember/legacy-built-in-components@0.4.2(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1):
     dependencies:
       '@embroider/macros': 1.20.3(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1)
       amd-name-resolver: 1.3.1
@@ -14193,6 +14201,8 @@ snapshots:
       ember-cli-version-checker: 5.1.2(supports-color@8.1.1)
       ember-source: 5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3))
       lodash: 4.18.1
+    optionalDependencies:
+      '@ember/legacy-built-in-components': 0.4.2(@babel/core@7.29.7(supports-color@8.1.1))(ember-source@5.4.1(@babel/core@7.29.7(supports-color@8.1.1))(@glimmer/component@1.1.2(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(rsvp@4.8.5)(supports-color@8.1.1)(webpack@5.107.2(clean-css@5.3.3)(postcss@8.5.15)(uglify-js@3.19.3)))(supports-color@8.1.1)
     transitivePeerDependencies:
       - '@babel/core'
       - '@glint/template'
diff --git a/tests/dummy/app/services/intl.js b/tests/dummy/app/services/intl.js
new file mode 100644
index 00000000..90cd3308
--- /dev/null
+++ b/tests/dummy/app/services/intl.js
@@ -0,0 +1,18 @@
+import IntlService from 'ember-intl/services/intl';
+
+/**
+ * ember-intl builds a formatter for every bundled locale when the service is
+ * created. Headless Chrome ships no number-format data for some of them
+ * (Mongolian among them), which ember-intl's default handler turns into a thrown
+ * error inside whichever test first touches intl. Missing locale data and
+ * missing translations are not what any test here checks, so both are ignored.
+ */
+export default class DummyIntlService extends IntlService {
+    onIntlError(error) {
+        if (error?.code === 'MISSING_DATA' || error?.code === 'MISSING_TRANSLATION') {
+            return;
+        }
+
+        super.onIntlError(error);
+    }
+}
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
index 61f3a09d..12eb0fdb 100644
--- a/tests/dummy/config/environment.js
+++ b/tests/dummy/config/environment.js
@@ -14,6 +14,20 @@ module.exports = function (environment) {
             },
         },
 
+        // `@fleetbase/ember-core`'s application adapter reads `config.API.host` at
+
+        // module scope, so the dummy application must declare it before any
+
+        // adapter module can even be evaluated. The values are deliberately
+
+        // obviously-fake: nothing in the suite performs a real request.
+
+        API: {
+            host: 'https://api.fleetbase.test',
+
+            namespace: 'int/v1',
+        },
+
         APP: {
             // Here you can pass flags/options to your application instance
             // when it is created
diff --git a/tests/integration/components/shared-identity-test.js b/tests/integration/components/shared-identity-test.js
index 00bf135c..aed5eba7 100644
--- a/tests/integration/components/shared-identity-test.js
+++ b/tests/integration/components/shared-identity-test.js
@@ -17,7 +17,7 @@ module('Integration | Component | shared identity components', function (hooks)
     });
 
     test('a driver identity cell renders the name, status dot and vehicle badge from the shared descriptor', async function (assert) {
-        this.set('row', { driver_assigned: { resourceType: 'driver', name: 'Ada Driver', status: 'available', vehicle_name: 'Truck 10' } });
+        this.set('row', { driver_assigned: { resourceType: 'driver', name: 'Ada Driver', status: 'available', online: true, vehicle_name: 'Truck 10' } });
         this.set('column', { resourceType: 'driver', resourcePath: 'driver_assigned', popover: false });
 
         await render(hbs`<Table::Cell::Identity @row={{this.row}} @column={{this.column}} />`);
@@ -52,7 +52,7 @@ module('Integration | Component | shared identity components', function (hooks)
         `);
 
         assert.dom('[data-test-customer] [data-test-resource-pill-title]').hasText('Ava Chen');
-        assert.dom('[data-test-customer] [data-test-resource-pill-subtitle]').hasText('Customer');
+        assert.dom('[data-test-customer] [data-test-resource-pill-subtitle]').hasText('Contact', 'the polymorphic type reads as a person would say it');
         assert.dom('[data-test-driver] [data-test-resource-pill-title]').hasText('Ada Driver');
         assert.dom('[data-test-driver] [data-test-resource-pill-subtitle]').hasText('+15550100');
         assert.dom('[data-test-place] [data-test-resource-pill-title]').hasText('Depot');
diff --git a/tests/integration/components/storefront/order/details-test.js b/tests/integration/components/storefront/order/details-test.js
index 981b8944..185ebc4a 100644
--- a/tests/integration/components/storefront/order/details-test.js
+++ b/tests/integration/components/storefront/order/details-test.js
@@ -1,13 +1,49 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
-import { render } from '@ember/test-helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import { render, findAll } from '@ember/test-helpers';
+import Service from '@ember/service';
 import { hbs } from 'ember-cli-htmlbars';
 import { initialize } from '@fleetbase/fleetops-data/instance-initializers/register-shared-resource-descriptors';
 
 module('Integration | Component | storefront/order/details', function (hooks) {
     setupRenderingTest(hooks);
+    setupIntl(hooks, 'en-us');
 
     hooks.beforeEach(function () {
+        // The activity, route and tracking panels fetch on insert and the dummy app has
+        // no API. A request that never answers leaves each task pending, and ember-concurrency
+        // cancels it with its component, so nothing writes to a torn-down panel.
+        this.owner.register(
+            'service:fetch',
+            class extends Service {
+                get() {
+                    return new Promise(() => {});
+                }
+
+                post() {
+                    return new Promise(() => {});
+                }
+            }
+        );
+        // The app cache keeps a proxy that outlives a test's owner; the activity panel reads
+        // it while initialising, so give it an inert cache like the widget tests do.
+        this.owner.register(
+            'service:app-cache',
+            class extends Service {
+                get() {
+                    return undefined;
+                }
+
+                set() {}
+
+                setEmberData() {}
+
+                getEmberData() {
+                    return [];
+                }
+            }
+        );
         initialize(this.owner);
     });
 
@@ -55,13 +91,14 @@ module('Integration | Component | storefront/order/details', function (hooks) {
 
         await render(hbs`<Storefront::Order::Details @resource={{this.order}} />`);
 
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Activity');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Store');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Order');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Details');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Customer Insights');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Route');
-        assert.dom('.next-content-panel-title-container').hasTextContaining('Metadata');
+        const titles = findAll('.next-content-panel-title-container').map((element) => element.textContent.trim());
+
+        for (const title of ['Activity', 'Store', 'Order', 'Details', 'Customer Insights', 'Route', 'Metadata']) {
+            assert.ok(
+                titles.some((text) => text.includes(title)),
+                `a panel titled ${title} renders`
+            );
+        }
         assert.dom('.storefront-order-person__name').hasTextContaining('Tasty Store');
         assert.dom('[data-test-order-driver-pill] [data-test-resource-pill-title]').hasText('No driver assigned', 'an unassigned driver is a static pill with the fallback title');
         assert.dom('[data-test-order-customer-pill] [data-test-resource-pill-title]').hasText('No customer');
diff --git a/tests/integration/components/widget/customers-test.js b/tests/integration/components/widget/customers-test.js
index 4aa03639..9a9f20b2 100644
--- a/tests/integration/components/widget/customers-test.js
+++ b/tests/integration/components/widget/customers-test.js
@@ -26,6 +26,14 @@ class FetchStubService extends Service {
 }
 
 class IntlStubService extends Service {
+    exists() {
+        return false;
+    }
+
+    onLocaleChanged() {
+        return () => {};
+    }
+
     t(key) {
         if (key === 'storefront.component.widget.customers.widget-title') {
             return 'Recent Customers';
diff --git a/tests/test-helper.js b/tests/test-helper.js
index 4efd6e58..d355f8d0 100644
--- a/tests/test-helper.js
+++ b/tests/test-helper.js
@@ -5,6 +5,17 @@ import { setApplication } from '@ember/test-helpers';
 import { setup } from 'qunit-dom';
 import { start } from 'ember-qunit';
 
+// The universe extension manager imports a module the console host generates at build
+// time. The engine's dummy app has no host, so provide an inert stand-in before boot.
+if (typeof window.define === 'function' && !window.requirejs?.entries?.['@fleetbase/console/extensions']) {
+    window.define('@fleetbase/console/extensions', ['exports'], function (exports) {
+        exports.getExtensionLoader = function () {
+            return null;
+        };
+        exports.default = {};
+    });
+}
+
 setApplication(Application.create(config.APP));
 
 setup(QUnit.assert);
diff --git a/tests/unit/controllers/customers/index-test.js b/tests/unit/controllers/customers/index-test.js
index d8189724..d29291a8 100644
--- a/tests/unit/controllers/customers/index-test.js
+++ b/tests/unit/controllers/customers/index-test.js
@@ -1,8 +1,10 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
 
 module('Unit | Controller | customers/index', function (hooks) {
     setupTest(hooks);
+    setupIntl(hooks, 'en-us');
 
     test('it exists', function (assert) {
         let controller = this.owner.lookup('controller:customers/index');
diff --git a/tests/unit/controllers/networks/index/network/customers-test.js b/tests/unit/controllers/networks/index/network/customers-test.js
index bd90c9fb..b86fd691 100644
--- a/tests/unit/controllers/networks/index/network/customers-test.js
+++ b/tests/unit/controllers/networks/index/network/customers-test.js
@@ -1,8 +1,16 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import Service from '@ember/service';
 
 module('Unit | Controller | networks/index/network/customers', function (hooks) {
     setupTest(hooks);
+    setupIntl(hooks, 'en-us');
+
+    hooks.beforeEach(function () {
+        // The engine's dummy app has no console host to provide the host router.
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
 
     test('it exists', function (assert) {
         let controller = this.owner.lookup('controller:networks/index/network/customers');
diff --git a/tests/unit/controllers/networks/index/network/orders-test.js b/tests/unit/controllers/networks/index/network/orders-test.js
index 141a91cc..a6b26e5d 100644
--- a/tests/unit/controllers/networks/index/network/orders-test.js
+++ b/tests/unit/controllers/networks/index/network/orders-test.js
@@ -1,8 +1,16 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import Service from '@ember/service';
 
 module('Unit | Controller | networks/index/network/orders', function (hooks) {
     setupTest(hooks);
+    setupIntl(hooks, 'en-us');
+
+    hooks.beforeEach(function () {
+        // The engine's dummy app has no console host to provide the host router.
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
 
     test('it exists', function (assert) {
         let controller = this.owner.lookup('controller:networks/index/network/orders');
diff --git a/tests/unit/controllers/orders/index-test.js b/tests/unit/controllers/orders/index-test.js
index 6c9ca5d4..5a2748a1 100644
--- a/tests/unit/controllers/orders/index-test.js
+++ b/tests/unit/controllers/orders/index-test.js
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
 import Service from '@ember/service';
 
 module('Unit | Controller | orders/index', function (hooks) {
     setupTest(hooks);
+    setupIntl(hooks, 'en-us');
 
     test('it exists', function (assert) {
         let controller = this.owner.lookup('controller:orders/index');

From 3c6ad104cdd805ad89dd676b382b540a1df689bb Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 12:03:38 +0800
Subject: [PATCH 02/13] feat(food-trucks): networks show their member stores'
 trucks; a truck is only found by its own storefront

---
 .../Controllers/v1/FoodTruckController.php    | 56 ++++++++++++++-----
 server/src/Http/Resources/FoodTruck.php       |  8 +++
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/server/src/Http/Controllers/v1/FoodTruckController.php b/server/src/Http/Controllers/v1/FoodTruckController.php
index be35a803..4f07070b 100644
--- a/server/src/Http/Controllers/v1/FoodTruckController.php
+++ b/server/src/Http/Controllers/v1/FoodTruckController.php
@@ -5,6 +5,7 @@
 use Fleetbase\Http\Controllers\Controller;
 use Fleetbase\Storefront\Http\Resources\FoodTruck as FoodTruckResource;
 use Fleetbase\Storefront\Models\FoodTruck;
+use Fleetbase\Storefront\Models\Network;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Http\Request;
 
@@ -17,25 +18,47 @@ class FoodTruckController extends Controller
      */
     public function query(Request $request)
     {
-        $limit   = $request->input('limit', false);
-        $offset  = $request->input('offset', false);
-        $results = [];
+        $limit    = $request->input('limit', false);
+        $offset   = $request->input('offset', false);
+        $storeIds = static::storeUuidsForStorefront();
+        if (empty($storeIds)) {
+            return FoodTruckResource::collection([]);
+        }
+
+        $results = FoodTruck::queryWithRequestCached($request, function (&$query) use ($limit, $offset, $storeIds) {
+            $query->whereIn('store_uuid', $storeIds)->with(['store', 'vehicle', 'zone', 'serviceArea', 'catalogs']);
+
+            if ($limit) {
+                $query->limit($limit);
+            }
+
+            if ($offset) {
+                $query->offset($offset);
+            }
+        });
 
+        return FoodTruckResource::collection($results);
+    }
+
+    /**
+     * The stores whose food trucks this storefront shows: a store's own, or in a network
+     * every member store's, so a network can run trucks alongside its stores.
+     *
+     * @return array<string>
+     */
+    protected static function storeUuidsForStorefront(): array
+    {
         if (session('storefront_store')) {
-            $results = FoodTruck::queryWithRequestCached($request, function (&$query) use ($limit, $offset) {
-                $query->where('store_uuid', session('storefront_store'));
+            return [session('storefront_store')];
+        }
 
-                if ($limit) {
-                    $query->limit($limit);
-                }
+        if (session('storefront_network')) {
+            $network = Network::where('uuid', session('storefront_network'))->first();
 
-                if ($offset) {
-                    $query->offset($offset);
-                }
-            });
+            return $network ? $network->stores()->pluck('stores.uuid')->all() : [];
         }
 
-        return FoodTruckResource::collection($results);
+        return [];
     }
 
     /**
@@ -52,6 +75,13 @@ public function find($id)
             return response()->error('Food Truck resource not found.');
         }
 
+        // Only a truck of this storefront (its own, or a network member store's).
+        if (!in_array($foodTruck->store_uuid, static::storeUuidsForStorefront(), true)) {
+            return response()->error('Food Truck resource not found.', 404);
+        }
+
+        $foodTruck->loadMissing(['store', 'vehicle', 'zone', 'serviceArea', 'catalogs']);
+
         // response the product resource
         return new FoodTruckResource($foodTruck);
     }
diff --git a/server/src/Http/Resources/FoodTruck.php b/server/src/Http/Resources/FoodTruck.php
index 942e3624..028be3e6 100644
--- a/server/src/Http/Resources/FoodTruck.php
+++ b/server/src/Http/Resources/FoodTruck.php
@@ -36,6 +36,14 @@ public function toArray($request)
             'location'                       => $this->vehicle ? $this->vehicle->location : null,
             'online'                         => $this->vehicle ? $this->vehicle->online : false,
             'status'                         => $this->status,
+            // The store the truck belongs to, so a network can name it and order from it.
+            'store'                          => $this->whenLoaded('store', fn () => $this->store ? [
+                'id'          => $this->store->public_id,
+                'name'        => $this->store->name,
+                'logo_url'    => $this->store->logo_url,
+                'currency'    => $this->store->currency,
+                'options'     => $this->store->options,
+            ] : null),
             'created_at'                     => $this->created_at,
             'updated_at'                     => $this->updated_at,
         ];

From e60a7066048f28aa5f12a8c3d08a6511854afb81 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 12:30:24 +0800
Subject: [PATCH 03/13] feat(cards): catalogs, trucks and networks render on
 the shared resource card

Catalog, truck and network index pages use Layout::Resource::CardsGrid with
one card each on Layout::Resource::Card, following the Fleet-Ops anatomy:
identity and subtitle in the header, media or facts in the body, status,
icon actions and meta in the footer, with registry slots at each end.

A catalog card shows its categories with product counts, its hours as a
seven-day strip (the new Storefront::HoursStrip) and its product total; a
draft is dashed. A truck card is a Vehicle::Pill with the online dot, the
vehicle photo, where it serves, and a presence badge that says serving,
offline, inactive, or online with no catalog. A network card shows the logo on
its backdrop, the online state, the currency and member count.

"Food trucks" reads "Trucks" in the UI; the food-truck model, routes and
permissions keep their names. The catalogs and trucks pages gain the search
the header already offered.
---
 addon/components/modals/create-food-truck.hbs |  12 +-
 addon/components/storefront/catalog/card.hbs  |  53 +++++
 addon/components/storefront/catalog/card.js   |  48 ++++
 addon/components/storefront/hours-strip.hbs   |   8 +
 addon/components/storefront/hours-strip.js    |  34 +++
 addon/components/storefront/network/card.hbs  |  44 ++++
 addon/components/storefront/network/card.js   |  29 +++
 addon/components/storefront/truck/card.hbs    |  49 ++++
 addon/components/storefront/truck/card.js     |  74 ++++++
 addon/controllers/application.js              |   2 +-
 addon/controllers/catalogs/index.js           |  17 +-
 addon/controllers/food-trucks/index.js        |  27 ++-
 addon/models/food-truck.js                    |   2 +
 addon/styles/storefront-engine.css            | 225 ++++++++++++++++++
 addon/templates/catalogs/index.hbs            |  57 ++---
 addon/templates/food-trucks/index.hbs         |  59 ++---
 addon/templates/networks/index.hbs            |  91 ++-----
 app/components/storefront/catalog/card.js     |   1 +
 app/components/storefront/hours-strip.js      |   1 +
 app/components/storefront/network/card.js     |   1 +
 app/components/storefront/truck/card.js       |   1 +
 .../storefront/catalog/card-test.js           |  53 +++++
 .../components/storefront/hours-strip-test.js |  33 +++
 .../storefront/network/card-test.js           |  48 ++++
 .../components/storefront/truck/card-test.js  |  59 +++++
 translations/en-us.yaml                       |  32 ++-
 26 files changed, 888 insertions(+), 172 deletions(-)
 create mode 100644 addon/components/storefront/catalog/card.hbs
 create mode 100644 addon/components/storefront/catalog/card.js
 create mode 100644 addon/components/storefront/hours-strip.hbs
 create mode 100644 addon/components/storefront/hours-strip.js
 create mode 100644 addon/components/storefront/network/card.hbs
 create mode 100644 addon/components/storefront/network/card.js
 create mode 100644 addon/components/storefront/truck/card.hbs
 create mode 100644 addon/components/storefront/truck/card.js
 create mode 100644 app/components/storefront/catalog/card.js
 create mode 100644 app/components/storefront/hours-strip.js
 create mode 100644 app/components/storefront/network/card.js
 create mode 100644 app/components/storefront/truck/card.js
 create mode 100644 tests/integration/components/storefront/catalog/card-test.js
 create mode 100644 tests/integration/components/storefront/hours-strip-test.js
 create mode 100644 tests/integration/components/storefront/network/card-test.js
 create mode 100644 tests/integration/components/storefront/truck/card-test.js

diff --git a/addon/components/modals/create-food-truck.hbs b/addon/components/modals/create-food-truck.hbs
index 3332b6b6..cfc3e543 100644
--- a/addon/components/modals/create-food-truck.hbs
+++ b/addon/components/modals/create-food-truck.hbs
@@ -1,11 +1,11 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
-        <InputGroup @name="Assign Food Truck Vehicle">
+        <InputGroup @name="Vehicle">
             <ModelSelect
                 @modelName="vehicle"
                 @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                 @selectedModel={{@options.foodTruck.vehicle}}
-                @placeholder="Assign Food Truck Vehicle"
+                @placeholder="Select the vehicle for this truck"
                 @triggerClass="form-select form-input"
                 @infiniteScroll={{false}}
                 @renderInPlace={{true}}
@@ -19,7 +19,7 @@
             <ModelSelect
                 @modelName="service-area"
                 @selectedModel={{@options.foodTruck.service_area}}
-                @placeholder="Assign Food Truck to Service Area"
+                @placeholder="Assign the truck to a service area"
                 @triggerClass="form-select form-input"
                 @infiniteScroll={{false}}
                 @renderInPlace={{true}}
@@ -36,7 +36,7 @@
                     @modelName="zone"
                     @selectedModel={{@options.foodTruck.zone}}
                     @query={{hash service_area_uuid=@options.foodTruck.service_area.id}}
-                    @placeholder="Assign Food Truck to Zone"
+                    @placeholder="Assign the truck to a zone"
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
@@ -48,11 +48,11 @@
                 </ModelSelect>
             </InputGroup>
         {{/if}}
-        <InputGroup @name="Food Truck Status">
+        <InputGroup @name="Truck Status">
             <Select
                 class="w-full"
                 @value={{@options.foodTruck.status}}
-                @placeholder="Select food truck status"
+                @placeholder="Select truck status"
                 @options={{@options.statusOptions}}
                 @onSelect={{fn (mut @options.foodTruck.status)}}
                 @humanize={{true}}
diff --git a/addon/components/storefront/catalog/card.hbs b/addon/components/storefront/catalog/card.hbs
new file mode 100644
index 00000000..acd68751
--- /dev/null
+++ b/addon/components/storefront/catalog/card.hbs
@@ -0,0 +1,53 @@
+<Layout::Resource::Card class="storefront-card storefront-catalog-card {{if this.isDraft 'is-draft'}}" data-test-storefront-catalog-card ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="storefront:component:catalog:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @catalog={{this.catalog}} @resource={{this.catalog}} />
+        </RegistryYield>
+        <div class="storefront-card__title">
+            {{#if @onEdit}}
+                <a href="javascript:;" class="storefront-card__title-text" {{on "click" (fn @onEdit this.catalog)}} data-test-catalog-name>{{n-a this.catalog.name}}</a>
+            {{else}}
+                <span class="storefront-card__title-text" data-test-catalog-name>{{n-a this.catalog.name}}</span>
+            {{/if}}
+            <Badge @status={{this.status}} @size="xs" @hideStatusDot={{true}} data-test-catalog-status />
+        </div>
+        <div class="storefront-card__subtitle">{{n-a this.catalog.description (t "storefront.catalogs.card.no-description")}}</div>
+        <RegistryYield @registry="storefront:component:catalog:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @catalog={{this.catalog}} @resource={{this.catalog}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="storefront-card__body {{@bodyClass}}">
+        {{#if this.isEmpty}}
+            <div class="storefront-card__empty" data-test-catalog-empty>{{t "storefront.catalogs.card.no-categories"}}</div>
+        {{else}}
+            <div class="storefront-card__chips" data-test-catalog-categories>
+                {{#each this.categorySummaries as |category|}}
+                    <span class="storefront-card__chip" data-test-catalog-category>{{category.name}} <span class="storefront-card__chip-count">{{category.count}}</span></span>
+                {{/each}}
+            </div>
+        {{/if}}
+        <Storefront::HoursStrip @hours={{this.hours}} class="storefront-card__hours" />
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="storefront:component:catalog:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @catalog={{this.catalog}} @resource={{this.catalog}} />
+        </RegistryYield>
+        <div class="storefront-card__actions">
+            <span class="storefront-card__count" data-test-catalog-products-count>{{t "storefront.catalogs.card.products-count" count=this.productsCount}}</span>
+            <div class="storefront-card__buttons">
+                {{#if @onEdit}}
+                    <Button @icon="pencil" @size="xs" @helpText={{t "storefront.common.edit"}} @onClick={{fn @onEdit this.catalog}} @permission="storefront update catalog" data-test-catalog-edit />
+                {{/if}}
+                {{#if @onDelete}}
+                    <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "storefront.common.delete"}} @onClick={{fn @onDelete this.catalog}} @permission="storefront delete catalog" data-test-catalog-delete />
+                {{/if}}
+            </div>
+        </div>
+        <div class="storefront-card__meta">
+            <span>{{t "storefront.common.last-modified"}}: {{this.catalog.updatedAgo}}</span>
+        </div>
+        <RegistryYield @registry="storefront:component:catalog:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @catalog={{this.catalog}} @resource={{this.catalog}} />
+        </RegistryYield>
+    </Card.footer>
+</Layout::Resource::Card>
diff --git a/addon/components/storefront/catalog/card.js b/addon/components/storefront/catalog/card.js
new file mode 100644
index 00000000..9cc4721d
--- /dev/null
+++ b/addon/components/storefront/catalog/card.js
@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+/**
+ * A catalog on the shared card anatomy: name and status in the header, the
+ * categories it contains with their product counts in the body, its hours
+ * strip, and the status, actions and counts in the footer.
+ */
+export default class StorefrontCatalogCardComponent extends Component {
+    get catalog() {
+        return this.args.catalog ?? this.args.resource;
+    }
+
+    get categories() {
+        const categories = get(this.catalog, 'categories');
+
+        return categories ? categories.slice() : [];
+    }
+
+    get categorySummaries() {
+        return this.categories.map((category) => ({
+            name: get(category, 'name'),
+            count: (get(category, 'products') ?? []).length,
+        }));
+    }
+
+    get productsCount() {
+        return this.categorySummaries.reduce((total, category) => total + category.count, 0);
+    }
+
+    get hours() {
+        const hours = get(this.catalog, 'hours');
+
+        return hours ? hours.slice() : [];
+    }
+
+    get status() {
+        return get(this.catalog, 'status') ?? 'draft';
+    }
+
+    get isDraft() {
+        return this.status === 'draft';
+    }
+
+    get isEmpty() {
+        return this.categories.length === 0;
+    }
+}
diff --git a/addon/components/storefront/hours-strip.hbs b/addon/components/storefront/hours-strip.hbs
new file mode 100644
index 00000000..e9b01a40
--- /dev/null
+++ b/addon/components/storefront/hours-strip.hbs
@@ -0,0 +1,8 @@
+<div class="storefront-hours-strip {{@class}}" role="img" aria-label="{{this.openDays}} of 7 days" data-test-hours-strip ...attributes>
+    {{#each this.days as |day|}}
+        <span class="storefront-hours-strip__day {{if day.open 'is-open' 'is-closed'}}" title={{day.title}} data-test-hours-day={{day.key}} data-open={{if day.open "true" "false"}}>
+            <span class="storefront-hours-strip__label">{{day.label}}</span>
+            <span class="storefront-hours-strip__bar"></span>
+        </span>
+    {{/each}}
+</div>
diff --git a/addon/components/storefront/hours-strip.js b/addon/components/storefront/hours-strip.js
new file mode 100644
index 00000000..8f7e3c41
--- /dev/null
+++ b/addon/components/storefront/hours-strip.js
@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+
+const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+/**
+ * A seven-cell strip that shows which days a schedule covers, from a list of
+ * hour records (`day_of_week`, `start`, `end`) the way catalog, store and
+ * product hours are stored. Each cell carries the day's hours as its title.
+ */
+export default class StorefrontHoursStripComponent extends Component {
+    get days() {
+        const hours = (this.args.hours ?? []).filter(Boolean);
+
+        return DAYS.map((day) => {
+            const matches = hours.filter((hour) =>
+                String(hour.day_of_week ?? '')
+                    .toLowerCase()
+                    .startsWith(day.slice(0, 3))
+            );
+            const ranges = matches.map((hour) => [hour.start, hour.end].filter(Boolean).join(' to ')).filter(Boolean);
+
+            return {
+                key: day,
+                label: day.charAt(0).toUpperCase() + day.slice(1, 3),
+                open: matches.length > 0,
+                title: ranges.length ? `${day.charAt(0).toUpperCase() + day.slice(1)}: ${ranges.join(', ')}` : `${day.charAt(0).toUpperCase() + day.slice(1)}: closed`,
+            };
+        });
+    }
+
+    get openDays() {
+        return this.days.filter((day) => day.open).length;
+    }
+}
diff --git a/addon/components/storefront/network/card.hbs b/addon/components/storefront/network/card.hbs
new file mode 100644
index 00000000..c0350f59
--- /dev/null
+++ b/addon/components/storefront/network/card.hbs
@@ -0,0 +1,44 @@
+<Layout::Resource::Card class="storefront-card storefront-network-card" data-test-storefront-network-card ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="storefront:component:network:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @network={{this.network}} @resource={{this.network}} />
+        </RegistryYield>
+        <div class="storefront-card__title">
+            {{#if @onOpen}}
+                <a href="javascript:;" class="storefront-card__title-text" {{on "click" (fn @onOpen this.network)}} data-test-network-name>{{n-a this.network.name}}</a>
+            {{else}}
+                <span class="storefront-card__title-text" data-test-network-name>{{n-a this.network.name}}</span>
+            {{/if}}
+            <FaIcon @icon="circle" @size="xs" class="storefront-card__indicator {{if this.isOnline 'text-green-500' 'text-gray-400'}}" title={{if this.isOnline (t "storefront.common.online") (t "storefront.common.offline")}} data-test-network-indicator />
+        </div>
+        <div class="storefront-card__subtitle">{{n-a this.network.currency}} · {{t "storefront.networks.card.stores-count" count=this.storesCount}}</div>
+        <RegistryYield @registry="storefront:component:network:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @network={{this.network}} @resource={{this.network}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="storefront-card__media-body storefront-network-card__backdrop {{@bodyClass}}" {{background-url this.network.backdrop_url overlay=true}}>
+        <Image src={{this.network.logo_url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{n-a this.network.name ""}} class="storefront-network-card__logo" data-test-network-logo />
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="storefront:component:network:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @network={{this.network}} @resource={{this.network}} />
+        </RegistryYield>
+        <div class="storefront-card__actions">
+            <Badge @status={{if this.isOnline "online" "offline"}} @text={{if this.isOnline (t "storefront.common.online") (t "storefront.common.offline")}} @size="xs" data-test-network-status />
+            <div class="storefront-card__buttons">
+                {{#if @onOpen}}
+                    <Button @icon="network-wired" @size="xs" @helpText={{t "storefront.networks.index.manage-network"}} @onClick={{fn @onOpen this.network}} @permission="storefront view network" data-test-network-open />
+                {{/if}}
+                {{#if @onInvite}}
+                    <Button @icon="envelope-open-text" @size="xs" @helpText={{t "storefront.networks.index.send-invite"}} @onClick={{fn @onInvite this.network}} @permission="storefront update network" data-test-network-invite />
+                {{/if}}
+                {{#if @onDelete}}
+                    <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "storefront.networks.index.delete-network"}} @onClick={{fn @onDelete this.network}} @permission="storefront delete network" data-test-network-delete />
+                {{/if}}
+            </div>
+        </div>
+        <RegistryYield @registry="storefront:component:network:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @network={{this.network}} @resource={{this.network}} />
+        </RegistryYield>
+    </Card.footer>
+</Layout::Resource::Card>
diff --git a/addon/components/storefront/network/card.js b/addon/components/storefront/network/card.js
new file mode 100644
index 00000000..42e326d1
--- /dev/null
+++ b/addon/components/storefront/network/card.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+/**
+ * A network on the shared card anatomy: name and online state in the header,
+ * the logo on its backdrop as media, and the member count, currency and
+ * actions in the footer.
+ */
+export default class StorefrontNetworkCardComponent extends Component {
+    get network() {
+        return this.args.network ?? this.args.resource;
+    }
+
+    get isOnline() {
+        return Boolean(get(this.network, 'online'));
+    }
+
+    get storesCount() {
+        const count = get(this.network, 'stores_count');
+
+        if (typeof count === 'number') {
+            return count;
+        }
+
+        const stores = get(this.network, 'stores');
+
+        return stores ? stores.length : 0;
+    }
+}
diff --git a/addon/components/storefront/truck/card.hbs b/addon/components/storefront/truck/card.hbs
new file mode 100644
index 00000000..9737b680
--- /dev/null
+++ b/addon/components/storefront/truck/card.hbs
@@ -0,0 +1,49 @@
+<Layout::Resource::Card class="storefront-card storefront-truck-card" data-test-storefront-truck-card ...attributes as |Card|>
+    <Card.header class={{@headerClass}}>
+        <RegistryYield @registry="storefront:component:truck:card:header:start" as |RegistryComponent|>
+            <RegistryComponent @truck={{this.truck}} @resource={{this.truck}} />
+        </RegistryYield>
+        <Vehicle::Pill @vehicle={{this.vehicle}} @titleFallback={{t "storefront.trucks.card.no-vehicle"}} @online={{this.isOnline}} @showOnlineIndicator={{true}} @static={{not this.vehicle.id}} class="storefront-card__identity" data-test-truck-vehicle />
+        <div class="storefront-card__subtitle" data-test-truck-area>
+            {{#if this.serviceAreaName}}
+                {{this.serviceAreaName}}{{#if this.zoneName}} · {{this.zoneName}}{{/if}}
+            {{else}}
+                {{t "storefront.trucks.card.no-service-area"}}
+            {{/if}}
+        </div>
+        <RegistryYield @registry="storefront:component:truck:card:header:end" as |RegistryComponent|>
+            <RegistryComponent @truck={{this.truck}} @resource={{this.truck}} />
+        </RegistryYield>
+    </Card.header>
+    <Card.body class="storefront-card__media-body {{@bodyClass}}">
+        <Image src={{this.photoUrl}} @fallbackSrc={{this.placeholder}} alt={{n-a this.vehicle.display_name ""}} class="storefront-card__media" data-test-truck-photo />
+    </Card.body>
+    <Card.footer class={{@footerClass}}>
+        <RegistryYield @registry="storefront:component:truck:card:footer:start" as |RegistryComponent|>
+            <RegistryComponent @truck={{this.truck}} @resource={{this.truck}} />
+        </RegistryYield>
+        <div class="storefront-card__actions">
+            <Badge @status={{this.presence.status}} @text={{t this.presence.labelKey}} @size="xs" data-test-truck-presence />
+            <div class="storefront-card__buttons">
+                {{#if @onEdit}}
+                    <Button @icon="pencil" @size="xs" @helpText={{t "storefront.common.edit"}} @onClick={{fn @onEdit this.truck}} @permission="storefront update food-truck" data-test-truck-edit />
+                {{/if}}
+                {{#if @onAssignCatalogs}}
+                    <Button @icon="book-open" @size="xs" @helpText={{t "storefront.trucks.card.assign-catalogs"}} @onClick={{fn @onAssignCatalogs this.truck}} @permission="storefront update food-truck" data-test-truck-catalogs />
+                {{/if}}
+                {{#if @onDelete}}
+                    <Button @icon="trash" @size="xs" @type="danger" @helpText={{t "storefront.common.delete"}} @onClick={{fn @onDelete this.truck}} @permission="storefront delete food-truck" data-test-truck-delete />
+                {{/if}}
+            </div>
+        </div>
+        <div class="storefront-card__meta">
+            <span data-test-truck-catalogs-count>{{t "storefront.trucks.card.catalogs-count" count=this.catalogs.length}}</span>
+            {{#if this.storeName}}
+                <span data-test-truck-store>{{t "storefront.trucks.card.owned-by" name=this.storeName}}</span>
+            {{/if}}
+        </div>
+        <RegistryYield @registry="storefront:component:truck:card:footer:end" as |RegistryComponent|>
+            <RegistryComponent @truck={{this.truck}} @resource={{this.truck}} />
+        </RegistryYield>
+    </Card.footer>
+</Layout::Resource::Card>
diff --git a/addon/components/storefront/truck/card.js b/addon/components/storefront/truck/card.js
new file mode 100644
index 00000000..11af4e0f
--- /dev/null
+++ b/addon/components/storefront/truck/card.js
@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import { resolveResourceImage, getPlaceholderImage } from '@fleetbase/fleetops-data/utils/placeholder-images';
+
+/**
+ * A truck (the `food-truck` resource) on the shared card anatomy: the vehicle
+ * pill as its identity, the vehicle photo as media, and what matters to a
+ * store in the footer: whether it is online, where it serves, and which
+ * catalogs it carries.
+ */
+export default class StorefrontTruckCardComponent extends Component {
+    get truck() {
+        return this.args.truck ?? this.args.foodTruck ?? this.args.resource;
+    }
+
+    get vehicle() {
+        return get(this.truck, 'vehicle');
+    }
+
+    get isOnline() {
+        return Boolean(get(this.truck, 'online') ?? get(this.vehicle, 'online'));
+    }
+
+    get status() {
+        return get(this.truck, 'status') ?? 'inactive';
+    }
+
+    get isActive() {
+        return this.status === 'active';
+    }
+
+    get photoUrl() {
+        return resolveResourceImage(get(this.vehicle, 'photo_url'), 'vehicle');
+    }
+
+    get placeholder() {
+        return getPlaceholderImage('vehicle');
+    }
+
+    get serviceAreaName() {
+        return get(this.truck, 'service_area.name');
+    }
+
+    get zoneName() {
+        return get(this.truck, 'zone.name');
+    }
+
+    get catalogs() {
+        const catalogs = get(this.truck, 'catalogs');
+
+        return catalogs ? catalogs.slice() : [];
+    }
+
+    get storeName() {
+        return get(this.truck, 'store.name');
+    }
+
+    /** What the store needs to know at a glance: serving, online with nothing to sell, or offline. */
+    get presence() {
+        if (!this.isActive) {
+            return { status: 'inactive', labelKey: 'storefront.trucks.card.inactive' };
+        }
+
+        if (!this.isOnline) {
+            return { status: 'offline', labelKey: 'storefront.trucks.card.offline' };
+        }
+
+        if (this.catalogs.length === 0) {
+            return { status: 'warning', labelKey: 'storefront.trucks.card.no-catalog' };
+        }
+
+        return { status: 'online', labelKey: 'storefront.trucks.card.online' };
+    }
+}
diff --git a/addon/controllers/application.js b/addon/controllers/application.js
index 82fca604..6b59acfa 100644
--- a/addon/controllers/application.js
+++ b/addon/controllers/application.js
@@ -87,7 +87,7 @@ export default class ApplicationController extends Controller {
             },
             {
                 label: this.intl.t('storefront.sidebar.food-trucks'),
-                description: 'Manage food truck locations and availability.',
+                description: 'Manage trucks, where they serve and what they sell.',
                 icon: 'truck',
                 route: 'console.storefront.food-trucks',
                 permission: 'storefront list food-truck',
diff --git a/addon/controllers/catalogs/index.js b/addon/controllers/catalogs/index.js
index 67de1bf4..270bfa2f 100644
--- a/addon/controllers/catalogs/index.js
+++ b/addon/controllers/catalogs/index.js
@@ -2,6 +2,8 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { task, timeout } from 'ember-concurrency';
 
 export default class CatalogsIndexController extends Controller {
     @service store;
@@ -14,6 +16,19 @@ export default class CatalogsIndexController extends Controller {
     queryParams = ['query'];
 
     @tracked query;
+
+    /**
+     * Debounced search; updates the `query` param the route refreshes on.
+     */
+    @task({ restartable: true }) *search({ target: { value } }) {
+        if (isBlank(value)) {
+            this.query = null;
+            return;
+        }
+
+        yield timeout(250);
+        this.query = value;
+    }
     @tracked statusOptions = ['draft', 'published'];
 
     @action createCatalog() {
@@ -46,7 +61,7 @@ export default class CatalogsIndexController extends Controller {
         const allProducts = this.store.query('product', { limit: -1 });
 
         this.modalsManager.show('modals/create-catalog', {
-            title: 'Edit Food Truck',
+            title: 'Edit Catalog',
             acceptButtonText: 'Save Changes',
             acceptButtonIcon: 'save',
             statusOptions: this.statusOptions,
diff --git a/addon/controllers/food-trucks/index.js b/addon/controllers/food-trucks/index.js
index d0fe2c6b..32e37cdd 100644
--- a/addon/controllers/food-trucks/index.js
+++ b/addon/controllers/food-trucks/index.js
@@ -2,6 +2,8 @@ import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { task, timeout } from 'ember-concurrency';
 
 export default class FoodTrucksIndexController extends Controller {
     @service store;
@@ -14,6 +16,19 @@ export default class FoodTrucksIndexController extends Controller {
     queryParams = ['query'];
 
     @tracked query;
+
+    /**
+     * Debounced search; updates the `query` param the route refreshes on.
+     */
+    @task({ restartable: true }) *search({ target: { value } }) {
+        if (isBlank(value)) {
+            this.query = null;
+            return;
+        }
+
+        yield timeout(250);
+        this.query = value;
+    }
     @tracked statusOptions = ['active', 'inactive'];
 
     @action createFoodTruck() {
@@ -23,7 +38,7 @@ export default class FoodTrucksIndexController extends Controller {
         });
 
         this.modalsManager.show('modals/create-food-truck', {
-            title: 'New Food Truck',
+            title: 'New Truck',
             statusOptions: this.statusOptions,
             foodTruck,
             confirm: async (modal) => {
@@ -32,7 +47,7 @@ export default class FoodTrucksIndexController extends Controller {
                 try {
                     await foodTruck.save();
                     this.hostRouter.refresh();
-                    this.notifications.success('New food truck created.');
+                    this.notifications.success('New truck created.');
                 } catch (error) {
                     this.notifications.serverError(error);
                 } finally {
@@ -44,7 +59,7 @@ export default class FoodTrucksIndexController extends Controller {
 
     @action editFoodTruck(foodTruck) {
         this.modalsManager.show('modals/create-food-truck', {
-            title: 'Edit Food Truck',
+            title: 'Edit Truck',
             acceptButtonText: 'Save Changes',
             acceptButtonIcon: 'save',
             statusOptions: this.statusOptions,
@@ -55,7 +70,7 @@ export default class FoodTrucksIndexController extends Controller {
                 try {
                     await foodTruck.save();
                     this.hostRouter.refresh();
-                    this.notifications.success('Changes to food truck saved.');
+                    this.notifications.success('Changes to truck saved.');
                 } catch (error) {
                     this.notifications.serverError(error);
                 } finally {
@@ -69,7 +84,7 @@ export default class FoodTrucksIndexController extends Controller {
         const allCatalogs = await this.store.query('catalog', { limit: -1 });
         console.log('[allCatalogs]', allCatalogs);
         this.modalsManager.show('modals/assign-food-truck-catalogs', {
-            title: "Assign Catalog's to this Food Truck",
+            title: 'Assign catalogs to this truck',
             acceptButtonText: 'Done',
             acceptButtonIcon: 'save',
             foodTruck,
@@ -83,7 +98,7 @@ export default class FoodTrucksIndexController extends Controller {
                 try {
                     await foodTruck.save();
                     this.hostRouter.refresh();
-                    this.notifications.success('Changes to food truck saved.');
+                    this.notifications.success('Changes to truck saved.');
                 } catch (error) {
                     this.notifications.serverError(error);
                 } finally {
diff --git a/addon/models/food-truck.js b/addon/models/food-truck.js
index ba6ee514..59285261 100644
--- a/addon/models/food-truck.js
+++ b/addon/models/food-truck.js
@@ -17,7 +17,9 @@ export default class FoodTruckModel extends Model {
     /** @attributes */
     @attr('string', { defaultValue: 'storefront:store' }) subject_type;
     @attr('raw') meta;
+    @attr('raw') store;
     @attr('string') status;
+    @attr('boolean') online;
 
     /** @dates */
     @attr('date') created_at;
diff --git a/addon/styles/storefront-engine.css b/addon/styles/storefront-engine.css
index 9034af9d..9d815f1e 100644
--- a/addon/styles/storefront-engine.css
+++ b/addon/styles/storefront-engine.css
@@ -3092,3 +3092,228 @@ body[data-theme='dark'] .storefront-order-store__row-value a:hover {
         justify-content: center;
     }
 }
+
+/* ==========================================================================
+   Shared resource card (catalog, truck, network) on Layout::Resource::Card
+   ========================================================================== */
+
+.storefront-card {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.storefront-card__title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    min-width: 0;
+}
+
+.storefront-card__title-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    color: #111827;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a.storefront-card__title-text:hover {
+    color: #2563eb;
+}
+
+body[data-theme='dark'] .storefront-card__title-text {
+    color: #f3f4f6;
+}
+
+.storefront-card__indicator {
+    flex: none;
+}
+
+.storefront-card__subtitle {
+    width: 100%;
+    overflow: hidden;
+    color: #4b5563;
+    font-size: 0.75rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .storefront-card__subtitle {
+    color: #9ca3af;
+}
+
+.storefront-card__identity {
+    width: 100%;
+    min-width: 0;
+}
+
+.storefront-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+}
+
+.storefront-card__media-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 10rem;
+    overflow: hidden;
+}
+
+.storefront-card__media {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.storefront-card__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.storefront-card__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    border-radius: 9999px;
+    background: #e5e7eb;
+    color: #374151;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1rem;
+}
+
+.storefront-card__chip-count {
+    color: #6b7280;
+    font-weight: 500;
+}
+
+body[data-theme='dark'] .storefront-card__chip {
+    background: #374151;
+    color: #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-card__chip-count {
+    color: #9ca3af;
+}
+
+.storefront-card__empty {
+    color: #6b7280;
+    font-size: 0.75rem;
+}
+
+.storefront-card__actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.storefront-card__buttons {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.storefront-card__count {
+    color: #4b5563;
+    font-size: 0.75rem;
+}
+
+body[data-theme='dark'] .storefront-card__count {
+    color: #9ca3af;
+}
+
+.storefront-card__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin-top: 0.375rem;
+    width: 100%;
+    color: #4b5563;
+    font-size: 0.75rem;
+}
+
+.storefront-card__meta > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .storefront-card__meta {
+    color: #9ca3af;
+}
+
+.storefront-catalog-card.is-draft {
+    border-style: dashed;
+}
+
+.storefront-network-card__backdrop {
+    background-color: #e5e7eb;
+    background-position: center;
+    background-size: cover;
+}
+
+body[data-theme='dark'] .storefront-network-card__backdrop {
+    background-color: #374151;
+}
+
+.storefront-network-card__logo {
+    max-width: 8rem;
+    max-height: 5rem;
+    object-fit: contain;
+}
+
+/* Hours strip: one cell per weekday, filled when the schedule covers it */
+
+.storefront-hours-strip {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.25rem;
+    width: 100%;
+}
+
+.storefront-hours-strip__day {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+}
+
+.storefront-hours-strip__label {
+    color: #6b7280;
+    font-size: 0.625rem;
+    line-height: 1;
+    text-align: center;
+}
+
+.storefront-hours-strip__bar {
+    display: block;
+    height: 0.375rem;
+    border-radius: 0.125rem;
+    background: #e5e7eb;
+}
+
+.storefront-hours-strip__day.is-open .storefront-hours-strip__bar {
+    background: #86efac;
+}
+
+body[data-theme='dark'] .storefront-hours-strip__bar {
+    background: #374151;
+}
+
+body[data-theme='dark'] .storefront-hours-strip__day.is-open .storefront-hours-strip__bar {
+    background: #16a34a;
+}
diff --git a/addon/templates/catalogs/index.hbs b/addon/templates/catalogs/index.hbs
index 148cbb92..f24757bc 100644
--- a/addon/templates/catalogs/index.hbs
+++ b/addon/templates/catalogs/index.hbs
@@ -1,47 +1,22 @@
-<Layout::Section::Header @title={{t "storefront.common.catalogs"}}>
+<Layout::Section::Header @title={{t "storefront.common.catalogs"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <Button @type="primary" @icon="plus" @text={{t "storefront.common.new"}} @permission="storefront create catalog" @onClick={{this.createCatalog}} class="mr-2" />
     <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "storefront.common.export"}} @permission="storefront export catalog" />
 </Layout::Section::Header>
 
-<Layout::Section::Body>
-    <div class="h-full p-4 overflow-y-scroll">
-        <div class="grid grid-cols-3 gap-4">
-            {{#each @model as |catalog|}}
-                <div class="px-2 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 border-gray-200 bg-gray-100">
-                    <div class="flex flex-row mb-2">
-                        <div class="flex flex-col flex-1">
-                            <div class="text-sm font-semibold">{{catalog.name}}</div>
-                            <div class="mt-1 flex flex-row">
-                                <div class="text-sm">{{n-a catalog.description}}</div>
-                            </div>
-                            <div>
-                                <Badge @status={{catalog.status}} @hideStatusDot={{true}} />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-2 flex flex-row space-x-2">
-                        <Button
-                            @type="default"
-                            @icon="pencil"
-                            @text={{t "storefront.common.edit"}}
-                            @onClick={{fn this.editCatalog catalog}}
-                            @permission="storefront update food-truck"
-                            @size="sm"
-                        />
-                        <Button
-                            @type="danger"
-                            @icon="trash"
-                            @text={{t "storefront.common.delete"}}
-                            @onClick={{fn this.deleteCatalog catalog}}
-                            @permission="storefront delete food-truck"
-                            @size="sm"
-                        />
-                    </div>
-                </div>
-            {{/each}}
-        </div>
-    </div>
-    <Spacer @height="200px" />
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <Layout::Resource::CardsGrid
+        @resource="catalog"
+        @data={{@model}}
+        @columns="4"
+        @containerClass="p-4"
+        @emptyStateText={{t "storefront.catalogs.index.empty-state"}}
+        @createButtonText={{t "storefront.catalogs.index.create-catalog"}}
+        @onCreateNew={{this.createCatalog}}
+        class="h-full"
+        as |Item|
+    >
+        <Storefront::Catalog::Card @catalog={{Item.model}} @onEdit={{this.editCatalog}} @onDelete={{this.deleteCatalog}} />
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>
 
-{{outlet}}
\ No newline at end of file
+{{outlet}}
diff --git a/addon/templates/food-trucks/index.hbs b/addon/templates/food-trucks/index.hbs
index 61cf0250..a9d38462 100644
--- a/addon/templates/food-trucks/index.hbs
+++ b/addon/templates/food-trucks/index.hbs
@@ -1,49 +1,22 @@
-<Layout::Section::Header @title={{t "storefront.common.food-trucks"}}>
+<Layout::Section::Header @title={{t "storefront.common.food-trucks"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
     <Button @type="primary" @icon="plus" @text={{t "storefront.common.new"}} @onClick={{this.createFoodTruck}} @permission="storefront create food-truck" class="mr-2" />
     <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "storefront.common.export"}} @permission="storefront export food-truck" />
 </Layout::Section::Header>
 
-<Layout::Section::Body>
-    <div class="p-4">
-        <div class="grid grid-cols-3 gap-4">
-            {{#each @model as |foodTruck|}}
-                <div class="px-2 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-700 border-gray-200 bg-gray-100">
-                    <div class="flex flex-row mb-2">
-                        <div class="flex flex-col flex-1 min-w-0">
-                            <Vehicle::Pill @vehicle={{foodTruck.vehicle}} @titleFallback="No vehicle" @static={{not foodTruck.vehicle.id}} class="mb-1" />
-                            <div class="flex flex-row items-center space-x-1">
-                                <FaIcon @icon="draw-polygon" class="mr-1" />
-                                <div class="text-sm">{{n-a foodTruck.service_area.name}}</div>
-                                <div>•</div>
-                                <div class="text-sm">{{n-a foodTruck.zone.name}}</div>
-                            </div>
-                            {{!-- <div>{{format-point foodTruck.vehicle.location}}</div> --}}
-                            <Badge @status={{foodTruck.status}} @hideStatusDot={{true}} />
-                        </div>
-                    </div>
-                    <div class="mt-2 flex flex-row space-x-2">
-                        <Button
-                            @type="default"
-                            @icon="pencil"
-                            @text={{t "storefront.common.edit"}}
-                            @onClick={{fn this.editFoodTruck foodTruck}}
-                            @permission="storefront update food-truck"
-                            @size="xs"
-                        />
-                        <Button @type="default" @icon="square-check" @text="Catalogs" @onClick={{fn this.assignCatalogs foodTruck}} @permission="storefront update food-truck" @size="xs" />
-                        <Button
-                            @type="danger"
-                            @icon="trash"
-                            @text={{t "storefront.common.delete"}}
-                            @onClick={{fn this.deleteFoodTruck foodTruck}}
-                            @permission="storefront delete food-truck"
-                            @size="xs"
-                        />
-                    </div>
-                </div>
-            {{/each}}
-        </div>
-    </div>
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <Layout::Resource::CardsGrid
+        @resource="truck"
+        @data={{@model}}
+        @columns="4"
+        @containerClass="p-4"
+        @emptyStateText={{t "storefront.trucks.index.empty-state"}}
+        @createButtonText={{t "storefront.trucks.index.create-truck"}}
+        @onCreateNew={{this.createFoodTruck}}
+        class="h-full"
+        as |Item|
+    >
+        <Storefront::Truck::Card @truck={{Item.model}} @onEdit={{this.editFoodTruck}} @onAssignCatalogs={{this.assignCatalogs}} @onDelete={{this.deleteFoodTruck}} />
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>
 
-{{outlet}}
\ No newline at end of file
+{{outlet}}
diff --git a/addon/templates/networks/index.hbs b/addon/templates/networks/index.hbs
index 010d79e7..23f9fa02 100644
--- a/addon/templates/networks/index.hbs
+++ b/addon/templates/networks/index.hbs
@@ -2,77 +2,24 @@
     <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "storefront.common.new"}} class="mr-2" @onClick={{this.createNetwork}} @permission="storefront create network" />
 </Layout::Section::Header>
 
-<Layout::Section::Body>
-    <div class="h-screen overflow-y-scroll p-6">
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 lg:gap-4">
-            {{#each @model as |network|}}
-                <div class="mr-4 w-full">
-                    <div class="rounded-md border dark:border-gray-700 shadow-sm">
-                        <div class="p-4 flex items-center justify-center rounded-t-md h-36" {{background-url network.backdrop_url overlay=true}}>
-                            <Image src={{network.logo_url}} class="w-32" alt={{network.name}} @fallbackSrc="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/image-file-icon.png" />
-                        </div>
-                        <div class="border-t dark:border-gray-700 px-4 py-2">
-                            <div class="flex items-start justify-between">
-                                <div>
-                                    <LinkTo @route="networks.index.network" @model={{network}} class="font-bold text-lg text-gray-700 dark:text-gray-100">{{network.name}}</LinkTo>
-                                </div>
-                                <div>
-                                    <DropdownButton @renderInPlace={{true}} @size="xs" @icon="cog" @iconPrefix="fas" @textClass="block truncate text-gray-700 dark:text-gray-100" as |dd|>
-                                        <div role="menu" class="next-dd-menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                                            <div class="px-1">
-                                                <div class="next-dd-title">
-                                                    {{t "storefront.networks.index.network-option"}}
-                                                </div>
-                                            </div>
-                                            <div class="next-dd-menu-seperator"></div>
-                                            <div role="group" class="px-1">
-                                                <a
-                                                    href="javascript:;"
-                                                    class="next-dd-item"
-                                                    role="menuitem"
-                                                    {{on "click" (dropdown-fn dd this.manageNetwork network)}}
-                                                    disabled={{cannot "storefront view network"}}
-                                                >
-                                                    <div class="w-7">
-                                                        <FaIcon @icon="network-wired" class="mr-2" />
-                                                    </div>
-                                                    <span>{{t "storefront.networks.index.manage-network"}}</span>
-                                                </a>
-                                                <a
-                                                    href="javascript:;"
-                                                    class="next-dd-item"
-                                                    role="menuitem"
-                                                    {{on "click" (dropdown-fn dd this.sendInvites network)}}
-                                                    disabled={{cannot "storefront update network"}}
-                                                >
-                                                    <div class="w-7">
-                                                        <FaIcon @icon="envelope-open-text" class="mr-2" />
-                                                    </div>
-                                                    <span>{{t "storefront.networks.index.send-invite"}}</span>
-                                                </a>
-                                                <a
-                                                    href="javascript:;"
-                                                    class="next-dd-item text-red-500 hover:bg-opacity-75"
-                                                    role="menuitem"
-                                                    disabled={{cannot "storefront delete network"}}
-                                                    {{on "click" (dropdown-fn dd this.deleteNetwork network)}}
-                                                >
-                                                    <div class="w-7">
-                                                        <FaIcon @icon="trash" class="mr-2 text-red-500" />
-                                                    </div>
-                                                    <span class="text-red-500">{{t "storefront.networks.index.delete-network"}}</span>
-                                                </a>
-                                            </div>
-                                        </div>
-                                    </DropdownButton>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            {{/each}}
-        </div>
-    </div>
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <Layout::Resource::CardsGrid
+        @resource="network"
+        @data={{@model}}
+        @columns="4"
+        @showPagination={{true}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @paginationMeta={{@model.meta}}
+        @containerClass="p-4"
+        @emptyStateText={{t "storefront.networks.index.empty-state"}}
+        @createButtonText={{t "storefront.networks.index.create-network"}}
+        @onCreateNew={{this.createNetwork}}
+        class="h-full"
+        as |Item|
+    >
+        <Storefront::Network::Card @network={{Item.model}} @onOpen={{this.manageNetwork}} @onInvite={{this.sendInvites}} @onDelete={{this.deleteNetwork}} />
+    </Layout::Resource::CardsGrid>
 </Layout::Section::Body>
 
-{{outlet}}
\ No newline at end of file
+{{outlet}}
diff --git a/app/components/storefront/catalog/card.js b/app/components/storefront/catalog/card.js
new file mode 100644
index 00000000..4fdcfbb5
--- /dev/null
+++ b/app/components/storefront/catalog/card.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/catalog/card';
diff --git a/app/components/storefront/hours-strip.js b/app/components/storefront/hours-strip.js
new file mode 100644
index 00000000..68c42b03
--- /dev/null
+++ b/app/components/storefront/hours-strip.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/hours-strip';
diff --git a/app/components/storefront/network/card.js b/app/components/storefront/network/card.js
new file mode 100644
index 00000000..216a419b
--- /dev/null
+++ b/app/components/storefront/network/card.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/card';
diff --git a/app/components/storefront/truck/card.js b/app/components/storefront/truck/card.js
new file mode 100644
index 00000000..faab9e76
--- /dev/null
+++ b/app/components/storefront/truck/card.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/truck/card';
diff --git a/tests/integration/components/storefront/catalog/card-test.js b/tests/integration/components/storefront/catalog/card-test.js
new file mode 100644
index 00000000..fad39c71
--- /dev/null
+++ b/tests/integration/components/storefront/catalog/card-test.js
@@ -0,0 +1,53 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | storefront/catalog/card', function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'en-us');
+
+    test('it renders the catalog, its categories with counts, its hours and its product total', async function (assert) {
+        const edited = [];
+        this.set('catalog', {
+            name: 'Lunch menu',
+            description: 'Weekday lunch service',
+            status: 'published',
+            updatedAgo: '5 days',
+            categories: [
+                { name: 'Mains', products: [{}, {}, {}] },
+                { name: 'Drinks', products: [{}] },
+            ],
+            hours: [{ day_of_week: 'Monday', start: '11:00', end: '15:00' }],
+        });
+        this.set('edit', (catalog) => edited.push(catalog));
+        this.set('remove', () => {});
+
+        await render(hbs`<Storefront::Catalog::Card @catalog={{this.catalog}} @onEdit={{this.edit}} @onDelete={{this.remove}} />`);
+
+        assert.dom('[data-test-storefront-catalog-card]').exists().doesNotHaveClass('is-draft');
+        assert.dom('[data-test-catalog-name]').hasText('Lunch menu');
+        assert.dom('[data-test-catalog-status]').includesText('Published');
+        assert.dom('[data-test-catalog-category]').exists({ count: 2 });
+        assert.dom('[data-test-catalog-category]:first-child').hasText('Mains 3');
+        assert.dom('[data-test-catalog-products-count]').hasText('4 products');
+        assert.dom('[data-test-hours-day="monday"]').hasAttribute('data-open', 'true');
+        assert.dom('[data-test-catalog-edit]').exists();
+        assert.dom('[data-test-catalog-delete]').exists();
+
+        await click('[data-test-catalog-name]');
+        assert.strictEqual(edited[0], this.catalog, 'the name opens the editor');
+    });
+
+    test('a draft catalog with nothing in it says so', async function (assert) {
+        this.set('catalog', { name: 'Festive hampers', status: 'draft', categories: [], hours: [] });
+
+        await render(hbs`<Storefront::Catalog::Card @catalog={{this.catalog}} />`);
+
+        assert.dom('[data-test-storefront-catalog-card]').hasClass('is-draft');
+        assert.dom('[data-test-catalog-empty]').hasText('No categories yet');
+        assert.dom('[data-test-catalog-products-count]').hasText('No products');
+        assert.dom('[data-test-catalog-edit]').doesNotExist('no edit handler, no edit button');
+    });
+});
diff --git a/tests/integration/components/storefront/hours-strip-test.js b/tests/integration/components/storefront/hours-strip-test.js
new file mode 100644
index 00000000..32ebe043
--- /dev/null
+++ b/tests/integration/components/storefront/hours-strip-test.js
@@ -0,0 +1,33 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | storefront/hours-strip', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it fills the days a schedule covers and labels each with its hours', async function (assert) {
+        this.set('hours', [
+            { day_of_week: 'Monday', start: '11:00', end: '15:00' },
+            { day_of_week: 'tuesday', start: '11:00', end: '15:00' },
+            { day_of_week: 'Sat', start: '09:00', end: '12:00' },
+            { day_of_week: 'Saturday', start: '17:00', end: '21:00' },
+        ]);
+
+        await render(hbs`<Storefront::HoursStrip @hours={{this.hours}} />`);
+
+        assert.dom('[data-test-hours-day]').exists({ count: 7 });
+        assert.dom('[data-test-hours-day="monday"]').hasAttribute('data-open', 'true').hasAttribute('title', 'Monday: 11:00 to 15:00');
+        assert.dom('[data-test-hours-day="tuesday"]').hasAttribute('data-open', 'true');
+        assert.dom('[data-test-hours-day="saturday"]').hasAttribute('title', 'Saturday: 09:00 to 12:00, 17:00 to 21:00');
+        assert.dom('[data-test-hours-day="sunday"]').hasAttribute('data-open', 'false').hasAttribute('title', 'Sunday: closed');
+        assert.dom('[data-test-hours-strip]').hasAttribute('aria-label', '3 of 7 days');
+    });
+
+    test('no hours means seven closed days', async function (assert) {
+        await render(hbs`<Storefront::HoursStrip />`);
+
+        assert.dom('[data-test-hours-day][data-open="true"]').doesNotExist();
+        assert.dom('[data-test-hours-strip]').hasAttribute('aria-label', '0 of 7 days');
+    });
+});
diff --git a/tests/integration/components/storefront/network/card-test.js b/tests/integration/components/storefront/network/card-test.js
new file mode 100644
index 00000000..81576fdd
--- /dev/null
+++ b/tests/integration/components/storefront/network/card-test.js
@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | storefront/network/card', function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'en-us');
+
+    test('it renders the network, its member count, its logo and its actions', async function (assert) {
+        const opened = [];
+        this.set('network', {
+            name: 'Fleetbase Marketplace',
+            currency: 'SGD',
+            online: true,
+            stores_count: 5,
+            logo_url: 'https://cdn.test/logo.png',
+            backdrop_url: 'https://cdn.test/backdrop.png',
+        });
+        this.set('open', (network) => opened.push(network));
+        this.set('noop', () => {});
+
+        await render(hbs`<Storefront::Network::Card @network={{this.network}} @onOpen={{this.open}} @onInvite={{this.noop}} @onDelete={{this.noop}} />`);
+
+        assert.dom('[data-test-network-name]').hasText('Fleetbase Marketplace');
+        assert.dom('[data-test-network-indicator]').hasClass('text-green-500');
+        assert.dom('[data-test-storefront-network-card]').includesText('SGD · 5 stores');
+        assert.dom('[data-test-network-logo]').hasAttribute('src', 'https://cdn.test/logo.png');
+        assert.dom('[data-test-network-status]').includesText('Online');
+        assert.dom('[data-test-network-open]').exists();
+        assert.dom('[data-test-network-invite]').exists();
+        assert.dom('[data-test-network-delete]').exists();
+
+        await click('[data-test-network-name]');
+        assert.strictEqual(opened[0], this.network);
+    });
+
+    test('an offline network counts its loaded stores when no count is given', async function (assert) {
+        this.set('network', { name: 'Night market', online: false, stores: [{}, {}] });
+
+        await render(hbs`<Storefront::Network::Card @network={{this.network}} />`);
+
+        assert.dom('[data-test-network-indicator]').hasClass('text-gray-400');
+        assert.dom('[data-test-network-status]').includesText('Offline');
+        assert.dom('[data-test-storefront-network-card]').includesText('2 stores');
+    });
+});
diff --git a/tests/integration/components/storefront/truck/card-test.js b/tests/integration/components/storefront/truck/card-test.js
new file mode 100644
index 00000000..5f4e000f
--- /dev/null
+++ b/tests/integration/components/storefront/truck/card-test.js
@@ -0,0 +1,59 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { initialize } from '@fleetbase/fleetops-data/instance-initializers/register-shared-resource-descriptors';
+
+module('Integration | Component | storefront/truck/card', function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'en-us');
+
+    hooks.beforeEach(function () {
+        initialize(this.owner);
+    });
+
+    test('an online truck with catalogs renders its vehicle pill, area, photo and presence', async function (assert) {
+        this.set('truck', {
+            status: 'active',
+            online: true,
+            vehicle: { id: 'vehicle_1', resourceType: 'vehicle', display_name: 'Truck 10', plate_number: 'SKZ 1049 A', photo_url: 'https://cdn.test/truck.png' },
+            service_area: { name: 'Central' },
+            zone: { name: 'Zone 3' },
+            catalogs: [{ name: 'Lunch menu' }, { name: 'Breakfast' }],
+            store: { name: 'Fleetbase Market' },
+        });
+        this.set('noop', () => {});
+
+        await render(hbs`<Storefront::Truck::Card @truck={{this.truck}} @onEdit={{this.noop}} @onAssignCatalogs={{this.noop}} @onDelete={{this.noop}} />`);
+
+        assert.dom('[data-test-storefront-truck-card]').exists();
+        assert.dom('[data-test-truck-vehicle] [data-test-resource-pill-title]').hasText('Truck 10');
+        assert.dom('[data-test-truck-vehicle] [data-test-pill-online-indicator]').hasClass('text-green-500');
+        assert.dom('[data-test-truck-area]').hasText('Central · Zone 3');
+        assert.dom('[data-test-truck-photo]').hasAttribute('src', 'https://cdn.test/truck.png');
+        assert.dom('[data-test-truck-presence]').includesText('Online');
+        assert.dom('[data-test-truck-catalogs-count]').hasText('2 catalogs');
+        assert.dom('[data-test-truck-store]').hasText('Owned by Fleetbase Market');
+        assert.dom('[data-test-truck-edit]').exists();
+        assert.dom('[data-test-truck-catalogs]').exists();
+        assert.dom('[data-test-truck-delete]').exists();
+    });
+
+    test('presence reads inactive, offline, or online with nothing to sell', async function (assert) {
+        this.set('truck', { status: 'inactive', online: true, catalogs: [{}] });
+        await render(hbs`<Storefront::Truck::Card @truck={{this.truck}} />`);
+        assert.dom('[data-test-truck-presence]').includesText('Inactive');
+
+        this.set('truck', { status: 'active', online: false, catalogs: [{}] });
+        await render(hbs`<Storefront::Truck::Card @truck={{this.truck}} />`);
+        assert.dom('[data-test-truck-presence]').includesText('Offline');
+
+        this.set('truck', { status: 'active', online: true, catalogs: [] });
+        await render(hbs`<Storefront::Truck::Card @truck={{this.truck}} />`);
+        assert.dom('[data-test-truck-presence]').includesText('Online, no catalog');
+        assert.dom('[data-test-truck-catalogs-count]').hasText('No catalogs');
+        assert.dom('[data-test-truck-area]').hasText('No service area');
+        assert.dom('[data-test-truck-vehicle] [data-test-resource-pill-title]').hasText('No vehicle assigned');
+    });
+});
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 6ed1d6bd..4853f675 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -37,6 +37,8 @@ storefront:
     name: Name
     neighborhood: Neighborhood
     online: Online
+    offline: Offline
+    last-modified: Last modified
     orders: Orders
     phone: Phone
     photos: Photos
@@ -70,7 +72,7 @@ storefront:
     facebook: Facebook
     instagram: Instagram
     twitter: Twitter
-    food-trucks: Food Trucks
+    food-trucks: Trucks
     catalog: Catalog
     catalogs: Catalogs
   sidebar:
@@ -78,7 +80,7 @@ storefront:
     dashboard: Dashboard
     products: Products
     catalogs: Catalogs
-    food-trucks: Food Trucks
+    food-trucks: Trucks
     customers: Customers
     orders: Orders
     networks: Networks
@@ -314,8 +316,34 @@ storefront:
       edit-button: Edit customer
       cancel-edit-button: Cancel edit customer
       cancel-new-button: Cancel new customer
+  catalogs:
+    index:
+      empty-state: Create a catalog to group products into a menu with its own categories and hours.
+      create-catalog: Create catalog
+    card:
+      no-description: No description
+      no-categories: No categories yet
+      products-count: "{count, plural, =0 {No products} one {# product} other {# products}}"
+  trucks:
+    index:
+      empty-state: Add a truck to sell from a vehicle inside a service area.
+      create-truck: Add truck
+    card:
+      no-vehicle: No vehicle assigned
+      no-service-area: No service area
+      inactive: Inactive
+      offline: Offline
+      no-catalog: Online, no catalog
+      online: Online
+      assign-catalogs: Assign catalogs
+      catalogs-count: "{count, plural, =0 {No catalogs} one {# catalog} other {# catalogs}}"
+      owned-by: "Owned by {name}"
   networks:
+    card:
+      stores-count: "{count, plural, =0 {No stores} one {# store} other {# stores}}"
     index:
+      empty-state: Create a network to sell from several stores through one app.
+      create-network: Create network
       network-option: Network Options
       manage-network: Manage Network
       send-invite: Send Invites

From 672665cc8fd4ae0fdb437a7e562386034fd0f70e Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 12:56:10 +0800
Subject: [PATCH 04/13] fix(truck-card): the online dot comes from the vehicle;
 a truck without a vehicle renders its placeholder

---
 addon/components/storefront/truck/card.hbs             |  2 +-
 addon/components/storefront/truck/card.js              | 10 ++++++++--
 .../components/storefront/truck/card-test.js           |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/addon/components/storefront/truck/card.hbs b/addon/components/storefront/truck/card.hbs
index 9737b680..84bbab1d 100644
--- a/addon/components/storefront/truck/card.hbs
+++ b/addon/components/storefront/truck/card.hbs
@@ -3,7 +3,7 @@
         <RegistryYield @registry="storefront:component:truck:card:header:start" as |RegistryComponent|>
             <RegistryComponent @truck={{this.truck}} @resource={{this.truck}} />
         </RegistryYield>
-        <Vehicle::Pill @vehicle={{this.vehicle}} @titleFallback={{t "storefront.trucks.card.no-vehicle"}} @online={{this.isOnline}} @showOnlineIndicator={{true}} @static={{not this.vehicle.id}} class="storefront-card__identity" data-test-truck-vehicle />
+        <Vehicle::Pill @vehicle={{this.vehicle}} @titleFallback={{t "storefront.trucks.card.no-vehicle"}} @showOnlineIndicator={{true}} @static={{not this.vehicle.id}} class="storefront-card__identity" data-test-truck-vehicle />
         <div class="storefront-card__subtitle" data-test-truck-area>
             {{#if this.serviceAreaName}}
                 {{this.serviceAreaName}}{{#if this.zoneName}} · {{this.zoneName}}{{/if}}
diff --git a/addon/components/storefront/truck/card.js b/addon/components/storefront/truck/card.js
index 11af4e0f..349021b9 100644
--- a/addon/components/storefront/truck/card.js
+++ b/addon/components/storefront/truck/card.js
@@ -18,7 +18,13 @@ export default class StorefrontTruckCardComponent extends Component {
     }
 
     get isOnline() {
-        return Boolean(get(this.truck, 'online') ?? get(this.vehicle, 'online'));
+        const online = get(this.truck, 'online');
+
+        if (typeof online === 'boolean') {
+            return online;
+        }
+
+        return Boolean(this.vehicle && get(this.vehicle, 'online'));
     }
 
     get status() {
@@ -30,7 +36,7 @@ export default class StorefrontTruckCardComponent extends Component {
     }
 
     get photoUrl() {
-        return resolveResourceImage(get(this.vehicle, 'photo_url'), 'vehicle');
+        return resolveResourceImage(this.vehicle ? get(this.vehicle, 'photo_url') : null, 'vehicle');
     }
 
     get placeholder() {
diff --git a/tests/integration/components/storefront/truck/card-test.js b/tests/integration/components/storefront/truck/card-test.js
index 5f4e000f..47237858 100644
--- a/tests/integration/components/storefront/truck/card-test.js
+++ b/tests/integration/components/storefront/truck/card-test.js
@@ -17,7 +17,7 @@ module('Integration | Component | storefront/truck/card', function (hooks) {
         this.set('truck', {
             status: 'active',
             online: true,
-            vehicle: { id: 'vehicle_1', resourceType: 'vehicle', display_name: 'Truck 10', plate_number: 'SKZ 1049 A', photo_url: 'https://cdn.test/truck.png' },
+            vehicle: { id: 'vehicle_1', resourceType: 'vehicle', display_name: 'Truck 10', plate_number: 'SKZ 1049 A', photo_url: 'https://cdn.test/truck.png', online: true },
             service_area: { name: 'Central' },
             zone: { name: 'Zone 3' },
             catalogs: [{ name: 'Lunch menu' }, { name: 'Breakfast' }],

From 4900d9e194e2065eb7e004739af3c54361ed28de Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 17:29:55 +0800
Subject: [PATCH 05/13] fix(truck): a model attribute named store shadowed
 Ember Data's store and crashed createRecord; the store summary is
 store_summary

---
 addon/components/storefront/truck/card.js | 2 +-
 addon/models/food-truck.js                | 2 +-
 addon/serializers/food-truck.js           | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/addon/components/storefront/truck/card.js b/addon/components/storefront/truck/card.js
index 349021b9..3527d9ec 100644
--- a/addon/components/storefront/truck/card.js
+++ b/addon/components/storefront/truck/card.js
@@ -58,7 +58,7 @@ export default class StorefrontTruckCardComponent extends Component {
     }
 
     get storeName() {
-        return get(this.truck, 'store.name');
+        return get(this.truck, 'store_summary.name');
     }
 
     /** What the store needs to know at a glance: serving, online with nothing to sell, or offline. */
diff --git a/addon/models/food-truck.js b/addon/models/food-truck.js
index 59285261..4ab50ed0 100644
--- a/addon/models/food-truck.js
+++ b/addon/models/food-truck.js
@@ -17,7 +17,7 @@ export default class FoodTruckModel extends Model {
     /** @attributes */
     @attr('string', { defaultValue: 'storefront:store' }) subject_type;
     @attr('raw') meta;
-    @attr('raw') store;
+    @attr('raw') store_summary;
     @attr('string') status;
     @attr('boolean') online;
 
diff --git a/addon/serializers/food-truck.js b/addon/serializers/food-truck.js
index 9b96e1f0..9111cfec 100644
--- a/addon/serializers/food-truck.js
+++ b/addon/serializers/food-truck.js
@@ -9,6 +9,7 @@ export default class FoodTruckSerializer extends ApplicationSerializer.extend(Em
      */
     get attrs() {
         return {
+            store_summary: { key: 'store' },
             catalogs: { embedded: 'always' },
             vehicle: { embedded: 'always' },
             serviceArea: { embedded: 'always' },

From b409f735b5ed1765876152db2926db614d6b2c7f Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 14:15:52 +0800
Subject: [PATCH 06/13] feat(context): the console is scoped to a store or a
 network, with its own sidebar for each

- storefront service tracks a network context derived from the network route
- StoreSelector becomes the context switcher with a Networks group and create-network
- application route loads networks; sidebar rewrites for the network context
- network page is a full page with an identity strip; the list hides while one is open
- new Trucks section for a network backed by FoodTruckFilter::network
- network orders and customers are scoped to the network being viewed, not the active store
- createNewNetwork lives on the storefront service
---
 addon/components/store-selector.hbs           |  10 +-
 addon/components/store-selector.js            | 131 ++++++++++++++++--
 addon/controllers/application.js              |  88 +++++++++++-
 addon/controllers/networks/index.js           |  30 ++--
 addon/controllers/networks/index/network.js   |  16 ++-
 .../networks/index/network/trucks.js          |   8 ++
 addon/routes.js                               |   1 +
 addon/routes/application.js                   |   8 +-
 addon/routes/networks/index/network.js        |  14 ++
 .../networks/index/network/customers.js       |   3 +-
 addon/routes/networks/index/network/orders.js |   3 +-
 addon/routes/networks/index/network/trucks.js |  18 +++
 addon/services/storefront.js                  | 115 +++++++++++++++
 addon/styles/storefront-engine.css            |  98 +++++++++++++
 addon/templates/application.hbs               |  12 +-
 addon/templates/networks/index.hbs            |  50 ++++---
 addon/templates/networks/index/network.hbs    |  32 +++--
 .../networks/index/network/trucks.hbs         |  15 ++
 .../networks/index/network/trucks.js          |   1 +
 app/routes/networks/index/network/trucks.js   |   1 +
 .../networks/index/network/trucks.js          |   1 +
 server/src/Http/Filter/FoodTruckFilter.php    |  13 ++
 .../Filter/StorefrontFilterContractsTest.php  |  13 ++
 .../components/store-selector-test.js         | 113 +++++++++++++++
 tests/unit/controllers/application-test.js    |  88 ++++++++++++
 tests/unit/routes/networks/index-test.js      |   6 +
 .../routes/networks/index/network-test.js     |  28 ++++
 .../networks/index/network/customers-test.js  |  21 ++-
 .../networks/index/network/orders-test.js     |  17 +--
 .../networks/index/network/stores-test.js     |   6 +
 .../networks/index/network/trucks-test.js     |  30 ++++
 tests/unit/services/storefront-test.js        |  53 +++++++
 translations/en-us.yaml                       |   9 ++
 33 files changed, 949 insertions(+), 103 deletions(-)
 create mode 100644 addon/controllers/networks/index/network/trucks.js
 create mode 100644 addon/routes/networks/index/network/trucks.js
 create mode 100644 addon/templates/networks/index/network/trucks.hbs
 create mode 100644 app/controllers/networks/index/network/trucks.js
 create mode 100644 app/routes/networks/index/network/trucks.js
 create mode 100644 app/templates/networks/index/network/trucks.js
 create mode 100644 tests/unit/routes/networks/index/network/trucks-test.js

diff --git a/addon/components/store-selector.hbs b/addon/components/store-selector.hbs
index 4b349eac..b94812f7 100644
--- a/addon/components/store-selector.hbs
+++ b/addon/components/store-selector.hbs
@@ -1,16 +1,18 @@
-{{#if @activeStore}}
+{{#if this.activeContext}}
     <div class={{@wrapperClass}} {{did-insert this.setupTrigger}} {{will-destroy this.close}} ...attributes>
         <Button
-            title={{@activeStore.name}}
+            title={{concat this.contextLabel ": " this.activeContext.name}}
             class="{{concat "w-full " @buttonClass}} {{if this.isOpen "dd-is-open"}}"
             @wrapperClass={{concat "w-full " @buttonWrapperClass}}
             @size="xs"
             @type="primary"
-            @icon="store"
+            @icon={{if this.isNetworkContext "network-wired" "store"}}
             @iconSize="sm"
-            @text={{@activeStore.name}}
+            @text={{this.activeContext.name}}
             @textClass="truncate"
             @onClick={{this.toggle}}
+            data-test-store-selector-trigger
+            data-context={{if this.isNetworkContext "network" "store"}}
         />
     </div>
 {{else if (has-block)}}
diff --git a/addon/components/store-selector.js b/addon/components/store-selector.js
index bed362ec..db6ea465 100644
--- a/addon/components/store-selector.js
+++ b/addon/components/store-selector.js
@@ -19,6 +19,34 @@ export default class StoreSelectorComponent extends Component {
         return this.stores.length > 0;
     }
 
+    get networks() {
+        return Array.from(this.args.networks ?? []);
+    }
+
+    get hasNetworks() {
+        return this.networks.length > 0;
+    }
+
+    /**
+     * The networks group only appears once there is something to show in it: a user with
+     * one store and no networks sees the plain store menu.
+     */
+    get showNetworks() {
+        return this.hasNetworks || typeof this.args.onCreateNetwork === 'function';
+    }
+
+    get isNetworkContext() {
+        return Boolean(this.args.activeNetwork);
+    }
+
+    get activeContext() {
+        return this.args.activeNetwork ?? this.args.activeStore;
+    }
+
+    get contextLabel() {
+        return this.intl.t(`storefront.component.store-selector.${this.isNetworkContext ? 'network' : 'store'}`);
+    }
+
     willDestroy() {
         super.willDestroy(...arguments);
         this.close();
@@ -78,44 +106,101 @@ export default class StoreSelectorComponent extends Component {
 
         const storeList = document.createElement('div');
         storeList.setAttribute('role', 'group');
+        storeList.setAttribute('data-test-store-selector-stores', '');
         storeList.className = 'px-1';
         storeList.style.maxHeight = '18rem';
         storeList.style.overflowY = 'auto';
 
+        if (this.showNetworks) {
+            storeList.appendChild(this.createGroupLabel(this.intl.t('storefront.component.store-selector.stores')));
+        }
+
         if (this.hasStores) {
             this.stores.forEach((store) => {
-                storeList.appendChild(this.createMenuItem(store?.name || '-', () => this.onSwitchStore(store)));
+                const isActive = !this.isNetworkContext && store?.id === this.args.activeStore?.id;
+                storeList.appendChild(this.createMenuItem(store?.name || '-', () => this.onSwitchStore(store), { isActive }));
             });
         } else {
-            const emptyItem = document.createElement('div');
-            emptyItem.className = 'next-dd-item';
-            emptyItem.setAttribute('role', 'menuitem');
-            emptyItem.textContent = this.intl.t('storefront.component.store-selector.no-stores');
-            storeList.appendChild(emptyItem);
+            storeList.appendChild(this.createEmptyItem(this.intl.t('storefront.component.store-selector.no-stores')));
+        }
+
+        menu.append(storeList);
+
+        if (this.showNetworks) {
+            const networkList = document.createElement('div');
+            networkList.setAttribute('role', 'group');
+            networkList.setAttribute('data-test-store-selector-networks', '');
+            networkList.className = 'px-1';
+            networkList.style.maxHeight = '12rem';
+            networkList.style.overflowY = 'auto';
+            networkList.appendChild(this.createSeparator());
+            networkList.appendChild(this.createGroupLabel(this.intl.t('storefront.component.store-selector.networks')));
+
+            if (this.hasNetworks) {
+                this.networks.forEach((network) => {
+                    const isActive = network?.id === this.args.activeNetwork?.id;
+                    networkList.appendChild(this.createMenuItem(network?.name || '-', () => this.onSwitchNetwork(network), { isActive }));
+                });
+            } else {
+                networkList.appendChild(this.createEmptyItem(this.intl.t('storefront.component.store-selector.no-networks')));
+            }
+
+            menu.append(networkList);
         }
 
         const footer = document.createElement('div');
         footer.className = 'px-1';
 
-        const separator = document.createElement('div');
-        separator.className = 'next-dd-menu-seperator';
-
         const footerGroup = document.createElement('div');
         footerGroup.setAttribute('role', 'group');
+        footerGroup.setAttribute('data-test-store-selector-actions', '');
         footerGroup.className = 'px-1';
         footerGroup.appendChild(this.createMenuItem(this.intl.t('storefront.component.store-selector.create-storefront'), () => this.onCreateStore()));
 
-        footer.append(separator, footerGroup);
-        menu.append(storeList, footer);
+        if (typeof this.args.onCreateNetwork === 'function') {
+            footerGroup.appendChild(this.createMenuItem(this.intl.t('storefront.component.store-selector.create-network'), () => this.onCreateNetwork()));
+        }
+
+        footer.append(this.createSeparator(), footerGroup);
+        menu.append(footer);
 
         return menu;
     }
 
-    createMenuItem(label, callback) {
+    createSeparator() {
+        const separator = document.createElement('div');
+        separator.className = 'next-dd-menu-seperator';
+
+        return separator;
+    }
+
+    createGroupLabel(text) {
+        const label = document.createElement('div');
+        label.className = 'storefront-context-switcher__label';
+        label.setAttribute('role', 'presentation');
+        label.textContent = text;
+
+        return label;
+    }
+
+    createEmptyItem(text) {
+        const emptyItem = document.createElement('div');
+        emptyItem.className = 'next-dd-item storefront-context-switcher__empty';
+        emptyItem.setAttribute('role', 'menuitem');
+        emptyItem.setAttribute('aria-disabled', 'true');
+        emptyItem.textContent = text;
+
+        return emptyItem;
+    }
+
+    createMenuItem(label, callback, { isActive = false } = {}) {
         const item = document.createElement('a');
         item.href = 'javascript:;';
-        item.className = 'next-dd-item';
+        item.className = `next-dd-item${isActive ? ' storefront-context-switcher__item--active' : ''}`;
         item.setAttribute('role', 'menuitem');
+        if (isActive) {
+            item.setAttribute('aria-current', 'true');
+        }
         item.textContent = label;
         item.addEventListener('click', (event) => {
             event.preventDefault();
@@ -210,4 +295,24 @@ export default class StoreSelectorComponent extends Component {
 
         this.close();
     }
+
+    @action onSwitchNetwork(network) {
+        const { onSwitchNetwork } = this.args;
+
+        if (typeof onSwitchNetwork === 'function') {
+            onSwitchNetwork(network);
+        }
+
+        this.close();
+    }
+
+    @action onCreateNetwork() {
+        const { onCreateNetwork } = this.args;
+
+        if (typeof onCreateNetwork === 'function') {
+            onCreateNetwork();
+        }
+
+        this.close();
+    }
 }
diff --git a/addon/controllers/application.js b/addon/controllers/application.js
index 6b59acfa..85053c02 100644
--- a/addon/controllers/application.js
+++ b/addon/controllers/application.js
@@ -13,10 +13,79 @@ export default class ApplicationController extends Controller {
     @service abilities;
     @service store;
     @alias('storefront.activeStore') activeStore;
+    @alias('storefront.activeNetwork') activeNetwork;
     @tracked productCategories = [];
     categoryLoadStoreUuid;
 
+    get isNetworkContext() {
+        return Boolean(this.activeNetwork?.id);
+    }
+
+    /**
+     * The sidebar is rewritten for the active context: a network gets its own
+     * navigation, everything else is scoped to the active store.
+     */
     get navigationItems() {
+        return this.isNetworkContext ? this.networkNavigationItems : this.storeNavigationItems;
+    }
+
+    get networkNavigationItems() {
+        const publicId = this.activeNetwork.public_id;
+        const networkItem = (key, item) => {
+            const route = `console.storefront.networks.index.network.${key}`;
+
+            return {
+                id: `network:${publicId}:${key}`,
+                ...item,
+                // These routes share one dynamic segment, so route-name matching alone cannot tell networks apart.
+                activeWhen: () => this.hostRouter.isActive(route, publicId),
+                onClick: () => this.hostRouter.transitionTo(route, publicId),
+            };
+        };
+
+        return [
+            networkItem('stores', {
+                label: this.intl.t('storefront.networks.index.network.stores.store'),
+                description: 'Stores selling through this network, their categories and invitations.',
+                icon: 'store',
+                permission: 'storefront view network',
+                keywords: ['stores', 'members', 'invite', 'categories'],
+            }),
+            networkItem('trucks', {
+                label: this.intl.t('storefront.common.food-trucks'),
+                description: 'Trucks run by the stores in this network.',
+                icon: 'truck',
+                permission: 'storefront list food-truck',
+                visible: this.can('storefront see food-truck'),
+                keywords: ['vehicles', 'mobile store', 'truck'],
+            }),
+            networkItem('orders', {
+                label: this.intl.t('storefront.networks.index.network.orders'),
+                description: 'Orders placed through this network.',
+                icon: 'file-invoice-dollar',
+                permission: 'storefront list order',
+                visible: this.can('storefront see order'),
+                keywords: ['fulfillment', 'deliveries', 'checkout orders'],
+            }),
+            networkItem('customers', {
+                label: this.intl.t('storefront.networks.index.network.customers'),
+                description: 'Customers who ordered through this network.',
+                icon: 'users',
+                permission: 'storefront list user',
+                visible: this.can('storefront see user'),
+                keywords: ['contacts', 'buyers', 'users'],
+            }),
+            networkItem('index', {
+                label: this.intl.t('storefront.networks.index.network.settings'),
+                description: 'Network details, gateways and notification channels.',
+                icon: 'cog',
+                permission: 'storefront update network',
+                keywords: ['settings', 'general', 'gateways', 'notifications'],
+            }),
+        ];
+    }
+
+    get storeNavigationItems() {
         const hasActiveStore = Boolean(this.activeStore?.id);
 
         return [
@@ -267,12 +336,22 @@ export default class ApplicationController extends Controller {
         });
     }
 
+    @action createNewNetwork() {
+        return this.storefront.createNewNetwork({
+            onSuccess: (network) => this.switchActiveNetwork(network),
+        });
+    }
+
     @action switchActiveStore(store) {
         const loader = this.loader.show({ loadingMessage: `Switching Storefront to ${store.name}...` });
+        const leavingNetwork = this.isNetworkContext;
         this.storefront.setActiveStorefront(store);
         this.productCategories = [];
-        return this.hostRouter
-            .refresh()
+        // A page inside a network has no meaning for a store, so the switch lands on the store dashboard;
+        // leaving the network route is what clears the network context.
+        const transition = leavingNetwork ? this.hostRouter.transitionTo('console.storefront.home') : this.hostRouter.refresh();
+
+        return Promise.resolve(transition)
             .then(() => {
                 this.notifyPropertyChange('activeStore');
                 return this.loadProductCategories(store.id);
@@ -282,6 +361,11 @@ export default class ApplicationController extends Controller {
             });
     }
 
+    @action switchActiveNetwork(network) {
+        // Entering the network route is what sets the network context.
+        return this.hostRouter.transitionTo('console.storefront.networks.index.network.stores', network.public_id);
+    }
+
     @action
     async searchNavigation({ query, limit = 12 }) {
         const trimmedQuery = query?.trim();
diff --git a/addon/controllers/networks/index.js b/addon/controllers/networks/index.js
index 50ff3600..88b0aead 100644
--- a/addon/controllers/networks/index.js
+++ b/addon/controllers/networks/index.js
@@ -77,6 +77,13 @@ export default class NetworksIndexController extends BaseController {
      */
     @service hostRouter;
 
+    /**
+     * Inject the `storefront` service
+     *
+     * @var {Service}
+     */
+    @service storefront;
+
     /**
      * Queryable parameters for this controller's model
      *
@@ -165,27 +172,8 @@ export default class NetworksIndexController extends BaseController {
      * @public
      */
     @action createNetwork() {
-        const network = this.store.createRecord('network');
-        const currency = this.currentUser.getWhoisProperty('currency.code');
-
-        if (currency) {
-            network.setProperties({ currency });
-        }
-
-        this.modalsManager.show('modals/create-network', {
-            title: this.intl.t('storefront.networks.index.create-new-network'),
-            network,
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return network.save().then(() => {
-                    this.notifications.success(this.intl.t('storefront.networks.index.success-message'));
-                    return this.hostRouter.refresh();
-                });
-            },
-            decline: () => {
-                return network.destroyRecord();
-            },
+        return this.storefront.createNewNetwork({
+            onSuccess: () => this.hostRouter.refresh(),
         });
     }
 
diff --git a/addon/controllers/networks/index/network.js b/addon/controllers/networks/index/network.js
index 2f8b823a..efe28142 100644
--- a/addon/controllers/networks/index/network.js
+++ b/addon/controllers/networks/index/network.js
@@ -31,7 +31,11 @@ export default class NetworksIndexNetworkController extends BaseController {
         ];
     }
 
-    @action transitionBack({ closeOverlay }) {
+    get storesCount() {
+        return this.model?.stores_count ?? this.model?.stores?.length ?? 0;
+    }
+
+    @action transitionBack({ closeOverlay } = {}) {
         if (this.model.hasDirtyAttributes) {
             // warn user about unsaved changes
             return this.modalsManager.confirm({
@@ -48,8 +52,12 @@ export default class NetworksIndexNetworkController extends BaseController {
     }
 
     @action exit(closeOverlay) {
-        return closeOverlay(() => {
-            return this.transitionToRoute('networks.index');
-        });
+        const leave = () => this.transitionToRoute('networks.index');
+
+        if (typeof closeOverlay === 'function') {
+            return closeOverlay(leave);
+        }
+
+        return leave();
     }
 }
diff --git a/addon/controllers/networks/index/network/trucks.js b/addon/controllers/networks/index/network/trucks.js
new file mode 100644
index 00000000..d6626276
--- /dev/null
+++ b/addon/controllers/networks/index/network/trucks.js
@@ -0,0 +1,8 @@
+import FoodTrucksIndexController from '@fleetbase/storefront-engine/controllers/food-trucks/index';
+
+/**
+ * Trucks run by the stores of the active network. Creating a truck still happens from its store.
+ */
+export default class NetworksIndexNetworkTrucksController extends FoodTrucksIndexController {
+    queryParams = [{ query: 't_query' }];
+}
diff --git a/addon/routes.js b/addon/routes.js
index d558ea6f..8d5a1e6f 100644
--- a/addon/routes.js
+++ b/addon/routes.js
@@ -36,6 +36,7 @@ export default buildRoutes(function () {
         this.route('index', { path: '/' }, function () {
             this.route('network', { path: '/:public_id' }, function () {
                 this.route('stores');
+                this.route('trucks');
                 this.route('customers');
                 this.route('orders');
             });
diff --git a/addon/routes/application.js b/addon/routes/application.js
index 13505b5e..aa96d8f6 100644
--- a/addon/routes/application.js
+++ b/addon/routes/application.js
@@ -1,6 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { hash } from 'rsvp';
 
 export default class ApplicationRoute extends Route {
     @service fetch;
@@ -42,7 +43,10 @@ export default class ApplicationRoute extends Route {
     }
 
     model() {
-        return this.store.query('store', { limit: 300, sort: '-updated_at' });
+        return hash({
+            stores: this.store.query('store', { limit: 300, sort: '-updated_at' }),
+            networks: this.abilities.cannot('storefront list network') ? [] : this.store.query('network', { limit: 300, sort: '-updated_at' }),
+        });
     }
 
     setupController(controller) {
@@ -50,7 +54,7 @@ export default class ApplicationRoute extends Route {
         controller.loadProductCategories();
     }
 
-    afterModel(stores) {
+    afterModel({ stores }) {
         this.storefront.synchronizeActiveStore(stores);
         this.storefront.listenForIncomingOrders();
     }
diff --git a/addon/routes/networks/index/network.js b/addon/routes/networks/index/network.js
index f0b671f1..a05b3620 100644
--- a/addon/routes/networks/index/network.js
+++ b/addon/routes/networks/index/network.js
@@ -7,6 +7,7 @@ export default class NetworksIndexNetworkRoute extends Route {
     @service abilities;
     @service hostRouter;
     @service notifications;
+    @service storefront;
 
     beforeModel() {
         if (this.abilities.cannot('storefront view network')) {
@@ -18,4 +19,17 @@ export default class NetworksIndexNetworkRoute extends Route {
     model({ public_id }) {
         return this.store.findRecord('network', public_id);
     }
+
+    /**
+     * A URL under a network scopes the console to that network; moving between two
+     * networks re-runs this hook without deactivating the route.
+     */
+    afterModel(network) {
+        this.storefront.setActiveNetwork(network);
+    }
+
+    deactivate() {
+        super.deactivate(...arguments);
+        this.storefront.clearActiveNetwork();
+    }
 }
diff --git a/addon/routes/networks/index/network/customers.js b/addon/routes/networks/index/network/customers.js
index 652e00f8..64f2d56b 100644
--- a/addon/routes/networks/index/network/customers.js
+++ b/addon/routes/networks/index/network/customers.js
@@ -3,7 +3,6 @@ import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkCustomersRoute extends Route {
     @service store;
-    @service storefront;
 
     queryParams = {
         page: { refreshModel: true, as: 'n_page' },
@@ -21,6 +20,6 @@ export default class NetworksIndexNetworkCustomersRoute extends Route {
     };
 
     model(params) {
-        return this.store.query('customer', { ...params, storefront: this.storefront.getActiveStore('public_id') });
+        return this.store.query('customer', { ...params, storefront: this.modelFor('networks.index.network').public_id });
     }
 }
diff --git a/addon/routes/networks/index/network/orders.js b/addon/routes/networks/index/network/orders.js
index 36e2adbf..b4004837 100644
--- a/addon/routes/networks/index/network/orders.js
+++ b/addon/routes/networks/index/network/orders.js
@@ -2,7 +2,6 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkOrdersRoute extends Route {
-    @service storefront;
     @service fetch;
 
     async model(params) {
@@ -15,7 +14,7 @@ export default class NetworksIndexNetworkOrdersRoute extends Route {
     }
 
     buildQueryParams(params = {}) {
-        return Object.entries({ ...params, storefront: this.storefront.getActiveStore('public_id') }).reduce((queryParams, [key, value]) => {
+        return Object.entries({ ...params, storefront: this.modelFor('networks.index.network').public_id }).reduce((queryParams, [key, value]) => {
             if (value !== undefined && value !== null && value !== '') {
                 queryParams[key] = value;
             }
diff --git a/addon/routes/networks/index/network/trucks.js b/addon/routes/networks/index/network/trucks.js
new file mode 100644
index 00000000..c676f004
--- /dev/null
+++ b/addon/routes/networks/index/network/trucks.js
@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class NetworksIndexNetworkTrucksRoute extends Route {
+    @service store;
+
+    queryParams = {
+        query: { refreshModel: true, as: 't_query' },
+    };
+
+    get network() {
+        return this.modelFor('networks.index.network');
+    }
+
+    model(params = {}) {
+        return this.store.query('food-truck', { ...params, network: this.network.id });
+    }
+}
diff --git a/addon/services/storefront.js b/addon/services/storefront.js
index 3ce5d258..fadae993 100644
--- a/addon/services/storefront.js
+++ b/addon/services/storefront.js
@@ -18,6 +18,7 @@ export default class StorefrontService extends Service.extend(Evented) {
     @service abilities;
     @service socket;
     @tracked activeStoreId;
+    @tracked activeNetworkId;
 
     get hostRouter() {
         const owner = getOwner(this);
@@ -35,6 +36,39 @@ export default class StorefrontService extends Service.extend(Evented) {
         return activeStoreId ? this.store.peekRecord('store', activeStoreId) : null;
     }
 
+    /**
+     * Gets the active network. A network is active only while the user is inside a
+     * network page: the context is derived from the route, not persisted.
+     * @returns {Object|null} The active network record.
+     */
+    get activeNetwork() {
+        return this.activeNetworkId ? (this.store.peekRecord('network', this.activeNetworkId) ?? null) : null;
+    }
+
+    /**
+     * Whether the console is scoped to a network instead of a store.
+     * @returns {boolean}
+     */
+    get isNetworkContext() {
+        return Boolean(this.activeNetwork);
+    }
+
+    /**
+     * The active context type: a store or a network, never both at once.
+     * @returns {'store'|'network'}
+     */
+    get activeContextType() {
+        return this.isNetworkContext ? 'network' : 'store';
+    }
+
+    /**
+     * The record the console is currently scoped to.
+     * @returns {Object|null} the active network, otherwise the active store
+     */
+    get activeContext() {
+        return this.activeNetwork ?? this.activeStore;
+    }
+
     /**
      * Sets the active storefront.
      * @param {Object} store - The store to set as active.
@@ -45,6 +79,45 @@ export default class StorefrontService extends Service.extend(Evented) {
         this.trigger('storefront.changed', store);
     }
 
+    /**
+     * Enters the network context for a network, or leaves it when given nothing.
+     * @param {Object|null} network - The network to scope the console to.
+     */
+    setActiveNetwork(network = null) {
+        const nextNetworkId = network?.id ?? null;
+
+        if ((this.activeNetworkId ?? null) === nextNetworkId) {
+            return;
+        }
+
+        this.activeNetworkId = nextNetworkId;
+        this.trigger('storefront.context.changed', this.activeContextType, this.activeContext);
+    }
+
+    /**
+     * Leaves the network context and returns to the active store.
+     */
+    clearActiveNetwork() {
+        this.setActiveNetwork(null);
+    }
+
+    /**
+     * Gets the active network or a specific property of it.
+     * @param {string|null} property - The property to retrieve from the active network.
+     * @returns {Object|null} The active network or its specific property.
+     */
+    getActiveNetwork(property = null) {
+        if (this.activeNetwork) {
+            if (typeof property === 'string') {
+                return get(this.activeNetwork, property);
+            }
+
+            return this.activeNetwork;
+        }
+
+        return null;
+    }
+
     /**
      * Gets the active store or a specific property of it.
      * @param {string|null} property - The property to retrieve from the active store.
@@ -254,6 +327,48 @@ export default class StorefrontService extends Service.extend(Evented) {
         });
     }
 
+    /**
+     * Creates a new network with given options.
+     * @param {Object} [options={}] - Options for creating the network; `onSuccess(network)` runs after it saves.
+     */
+    createNewNetwork(options = {}) {
+        const network = this.store.createRecord('network');
+        const currency = this.currentUser.getWhoisProperty('currency.code');
+
+        if (currency) {
+            network.setProperties({ currency });
+        }
+
+        this.modalsManager.show('modals/create-network', {
+            title: this.intl.t('storefront.networks.index.create-new-network'),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            network,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await network.save();
+                    this.notifications.success(this.intl.t('storefront.networks.index.success-message'));
+                    if (typeof options?.onSuccess === 'function') {
+                        options.onSuccess(network);
+                    }
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
+            },
+            decline: (modal) => {
+                network.destroyRecord();
+                modal.done();
+            },
+            ...options,
+        });
+    }
+
     /**
      * Plays an alert sound.
      */
diff --git a/addon/styles/storefront-engine.css b/addon/styles/storefront-engine.css
index 9d815f1e..2595f6af 100644
--- a/addon/styles/storefront-engine.css
+++ b/addon/styles/storefront-engine.css
@@ -3317,3 +3317,101 @@ body[data-theme='dark'] .storefront-hours-strip__bar {
 body[data-theme='dark'] .storefront-hours-strip__day.is-open .storefront-hours-strip__bar {
     background: #16a34a;
 }
+
+/* Context switcher: the store selector grown to cover networks */
+.storefront-context-switcher__label {
+    padding: 0.375rem 0.75rem 0.125rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-context-switcher__label {
+    color: #9ca3af;
+}
+
+.store-selector-dropdown-menu .next-dd-item.storefront-context-switcher__item--active {
+    font-weight: 600;
+}
+
+.store-selector-dropdown-menu .next-dd-item.storefront-context-switcher__empty {
+    color: #9ca3af;
+    cursor: default;
+}
+
+/* Network page: full-page container for the network sections */
+.storefront-network-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.storefront-network-page__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+}
+
+body[data-theme='dark'] .storefront-network-page__header {
+    border-color: #374151;
+    background-color: rgb(55 65 81 / 50%);
+}
+
+.storefront-network-page__logo {
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border-radius: 0.375rem;
+    object-fit: cover;
+    border: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-network-page__logo {
+    border-color: #4b5563;
+}
+
+.storefront-network-page__identity {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.storefront-network-page__name {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    color: #111827;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .storefront-network-page__name {
+    color: #f3f4f6;
+}
+
+.storefront-network-page__meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-network-page__meta {
+    color: #9ca3af;
+}
+
+.storefront-network-page__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
index 3d592ac3..c662df0a 100644
--- a/addon/templates/application.hbs
+++ b/addon/templates/application.hbs
@@ -1,5 +1,15 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <StoreSelector @stores={{@model}} @activeStore={{this.activeStore}} @buttonClass="mb-2" @onCreateStore={{this.createNewStorefront}} @onSwitchStore={{this.switchActiveStore}} />
+    <StoreSelector
+        @stores={{@model.stores}}
+        @networks={{@model.networks}}
+        @activeStore={{this.activeStore}}
+        @activeNetwork={{this.activeNetwork}}
+        @buttonClass="mb-2"
+        @onCreateStore={{this.createNewStorefront}}
+        @onSwitchStore={{this.switchActiveStore}}
+        @onCreateNetwork={{this.createNewNetwork}}
+        @onSwitchNetwork={{this.switchActiveNetwork}}
+    />
     <Layout::Sidebar::Navigator @items={{this.navigationItems}} @searchPlaceholder="Search Storefront..." @searchProvider={{this.searchNavigation}} />
 </EmberWormhole>
 
diff --git a/addon/templates/networks/index.hbs b/addon/templates/networks/index.hbs
index 23f9fa02..9829f650 100644
--- a/addon/templates/networks/index.hbs
+++ b/addon/templates/networks/index.hbs
@@ -1,25 +1,29 @@
-<Layout::Section::Header @title={{t "storefront.common.network"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "storefront.common.new"}} class="mr-2" @onClick={{this.createNetwork}} @permission="storefront create network" />
-</Layout::Section::Header>
+{{#if this.storefront.isNetworkContext}}
+    {{outlet}}
+{{else}}
+    <Layout::Section::Header @title={{t "storefront.common.network"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+        <Button @type="primary" @icon="plus" @iconPrefix="fas" @text={{t "storefront.common.new"}} class="mr-2" @onClick={{this.createNetwork}} @permission="storefront create network" />
+    </Layout::Section::Header>
 
-<Layout::Section::Body class="overflow-y-scroll-i h-full">
-    <Layout::Resource::CardsGrid
-        @resource="network"
-        @data={{@model}}
-        @columns="4"
-        @showPagination={{true}}
-        @page={{this.page}}
-        @onPageChange={{fn (mut this.page)}}
-        @paginationMeta={{@model.meta}}
-        @containerClass="p-4"
-        @emptyStateText={{t "storefront.networks.index.empty-state"}}
-        @createButtonText={{t "storefront.networks.index.create-network"}}
-        @onCreateNew={{this.createNetwork}}
-        class="h-full"
-        as |Item|
-    >
-        <Storefront::Network::Card @network={{Item.model}} @onOpen={{this.manageNetwork}} @onInvite={{this.sendInvites}} @onDelete={{this.deleteNetwork}} />
-    </Layout::Resource::CardsGrid>
-</Layout::Section::Body>
+    <Layout::Section::Body class="overflow-y-scroll-i h-full">
+        <Layout::Resource::CardsGrid
+            @resource="network"
+            @data={{@model}}
+            @columns="4"
+            @showPagination={{true}}
+            @page={{this.page}}
+            @onPageChange={{fn (mut this.page)}}
+            @paginationMeta={{@model.meta}}
+            @containerClass="p-4"
+            @emptyStateText={{t "storefront.networks.index.empty-state"}}
+            @createButtonText={{t "storefront.networks.index.create-network"}}
+            @onCreateNew={{this.createNetwork}}
+            class="h-full"
+            as |Item|
+        >
+            <Storefront::Network::Card @network={{Item.model}} @onOpen={{this.manageNetwork}} @onInvite={{this.sendInvites}} @onDelete={{this.deleteNetwork}} />
+        </Layout::Resource::CardsGrid>
+    </Layout::Section::Body>
 
-{{outlet}}
+    {{outlet}}
+{{/if}}
diff --git a/addon/templates/networks/index/network.hbs b/addon/templates/networks/index/network.hbs
index a1511336..45b66bd4 100644
--- a/addon/templates/networks/index/network.hbs
+++ b/addon/templates/networks/index/network.hbs
@@ -1,17 +1,19 @@
-<Overlay @position="right" @isResizable={{true}} @noBackdrop={{true}} @width="900px" @minResizeWidth={{570}} @fullHeight={{true}}>
-    <Overlay::Header @title={{t "storefront.networks.index.network.manage-network"}} @onPressCancel={{this.transitionBack}} />
-    <Overlay::Body class="p-0i" @increaseInnerBodyHeightBy="0" @wrapperClass="space-y-4 pt-4">
-        <div class="flex flex-col">
-            <div class="px-4 flex items-center section-header-title">
-                <FaIcon @icon="network-wired" @size="lg" class="text-sky-500 mr-3" />
-                <h3 class="text-lg font-semibold dark:text-white">
-                    {{@model.name}}
-                </h3>
+<div class="storefront-network-page" data-test-storefront-network-page>
+    <div class="storefront-network-page__header">
+        <Image src={{@model.logo_url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{n-a @model.name ""}} class="storefront-network-page__logo" />
+        <div class="storefront-network-page__identity">
+            <h2 class="storefront-network-page__name" data-test-network-page-name>{{n-a @model.name}}</h2>
+            <div class="storefront-network-page__meta">
+                <Badge @status={{if @model.online "online" "offline"}} @text={{if @model.online (t "storefront.common.online") (t "storefront.common.offline")}} @size="xs" />
+                <span>{{t "storefront.networks.card.stores-count" count=this.storesCount}}</span>
+                {{#if @model.currency}}
+                    <span>{{@model.currency}}</span>
+                {{/if}}
             </div>
         </div>
-        <TabNavigation @tabs={{this.tabs}}>
-            {{outlet}}
-            <Spacer @height="400px" />
-        </TabNavigation>
-    </Overlay::Body>
-</Overlay>
\ No newline at end of file
+        <Button @icon="arrow-left" @size="xs" @text={{t "storefront.networks.index.network.all-networks"}} @onClick={{this.transitionBack}} data-test-network-page-back />
+    </div>
+    <div class="storefront-network-page__body">
+        {{outlet}}
+    </div>
+</div>
diff --git a/addon/templates/networks/index/network/trucks.hbs b/addon/templates/networks/index/network/trucks.hbs
new file mode 100644
index 00000000..e272b36d
--- /dev/null
+++ b/addon/templates/networks/index/network/trucks.hbs
@@ -0,0 +1,15 @@
+<Layout::Section::Header @title={{t "storefront.common.food-trucks"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} />
+
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <Layout::Resource::CardsGrid
+        @resource="truck"
+        @data={{@model}}
+        @columns="4"
+        @containerClass="p-4"
+        @emptyStateText={{t "storefront.networks.index.network.trucks.empty-state"}}
+        class="h-full"
+        as |Item|
+    >
+        <Storefront::Truck::Card @truck={{Item.model}} @onEdit={{this.editFoodTruck}} @onAssignCatalogs={{this.assignCatalogs}} @onDelete={{this.deleteFoodTruck}} />
+    </Layout::Resource::CardsGrid>
+</Layout::Section::Body>
diff --git a/app/controllers/networks/index/network/trucks.js b/app/controllers/networks/index/network/trucks.js
new file mode 100644
index 00000000..91eb4b7a
--- /dev/null
+++ b/app/controllers/networks/index/network/trucks.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/controllers/networks/index/network/trucks';
diff --git a/app/routes/networks/index/network/trucks.js b/app/routes/networks/index/network/trucks.js
new file mode 100644
index 00000000..e23a4acd
--- /dev/null
+++ b/app/routes/networks/index/network/trucks.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/routes/networks/index/network/trucks';
diff --git a/app/templates/networks/index/network/trucks.js b/app/templates/networks/index/network/trucks.js
new file mode 100644
index 00000000..a3d22412
--- /dev/null
+++ b/app/templates/networks/index/network/trucks.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/templates/networks/index/network/trucks';
diff --git a/server/src/Http/Filter/FoodTruckFilter.php b/server/src/Http/Filter/FoodTruckFilter.php
index 67f34be2..4e7578ed 100644
--- a/server/src/Http/Filter/FoodTruckFilter.php
+++ b/server/src/Http/Filter/FoodTruckFilter.php
@@ -28,6 +28,19 @@ function ($query) use ($storefront) {
         );
     }
 
+    /**
+     * Trucks run by any store that is a member of the network.
+     */
+    public function network(?string $network)
+    {
+        $this->builder->whereHas(
+            'store.networks',
+            function ($query) use ($network) {
+                $query->where('network_uuid', $network);
+            }
+        );
+    }
+
     public function serviceArea(string $serviceAreaId)
     {
         $matchingServiceAreaIds = ServiceArea::on(config('fleetbase.connection.db'))
diff --git a/server/tests/Unit/Http/Filter/StorefrontFilterContractsTest.php b/server/tests/Unit/Http/Filter/StorefrontFilterContractsTest.php
index 73c56f18..61ee5bdc 100644
--- a/server/tests/Unit/Http/Filter/StorefrontFilterContractsTest.php
+++ b/server/tests/Unit/Http/Filter/StorefrontFilterContractsTest.php
@@ -171,6 +171,19 @@ function applyStorefrontFilter(string $filter, Builder $builder, string $uri, ar
         ->and($public->toSql())->not->toContain('"food_trucks"."deleted_at" is null');
 });
 
+test('food truck network filter constrains trucks to the stores that are members of the network', function () {
+    $builder = applyStorefrontFilter(
+        FoodTruckFilter::class,
+        (new FoodTruck())->newQuery(),
+        'int/v1/storefront/food-trucks',
+        ['network' => 'network_uuid']
+    );
+
+    expect($builder->toSql())->toContain('exists')
+        ->and($builder->toSql())->toContain('"network_uuid" = ?')
+        ->and($builder->getBindings())->toContain('network_uuid');
+});
+
 test('food truck service-area filter resolves public ids and UUIDs before constraining trucks', function () {
     $connection = Model::getConnectionResolver()->connection('mysql');
     $schema     = $connection->getSchemaBuilder();
diff --git a/tests/integration/components/store-selector-test.js b/tests/integration/components/store-selector-test.js
index 4226febf..4ed597f4 100644
--- a/tests/integration/components/store-selector-test.js
+++ b/tests/integration/components/store-selector-test.js
@@ -2,9 +2,12 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
 import { click, render, triggerEvent, triggerKeyEvent } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | store-selector', function (hooks) {
     setupRenderingTest(hooks);
+    // The trigger reads a translation while rendering, so intl must exist before the first render.
+    setupIntl(hooks, 'en-us');
 
     hooks.afterEach(function () {
         document.querySelectorAll('.store-selector-dropdown-menu').forEach((menu) => menu.remove());
@@ -135,4 +138,114 @@ module('Integration | Component | store-selector', function (hooks) {
         await triggerEvent(document.body, 'mousedown');
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).doesNotExist('outside click closes dropdown');
     });
+
+    test('a user with stores and no networks sees the plain store menu', async function (assert) {
+        this.set('activeStore', { id: 'store_1', name: 'Fleetbase Market' });
+        this.set('stores', [{ id: 'store_1', name: 'Fleetbase Market' }]);
+        this.set('noop', () => {});
+
+        await render(hbs`<StoreSelector @stores={{this.stores}} @activeStore={{this.activeStore}} @onCreateStore={{this.noop}} @onSwitchStore={{this.noop}} />`);
+        await click('button');
+
+        const menu = document.body.querySelector('.store-selector-dropdown-menu');
+        assert.dom('[data-test-store-selector-trigger]').hasAttribute('data-context', 'store');
+        assert.dom(menu.querySelector('[data-test-store-selector-networks]')).doesNotExist('no networks group');
+        assert.dom(menu.querySelector('.storefront-context-switcher__label')).doesNotExist('no group labels when there is only one group');
+        assert.dom(menu.querySelector('[aria-current="true"]')).hasText('Fleetbase Market', 'the active store is marked');
+        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .next-dd-item').length, 1, 'only the create store action');
+    });
+
+    test('it lists networks as a second group and switches into one', async function (assert) {
+        assert.expect(7);
+
+        this.set('activeStore', { id: 'store_1', name: 'Fleetbase Market' });
+        this.set('stores', [{ id: 'store_1', name: 'Fleetbase Market' }]);
+        this.set('networks', [
+            { id: 'network_1', name: 'Downtown Market' },
+            { id: 'network_2', name: 'Uptown Market' },
+        ]);
+        this.set('noop', () => {});
+        this.set('switchNetwork', (network) => {
+            assert.strictEqual(network.id, 'network_2', 'passes the selected network');
+        });
+
+        await render(hbs`
+            <StoreSelector
+                @stores={{this.stores}}
+                @networks={{this.networks}}
+                @activeStore={{this.activeStore}}
+                @onCreateStore={{this.noop}}
+                @onSwitchStore={{this.noop}}
+                @onSwitchNetwork={{this.switchNetwork}}
+                @onCreateNetwork={{this.noop}}
+            />
+        `);
+        await click('button');
+
+        const menu = document.body.querySelector('.store-selector-dropdown-menu');
+        assert.deepEqual(
+            Array.from(menu.querySelectorAll('.storefront-context-switcher__label')).map((label) => label.textContent),
+            ['Stores', 'Networks'],
+            'both groups are labelled'
+        );
+        const networkItems = menu.querySelectorAll('[data-test-store-selector-networks] .next-dd-item');
+        assert.deepEqual(
+            Array.from(networkItems).map((item) => item.textContent),
+            ['Downtown Market', 'Uptown Market']
+        );
+        assert.dom(menu.querySelector('[data-test-store-selector-stores] [aria-current="true"]')).hasText('Fleetbase Market');
+        assert.dom(menu.querySelector('[data-test-store-selector-networks] [aria-current="true"]')).doesNotExist('no network is active in the store context');
+        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .next-dd-item').length, 2, 'create store and create network actions');
+
+        await click(networkItems[1]);
+        assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).doesNotExist('dropdown closes after switching networks');
+    });
+
+    test('in the network context the trigger shows the network and marks it active', async function (assert) {
+        this.set('activeStore', { id: 'store_1', name: 'Fleetbase Market' });
+        this.set('activeNetwork', { id: 'network_1', name: 'Downtown Market' });
+        this.set('stores', [{ id: 'store_1', name: 'Fleetbase Market' }]);
+        this.set('networks', [{ id: 'network_1', name: 'Downtown Market' }]);
+        this.set('noop', () => {});
+
+        await render(hbs`
+            <StoreSelector
+                @stores={{this.stores}}
+                @networks={{this.networks}}
+                @activeStore={{this.activeStore}}
+                @activeNetwork={{this.activeNetwork}}
+                @onCreateStore={{this.noop}}
+                @onSwitchStore={{this.noop}}
+                @onSwitchNetwork={{this.noop}}
+            />
+        `);
+
+        assert.dom('[data-test-store-selector-trigger]').hasAttribute('data-context', 'network');
+        assert.dom('[data-test-store-selector-trigger]').hasText('Downtown Market');
+        assert.dom('[data-test-store-selector-trigger]').hasAttribute('title', 'Network: Downtown Market');
+
+        await click('button');
+        const menu = document.body.querySelector('.store-selector-dropdown-menu');
+        assert.dom(menu.querySelector('[data-test-store-selector-networks] [aria-current="true"]')).hasText('Downtown Market');
+        assert.dom(menu.querySelector('[data-test-store-selector-stores] [aria-current="true"]')).doesNotExist('the store is not marked while a network is active');
+        assert.dom(menu.querySelector('[data-test-store-selector-actions]').lastElementChild).hasText('Create a new', 'no create network action without a handler');
+    });
+
+    test('it creates a network and closes the dropdown', async function (assert) {
+        assert.expect(2);
+
+        this.set('activeStore', { id: 'store_1', name: 'Fleetbase Market' });
+        this.set('stores', [{ id: 'store_1', name: 'Fleetbase Market' }]);
+        this.set('noop', () => {});
+        this.set('createNetwork', () => assert.ok(true, 'calls create network action'));
+
+        await render(
+            hbs`<StoreSelector @stores={{this.stores}} @activeStore={{this.activeStore}} @onCreateStore={{this.noop}} @onSwitchStore={{this.noop}} @onCreateNetwork={{this.createNetwork}} />`
+        );
+        await click('button');
+
+        const menu = document.body.querySelector('.store-selector-dropdown-menu');
+        assert.dom(menu.querySelector('[data-test-store-selector-networks] .storefront-context-switcher__empty')).hasText('No networks');
+        await click(menu.querySelector('[data-test-store-selector-actions] .next-dd-item:last-child'));
+    });
 });
diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js
index 1ea16503..87fbb91c 100644
--- a/tests/unit/controllers/application-test.js
+++ b/tests/unit/controllers/application-test.js
@@ -29,10 +29,20 @@ class StorefrontStub {
         public_id: 'store_123',
         currency: 'USD',
     };
+    activeNetwork = null;
+    createNetworkCalls = [];
+
+    get isNetworkContext() {
+        return Boolean(this.activeNetwork);
+    }
 
     setActiveStorefront(store) {
         this.activeStore = store;
     }
+
+    createNewNetwork(options) {
+        this.createNetworkCalls.push(options);
+    }
 }
 
 class AbilitiesStub {
@@ -101,11 +111,21 @@ class LoaderStub {
 
 class HostRouterStub {
     refreshCount = 0;
+    transitions = [];
 
     refresh() {
         this.refreshCount++;
         return Promise.resolve();
     }
+
+    transitionTo(...args) {
+        this.transitions.push(args);
+        return Promise.resolve();
+    }
+
+    isActive() {
+        return false;
+    }
 }
 
 module('Unit | Controller | application', function (hooks) {
@@ -338,4 +358,72 @@ module('Unit | Controller | application', function (hooks) {
 
         assert.deepEqual(results, []);
     });
+
+    test('it rewrites the sidebar for the network context', function (assert) {
+        const storefront = this.owner.lookup('service:storefront');
+        const hostRouter = this.owner.lookup('service:host-router');
+        storefront.activeNetwork = { id: 'network_uuid', public_id: 'network_123', name: 'Downtown Market' };
+
+        const controller = this.owner.lookup('controller:application');
+        const items = controller.navigationItems;
+
+        assert.true(controller.isNetworkContext);
+        assert.deepEqual(
+            items.map((item) => item.label),
+            ['Stores', 'Trucks', 'Orders', 'Customers', 'Settings'],
+            'network sections replace the store sections'
+        );
+        assert.deepEqual(
+            items.map((item) => item.id),
+            ['network:network_123:stores', 'network:network_123:trucks', 'network:network_123:orders', 'network:network_123:customers', 'network:network_123:index'],
+            'items are keyed by network so two networks never share an entry'
+        );
+        assert.ok(
+            items.every((item) => item.route === undefined),
+            'network items do not use shared route-name matching'
+        );
+
+        hostRouter.isActive = (route, publicId) => route === 'console.storefront.networks.index.network.trucks' && publicId === 'network_123';
+        assert.true(items[1].activeWhen(), 'the trucks section is active on the network trucks route');
+        assert.false(items[0].activeWhen(), 'the stores section is not');
+
+        items[2].onClick();
+        assert.deepEqual(hostRouter.transitions, [['console.storefront.networks.index.network.orders', 'network_123']], 'sections transition with the network id');
+    });
+
+    test('switching to a network enters its stores page', function (assert) {
+        const controller = this.owner.lookup('controller:application');
+        const hostRouter = this.owner.lookup('service:host-router');
+
+        controller.switchActiveNetwork({ id: 'network_uuid', public_id: 'network_123' });
+
+        assert.deepEqual(hostRouter.transitions, [['console.storefront.networks.index.network.stores', 'network_123']]);
+    });
+
+    test('switching to a store from a network lands on the store dashboard', async function (assert) {
+        const storefront = this.owner.lookup('service:storefront');
+        const hostRouter = this.owner.lookup('service:host-router');
+        const store = this.owner.lookup('service:store');
+        storefront.activeNetwork = { id: 'network_uuid', public_id: 'network_123', name: 'Downtown Market' };
+
+        const controller = this.owner.lookup('controller:application');
+        await controller.switchActiveStore({ id: 'next_store_uuid', public_id: 'store_456', name: 'Next Store' });
+
+        assert.deepEqual(hostRouter.transitions, [['console.storefront.home']], 'leaves the network page instead of refreshing it');
+        assert.strictEqual(hostRouter.refreshCount, 0);
+        assert.strictEqual(storefront.activeStore.id, 'next_store_uuid', 'the selected store becomes active');
+        assert.strictEqual(store.requests[store.requests.length - 1].params.owner_uuid, 'next_store_uuid', 'categories load for the selected store');
+    });
+
+    test('creating a network switches into it once it is saved', function (assert) {
+        const controller = this.owner.lookup('controller:application');
+        const storefront = this.owner.lookup('service:storefront');
+        const hostRouter = this.owner.lookup('service:host-router');
+
+        controller.createNewNetwork();
+        assert.strictEqual(storefront.createNetworkCalls.length, 1, 'delegates to the storefront service');
+
+        storefront.createNetworkCalls[0].onSuccess({ id: 'network_uuid', public_id: 'network_123' });
+        assert.deepEqual(hostRouter.transitions, [['console.storefront.networks.index.network.stores', 'network_123']]);
+    });
 });
diff --git a/tests/unit/routes/networks/index-test.js b/tests/unit/routes/networks/index-test.js
index 158ecb69..9d05d470 100644
--- a/tests/unit/routes/networks/index-test.js
+++ b/tests/unit/routes/networks/index-test.js
@@ -1,9 +1,15 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import Service from '@ember/service';
 
 module('Unit | Route | networks/index', function (hooks) {
     setupTest(hooks);
 
+    hooks.beforeEach(function () {
+        // The engine's dummy app has no console host to provide the host router.
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
+
     test('it exists', function (assert) {
         let route = this.owner.lookup('route:networks/index');
         assert.ok(route);
diff --git a/tests/unit/routes/networks/index/network-test.js b/tests/unit/routes/networks/index/network-test.js
index 9d0e38c8..381a9d97 100644
--- a/tests/unit/routes/networks/index/network-test.js
+++ b/tests/unit/routes/networks/index/network-test.js
@@ -1,11 +1,39 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import Service from '@ember/service';
+
+class StorefrontStub extends Service {
+    calls = [];
+
+    setActiveNetwork(network) {
+        this.calls.push(['set', network?.id]);
+    }
+
+    clearActiveNetwork() {
+        this.calls.push(['clear']);
+    }
+}
 
 module('Unit | Route | networks/index/network', function (hooks) {
     setupTest(hooks);
 
+    hooks.beforeEach(function () {
+        this.owner.register('service:storefront', StorefrontStub);
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
+
     test('it exists', function (assert) {
         let route = this.owner.lookup('route:networks/index/network');
         assert.ok(route);
     });
+
+    test('entering a network sets the network context and leaving clears it', function (assert) {
+        const route = this.owner.lookup('route:networks/index/network');
+        const storefront = this.owner.lookup('service:storefront');
+
+        route.afterModel({ id: 'network_uuid' });
+        route.deactivate();
+
+        assert.deepEqual(storefront.calls, [['set', 'network_uuid'], ['clear']]);
+    });
 });
diff --git a/tests/unit/routes/networks/index/network/customers-test.js b/tests/unit/routes/networks/index/network/customers-test.js
index 96637fab..b09ef833 100644
--- a/tests/unit/routes/networks/index/network/customers-test.js
+++ b/tests/unit/routes/networks/index/network/customers-test.js
@@ -1,11 +1,26 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import Service from '@ember/service';
 
 module('Unit | Route | networks/index/network/customers', function (hooks) {
     setupTest(hooks);
 
-    test('it exists', function (assert) {
-        let route = this.owner.lookup('route:networks/index/network/customers');
-        assert.ok(route);
+    hooks.beforeEach(function () {
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
+
+    test('it lists the customers who ordered through the network, not the active store', async function (assert) {
+        const route = this.owner.lookup('route:networks/index/network/customers');
+        const store = this.owner.lookup('service:store');
+        const requests = [];
+        store.query = (modelName, params) => {
+            requests.push({ modelName, params });
+            return Promise.resolve([]);
+        };
+        route.modelFor = () => ({ id: 'network_uuid', public_id: 'network_123' });
+
+        await route.model({ page: 1 });
+
+        assert.deepEqual(requests, [{ modelName: 'customer', params: { page: 1, storefront: 'network_123' } }]);
     });
 });
diff --git a/tests/unit/routes/networks/index/network/orders-test.js b/tests/unit/routes/networks/index/network/orders-test.js
index d958a2b1..b0e2c360 100644
--- a/tests/unit/routes/networks/index/network/orders-test.js
+++ b/tests/unit/routes/networks/index/network/orders-test.js
@@ -2,14 +2,6 @@ import Service, { inject as service } from '@ember/service';
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
 
-class StorefrontStubService extends Service {
-    getActiveStore(key) {
-        if (key === 'public_id') {
-            return 'store_123';
-        }
-    }
-}
-
 class FetchStubService extends Service {
     @service store;
 
@@ -47,21 +39,24 @@ module('Unit | Route | networks/index/network/orders', function (hooks) {
     setupTest(hooks);
 
     hooks.beforeEach(function () {
-        this.owner.register('service:storefront', StorefrontStubService);
         this.owner.register('service:fetch', FetchStubService);
     });
 
-    test('it loads orders from the Storefront internal namespace as Ember Data models', async function (assert) {
+    test('it loads the network orders from the Storefront internal namespace as Ember Data models', async function (assert) {
         let route = this.owner.lookup('route:networks/index/network/orders');
         let fetch = this.owner.lookup('service:fetch');
 
         assert.ok(route);
+        route.modelFor = (name) => {
+            assert.strictEqual(name, 'networks.index.network', 'orders are scoped to the network being viewed');
+            return { id: 'network_uuid', public_id: 'network_123' };
+        };
 
         let orders = await route.model({ page: 2, limit: undefined, sort: '-created_at', query: undefined, status: '', customer: null });
         let request = fetch.calls[0];
 
         assert.strictEqual(request.path, 'orders');
-        assert.deepEqual(request.params, { page: 2, sort: '-created_at', storefront: 'store_123' });
+        assert.deepEqual(request.params, { page: 2, sort: '-created_at', storefront: 'network_123' });
         assert.deepEqual(request.options, { namespace: 'storefront/int/v1' });
         assert.strictEqual(fetch.normalized.modelType, 'orders');
         assert.strictEqual(orders[0].constructor.modelName, 'order');
diff --git a/tests/unit/routes/networks/index/network/stores-test.js b/tests/unit/routes/networks/index/network/stores-test.js
index 09ab0323..fcaf341e 100644
--- a/tests/unit/routes/networks/index/network/stores-test.js
+++ b/tests/unit/routes/networks/index/network/stores-test.js
@@ -1,9 +1,15 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
+import Service from '@ember/service';
 
 module('Unit | Route | networks/index/network/stores', function (hooks) {
     setupTest(hooks);
 
+    hooks.beforeEach(function () {
+        // The engine's dummy app has no console host to provide the host router.
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
+
     test('it exists', function (assert) {
         let route = this.owner.lookup('route:networks/index/network/stores');
         assert.ok(route);
diff --git a/tests/unit/routes/networks/index/network/trucks-test.js b/tests/unit/routes/networks/index/network/trucks-test.js
new file mode 100644
index 00000000..cccb4629
--- /dev/null
+++ b/tests/unit/routes/networks/index/network/trucks-test.js
@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+import Service from '@ember/service';
+
+module('Unit | Route | networks/index/network/trucks', function (hooks) {
+    setupTest(hooks);
+
+    hooks.beforeEach(function () {
+        this.owner.register('service:hostRouter', class extends Service {});
+    });
+
+    test('it lists the trucks of the stores in the network', async function (assert) {
+        const route = this.owner.lookup('route:networks/index/network/trucks');
+        const store = this.owner.lookup('service:store');
+        const requests = [];
+        store.query = (modelName, params) => {
+            requests.push({ modelName, params });
+            return Promise.resolve([]);
+        };
+        route.modelFor = (name) => {
+            assert.strictEqual(name, 'networks.index.network');
+            return { id: 'network_uuid' };
+        };
+
+        await route.model({ query: 'taco' });
+
+        assert.deepEqual(requests, [{ modelName: 'food-truck', params: { query: 'taco', network: 'network_uuid' } }]);
+        assert.strictEqual(route.queryParams.query.as, 't_query', 'the search param does not collide with the networks list search');
+    });
+});
diff --git a/tests/unit/services/storefront-test.js b/tests/unit/services/storefront-test.js
index 869cc814..f8204762 100644
--- a/tests/unit/services/storefront-test.js
+++ b/tests/unit/services/storefront-test.js
@@ -31,10 +31,16 @@ class StoreStub {
         };
     }
 
+    networks = [{ id: 'network_uuid', name: 'Downtown Market', public_id: 'network_123' }];
+
     peekRecord(modelName, id) {
         if (modelName === 'store') {
             return this.stores.find((store) => store.id === id);
         }
+
+        if (modelName === 'network') {
+            return this.networks.find((network) => network.id === id);
+        }
     }
 }
 
@@ -96,4 +102,51 @@ module('Unit | Service | storefront', function (hooks) {
         assert.strictEqual(service.activeStoreId, undefined, 'clears tracked selection outside render');
         assert.strictEqual(service.activeStore, null, 'empty state remains safe to consume from widgets');
     });
+
+    test('it is in the store context until a network is entered', function (assert) {
+        const service = this.owner.lookup('service:storefront');
+        service.synchronizeActiveStore();
+
+        assert.strictEqual(service.activeNetwork, null, 'no network is active by default');
+        assert.false(service.isNetworkContext, 'defaults to the store context');
+        assert.strictEqual(service.activeContextType, 'store');
+        assert.strictEqual(service.activeContext.id, 'store_uuid', 'the active context is the active store');
+        assert.strictEqual(service.getActiveNetwork('name'), null, 'network lookups are empty outside a network');
+    });
+
+    test('entering a network scopes the console to it without touching the active store', function (assert) {
+        const service = this.owner.lookup('service:storefront');
+        const currentUser = this.owner.lookup('service:current-user');
+        const events = [];
+        service.synchronizeActiveStore();
+        service.on('storefront.context.changed', (type, context) => events.push([type, context?.id]));
+
+        service.setActiveNetwork({ id: 'network_uuid' });
+
+        assert.true(service.isNetworkContext, 'the network context is active');
+        assert.strictEqual(service.activeContextType, 'network');
+        assert.strictEqual(service.activeNetwork.name, 'Downtown Market', 'resolves the network from the store');
+        assert.strictEqual(service.activeContext.id, 'network_uuid', 'the active context is the network');
+        assert.strictEqual(service.getActiveNetwork('public_id'), 'network_123', 'reads properties of the active network');
+        assert.strictEqual(service.activeStore.id, 'store_uuid', 'the active store is kept for when the user leaves the network');
+        assert.strictEqual(currentUser.getOption('activeStorefront'), 'store_uuid', 'the network context is not persisted as the storefront');
+
+        service.setActiveNetwork({ id: 'network_uuid' });
+        assert.deepEqual(events, [['network', 'network_uuid']], 'setting the same network again does not re-announce the context');
+
+        service.clearActiveNetwork();
+        assert.false(service.isNetworkContext, 'leaving the network returns to the store context');
+        assert.deepEqual(events, [
+            ['network', 'network_uuid'],
+            ['store', 'store_uuid'],
+        ]);
+    });
+
+    test('a network that is not loaded leaves the console in the store context', function (assert) {
+        const service = this.owner.lookup('service:storefront');
+        service.setActiveNetwork({ id: 'missing_network_uuid' });
+
+        assert.strictEqual(service.activeNetwork, null, 'an unknown network does not resolve');
+        assert.false(service.isNetworkContext, 'the store context stays in charge');
+    });
 });
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 4853f675..b397018c 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -298,6 +298,12 @@ storefront:
     store-selector:
       no-stores: No stores to select
       create-storefront: Create a new
+      store: Store
+      network: Network
+      stores: Stores
+      networks: Networks
+      no-networks: No networks
+      create-network: Create network
   home:
     title: Storefront Dashboard
   customers:
@@ -353,9 +359,12 @@ storefront:
       delete-this-network-all-assigned-stores-customer-order: Are you sure you wish to delete this network ({networkName})? All assigned stores, customers, orders will no longer be reachable.
       network:
         manage-network: Manage Network
+        all-networks: All networks
         settings: Settings
         customers: Customers
         orders: Orders
+        trucks:
+          empty-state: No trucks yet. Trucks are created from a store and appear here for every store in the network.
         Network-changes-not-save: Network changes not saved!
         going-back-will-rollback-all-unsaved-changes: Going back will rollback all unsaved changes, are you sure you wish to continue?
         index:

From 41506ecd28e71f0dcfdd306d007e6b40875e9afa Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 17:29:14 +0800
Subject: [PATCH 07/13] fix(switcher): the context switcher the design shows,
 and the store menu without Networks

- trigger: context icon, name, STORE/NETWORK label and caret; blue for a store, indigo for a network; invitation badge
- menu: Stores and Networks groups with tiles, currency or member count, a check on the active one, readable in dark mode; footer actions read New store / New network
- store navigation follows the design order (Dashboard, Orders, Products, Catalogs, Customers, Trucks, Promotions, Settings); networks live in the switcher, not the menu
- network page loses the All networks button; leaving a network is the switcher's job
---
 addon/components/store-selector.hbs           |  28 +-
 addon/components/store-selector.js            | 244 ++++++++++--------
 addon/controllers/application.js              |  30 +--
 addon/styles/storefront-engine.css            | 238 ++++++++++++++++-
 addon/templates/networks/index/network.hbs    |   1 -
 .../components/store-selector-test.js         |  26 +-
 tests/unit/controllers/application-test.js    |  24 +-
 translations/en-us.yaml                       |   6 +-
 8 files changed, 421 insertions(+), 176 deletions(-)

diff --git a/addon/components/store-selector.hbs b/addon/components/store-selector.hbs
index b94812f7..85d5f9f2 100644
--- a/addon/components/store-selector.hbs
+++ b/addon/components/store-selector.hbs
@@ -1,19 +1,23 @@
 {{#if this.activeContext}}
-    <div class={{@wrapperClass}} {{did-insert this.setupTrigger}} {{will-destroy this.close}} ...attributes>
-        <Button
+    <div class="storefront-switcher {{@wrapperClass}}" {{did-insert this.setupTrigger}} {{will-destroy this.close}} ...attributes>
+        <button
+            type="button"
+            class="storefront-switcher__trigger storefront-switcher__trigger--{{if this.isNetworkContext 'network' 'store'}} {{if this.isOpen 'is-open'}} {{@buttonClass}}"
             title={{concat this.contextLabel ": " this.activeContext.name}}
-            class="{{concat "w-full " @buttonClass}} {{if this.isOpen "dd-is-open"}}"
-            @wrapperClass={{concat "w-full " @buttonWrapperClass}}
-            @size="xs"
-            @type="primary"
-            @icon={{if this.isNetworkContext "network-wired" "store"}}
-            @iconSize="sm"
-            @text={{this.activeContext.name}}
-            @textClass="truncate"
-            @onClick={{this.toggle}}
+            aria-haspopup="menu"
+            aria-expanded={{if this.isOpen "true" "false"}}
             data-test-store-selector-trigger
             data-context={{if this.isNetworkContext "network" "store"}}
-        />
+            {{on "click" this.toggle}}
+        >
+            <span class="storefront-switcher__icon"><FaIcon @icon={{if this.isNetworkContext "network-wired" "store"}} @size="sm" /></span>
+            <span class="storefront-switcher__name">{{this.activeContext.name}}</span>
+            <span class="storefront-switcher__kind">{{this.contextLabel}}</span>
+            <span class="storefront-switcher__caret"><FaIcon @icon="chevron-down" @size="xs" /></span>
+            {{#if this.badge}}
+                <span class="storefront-switcher__badge" title={{t "storefront.component.store-selector.badge-title" count=this.badge}} data-test-store-selector-badge>{{this.badge}}</span>
+            {{/if}}
+        </button>
     </div>
 {{else if (has-block)}}
     {{yield}}
diff --git a/addon/components/store-selector.js b/addon/components/store-selector.js
index db6ea465..eb43e141 100644
--- a/addon/components/store-selector.js
+++ b/addon/components/store-selector.js
@@ -3,6 +3,13 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+/**
+ * The context switcher at the top of the sidebar: stores and networks as peers. The
+ * chosen one owns the navigation, the dashboard and the data scope.
+ *
+ * The menu is built in the DOM and positioned fixed so the sidebar's overflow clipping
+ * cannot cut it off.
+ */
 export default class StoreSelectorComponent extends Component {
     @service intl;
     @tracked isOpen = false;
@@ -15,21 +22,21 @@ export default class StoreSelectorComponent extends Component {
         return Array.from(this.args.stores ?? []);
     }
 
-    get hasStores() {
-        return this.stores.length > 0;
-    }
-
     get networks() {
         return Array.from(this.args.networks ?? []);
     }
 
+    get hasStores() {
+        return this.stores.length > 0;
+    }
+
     get hasNetworks() {
         return this.networks.length > 0;
     }
 
     /**
-     * The networks group only appears once there is something to show in it: a user with
-     * one store and no networks sees the plain store menu.
+     * The networks group appears once there is something to put in it: a user with one
+     * store and no networks sees the plain store menu.
      */
     get showNetworks() {
         return this.hasNetworks || typeof this.args.onCreateNetwork === 'function';
@@ -47,6 +54,12 @@ export default class StoreSelectorComponent extends Component {
         return this.intl.t(`storefront.component.store-selector.${this.isNetworkContext ? 'network' : 'store'}`);
     }
 
+    get badge() {
+        const badge = Number(this.args.badge ?? 0);
+
+        return Number.isFinite(badge) && badge > 0 ? badge : null;
+    }
+
     willDestroy() {
         super.willDestroy(...arguments);
         this.close();
@@ -92,125 +105,160 @@ export default class StoreSelectorComponent extends Component {
     }
 
     createMenuElement() {
+        const t = (key) => this.intl.t(`storefront.component.store-selector.${key}`);
         const menu = document.createElement('div');
         menu.setAttribute('role', 'menu');
-        menu.className = 'store-selector-dropdown-menu next-dd-menu py-1';
-        menu.style.position = 'fixed';
-        menu.style.zIndex = '900';
-        menu.style.margin = '0';
-        menu.style.height = 'auto';
-        menu.style.minHeight = '0';
-        menu.style.maxHeight = 'calc(100vh - 16px)';
-        menu.style.overflowX = 'hidden';
-        menu.style.overflowY = 'visible';
-
-        const storeList = document.createElement('div');
-        storeList.setAttribute('role', 'group');
-        storeList.setAttribute('data-test-store-selector-stores', '');
-        storeList.className = 'px-1';
-        storeList.style.maxHeight = '18rem';
-        storeList.style.overflowY = 'auto';
+        menu.className = 'store-selector-dropdown-menu storefront-switcher-menu';
+        menu.setAttribute('data-theme', document.body.dataset.theme ?? 'light');
 
-        if (this.showNetworks) {
-            storeList.appendChild(this.createGroupLabel(this.intl.t('storefront.component.store-selector.stores')));
-        }
+        const storeList = this.createGroup('stores', this.showNetworks ? t('stores') : null);
 
         if (this.hasStores) {
             this.stores.forEach((store) => {
-                const isActive = !this.isNetworkContext && store?.id === this.args.activeStore?.id;
-                storeList.appendChild(this.createMenuItem(store?.name || '-', () => this.onSwitchStore(store), { isActive }));
+                storeList.appendChild(
+                    this.createMenuItem({
+                        label: store?.name || '—',
+                        meta: store?.currency ?? null,
+                        icon: 'store',
+                        tone: 'store',
+                        isActive: !this.isNetworkContext && store?.id === this.args.activeStore?.id,
+                        onClick: () => this.onSwitchStore(store),
+                    })
+                );
             });
         } else {
-            storeList.appendChild(this.createEmptyItem(this.intl.t('storefront.component.store-selector.no-stores')));
+            storeList.appendChild(this.createEmptyItem(t('no-stores')));
         }
 
-        menu.append(storeList);
+        menu.appendChild(storeList);
 
         if (this.showNetworks) {
-            const networkList = document.createElement('div');
-            networkList.setAttribute('role', 'group');
-            networkList.setAttribute('data-test-store-selector-networks', '');
-            networkList.className = 'px-1';
-            networkList.style.maxHeight = '12rem';
-            networkList.style.overflowY = 'auto';
-            networkList.appendChild(this.createSeparator());
-            networkList.appendChild(this.createGroupLabel(this.intl.t('storefront.component.store-selector.networks')));
+            const networkList = this.createGroup('networks', t('networks'));
 
             if (this.hasNetworks) {
                 this.networks.forEach((network) => {
-                    const isActive = network?.id === this.args.activeNetwork?.id;
-                    networkList.appendChild(this.createMenuItem(network?.name || '-', () => this.onSwitchNetwork(network), { isActive }));
+                    const count = network?.stores_count ?? network?.stores?.length ?? null;
+
+                    networkList.appendChild(
+                        this.createMenuItem({
+                            label: network?.name || '—',
+                            meta: count === null ? null : this.intl.t('storefront.networks.card.stores-count', { count }),
+                            icon: 'network-wired',
+                            tone: 'network',
+                            isActive: this.isNetworkContext && network?.id === this.args.activeNetwork?.id,
+                            onClick: () => this.onSwitchNetwork(network),
+                        })
+                    );
                 });
             } else {
-                networkList.appendChild(this.createEmptyItem(this.intl.t('storefront.component.store-selector.no-networks')));
+                networkList.appendChild(this.createEmptyItem(t('no-networks')));
             }
 
-            menu.append(networkList);
+            menu.appendChild(networkList);
         }
 
-        const footer = document.createElement('div');
-        footer.className = 'px-1';
+        const footer = this.createGroup('actions', null);
+        footer.classList.add('storefront-switcher-menu__footer');
 
-        const footerGroup = document.createElement('div');
-        footerGroup.setAttribute('role', 'group');
-        footerGroup.setAttribute('data-test-store-selector-actions', '');
-        footerGroup.className = 'px-1';
-        footerGroup.appendChild(this.createMenuItem(this.intl.t('storefront.component.store-selector.create-storefront'), () => this.onCreateStore()));
+        if (typeof this.args.onCreateStore === 'function') {
+            footer.appendChild(this.createMenuItem({ label: t('new-store'), icon: 'plus', tone: 'muted', onClick: () => this.onCreateStore() }));
+        }
 
         if (typeof this.args.onCreateNetwork === 'function') {
-            footerGroup.appendChild(this.createMenuItem(this.intl.t('storefront.component.store-selector.create-network'), () => this.onCreateNetwork()));
+            footer.appendChild(this.createMenuItem({ label: t('new-network'), icon: 'plus', tone: 'muted', onClick: () => this.onCreateNetwork() }));
         }
 
-        footer.append(this.createSeparator(), footerGroup);
-        menu.append(footer);
+        if (footer.childElementCount) {
+            menu.appendChild(footer);
+        }
 
         return menu;
     }
 
-    createSeparator() {
-        const separator = document.createElement('div');
-        separator.className = 'next-dd-menu-seperator';
+    createGroup(name, heading) {
+        const group = document.createElement('div');
+        group.setAttribute('role', 'group');
+        group.setAttribute(`data-test-store-selector-${name}`, '');
+        group.className = 'storefront-switcher-menu__group';
+
+        if (heading) {
+            const head = document.createElement('div');
+            head.className = 'storefront-switcher-menu__head';
+            head.setAttribute('role', 'presentation');
+            head.textContent = heading;
+            group.appendChild(head);
+        }
 
-        return separator;
+        return group;
     }
 
-    createGroupLabel(text) {
-        const label = document.createElement('div');
-        label.className = 'storefront-context-switcher__label';
-        label.setAttribute('role', 'presentation');
-        label.textContent = text;
+    createMenuItem({ label, meta = null, icon, tone = 'store', isActive = false, onClick }) {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = `storefront-switcher-menu__item${isActive ? ' is-active' : ''}`;
+        item.setAttribute('role', 'menuitem');
 
-        return label;
-    }
+        if (isActive) {
+            item.setAttribute('aria-current', 'true');
+        }
 
-    createEmptyItem(text) {
-        const emptyItem = document.createElement('div');
-        emptyItem.className = 'next-dd-item storefront-context-switcher__empty';
-        emptyItem.setAttribute('role', 'menuitem');
-        emptyItem.setAttribute('aria-disabled', 'true');
-        emptyItem.textContent = text;
+        const tile = document.createElement('span');
+        tile.className = `storefront-switcher-tile storefront-switcher-tile--${tone}`;
+        tile.innerHTML = this.iconMarkup(icon);
 
-        return emptyItem;
-    }
+        const text = document.createElement('span');
+        text.className = 'storefront-switcher-menu__label';
+        text.textContent = label;
+
+        item.append(tile, text);
+
+        if (meta) {
+            const metaElement = document.createElement('span');
+            metaElement.className = 'storefront-switcher-menu__meta';
+            metaElement.textContent = meta;
+            item.appendChild(metaElement);
+        }
 
-    createMenuItem(label, callback, { isActive = false } = {}) {
-        const item = document.createElement('a');
-        item.href = 'javascript:;';
-        item.className = `next-dd-item${isActive ? ' storefront-context-switcher__item--active' : ''}`;
-        item.setAttribute('role', 'menuitem');
         if (isActive) {
-            item.setAttribute('aria-current', 'true');
+            const check = document.createElement('span');
+            check.className = 'storefront-switcher-menu__check';
+            check.innerHTML = this.iconMarkup('check');
+            item.appendChild(check);
         }
-        item.textContent = label;
+
         item.addEventListener('click', (event) => {
             event.preventDefault();
             event.stopPropagation();
-            callback();
+            onClick();
         });
 
         return item;
     }
 
+    createEmptyItem(text) {
+        const item = document.createElement('div');
+        item.className = 'storefront-switcher-menu__empty';
+        item.setAttribute('role', 'presentation');
+        item.textContent = text;
+
+        return item;
+    }
+
+    /**
+     * Inline SVG for the few icons the menu needs; the menu lives outside the component tree,
+     * so it cannot use the FaIcon component.
+     */
+    iconMarkup(name) {
+        const paths = {
+            store: '<path d="M3 9l1-5h16l1 5M3 9v11h18V9M3 9h18M9 20v-6h6v6"/>',
+            'network-wired': '<rect x="9" y="2" width="6" height="5" rx="1"/><rect x="2" y="17" width="6" height="5" rx="1"/><rect x="16" y="17" width="6" height="5" rx="1"/><path d="M12 7v5M5 17v-3h14v3"/>',
+            plus: '<path d="M12 5v14M5 12h14"/>',
+            check: '<path d="M5 12l5 5L20 7"/>',
+        };
+
+        return `<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[name] ?? ''}</svg>`;
+    }
+
     addListeners() {
         this.addManagedListener(document, 'mousedown', this.handleDocumentMouseDown, true);
         this.addManagedListener(document, 'keydown', this.handleDocumentKeydown);
@@ -260,16 +308,16 @@ export default class StoreSelectorComponent extends Component {
 
         const rect = this.triggerElement.getBoundingClientRect();
         const viewportPadding = 8;
-        const width = Math.max(rect.width, 220);
+        const width = Math.max(rect.width, 260);
         const maxLeft = window.innerWidth - width - viewportPadding;
         const left = Math.max(viewportPadding, Math.min(rect.left, maxLeft));
-        let top = rect.bottom + 4;
+        let top = rect.bottom + 6;
 
         this.menuElement.style.width = `${width}px`;
 
         const menuHeight = this.menuElement.offsetHeight;
-        if (top + menuHeight > window.innerHeight - viewportPadding && rect.top - menuHeight - 4 > viewportPadding) {
-            top = rect.top - menuHeight - 4;
+        if (top + menuHeight > window.innerHeight - viewportPadding && rect.top - menuHeight - 6 > viewportPadding) {
+            top = rect.top - menuHeight - 6;
         }
 
         this.menuElement.style.left = `${left}px`;
@@ -277,42 +325,22 @@ export default class StoreSelectorComponent extends Component {
     };
 
     @action onSwitchStore(store) {
-        const { onSwitchStore } = this.args;
-
-        if (typeof onSwitchStore === 'function') {
-            onSwitchStore(store);
-        }
-
+        this.args.onSwitchStore?.(store);
         this.close();
     }
 
-    @action onCreateStore() {
-        const { onCreateStore } = this.args;
-
-        if (typeof onCreateStore === 'function') {
-            onCreateStore();
-        }
-
+    @action onSwitchNetwork(network) {
+        this.args.onSwitchNetwork?.(network);
         this.close();
     }
 
-    @action onSwitchNetwork(network) {
-        const { onSwitchNetwork } = this.args;
-
-        if (typeof onSwitchNetwork === 'function') {
-            onSwitchNetwork(network);
-        }
-
+    @action onCreateStore() {
+        this.args.onCreateStore?.();
         this.close();
     }
 
     @action onCreateNetwork() {
-        const { onCreateNetwork } = this.args;
-
-        if (typeof onCreateNetwork === 'function') {
-            onCreateNetwork();
-        }
-
+        this.args.onCreateNetwork?.();
         this.close();
     }
 }
diff --git a/addon/controllers/application.js b/addon/controllers/application.js
index 85053c02..2c1121fd 100644
--- a/addon/controllers/application.js
+++ b/addon/controllers/application.js
@@ -96,6 +96,16 @@ export default class ApplicationController extends Controller {
                 route: 'console.storefront.home',
                 keywords: ['dashboard', 'overview', 'metrics', 'sales'],
             },
+            {
+                label: this.intl.t('storefront.sidebar.orders'),
+                description: 'Manage incoming storefront orders.',
+                icon: 'file-invoice-dollar',
+                route: 'console.storefront.orders',
+                permission: 'storefront list order',
+                visible: this.can('storefront see order'),
+                disabled: !hasActiveStore,
+                keywords: ['fulfillment', 'deliveries', 'checkout orders'],
+            },
             {
                 label: this.intl.t('storefront.sidebar.products'),
                 description: 'Manage products, categories, variants, and addons.',
@@ -134,26 +144,6 @@ export default class ApplicationController extends Controller {
                 disabled: !hasActiveStore,
                 keywords: ['contacts', 'buyers', 'users'],
             },
-            {
-                label: this.intl.t('storefront.sidebar.orders'),
-                description: 'Manage incoming storefront orders.',
-                icon: 'file-invoice-dollar',
-                route: 'console.storefront.orders',
-                permission: 'storefront list order',
-                visible: this.can('storefront see order'),
-                disabled: !hasActiveStore,
-                keywords: ['fulfillment', 'deliveries', 'checkout orders'],
-            },
-            {
-                label: this.intl.t('storefront.sidebar.networks'),
-                description: 'Manage marketplace networks and participating stores.',
-                icon: 'network-wired',
-                route: 'console.storefront.networks',
-                permission: 'storefront list network',
-                visible: this.can('storefront see network'),
-                disabled: !hasActiveStore,
-                keywords: ['marketplace', 'network stores', 'partners'],
-            },
             {
                 label: this.intl.t('storefront.sidebar.food-trucks'),
                 description: 'Manage trucks, where they serve and what they sell.',
diff --git a/addon/styles/storefront-engine.css b/addon/styles/storefront-engine.css
index 2595f6af..69146f0c 100644
--- a/addon/styles/storefront-engine.css
+++ b/addon/styles/storefront-engine.css
@@ -3318,9 +3318,127 @@ body[data-theme='dark'] .storefront-hours-strip__day.is-open .storefront-hours-s
     background: #16a34a;
 }
 
-/* Context switcher: the store selector grown to cover networks */
-.storefront-context-switcher__label {
-    padding: 0.375rem 0.75rem 0.125rem;
+/* Context switcher: stores and networks as peers at the top of the sidebar */
+.storefront-switcher {
+    position: relative;
+    margin-bottom: 0.5rem;
+}
+
+.storefront-switcher__trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #2563eb;
+    border-radius: 0.375rem;
+    background-color: #2563eb;
+    color: #ffffff;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.storefront-switcher__trigger:hover,
+.storefront-switcher__trigger.is-open {
+    background-color: #1d4ed8;
+    border-color: #1d4ed8;
+}
+
+.storefront-switcher__trigger--network {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+}
+
+.storefront-switcher__trigger--network:hover,
+.storefront-switcher__trigger--network.is-open {
+    background-color: #4338ca;
+    border-color: #4338ca;
+}
+
+.storefront-switcher__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    opacity: 0.95;
+}
+
+.storefront-switcher__name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.storefront-switcher__kind {
+    flex-shrink: 0;
+    font-size: 0.625rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    opacity: 0.85;
+}
+
+.storefront-switcher__caret {
+    display: inline-flex;
+    flex-shrink: 0;
+    opacity: 0.85;
+}
+
+.storefront-switcher__badge {
+    position: absolute;
+    top: -0.375rem;
+    right: -0.25rem;
+    min-width: 1.125rem;
+    padding: 0 0.3rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1.125rem;
+    text-align: center;
+    color: #ffffff;
+    background-color: #f59e0b;
+    pointer-events: none;
+}
+
+.storefront-switcher-menu {
+    position: fixed;
+    z-index: 900;
+    margin: 0;
+    padding: 0.375rem;
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    background-color: #ffffff;
+    box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
+    color: #111827;
+}
+
+.storefront-switcher-menu[data-theme='dark'] {
+    border-color: #374151;
+    background-color: #1f2937;
+    color: #f3f4f6;
+}
+
+.storefront-switcher-menu__group + .storefront-switcher-menu__group {
+    margin-top: 0.25rem;
+}
+
+.storefront-switcher-menu__footer {
+    margin-top: 0.375rem;
+    padding-top: 0.375rem;
+    border-top: 1px solid #e5e7eb;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__footer {
+    border-color: #374151;
+}
+
+.storefront-switcher-menu__head {
+    padding: 0.5rem 0.625rem 0.25rem;
     font-size: 0.6875rem;
     font-weight: 600;
     letter-spacing: 0.04em;
@@ -3328,17 +3446,123 @@ body[data-theme='dark'] .storefront-hours-strip__day.is-open .storefront-hours-s
     color: #6b7280;
 }
 
-body[data-theme='dark'] .storefront-context-switcher__label {
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__head {
     color: #9ca3af;
 }
 
-.store-selector-dropdown-menu .next-dd-item.storefront-context-switcher__item--active {
+.storefront-switcher-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    width: 100%;
+    padding: 0.5rem 0.625rem;
+    border: 0;
+    border-radius: 0.375rem;
+    background: transparent;
+    font: inherit;
+    font-size: 0.8125rem;
+    color: #111827;
+    text-align: left;
+    cursor: pointer;
+}
+
+.storefront-switcher-menu__item:hover,
+.storefront-switcher-menu__item:focus-visible {
+    background-color: #f3f4f6;
+    outline: none;
+}
+
+.storefront-switcher-menu__item.is-active {
+    background-color: #eff6ff;
     font-weight: 600;
 }
 
-.store-selector-dropdown-menu .next-dd-item.storefront-context-switcher__empty {
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__item {
+    color: #f3f4f6;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__item:hover,
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__item:focus-visible {
+    background-color: #374151;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__item.is-active {
+    background-color: rgb(55 65 81 / 80%);
+}
+
+.storefront-switcher-menu__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.storefront-switcher-menu__meta {
+    flex-shrink: 0;
+    font-size: 0.6875rem;
+    font-weight: 400;
+    color: #6b7280;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__meta {
+    color: #9ca3af;
+}
+
+.storefront-switcher-menu__check {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: #2563eb;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-menu__check {
+    color: #60a5fa;
+}
+
+.storefront-switcher-menu__empty {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.8125rem;
     color: #9ca3af;
-    cursor: default;
+}
+
+.storefront-switcher-tile {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    border-radius: 0.25rem;
+}
+
+.storefront-switcher-tile--store {
+    background-color: #dbeafe;
+    color: #1d4ed8;
+}
+
+.storefront-switcher-tile--network {
+    background-color: #e0e7ff;
+    color: #4338ca;
+}
+
+.storefront-switcher-tile--muted {
+    background-color: #f3f4f6;
+    color: #1d4ed8;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-tile--store {
+    background-color: rgb(29 78 216 / 35%);
+    color: #93c5fd;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-tile--network {
+    background-color: rgb(67 56 202 / 35%);
+    color: #a5b4fc;
+}
+
+.storefront-switcher-menu[data-theme='dark'] .storefront-switcher-tile--muted {
+    background-color: #374151;
+    color: #93c5fd;
 }
 
 /* Network page: full-page container for the network sections */
diff --git a/addon/templates/networks/index/network.hbs b/addon/templates/networks/index/network.hbs
index 45b66bd4..07cc6073 100644
--- a/addon/templates/networks/index/network.hbs
+++ b/addon/templates/networks/index/network.hbs
@@ -11,7 +11,6 @@
                 {{/if}}
             </div>
         </div>
-        <Button @icon="arrow-left" @size="xs" @text={{t "storefront.networks.index.network.all-networks"}} @onClick={{this.transitionBack}} data-test-network-page-back />
     </div>
     <div class="storefront-network-page__body">
         {{outlet}}
diff --git a/tests/integration/components/store-selector-test.js b/tests/integration/components/store-selector-test.js
index 4ed597f4..b631dc9a 100644
--- a/tests/integration/components/store-selector-test.js
+++ b/tests/integration/components/store-selector-test.js
@@ -54,9 +54,7 @@ module('Integration | Component | store-selector', function (hooks) {
         assert.ok(dropdownContent, 'dropdown content renders when opened');
         assert.false(this.element.contains(dropdownContent), 'dropdown content renders outside the sidebar-clipped component tree');
         assert.strictEqual(dropdownContent.style.position, 'fixed', 'dropdown uses fixed positioning');
-        assert.strictEqual(dropdownContent.style.height, 'auto', 'dropdown height hugs its content');
-        assert.strictEqual(dropdownContent.style.minHeight, '0px', 'dropdown does not inherit full-height menu sizing');
-        assert.strictEqual(dropdownContent.querySelector('[role="group"]').style.overflowY, 'auto', 'store list only scrolls when needed');
+        assert.ok(dropdownContent.querySelector('[role="group"]'), 'stores render as a group');
         assert.dom('.ember-basic-dropdown-content').doesNotExist('does not use BasicDropdown content');
     });
 
@@ -83,7 +81,7 @@ module('Integration | Component | store-selector', function (hooks) {
         `);
         await click('button');
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).exists('dropdown opens');
-        await click(document.body.querySelectorAll('.store-selector-dropdown-menu .next-dd-item')[1]);
+        await click(document.body.querySelectorAll('.store-selector-dropdown-menu .storefront-switcher-menu__item')[1]);
 
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).doesNotExist('dropdown closes after switching stores');
     });
@@ -108,7 +106,7 @@ module('Integration | Component | store-selector', function (hooks) {
         `);
         await click('button');
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).exists('dropdown opens');
-        await click(document.body.querySelector('.store-selector-dropdown-menu .px-1:last-child .next-dd-item'));
+        await click(document.body.querySelector('[data-test-store-selector-actions] .storefront-switcher-menu__item'));
 
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).doesNotExist('dropdown closes after create action');
     });
@@ -150,9 +148,9 @@ module('Integration | Component | store-selector', function (hooks) {
         const menu = document.body.querySelector('.store-selector-dropdown-menu');
         assert.dom('[data-test-store-selector-trigger]').hasAttribute('data-context', 'store');
         assert.dom(menu.querySelector('[data-test-store-selector-networks]')).doesNotExist('no networks group');
-        assert.dom(menu.querySelector('.storefront-context-switcher__label')).doesNotExist('no group labels when there is only one group');
+        assert.dom(menu.querySelector('.storefront-switcher-menu__head')).doesNotExist('no group labels when there is only one group');
         assert.dom(menu.querySelector('[aria-current="true"]')).hasText('Fleetbase Market', 'the active store is marked');
-        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .next-dd-item').length, 1, 'only the create store action');
+        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .storefront-switcher-menu__item').length, 1, 'only the new store action');
     });
 
     test('it lists networks as a second group and switches into one', async function (assert) {
@@ -184,18 +182,18 @@ module('Integration | Component | store-selector', function (hooks) {
 
         const menu = document.body.querySelector('.store-selector-dropdown-menu');
         assert.deepEqual(
-            Array.from(menu.querySelectorAll('.storefront-context-switcher__label')).map((label) => label.textContent),
+            Array.from(menu.querySelectorAll('.storefront-switcher-menu__head')).map((label) => label.textContent),
             ['Stores', 'Networks'],
             'both groups are labelled'
         );
-        const networkItems = menu.querySelectorAll('[data-test-store-selector-networks] .next-dd-item');
+        const networkItems = menu.querySelectorAll('[data-test-store-selector-networks] .storefront-switcher-menu__item');
         assert.deepEqual(
             Array.from(networkItems).map((item) => item.textContent),
             ['Downtown Market', 'Uptown Market']
         );
         assert.dom(menu.querySelector('[data-test-store-selector-stores] [aria-current="true"]')).hasText('Fleetbase Market');
         assert.dom(menu.querySelector('[data-test-store-selector-networks] [aria-current="true"]')).doesNotExist('no network is active in the store context');
-        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .next-dd-item').length, 2, 'create store and create network actions');
+        assert.strictEqual(menu.querySelectorAll('[data-test-store-selector-actions] .storefront-switcher-menu__item').length, 2, 'new store and new network actions');
 
         await click(networkItems[1]);
         assert.dom(document.body.querySelector('.store-selector-dropdown-menu')).doesNotExist('dropdown closes after switching networks');
@@ -221,14 +219,14 @@ module('Integration | Component | store-selector', function (hooks) {
         `);
 
         assert.dom('[data-test-store-selector-trigger]').hasAttribute('data-context', 'network');
-        assert.dom('[data-test-store-selector-trigger]').hasText('Downtown Market');
+        assert.dom('[data-test-store-selector-trigger]').containsText('Downtown Market');
         assert.dom('[data-test-store-selector-trigger]').hasAttribute('title', 'Network: Downtown Market');
 
         await click('button');
         const menu = document.body.querySelector('.store-selector-dropdown-menu');
         assert.dom(menu.querySelector('[data-test-store-selector-networks] [aria-current="true"]')).hasText('Downtown Market');
         assert.dom(menu.querySelector('[data-test-store-selector-stores] [aria-current="true"]')).doesNotExist('the store is not marked while a network is active');
-        assert.dom(menu.querySelector('[data-test-store-selector-actions]').lastElementChild).hasText('Create a new', 'no create network action without a handler');
+        assert.dom(menu.querySelector('[data-test-store-selector-actions]').lastElementChild).hasText('New store', 'no new network action without a handler');
     });
 
     test('it creates a network and closes the dropdown', async function (assert) {
@@ -245,7 +243,7 @@ module('Integration | Component | store-selector', function (hooks) {
         await click('button');
 
         const menu = document.body.querySelector('.store-selector-dropdown-menu');
-        assert.dom(menu.querySelector('[data-test-store-selector-networks] .storefront-context-switcher__empty')).hasText('No networks');
-        await click(menu.querySelector('[data-test-store-selector-actions] .next-dd-item:last-child'));
+        assert.dom(menu.querySelector('[data-test-store-selector-networks] .storefront-switcher-menu__empty')).hasText('No networks yet');
+        await click(menu.querySelector('[data-test-store-selector-actions] .storefront-switcher-menu__item:last-child'));
     });
 });
diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js
index 87fbb91c..157e731d 100644
--- a/tests/unit/controllers/application-test.js
+++ b/tests/unit/controllers/application-test.js
@@ -152,25 +152,25 @@ module('Unit | Controller | application', function (hooks) {
 
         assert.deepEqual(
             items.map((item) => item.label),
-            ['Dashboard', 'Products', 'Catalogs', 'Customers', 'Orders', 'Networks', 'Food Trucks', 'Promotions', 'Settings', 'Launch App'],
+            ['Dashboard', 'Orders', 'Products', 'Catalogs', 'Customers', 'Trucks', 'Promotions', 'Settings', 'Launch App'],
             'root items match the Storefront sidebar sections'
         );
         assert.deepEqual(
             items.map((item) => item.icon),
-            ['home', 'box', 'book-open', 'users', 'file-invoice-dollar', 'network-wired', 'truck', 'bullhorn', 'cogs', 'rocket'],
+            ['home', 'file-invoice-dollar', 'box', 'book-open', 'users', 'truck', 'bullhorn', 'cogs', 'rocket'],
             'root items keep Storefront-specific icons'
         );
         assert.strictEqual(items[0].route, 'console.storefront.home');
-        assert.strictEqual(items[1].permission, 'storefront list product');
-        assert.true(items[1].visible, 'product visibility uses the abilities service');
-        assert.false(items[1].disabled, 'resource items are enabled when an active store exists');
+        assert.strictEqual(items[2].permission, 'storefront list product');
+        assert.true(items[2].visible, 'product visibility uses the abilities service');
+        assert.false(items[2].disabled, 'resource items are enabled when an active store exists');
         assert.deepEqual(
-            items[1].children.map((item) => item.label),
+            items[2].children.map((item) => item.label),
             ['All Products', 'Pizza'],
             'products includes all products plus active store product categories'
         );
-        assert.strictEqual(items[1].children[0].route, 'console.storefront.products.index.index', 'all products does not match category routes');
-        const categoryItem = items[1].children[1];
+        assert.strictEqual(items[2].children[0].route, 'console.storefront.products.index.index', 'all products does not match category routes');
+        const categoryItem = items[2].children[1];
         assert.strictEqual(categoryItem.id, 'product-category:category_uuid', 'category navigation has a stable unique identifier');
         assert.strictEqual(categoryItem.route, undefined, 'categories do not fall back to shared route-name matching');
         const hostRouter = this.owner.lookup('service:host-router');
@@ -188,7 +188,7 @@ module('Unit | Controller | application', function (hooks) {
         };
         categoryItem.onClick();
         assert.deepEqual(
-            items[8].children.map((item) => item.route),
+            items[7].children.map((item) => item.route),
             [
                 'console.storefront.settings.index',
                 'console.storefront.settings.locations',
@@ -198,7 +198,7 @@ module('Unit | Controller | application', function (hooks) {
             ],
             'settings children use the requested order'
         );
-        assert.strictEqual(items[9].url, 'https://github.com/fleetbase/storefront-app', 'launch app remains an external URL item');
+        assert.strictEqual(items[8].url, 'https://github.com/fleetbase/storefront-app', 'launch app remains an external URL item');
     });
 
     test('it loads active store product categories for the sidebar navigator', async function (assert) {
@@ -305,8 +305,8 @@ module('Unit | Controller | application', function (hooks) {
         const items = controller.navigationItems;
 
         assert.false(items[0].disabled, 'dashboard remains available');
-        assert.true(items[1].disabled, 'products are disabled without an active store');
-        assert.true(items[8].disabled, 'settings are disabled without an active store');
+        assert.true(items[2].disabled, 'products are disabled without an active store');
+        assert.true(items[7].disabled, 'settings are disabled without an active store');
     });
 
     test('it fetches Storefront resource search results for the sidebar navigator', async function (assert) {
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index b397018c..46aa17d5 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -302,8 +302,10 @@ storefront:
       network: Network
       stores: Stores
       networks: Networks
-      no-networks: No networks
-      create-network: Create network
+      no-networks: No networks yet
+      new-store: New store
+      new-network: New network
+      badge-title: "{count, plural, one {# network invitation} other {# network invitations}}"
   home:
     title: Storefront Dashboard
   customers:

From 56b5f95b5c9b4eef180f70a689de809487af3be8 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 18:19:12 +0800
Subject: [PATCH 08/13] fix(switcher): expose the active context through native
 getters so the sidebar re-renders on a switch; networks report their store
 count

---
 addon/controllers/application.js      | 16 +++++++++++-----
 server/src/Http/Resources/Network.php |  1 +
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/addon/controllers/application.js b/addon/controllers/application.js
index 2c1121fd..f9f2da3a 100644
--- a/addon/controllers/application.js
+++ b/addon/controllers/application.js
@@ -1,7 +1,6 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { alias } from '@ember/object/computed';
 import { tracked } from '@glimmer/tracking';
 
 export default class ApplicationController extends Controller {
@@ -12,8 +11,17 @@ export default class ApplicationController extends Controller {
     @service intl;
     @service abilities;
     @service store;
-    @alias('storefront.activeStore') activeStore;
-    @alias('storefront.activeNetwork') activeNetwork;
+    /**
+     * Native getters so the sidebar re-renders when the service's tracked ids change;
+     * a computed alias onto a native getter never invalidates.
+     */
+    get activeStore() {
+        return this.storefront.activeStore;
+    }
+
+    get activeNetwork() {
+        return this.storefront.activeNetwork;
+    }
     @tracked productCategories = [];
     categoryLoadStoreUuid;
 
@@ -318,7 +326,6 @@ export default class ApplicationController extends Controller {
                 const loader = this.loader.show({ loadingMessage: 'Switching to newly created store...' });
 
                 this.hostRouter.refresh().then(() => {
-                    this.notifyPropertyChange('activeStore');
                     this.loadProductCategories(this.activeStoreUuid);
                     this.loader.removeLoader(loader);
                 });
@@ -343,7 +350,6 @@ export default class ApplicationController extends Controller {
 
         return Promise.resolve(transition)
             .then(() => {
-                this.notifyPropertyChange('activeStore');
                 return this.loadProductCategories(store.id);
             })
             .finally(() => {
diff --git a/server/src/Http/Resources/Network.php b/server/src/Http/Resources/Network.php
index bf8d8987..5e89ae74 100644
--- a/server/src/Http/Resources/Network.php
+++ b/server/src/Http/Resources/Network.php
@@ -44,6 +44,7 @@ public function toArray($request)
             'rating'                    => $this->rating,
             'online'                    => $this->online,
             'stores'                    => $this->when($request->boolean('with_stores') || $request->inArray('with', 'stores'), Store::collection($this->stores)),
+            'stores_count'              => $this->when(Http::isInternalRequest(), (int) ($this->stores_count ?? $this->stores()->count())),
             'categories'                => $this->when($request->boolean('with_categories') || $request->inArray('with', 'categories'), Category::collection($this->categories)),
             'gateways'                  => $this->when($request->boolean('with_gateways') || $request->inArray('with', 'gateways'), Gateway::collection($this->gateways)),
             'notification_channels'     => $this->when($request->boolean('with_notification_channels') || $request->inArray('with', 'notification_channels'), NotificationChannel::collection($this->notificationChannels)),

From f535fdc21e0fb65f297a9e0274ec774171db73eb Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 14:30:40 +0800
Subject: [PATCH 09/13] feat(network): overview, stores with status tabs and
 bulk actions, and an invite panel

- network index is now an Overview (stat tiles, members with 7-day share, invitations, recent orders); settings move to networks.index.network.settings
- NetworkController gains overview, invitations, resend and revoke; one Invite per recipient carrying category, expiry, message and approval in meta
- OrderFilter/CustomerFilter gain a network filter on meta.storefront_network_id; the network orders and customers routes use it
- Storefront::Network::InvitePanel (by email, shareable link, add a store you manage) replaces the share-network and add-stores modals
- stores page: store identity column via a new store descriptor, All/Online/Offline/Invited tabs, bulk assign category and remove, invitation rows with resend/revoke/invite again
- store and network resource descriptors registered with the shared identity registry; SelectOption::Store wrapper; width-style helper
---
 addon/components/select-option/store.hbs      |  12 +
 .../storefront/network/invite-panel.hbs       |  83 +++
 .../storefront/network/invite-panel.js        | 220 +++++++
 addon/controllers/application.js              |   9 +-
 addon/controllers/networks/index/network.js   |   9 +-
 .../networks/index/network/index.js           | 343 +++--------
 .../networks/index/network/settings.js        | 300 +++++++++
 .../networks/index/network/stores.js          | 259 ++++++--
 addon/helpers/width-style.js                  |  11 +
 ...egister-storefront-resource-descriptors.js | 125 ++++
 addon/models/network.js                       |  43 +-
 addon/routes.js                               |   1 +
 .../networks/index/network/customers.js       |   2 +-
 addon/routes/networks/index/network/index.js  |  25 +-
 addon/routes/networks/index/network/orders.js |   2 +-
 .../routes/networks/index/network/settings.js |  15 +
 addon/routes/networks/index/network/stores.js |   1 +
 addon/styles/storefront-engine.css            | 406 +++++++++++++
 .../networks/index/network/index.hbs          | 569 ++++--------------
 .../networks/index/network/settings.hbs       | 463 ++++++++++++++
 .../networks/index/network/stores.hbs         | 104 +++-
 app/components/select-option/store.js         |   1 +
 .../storefront/network/invite-panel.js        |   1 +
 .../networks/index/network/settings.js        |   1 +
 app/helpers/width-style.js                    |   1 +
 ...egister-storefront-resource-descriptors.js |   1 +
 app/routes/networks/index/network/settings.js |   1 +
 .../networks/index/network/settings.js        |   1 +
 .../Http/Controllers/NetworkController.php    | 254 +++++++-
 server/src/Http/Filter/CustomerFilter.php     |  13 +
 server/src/Http/Filter/OrderFilter.php        |   9 +
 server/src/routes.php                         |   4 +
 tests/unit/controllers/application-test.js    |  17 +-
 .../{index-test.js => settings-test.js}       |   4 +-
 .../networks/index/network/customers-test.js  |   2 +-
 .../networks/index/network/orders-test.js     |   2 +-
 .../{index-test.js => settings-test.js}       |   4 +-
 translations/en-us.yaml                       |  80 +++
 38 files changed, 2570 insertions(+), 828 deletions(-)
 create mode 100644 addon/components/select-option/store.hbs
 create mode 100644 addon/components/storefront/network/invite-panel.hbs
 create mode 100644 addon/components/storefront/network/invite-panel.js
 create mode 100644 addon/controllers/networks/index/network/settings.js
 create mode 100644 addon/helpers/width-style.js
 create mode 100644 addon/instance-initializers/register-storefront-resource-descriptors.js
 create mode 100644 addon/routes/networks/index/network/settings.js
 create mode 100644 addon/templates/networks/index/network/settings.hbs
 create mode 100644 app/components/select-option/store.js
 create mode 100644 app/components/storefront/network/invite-panel.js
 create mode 100644 app/controllers/networks/index/network/settings.js
 create mode 100644 app/helpers/width-style.js
 create mode 100644 app/instance-initializers/register-storefront-resource-descriptors.js
 create mode 100644 app/routes/networks/index/network/settings.js
 create mode 100644 app/templates/networks/index/network/settings.js
 rename tests/unit/controllers/networks/index/network/{index-test.js => settings-test.js} (74%)
 rename tests/unit/routes/networks/index/network/{index-test.js => settings-test.js} (73%)

diff --git a/addon/components/select-option/store.hbs b/addon/components/select-option/store.hbs
new file mode 100644
index 00000000..20fe3866
--- /dev/null
+++ b/addon/components/select-option/store.hbs
@@ -0,0 +1,12 @@
+<Resource::SelectOption
+    @option={{or @option @model @store}}
+    @resourceType="store"
+    @compact={{@compact}}
+    @title={{@title}}
+    @details={{@details}}
+    @photo={{@photo}}
+    @fallbackPhoto={{@fallbackPhoto}}
+    @icon={{@icon}}
+    @shape={{@shape}}
+    ...attributes
+/>
diff --git a/addon/components/storefront/network/invite-panel.hbs b/addon/components/storefront/network/invite-panel.hbs
new file mode 100644
index 00000000..8b5b5db1
--- /dev/null
+++ b/addon/components/storefront/network/invite-panel.hbs
@@ -0,0 +1,83 @@
+<Overlay @position="right" @isResizable={{true}} @noBackdrop={{false}} @width="600px" @minResizeWidth={{480}} @fullHeight={{true}} @isOpen={{true}}>
+    <Overlay::Header @title={{t "storefront.networks.invitations.panel-title" network=this.network.name}} @onPressCancel={{this.close}} />
+    <Overlay::Body class="p-0i" @wrapperClass="storefront-invite-panel" data-test-invite-panel>
+        <p class="storefront-invite-panel__lede">{{t "storefront.networks.invitations.panel-lede"}}</p>
+
+        <div class="storefront-invite-panel__tabs" role="tablist">
+            {{#each this.tabItems as |tab|}}
+                <button type="button" role="tab" aria-selected={{if tab.isActive "true" "false"}} class="storefront-invite-panel__tab {{if tab.isActive 'is-active'}}" {{on "click" (fn this.selectTab tab)}} data-test-invite-tab={{tab.id}}>
+                    {{tab.label}}
+                </button>
+            {{/each}}
+        </div>
+
+        {{#if (eq this.activeTab "email")}}
+            <div class="storefront-invite-panel__section space-y-4">
+                <InputGroup @name={{t "storefront.networks.invitations.email-addresses"}} @helpText={{t "storefront.networks.invitations.email-help"}}>
+                    <TagInput class="form-input" @placeholder={{t "storefront.component.modals.share-network.add-email"}} @tags={{this.recipients}} @addTag={{this.addRecipient}} @removeTagAtIndex={{this.removeRecipient}} as |tag|>
+                        <span class={{if (in-array tag this.flaggedRecipients) "line-through opacity-60"}}>{{tag}}</span>
+                    </TagInput>
+                    {{#if this.flaggedRecipients.length}}
+                        <div class="storefront-invite-panel__flag">{{t "storefront.networks.invitations.already-flagged" count=this.flaggedRecipients.length}}</div>
+                    {{/if}}
+                    {{#if this.invalidRecipients.length}}
+                        <div class="storefront-invite-panel__flag storefront-invite-panel__flag--error">{{t "storefront.networks.invitations.invalid-flagged" count=this.invalidRecipients.length}}</div>
+                    {{/if}}
+                </InputGroup>
+
+                <InputGroup @name={{t "storefront.networks.invitations.category-on-joining"}}>
+                    <PowerSelect @options={{this.categories}} @selected={{this.category}} @searchEnabled={{true}} @searchField="name" @allowClear={{true}} @placeholder={{t "storefront.networks.invitations.let-store-choose"}} @onChange={{this.setCategory}} @triggerClass="form-select form-input" as |category|>
+                        {{category.name}}
+                    </PowerSelect>
+                </InputGroup>
+
+                <InputGroup @name={{t "storefront.networks.invitations.expires"}}>
+                    <PowerSelect @options={{this.expiryItems}} @selected={{this.selectedExpiry}} @onChange={{this.setExpiry}} @triggerClass="form-select form-input" as |option|>
+                        {{option.label}}
+                    </PowerSelect>
+                </InputGroup>
+
+                <InputGroup @name={{t "storefront.networks.invitations.message"}}>
+                    <Textarea class="form-input w-full" rows="3" @value={{this.message}} placeholder={{t "storefront.networks.invitations.message-placeholder" network=this.network.name}} />
+                </InputGroup>
+
+                <Toggle @isToggled={{this.requireApproval}} @onToggle={{this.setRequireApproval}} @label={{t "storefront.networks.invitations.require-approval"}} @helpText={{t "storefront.networks.invitations.require-approval-help"}} />
+
+                <div class="storefront-invite-panel__footer">
+                    <Button @text={{t "common.cancel"}} @onClick={{this.close}} />
+                    <Button @type="primary" @icon="paper-plane" @text={{t "storefront.networks.invitations.send-count" count=this.sendableRecipients.length}} @disabled={{not this.canSend}} @isLoading={{this.send.isRunning}} @onClick={{perform this.send}} data-test-invite-send />
+                </div>
+            </div>
+        {{else if (eq this.activeTab "link")}}
+            <div class="storefront-invite-panel__section space-y-4">
+                <Toggle @isToggled={{this.shareableLinkEnabled}} @onToggle={{perform this.toggleShareableLink}} @label={{t "storefront.component.modals.share-network.enable-shareable-link"}} @helpText={{t "storefront.component.modals.share-network.anyone-with-this-link-able-to-join-your-network"}} />
+                {{#if this.shareableLinkEnabled}}
+                    <InputGroup @name={{t "storefront.networks.invitations.link"}}>
+                        <ClickToCopy @value={{this.shareableLink}} class="rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate px-4 py-2.5 text-sm text-green-500 dark:text-green-300" />
+                    </InputGroup>
+                    <p class="storefront-invite-panel__hint">{{t "storefront.networks.invitations.link-hint"}}</p>
+                {{/if}}
+                <div class="storefront-invite-panel__footer">
+                    <Button @type="primary" @text={{t "storefront.networks.index.network.stores.done"}} @onClick={{this.close}} />
+                </div>
+            </div>
+        {{else}}
+            <div class="storefront-invite-panel__section space-y-4">
+                <InputGroup @name={{t "storefront.networks.invitations.own-stores"}} @helpText={{t "storefront.networks.invitations.own-stores-help"}}>
+                    <PowerSelectMultiple @options={{this.availableOwnStores}} @selected={{this.selectedStores}} @searchEnabled={{true}} @searchField="name" @placeholder={{t "storefront.networks.invitations.pick-stores"}} @onChange={{this.setSelectedStores}} @triggerClass="form-select form-input" as |store|>
+                        <SelectOption::Store @model={{store}} />
+                    </PowerSelectMultiple>
+                </InputGroup>
+                <InputGroup @name={{t "storefront.common.category"}}>
+                    <PowerSelect @options={{this.categories}} @selected={{this.ownStoreCategory}} @searchEnabled={{true}} @searchField="name" @allowClear={{true}} @placeholder={{t "storefront.networks.invitations.let-store-choose"}} @onChange={{this.setOwnStoreCategory}} @triggerClass="form-select form-input" as |category|>
+                        {{category.name}}
+                    </PowerSelect>
+                </InputGroup>
+                <div class="storefront-invite-panel__footer">
+                    <Button @text={{t "common.cancel"}} @onClick={{this.close}} />
+                    <Button @type="primary" @icon="plus" @text={{t "storefront.networks.invitations.add-to-network"}} @disabled={{not this.canAddOwnStores}} @isLoading={{this.addOwnStores.isRunning}} @onClick={{perform this.addOwnStores}} data-test-invite-add-own />
+                </div>
+            </div>
+        {{/if}}
+    </Overlay::Body>
+</Overlay>
diff --git a/addon/components/storefront/network/invite-panel.js b/addon/components/storefront/network/invite-panel.js
new file mode 100644
index 00000000..20731e1a
--- /dev/null
+++ b/addon/components/storefront/network/invite-panel.js
@@ -0,0 +1,220 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import isEmail from '@fleetbase/ember-core/utils/is-email';
+import createShareableLink from '../../../utils/create-shareable-link';
+
+/**
+ * Invite stores to a network: by email, with a shareable link, or by adding a store the
+ * user already administers. Replaces the share-network and add-stores-to-network modals.
+ */
+export default class StorefrontNetworkInvitePanelComponent extends Component {
+    @service store;
+    @service fetch;
+    @service intl;
+    @service notifications;
+    @service currentUser;
+    @tracked activeTab = this.args.activeTab ?? 'email';
+    @tracked recipients = [];
+    @tracked category = null;
+    @tracked expiresInDays = 14;
+    @tracked message = '';
+    @tracked requireApproval = false;
+    @tracked categories = [];
+    @tracked members = [];
+    @tracked ownStores = [];
+    @tracked selectedStores = [];
+    @tracked ownStoreCategory = null;
+
+    tabs = ['email', 'link', 'own'];
+    expiryOptions = [
+        { value: 14, labelKey: 'storefront.networks.invitations.expires-14' },
+        { value: 7, labelKey: 'storefront.networks.invitations.expires-7' },
+        { value: 30, labelKey: 'storefront.networks.invitations.expires-30' },
+        { value: 0, labelKey: 'storefront.networks.invitations.expires-never' },
+    ];
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get network() {
+        return this.args.network;
+    }
+
+    get tabItems() {
+        return this.tabs.map((id) => ({ id, label: this.intl.t(`storefront.networks.invitations.tab-${id}`), isActive: id === this.activeTab }));
+    }
+
+    get expiryItems() {
+        return this.expiryOptions.map((option) => ({ ...option, label: this.intl.t(option.labelKey) }));
+    }
+
+    get selectedExpiry() {
+        return this.expiryItems.find((option) => option.value === this.expiresInDays) ?? this.expiryItems[0];
+    }
+
+    get validRecipients() {
+        return this.recipients.filter((email) => isEmail(email));
+    }
+
+    get invalidRecipients() {
+        return this.recipients.filter((email) => !isEmail(email));
+    }
+
+    get knownEmails() {
+        const memberEmails = this.members.map((store) => store.email).filter(Boolean);
+        const invitedEmails = (this.network.invitations ?? []).filter((invitation) => invitation.status === 'pending').map((invitation) => invitation.email);
+
+        return new Set([...memberEmails, ...invitedEmails].map((email) => String(email).toLowerCase()));
+    }
+
+    get flaggedRecipients() {
+        return this.recipients.filter((email) => this.knownEmails.has(String(email).toLowerCase()));
+    }
+
+    get sendableRecipients() {
+        return this.validRecipients.filter((email) => !this.knownEmails.has(String(email).toLowerCase()));
+    }
+
+    get canSend() {
+        return this.sendableRecipients.length > 0 && !this.send.isRunning;
+    }
+
+    get shareableLink() {
+        return createShareableLink(`join/network/${this.network.public_id}`);
+    }
+
+    get shareableLinkEnabled() {
+        return Boolean(this.network.options?.shareable_link_enabled);
+    }
+
+    get availableOwnStores() {
+        const memberIds = new Set(this.members.map((store) => store.id));
+
+        return this.ownStores.filter((store) => !memberIds.has(store.id));
+    }
+
+    get canAddOwnStores() {
+        return this.selectedStores.length > 0 && !this.addOwnStores.isRunning;
+    }
+
+    @task *load() {
+        try {
+            const [categories, members, ownStores] = yield Promise.all([
+                this.store.query('category', { owner_uuid: this.network.id, for: 'storefront_network', parents_only: true }),
+                this.store.query('store', { network: this.network.id }),
+                this.store.query('store', { limit: 300 }),
+            ]);
+            this.categories = categories?.toArray?.() ?? Array.from(categories ?? []);
+            this.members = members?.toArray?.() ?? Array.from(members ?? []);
+            this.ownStores = ownStores?.toArray?.() ?? Array.from(ownStores ?? []);
+            if (!this.network.invitations) {
+                yield this.network.loadInvitations();
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *send() {
+        try {
+            yield this.network.sendInvites({
+                recipients: this.sendableRecipients,
+                category_uuid: this.category?.id ?? null,
+                expires_in_days: this.expiresInDays || null,
+                message: this.message || null,
+                require_approval: this.requireApproval,
+            });
+            this.notifications.success(this.intl.t('storefront.networks.invitations.sent', { count: this.sendableRecipients.length }));
+            this.recipients = [];
+            this.message = '';
+            yield this.network.loadInvitations();
+            this.args.onSent?.();
+            this.args.onClose?.();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *addOwnStores() {
+        try {
+            yield this.network.addStores(this.selectedStores);
+            if (this.ownStoreCategory) {
+                for (const store of this.selectedStores) {
+                    yield this.fetch.post(`networks/${this.network.id}/set-store-category`, { store: store.id, category: this.ownStoreCategory.id }, { namespace: 'storefront/int/v1' });
+                }
+            }
+            this.notifications.success(this.intl.t('storefront.networks.invitations.own-stores-added', { count: this.selectedStores.length }));
+            this.selectedStores = [];
+            this.args.onSent?.();
+            this.args.onClose?.();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @task *toggleShareableLink(enabled) {
+        try {
+            this.network.set('options', { ...(this.network.options ?? {}), shareable_link_enabled: enabled });
+            yield this.network.save();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action selectTab(tab) {
+        this.activeTab = tab.id ?? tab;
+    }
+
+    @action addRecipient(value) {
+        const emails = String(value ?? '')
+            .split(/[\s,;]+/)
+            .map((email) => email.trim())
+            .filter(Boolean);
+        const next = [...this.recipients];
+
+        emails.forEach((email) => {
+            if (!next.includes(email)) {
+                next.push(email);
+            }
+        });
+
+        this.recipients = next;
+    }
+
+    @action removeRecipient(index) {
+        this.recipients = this.recipients.filter((_, i) => i !== index);
+    }
+
+    @action setCategory(category) {
+        this.category = category;
+    }
+
+    @action setOwnStoreCategory(category) {
+        this.ownStoreCategory = category;
+    }
+
+    @action setExpiry(option) {
+        this.expiresInDays = option?.value ?? 0;
+    }
+
+    @action setMessage(event) {
+        this.message = event.target.value;
+    }
+
+    @action setRequireApproval(enabled) {
+        this.requireApproval = enabled;
+    }
+
+    @action setSelectedStores(stores) {
+        this.selectedStores = Array.from(stores ?? []);
+    }
+
+    @action close() {
+        this.args.onClose?.();
+    }
+}
diff --git a/addon/controllers/application.js b/addon/controllers/application.js
index f9f2da3a..d0135b3a 100644
--- a/addon/controllers/application.js
+++ b/addon/controllers/application.js
@@ -52,6 +52,13 @@ export default class ApplicationController extends Controller {
         };
 
         return [
+            networkItem('index', {
+                label: this.intl.t('storefront.networks.index.network.overview'),
+                description: 'Members, invitations, orders and revenue across the network.',
+                icon: 'gauge-high',
+                permission: 'storefront view network',
+                keywords: ['overview', 'dashboard', 'network'],
+            }),
             networkItem('stores', {
                 label: this.intl.t('storefront.networks.index.network.stores.store'),
                 description: 'Stores selling through this network, their categories and invitations.',
@@ -83,7 +90,7 @@ export default class ApplicationController extends Controller {
                 visible: this.can('storefront see user'),
                 keywords: ['contacts', 'buyers', 'users'],
             }),
-            networkItem('index', {
+            networkItem('settings', {
                 label: this.intl.t('storefront.networks.index.network.settings'),
                 description: 'Network details, gateways and notification channels.',
                 icon: 'cog',
diff --git a/addon/controllers/networks/index/network.js b/addon/controllers/networks/index/network.js
index efe28142..b0c65454 100644
--- a/addon/controllers/networks/index/network.js
+++ b/addon/controllers/networks/index/network.js
@@ -9,8 +9,8 @@ export default class NetworksIndexNetworkController extends BaseController {
     get tabs() {
         return [
             {
-                label: this.intl.t('storefront.networks.index.network.settings'),
-                icon: 'cog',
+                label: this.intl.t('storefront.networks.index.network.overview'),
+                icon: 'gauge-high',
                 route: 'networks.index.network.index',
             },
             {
@@ -28,6 +28,11 @@ export default class NetworksIndexNetworkController extends BaseController {
                 icon: 'users',
                 route: 'networks.index.network.customers',
             },
+            {
+                label: this.intl.t('storefront.networks.index.network.settings'),
+                icon: 'cog',
+                route: 'networks.index.network.settings',
+            },
         ];
     }
 
diff --git a/addon/controllers/networks/index/network/index.js b/addon/controllers/networks/index/network/index.js
index e44bed45..2f16ad22 100644
--- a/addon/controllers/networks/index/network/index.js
+++ b/addon/controllers/networks/index/network/index.js
@@ -1,300 +1,117 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { alias } from '@ember/object/computed';
 import { action } from '@ember/object';
-import getPodMethods from '@fleetbase/ember-core/utils/get-pod-methods';
+import { formatDistanceToNow } from 'date-fns';
+import createShareableLink from '../../../../utils/create-shareable-link';
 
-/**
- * NetworksIndexNetworkIndexController
- *
- * This controller handles the logic for managing networks, gateways, and notification channels.
- *
- * @class NetworksIndexNetworkIndexController
- * @extends Controller
- */
 export default class NetworksIndexNetworkIndexController extends Controller {
-    /**
-     * Controller for managing gateways.
-     *
-     * @property {Controller} gatewaysController
-     */
-    @controller('settings.gateways') gatewaysController;
-
-    /**
-     * Controller for managing notifications.
-     *
-     * @property {Controller} notificationsController
-     */
-    @controller('settings.notifications') notificationsController;
-
-    /**
-     * Notifications service to handle notification logic.
-     *
-     * @property {Service} notifications
-     */
-    @service notifications;
-
-    /**
-     * Fetch service to handle file uploads and other network requests.
-     *
-     * @property {Service} fetch
-     */
-    @service fetch;
-
-    /**
-     * intl service to handle file uploads and other network requests.
-     *
-     * @property {Service} intl
-     */
     @service intl;
-
-    /**
-     * Store service to handle file uploads and other network requests.
-     *
-     * @property {Service} store
-     */
-    @service store;
-
-    /**
-     * Proof of delivery methods.
-     *
-     * @property {Array} podMethods
-     */
-    @tracked podMethods = getPodMethods();
-
-    /**
-     * Loading state, indicating whether a network request is in progress.
-     *
-     * @property {Boolean} isLoading
-     */
-    @tracked isLoading = false;
-
-    @tracked orderConfigs = [];
-
-    /**
-     * Alias for model.gateways, representing the gateways associated with the network.
-     *
-     * @property {Array} gateways
-     */
-    @alias('model.gateways') gateways;
-
-    /**
-     * Alias for model.notification_channels, representing the notification channels associated with the network.
-     *
-     * @property {Array} channels
-     */
-    @alias('model.notification_channels') channels;
-
-    /**
-     * Save network settings.
-     *
-     * @method saveSettings
-     * @public
-     */
-    @action saveSettings() {
-        this.isLoading = true;
-
-        this.model
-            .save()
-            .then(() => {
-                this.notifications.success(this.intl.t('storefront.networks.index.network.index.change-network-saved'));
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+    @service notifications;
+    @service hostRouter;
+    @service modalsManager;
+    @tracked network;
+    @tracked overview;
+    @tracked invitations = [];
+    @tracked isInvitePanelOpen = false;
+    @tracked invitePanelTab = 'email';
+
+    get currency() {
+        return this.overview?.currency ?? this.network?.currency;
     }
 
-    /**
-     * Upload a file.
-     *
-     * @method uploadFile
-     * @param {String} type - Type of the file.
-     * @param {File} file - File to upload.
-     * @public
-     */
-    @action uploadFile(type, file) {
-        const prefix = type.replace('storefront_', '');
-
-        this.fetch.uploadFile.perform(
-            file,
-            {
-                path: `uploads/storefront/${this.model.id}/${type}`,
-                key_uuid: this.model.id,
-                key_type: `storefront:network`,
-                type,
-            },
-            (uploadedFile) => {
-                this.model.setProperties({
-                    [`${prefix}_uuid`]: uploadedFile.id,
-                    [`${prefix}_url`]: uploadedFile.url,
-                    [prefix]: uploadedFile,
-                });
-            }
-        );
+    get members() {
+        return this.overview?.members ?? [];
     }
 
-    /**
-     * Create a new payment gateway.
-     *
-     * @method createGateway
-     * @public
-     */
-    @action createGateway() {
-        const gateway = this.store.createRecord('gateway', {
-            owner_uuid: this.model.id,
-            owner_type: 'storefront:network',
-        });
-
-        this.editGateway(gateway, {
-            title: this.intl.t('storefront.networks.index.network.index.create-new-payment-gateway'),
-            acceptButtonText: this.intl.t('storefront.networks.index.network.index.save-gateway'),
-            confirm: async (modal) => {
-                modal.startLoading();
-
-                try {
-                    await gateway.save();
-                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.new-gateway-add-network'));
-                    this.gateways.pushObject(gateway);
-                } catch (error) {
-                    modal.stopLoading();
-                    this.notifications.serverError(error);
-                }
-            },
-            decline: (modal) => {
-                gateway.destroyRecord();
-                modal.done();
-            },
-        });
+    get recentOrders() {
+        return this.overview?.recent_orders ?? [];
     }
 
-    /**
-     * Edit a payment gateway.
-     *
-     * @method editGateway
-     * @param {Object} gateway - The gateway object to edit.
-     * @param {Object} [options={}] - Optional parameters for editing the gateway.
-     * @public
-     */
-    @action editGateway(gateway, options = {}) {
-        if (options === null) {
-            options = {};
-        }
+    get openInvitations() {
+        return this.invitations.filter((invitation) => ['pending', 'declined', 'expired'].includes(invitation.status)).map((invitation) => ({ ...invitation, sentAgo: this.sentAgo(invitation) }));
+    }
 
-        // The settings controller's modal saves the gateway and reports errors; only the message differs.
-        if (!options.successNotification) {
-            options.successNotification = this.intl.t('storefront.networks.index.network.index.payment-gateway-changes-success');
-        }
+    get pendingCount() {
+        return this.invitations.filter((invitation) => invitation.status === 'pending').length;
+    }
 
-        return this.gatewaysController.editGateway(gateway, options);
+    get declinedCount() {
+        return this.invitations.filter((invitation) => invitation.status === 'declined').length;
     }
 
-    /**
-     * Delete a payment gateway.
-     *
-     * @method deleteGateway
-     * @public
-     */
-    @action deleteGateway() {
-        return this.gatewaysController.deleteGateway(...arguments);
+    get shareableLink() {
+        return createShareableLink(`join/network/${this.network?.public_id}`);
     }
 
-    /**
-     * Create a new notification channel.
-     *
-     * @method createChannel
-     * @public
-     */
-    @action createChannel() {
-        const channel = this.store.createRecord('notification-channel', {
-            owner_uuid: this.model.id,
-            owner_type: 'storefront:network',
-        });
+    get shareableLinkEnabled() {
+        return Boolean(this.network?.options?.shareable_link_enabled);
+    }
 
-        this.editChannel(channel, {
-            title: this.intl.t('storefront.networks.index.network.index.create-new-notification-channel'),
-            acceptButtonText: this.intl.t('storefront.networks.index.network.index.create-notification-channel'),
-            confirm: (modal) => {
-                modal.startLoading();
+    sentAgo(invitation) {
+        const sentAt = invitation.resent_at ?? invitation.created_at;
 
-                return channel.save().then((channel) => {
-                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.notification-channel-add-network'));
-                    this.channels.pushObject(channel);
-                });
-            },
-            decline: (modal) => {
-                channel.destroyRecord();
-                modal.done();
-            },
-        });
+        return sentAt ? formatDistanceToNow(new Date(sentAt), { addSuffix: true }) : null;
     }
 
-    /**
-     * Edit a notification channel.
-     *
-     * @method editChannel
-     * @param {Object} channel - The channel object to edit.
-     * @param {Object} [options={}] - Optional parameters for editing the channel.
-     * @public
-     */
-    @action editChannel(channel, options = {}) {
-        if (options === null) {
-            options = {};
-        }
+    @action openInvitePanel(tab = 'email') {
+        this.invitePanelTab = tab;
+        this.isInvitePanelOpen = true;
+    }
 
-        if (!options.confirm) {
-            options.confirm = (modal) => {
-                modal.startLoading();
+    @action closeInvitePanel() {
+        this.isInvitePanelOpen = false;
+    }
 
-                return channel.save().then(() => {
-                    this.notifications.success(this.intl.t('storefront.controllers.networks.index.notification-channel-changes-save'));
-                });
-            };
+    @action async refresh() {
+        try {
+            this.invitations = await this.network.loadInvitations();
+            this.overview = await this.network.loadOverview();
+        } catch (error) {
+            this.notifications.serverError(error);
         }
+    }
 
-        return this.notificationsController.editChannel(channel, options);
+    @action manageStores() {
+        return this.hostRouter.transitionTo('console.storefront.networks.index.network.stores', this.network.public_id);
     }
 
-    /**
-     * Delete a notification channel.
-     *
-     * @method deleteChannel
-     * @public
-     */
-    @action deleteChannel() {
-        return this.notificationsController.deleteChannel(...arguments);
+    @action openSettings() {
+        return this.hostRouter.transitionTo('console.storefront.networks.index.network.settings', this.network.public_id);
     }
 
-    /**
-     * Send a test push notification through a notification channel.
-     *
-     * @method testChannel
-     * @public
-     */
-    @action testChannel() {
-        return this.notificationsController.testChannel(...arguments);
+    @action viewOrders() {
+        return this.hostRouter.transitionTo('console.storefront.networks.index.network.orders', this.network.public_id);
     }
 
-    /**
-     * Make an alertable action.
-     *
-     * @method makeAlertable
-     * @param {String} reason - Reason for the alert.
-     * @param {Array} models - Models associated with the alert.
-     * @public
-     */
-    @action makeAlertable(reason, models) {
-        if (!this.model.alertable || !this.model.alertable?.length) {
-            this.model.set('alertable', {});
+    @action async resendInvitation(invitation) {
+        try {
+            await this.network.resendInvitation(invitation);
+            this.notifications.success(this.intl.t('storefront.networks.invitations.resent', { email: invitation.email }));
+            await this.refresh();
+        } catch (error) {
+            this.notifications.serverError(error);
         }
+    }
 
-        const serializedModels = models.map((model) => {
-            return model.serialize();
-        });
+    @action revokeInvitation(invitation) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('storefront.networks.invitations.revoke-title', { email: invitation.email }),
+            body: this.intl.t('storefront.networks.invitations.revoke-body'),
+            acceptButtonText: this.intl.t('storefront.networks.invitations.revoke'),
+            acceptButtonScheme: 'danger',
+            confirm: async (modal) => {
+                modal.startLoading();
 
-        this.model.set(`alertable.${reason}`, serializedModels);
+                try {
+                    await this.network.revokeInvitation(invitation);
+                    await this.refresh();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
+            },
+        });
     }
 }
diff --git a/addon/controllers/networks/index/network/settings.js b/addon/controllers/networks/index/network/settings.js
new file mode 100644
index 00000000..9a3fdc72
--- /dev/null
+++ b/addon/controllers/networks/index/network/settings.js
@@ -0,0 +1,300 @@
+import Controller, { inject as controller } from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import { action } from '@ember/object';
+import getPodMethods from '@fleetbase/ember-core/utils/get-pod-methods';
+
+/**
+ * NetworksIndexNetworkSettingsController
+ *
+ * This controller handles the logic for managing networks, gateways, and notification channels.
+ *
+ * @class NetworksIndexNetworkSettingsController
+ * @extends Controller
+ */
+export default class NetworksIndexNetworkSettingsController extends Controller {
+    /**
+     * Controller for managing gateways.
+     *
+     * @property {Controller} gatewaysController
+     */
+    @controller('settings.gateways') gatewaysController;
+
+    /**
+     * Controller for managing notifications.
+     *
+     * @property {Controller} notificationsController
+     */
+    @controller('settings.notifications') notificationsController;
+
+    /**
+     * Notifications service to handle notification logic.
+     *
+     * @property {Service} notifications
+     */
+    @service notifications;
+
+    /**
+     * Fetch service to handle file uploads and other network requests.
+     *
+     * @property {Service} fetch
+     */
+    @service fetch;
+
+    /**
+     * intl service to handle file uploads and other network requests.
+     *
+     * @property {Service} intl
+     */
+    @service intl;
+
+    /**
+     * Store service to handle file uploads and other network requests.
+     *
+     * @property {Service} store
+     */
+    @service store;
+
+    /**
+     * Proof of delivery methods.
+     *
+     * @property {Array} podMethods
+     */
+    @tracked podMethods = getPodMethods();
+
+    /**
+     * Loading state, indicating whether a network request is in progress.
+     *
+     * @property {Boolean} isLoading
+     */
+    @tracked isLoading = false;
+
+    @tracked orderConfigs = [];
+
+    /**
+     * Alias for model.gateways, representing the gateways associated with the network.
+     *
+     * @property {Array} gateways
+     */
+    @alias('model.gateways') gateways;
+
+    /**
+     * Alias for model.notification_channels, representing the notification channels associated with the network.
+     *
+     * @property {Array} channels
+     */
+    @alias('model.notification_channels') channels;
+
+    /**
+     * Save network settings.
+     *
+     * @method saveSettings
+     * @public
+     */
+    @action saveSettings() {
+        this.isLoading = true;
+
+        this.model
+            .save()
+            .then(() => {
+                this.notifications.success(this.intl.t('storefront.networks.index.network.index.change-network-saved'));
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    /**
+     * Upload a file.
+     *
+     * @method uploadFile
+     * @param {String} type - Type of the file.
+     * @param {File} file - File to upload.
+     * @public
+     */
+    @action uploadFile(type, file) {
+        const prefix = type.replace('storefront_', '');
+
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/storefront/${this.model.id}/${type}`,
+                key_uuid: this.model.id,
+                key_type: `storefront:network`,
+                type,
+            },
+            (uploadedFile) => {
+                this.model.setProperties({
+                    [`${prefix}_uuid`]: uploadedFile.id,
+                    [`${prefix}_url`]: uploadedFile.url,
+                    [prefix]: uploadedFile,
+                });
+            }
+        );
+    }
+
+    /**
+     * Create a new payment gateway.
+     *
+     * @method createGateway
+     * @public
+     */
+    @action createGateway() {
+        const gateway = this.store.createRecord('gateway', {
+            owner_uuid: this.model.id,
+            owner_type: 'storefront:network',
+        });
+
+        this.editGateway(gateway, {
+            title: this.intl.t('storefront.networks.index.network.index.create-new-payment-gateway'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.index.save-gateway'),
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await gateway.save();
+                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.new-gateway-add-network'));
+                    this.gateways.pushObject(gateway);
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
+            },
+            decline: (modal) => {
+                gateway.destroyRecord();
+                modal.done();
+            },
+        });
+    }
+
+    /**
+     * Edit a payment gateway.
+     *
+     * @method editGateway
+     * @param {Object} gateway - The gateway object to edit.
+     * @param {Object} [options={}] - Optional parameters for editing the gateway.
+     * @public
+     */
+    @action editGateway(gateway, options = {}) {
+        if (options === null) {
+            options = {};
+        }
+
+        // The settings controller's modal saves the gateway and reports errors; only the message differs.
+        if (!options.successNotification) {
+            options.successNotification = this.intl.t('storefront.networks.index.network.index.payment-gateway-changes-success');
+        }
+
+        return this.gatewaysController.editGateway(gateway, options);
+    }
+
+    /**
+     * Delete a payment gateway.
+     *
+     * @method deleteGateway
+     * @public
+     */
+    @action deleteGateway() {
+        return this.gatewaysController.deleteGateway(...arguments);
+    }
+
+    /**
+     * Create a new notification channel.
+     *
+     * @method createChannel
+     * @public
+     */
+    @action createChannel() {
+        const channel = this.store.createRecord('notification-channel', {
+            owner_uuid: this.model.id,
+            owner_type: 'storefront:network',
+        });
+
+        this.editChannel(channel, {
+            title: this.intl.t('storefront.networks.index.network.index.create-new-notification-channel'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.index.create-notification-channel'),
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return channel.save().then((channel) => {
+                    this.notifications.success(this.intl.t('storefront.networks.index.network.index.notification-channel-add-network'));
+                    this.channels.pushObject(channel);
+                });
+            },
+            decline: (modal) => {
+                channel.destroyRecord();
+                modal.done();
+            },
+        });
+    }
+
+    /**
+     * Edit a notification channel.
+     *
+     * @method editChannel
+     * @param {Object} channel - The channel object to edit.
+     * @param {Object} [options={}] - Optional parameters for editing the channel.
+     * @public
+     */
+    @action editChannel(channel, options = {}) {
+        if (options === null) {
+            options = {};
+        }
+
+        if (!options.confirm) {
+            options.confirm = (modal) => {
+                modal.startLoading();
+
+                return channel.save().then(() => {
+                    this.notifications.success(this.intl.t('storefront.controllers.networks.index.notification-channel-changes-save'));
+                });
+            };
+        }
+
+        return this.notificationsController.editChannel(channel, options);
+    }
+
+    /**
+     * Delete a notification channel.
+     *
+     * @method deleteChannel
+     * @public
+     */
+    @action deleteChannel() {
+        return this.notificationsController.deleteChannel(...arguments);
+    }
+
+    /**
+     * Send a test push notification through a notification channel.
+     *
+     * @method testChannel
+     * @public
+     */
+    @action testChannel() {
+        return this.notificationsController.testChannel(...arguments);
+    }
+
+    /**
+     * Make an alertable action.
+     *
+     * @method makeAlertable
+     * @param {String} reason - Reason for the alert.
+     * @param {Array} models - Models associated with the alert.
+     * @public
+     */
+    @action makeAlertable(reason, models) {
+        if (!this.model.alertable || !this.model.alertable?.length) {
+            this.model.set('alertable', {});
+        }
+
+        const serializedModels = models.map((model) => {
+            return model.serialize();
+        });
+
+        this.model.set(`alertable.${reason}`, serializedModels);
+    }
+}
diff --git a/addon/controllers/networks/index/network/stores.js b/addon/controllers/networks/index/network/stores.js
index 9df68e66..1914294c 100644
--- a/addon/controllers/networks/index/network/stores.js
+++ b/addon/controllers/networks/index/network/stores.js
@@ -4,9 +4,8 @@ import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { timeout, task } from 'ember-concurrency';
-import createShareableLink from '../../../../utils/create-shareable-link';
-import isEmail from '@fleetbase/ember-core/utils/is-email';
 import isModel from '@fleetbase/ember-core/utils/is-model';
+import { formatDistanceToNow } from 'date-fns';
 
 export default class NetworksIndexNetworkStoresController extends BaseController {
     @service notifications;
@@ -93,6 +92,89 @@ export default class NetworksIndexNetworkStoresController extends BaseController
      */
     @tracked categoryModel;
 
+    /**
+     * Invitations this network has sent, loaded by the route.
+     *
+     * @var {Array}
+     */
+    @tracked invitations = [];
+
+    /**
+     * Which membership state the table shows: all, online, offline or invited.
+     *
+     * @var {String}
+     */
+    @tracked statusTab = 'all';
+
+    /**
+     * The table instance, for bulk actions on the selected rows.
+     *
+     * @var {Object}
+     */
+    @tracked table;
+
+    /**
+     * Whether the invite panel is open and which tab it starts on.
+     */
+    @tracked isInvitePanelOpen = false;
+    @tracked invitePanelTab = 'email';
+
+    get openInvitations() {
+        return this.invitations
+            .filter((invitation) => ['pending', 'declined', 'expired'].includes(invitation.status))
+            .map((invitation) => ({ ...invitation, sentAgo: this.sentAgo(invitation) }));
+    }
+
+    get pendingInvitations() {
+        return this.openInvitations.filter((invitation) => invitation.status === 'pending');
+    }
+
+    get members() {
+        return this.model?.toArray?.() ?? Array.from(this.model ?? []);
+    }
+
+    get statusTabs() {
+        const members = this.members;
+
+        return [
+            { id: 'all', label: this.intl.t('storefront.common.all'), count: members.length + this.openInvitations.length },
+            { id: 'online', label: this.intl.t('storefront.common.online'), count: members.filter((store) => store.online).length },
+            { id: 'offline', label: this.intl.t('storefront.common.offline'), count: members.filter((store) => !store.online).length },
+            { id: 'invited', label: this.intl.t('storefront.networks.invitations.invited'), count: this.openInvitations.length },
+        ].map((tab) => ({ ...tab, isActive: tab.id === this.statusTab }));
+    }
+
+    get visibleStores() {
+        switch (this.statusTab) {
+            case 'online':
+                return this.members.filter((store) => store.online);
+            case 'offline':
+                return this.members.filter((store) => !store.online);
+            case 'invited':
+                return [];
+            default:
+                return this.members;
+        }
+    }
+
+    get showInvitations() {
+        return ['all', 'invited'].includes(this.statusTab) && this.openInvitations.length > 0;
+    }
+
+    get selectedStores() {
+        return this.table?.selectedRows ?? [];
+    }
+
+    get hasSelection() {
+        return this.selectedStores.length > 0;
+    }
+
+    sentAgo(invitation) {
+        const sentAt = invitation.resent_at ?? invitation.created_at;
+
+        return sentAt ? formatDistanceToNow(new Date(sentAt), { addSuffix: true }) : null;
+    }
+
     /**
      * All columns applicable for network stores
      *
@@ -103,6 +185,9 @@ export default class NetworksIndexNetworkStoresController extends BaseController
             id: 'name',
             label: this.intl.t('storefront.networks.index.network.stores.store'),
             valuePath: 'name',
+            cellComponent: 'table/cell/identity',
+            resourceType: 'store',
+            popover: true,
             width: '130px',
             resizable: true,
             sortable: true,
@@ -528,8 +613,10 @@ export default class NetworksIndexNetworkStoresController extends BaseController
     @action async removeStore(store) {
         this.modalsManager.confirm({
             title: this.intl.t('storefront.networks.index.network.stores.remove-this-store', { storeName: store.name, networkName: this.network.name }),
-            body: this.intl.t('storefront.networks.index.network.stores.longer-findable-by-this-network'),
-            acceptButtonIcon: 'check',
+            body: this.intl.t('storefront.networks.invitations.remove-body'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.stores.remove-store-from-network'),
+            acceptButtonScheme: 'danger',
+            acceptButtonIcon: 'trash',
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
@@ -603,61 +690,143 @@ export default class NetworksIndexNetworkStoresController extends BaseController
      *
      * @action
      */
-    @action invite() {
-        const shareableLink = createShareableLink(`join/network/${this.network.public_id}`);
+    @action invite(network, tab = 'email') {
+        if (isModel(network) && network !== this.network) {
+            this.network = network;
+        }
 
-        this.modalsManager.show('modals/share-network', {
-            title: this.intl.t('storefront.networks.index.network.stores.add-stores-to-network'),
-            acceptButtonText: this.intl.t('storefront.networks.index.network.stores.send-invitations'),
-            acceptButtonIcon: 'paper-plane',
-            acceptButtonDisabled: true,
-            shareableLink,
-            recipients: [],
-            network: this.network,
-            addRecipient: (email) => {
-                const recipients = this.modalsManager.getOption('recipients');
-                recipients.pushObject(email);
-
-                if (recipients.length === 0) {
-                    this.modalsManager.setOption('acceptButtonDisabled', true);
-                } else {
-                    this.modalsManager.setOption('acceptButtonDisabled', false);
+        this.invitePanelTab = typeof tab === 'string' ? tab : 'email';
+        this.isInvitePanelOpen = true;
+    }
+
+    @action closeInvitePanel() {
+        this.isInvitePanelOpen = false;
+    }
+
+    @action selectStatusTab(tab) {
+        this.statusTab = tab.id ?? tab;
+    }
+
+    @action async refreshInvitations() {
+        try {
+            this.invitations = await this.network.loadInvitations();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action async afterInvitationsSent() {
+        await this.refreshInvitations();
+        return this.hostRouter.refresh();
+    }
+
+    @action async resendInvitation(invitation) {
+        try {
+            await this.network.resendInvitation(invitation);
+            this.notifications.success(this.intl.t('storefront.networks.invitations.resent', { email: invitation.email }));
+            await this.refreshInvitations();
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action revokeInvitation(invitation) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('storefront.networks.invitations.revoke-title', { email: invitation.email }),
+            body: this.intl.t('storefront.networks.invitations.revoke-body'),
+            acceptButtonText: this.intl.t('storefront.networks.invitations.revoke'),
+            acceptButtonScheme: 'danger',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.network.revokeInvitation(invitation);
+                    await this.refreshInvitations();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
                 }
             },
-            removeRecipient: (index) => {
-                const recipients = this.modalsManager.getOption('recipients');
-                recipients.removeAt(index);
-
-                if (recipients.length === 0) {
-                    this.modalsManager.setOption('acceptButtonDisabled', true);
-                } else {
-                    this.modalsManager.setOption('acceptButtonDisabled', false);
+        });
+    }
+
+    /**
+     * Assign one category to every selected store.
+     */
+    @action assignCategoryToSelected() {
+        const stores = this.selectedStores;
+
+        if (!stores.length) {
+            return;
+        }
+
+        this.modalsManager.show('modals/add-store-to-category', {
+            title: this.intl.t('storefront.networks.invitations.assign-category-count', { count: stores.length }),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.stores.assign-category'),
+            acceptButtonIcon: 'check',
+            network: this.network,
+            store: stores[0],
+            category: null,
+            setCategory: (category) => this.modalsManager.setOption('category', category),
+            confirm: async (modal) => {
+                const category = modal.getOption('category');
+
+                if (!category) {
+                    return this.notifications.warning(this.intl.t('storefront.networks.invitations.pick-a-category'));
                 }
-            },
-            toggleShareableLink: (enabled) => {
-                set(this.network, 'options.shareable_link_enabled', enabled);
-                this.network.save();
-            },
-            confirm: (modal) => {
-                modal.startLoading();
 
-                const recipients = modal.getOption('recipients');
-                const isValid = recipients.every((email) => isEmail(email));
+                modal.startLoading();
 
-                if (!isValid) {
+                try {
+                    for (const store of stores) {
+                        await this.fetch.post(`networks/${this.network.id}/set-store-category`, { store: store.id, category: category.id }, { namespace: 'storefront/int/v1' });
+                    }
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
                     modal.stopLoading();
-
-                    return this.notifications.error(this.intl.t('storefront.networks.index.network.stores.invalid-emails-provided-error'));
+                    this.notifications.serverError(error);
                 }
+            },
+        });
+    }
+
+    /**
+     * Remove every selected store from the network.
+     */
+    @action removeSelected() {
+        const stores = this.selectedStores;
+
+        if (!stores.length) {
+            return;
+        }
 
-                return this.network.sendInvites(recipients).then(() => {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.networks.invitations.remove-count-title', { count: stores.length, networkName: this.network.name }),
+            body: this.intl.t('storefront.networks.invitations.remove-body'),
+            acceptButtonText: this.intl.t('storefront.networks.index.network.stores.remove-store-from-network'),
+            acceptButtonScheme: 'danger',
+            acceptButtonIcon: 'trash',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.network.removeStores(stores);
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
                     modal.stopLoading();
-                    this.notifications.success(this.intl.t('storefront.networks.index.network.stores.invitation-sent-recipients'));
-                });
+                    this.notifications.serverError(error);
+                }
             },
         });
     }
 
+    @action clearSelection() {
+        this.selectedStores.forEach((row) => set(row, 'checked', false));
+    }
+
     /**
      * The columns with what extensions registered under `storefront:network-store:table` merged in.
      *
diff --git a/addon/helpers/width-style.js b/addon/helpers/width-style.js
new file mode 100644
index 00000000..2ee30ed4
--- /dev/null
+++ b/addon/helpers/width-style.js
@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * A safe inline width for share bars: `{{width-style 42}}` → `width: 42%`.
+ */
+export default helper(function widthStyle([percent]) {
+    const value = Math.max(0, Math.min(100, Number(percent) || 0));
+
+    return htmlSafe(`width: ${value}%`);
+});
diff --git a/addon/instance-initializers/register-storefront-resource-descriptors.js b/addon/instance-initializers/register-storefront-resource-descriptors.js
new file mode 100644
index 00000000..21f31575
--- /dev/null
+++ b/addon/instance-initializers/register-storefront-resource-descriptors.js
@@ -0,0 +1,125 @@
+import { get } from '@ember/object';
+
+/**
+ * Registers the Storefront resources (store, network) with the shared resource
+ * identity registry so they render as identity cells, pills and summaries with
+ * the same components every other resource uses. Runs for the host and again for
+ * the engine; only fills in keys nobody has registered.
+ */
+export function initialize(owner) {
+    let registry;
+
+    try {
+        registry = owner.lookup('service:resource-registry');
+    } catch {
+        registry = null;
+    }
+
+    if (!registry || typeof registry.registerDescriptors !== 'function') {
+        return;
+    }
+
+    const missing = buildStorefrontResourceDescriptors(owner).filter((descriptor) => !isRegistered(registry, descriptor.key));
+
+    if (missing.length) {
+        registry.registerDescriptors(missing);
+    }
+}
+
+export function buildStorefrontResourceDescriptors(owner) {
+    const first = (record, ...paths) => {
+        for (const path of paths) {
+            const value = record ? get(record, path) : undefined;
+            if (value !== undefined && value !== null && value !== '') {
+                return value;
+            }
+        }
+
+        return null;
+    };
+    const online = (record) => (first(record, 'online') === null ? null : Boolean(get(record, 'online')));
+    const presence = (record) => (online(record) === null ? null : online(record) ? 'online' : 'offline');
+    const fact = (label, value, extra = {}) => (value ? { label, value, ...extra } : null);
+    const transitionTo = (route, record) => {
+        try {
+            const hostRouter = owner.lookup('service:host-router');
+            const publicId = get(record, 'public_id');
+
+            if (hostRouter && publicId) {
+                hostRouter.transitionTo(route, publicId);
+                return true;
+            }
+        } catch {
+            // no host router outside the console
+        }
+
+        return false;
+    };
+
+    return [
+        {
+            key: 'store',
+            labelKey: 'storefront.common.store',
+            icon: 'store',
+            modelNames: ['store'],
+            aliases: ['storefront-store'],
+            polymorphicTypes: ['storefront:store', 'Fleetbase\\Storefront\\Models\\Store'],
+            permission: 'storefront view store',
+            statusTones: {
+                online: 'text-green-500',
+                offline: 'text-gray-400',
+            },
+            title: (store) => first(store, 'name', 'public_id'),
+            identifier: (store) => first(store, 'currency', 'public_id'),
+            image: (store) => first(store, 'logo_url'),
+            online,
+            status: presence,
+            badges: (store) => [first(store, 'currency') ? { key: 'currency', icon: 'coins', label: first(store, 'currency') } : null].filter(Boolean),
+            selectDetails: (store) => [first(store, 'currency'), first(store, 'email')],
+            facts: (store) => [
+                fact('email', first(store, 'email')),
+                fact('phone', first(store, 'phone')),
+                fact('website', first(store, 'website')),
+                fact('currency', first(store, 'currency')),
+                fact('timezone', first(store, 'timezone')),
+            ],
+            canOpen: () => false,
+        },
+        {
+            key: 'network',
+            labelKey: 'storefront.common.network',
+            icon: 'network-wired',
+            modelNames: ['network'],
+            aliases: ['storefront-network'],
+            polymorphicTypes: ['storefront:network', 'Fleetbase\\Storefront\\Models\\Network'],
+            permission: 'storefront view network',
+            statusTones: {
+                online: 'text-green-500',
+                offline: 'text-gray-400',
+            },
+            title: (network) => first(network, 'name', 'public_id'),
+            identifier: (network) => first(network, 'currency', 'public_id'),
+            image: (network) => first(network, 'logo_url'),
+            online,
+            status: presence,
+            badges: (network) => [first(network, 'stores_count') !== null ? { key: 'stores', icon: 'store', label: `${first(network, 'stores_count')} stores` } : null].filter(Boolean),
+            selectDetails: (network) => [first(network, 'currency'), first(network, 'email')],
+            facts: (network) => [fact('email', first(network, 'email')), fact('phone', first(network, 'phone')), fact('website', first(network, 'website')), fact('currency', first(network, 'currency'))],
+            canOpen: () => true,
+            open: (network) => transitionTo('console.storefront.networks.index.network.index', network),
+        },
+    ];
+}
+
+function isRegistered(registry, key) {
+    try {
+        return Boolean(typeof registry.getDescriptor === 'function' ? registry.getDescriptor(key) : registry.descriptors?.some?.((descriptor) => descriptor.key === key));
+    } catch {
+        return false;
+    }
+}
+
+export default {
+    name: 'register-storefront-resource-descriptors',
+    initialize,
+};
diff --git a/addon/models/network.js b/addon/models/network.js
index e168842f..fac10611 100644
--- a/addon/models/network.js
+++ b/addon/models/network.js
@@ -37,6 +37,7 @@ export default class NetworkModel extends Model {
     @attr('string') timezone;
     @attr('boolean') online;
     @attr('number') stores_count;
+    @attr('raw') invitations;
     @attr('object') options;
     @attr('string') logo_url;
     @attr('string') backdrop_url;
@@ -154,13 +155,49 @@ export default class NetworkModel extends Model {
         return fetch.post(`networks/${this.id}/remove-stores`, { stores }, { namespace: 'storefront/int/v1' });
     }
 
-    sendInvites(recipients = []) {
+    /**
+     * Send invitations. Accepts a list of emails, or `{ recipients, category_uuid, expires_in_days, message, require_approval }`.
+     */
+    sendInvites(payload = []) {
         const owner = getOwner(this);
         const fetch = owner.lookup(`service:fetch`);
+        const options = Array.isArray(payload) ? { recipients: payload } : { ...payload };
 
         // only send to valid recipients
-        recipients = recipients.filter((email) => isEmail(email));
+        options.recipients = (options.recipients ?? []).filter((email) => isEmail(email));
 
-        return fetch.post(`networks/${this.id}/invite`, { recipients }, { namespace: 'storefront/int/v1' });
+        return fetch.post(`networks/${this.id}/invite`, options, { namespace: 'storefront/int/v1' });
+    }
+
+    loadInvitations() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.get(`networks/${this.id}/invitations`, {}, { namespace: 'storefront/int/v1' }).then((invitations) => {
+            this.invitations = Array.isArray(invitations) ? invitations : [];
+
+            return this.invitations;
+        });
+    }
+
+    resendInvitation(invitation, options = {}) {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.post(`networks/${this.id}/invitations/${invitation.id ?? invitation}/resend`, options, { namespace: 'storefront/int/v1' });
+    }
+
+    revokeInvitation(invitation) {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.delete(`networks/${this.id}/invitations/${invitation.id ?? invitation}`, {}, { namespace: 'storefront/int/v1' });
+    }
+
+    loadOverview() {
+        const owner = getOwner(this);
+        const fetch = owner.lookup(`service:fetch`);
+
+        return fetch.get(`networks/${this.id}/overview`, {}, { namespace: 'storefront/int/v1' });
     }
 }
diff --git a/addon/routes.js b/addon/routes.js
index 8d5a1e6f..5f901b0c 100644
--- a/addon/routes.js
+++ b/addon/routes.js
@@ -39,6 +39,7 @@ export default buildRoutes(function () {
                 this.route('trucks');
                 this.route('customers');
                 this.route('orders');
+                this.route('settings');
             });
         });
     });
diff --git a/addon/routes/networks/index/network/customers.js b/addon/routes/networks/index/network/customers.js
index 64f2d56b..e46b7b9b 100644
--- a/addon/routes/networks/index/network/customers.js
+++ b/addon/routes/networks/index/network/customers.js
@@ -20,6 +20,6 @@ export default class NetworksIndexNetworkCustomersRoute extends Route {
     };
 
     model(params) {
-        return this.store.query('customer', { ...params, storefront: this.modelFor('networks.index.network').public_id });
+        return this.store.query('customer', { ...params, network: this.modelFor('networks.index.network').public_id });
     }
 }
diff --git a/addon/routes/networks/index/network/index.js b/addon/routes/networks/index/network/index.js
index d7489cba..42ad56d8 100644
--- a/addon/routes/networks/index/network/index.js
+++ b/addon/routes/networks/index/network/index.js
@@ -1,15 +1,32 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
 
+/**
+ * The network overview: members, invitations, the last seven days of orders and revenue.
+ */
 export default class NetworksIndexNetworkIndexRoute extends Route {
-    @service store;
+    @service fetch;
+    @service notifications;
 
-    model() {
+    get network() {
         return this.modelFor('networks.index.network');
     }
 
-    async setupController(controller) {
+    model() {
+        const { network } = this;
+
+        return hash({
+            network,
+            overview: this.fetch.get(`networks/${network.id}/overview`, {}, { namespace: 'storefront/int/v1' }).catch(() => null),
+            invitations: this.fetch.get(`networks/${network.id}/invitations`, {}, { namespace: 'storefront/int/v1' }).catch(() => []),
+        });
+    }
+
+    setupController(controller, model) {
         super.setupController(...arguments);
-        controller.orderConfigs = await this.store.findAll('order-config');
+        controller.network = model.network;
+        controller.overview = model.overview;
+        controller.invitations = model.invitations ?? [];
     }
 }
diff --git a/addon/routes/networks/index/network/orders.js b/addon/routes/networks/index/network/orders.js
index b4004837..d6658315 100644
--- a/addon/routes/networks/index/network/orders.js
+++ b/addon/routes/networks/index/network/orders.js
@@ -14,7 +14,7 @@ export default class NetworksIndexNetworkOrdersRoute extends Route {
     }
 
     buildQueryParams(params = {}) {
-        return Object.entries({ ...params, storefront: this.modelFor('networks.index.network').public_id }).reduce((queryParams, [key, value]) => {
+        return Object.entries({ ...params, network: this.modelFor('networks.index.network').public_id }).reduce((queryParams, [key, value]) => {
             if (value !== undefined && value !== null && value !== '') {
                 queryParams[key] = value;
             }
diff --git a/addon/routes/networks/index/network/settings.js b/addon/routes/networks/index/network/settings.js
new file mode 100644
index 00000000..e970a9fc
--- /dev/null
+++ b/addon/routes/networks/index/network/settings.js
@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class NetworksIndexNetworkSettingsRoute extends Route {
+    @service store;
+
+    model() {
+        return this.modelFor('networks.index.network');
+    }
+
+    async setupController(controller) {
+        super.setupController(...arguments);
+        controller.orderConfigs = await this.store.findAll('order-config');
+    }
+}
diff --git a/addon/routes/networks/index/network/stores.js b/addon/routes/networks/index/network/stores.js
index 6f8870a6..710c5de4 100644
--- a/addon/routes/networks/index/network/stores.js
+++ b/addon/routes/networks/index/network/stores.js
@@ -23,6 +23,7 @@ export default class NetworksIndexNetworkStoresRoute extends Route {
 
         // set the network to controller
         controller.network = this.network;
+        controller.invitations = (await this.network.loadInvitations().catch(() => [])) ?? [];
 
         // set the cateogry if set
         const { category: categoryId } = this.paramsFor(this.routeName);
diff --git a/addon/styles/storefront-engine.css b/addon/styles/storefront-engine.css
index 69146f0c..603a83b0 100644
--- a/addon/styles/storefront-engine.css
+++ b/addon/styles/storefront-engine.css
@@ -3639,3 +3639,409 @@ body[data-theme='dark'] .storefront-network-page__meta {
     flex: 1 1 auto;
     min-height: 0;
 }
+
+/* Network overview: stat tiles, member rows, share bars */
+.storefront-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 0.75rem;
+}
+
+@media (max-width: 1200px) {
+    .storefront-stat-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .storefront-stat-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+.storefront-stat-tile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+}
+
+body[data-theme='dark'] .storefront-stat-tile {
+    border-color: #374151;
+    background-color: #1f2937;
+}
+
+.storefront-stat-tile__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-stat-tile__label {
+    color: #9ca3af;
+}
+
+.storefront-stat-tile__value {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 600;
+    color: #111827;
+}
+
+body[data-theme='dark'] .storefront-stat-tile__value {
+    color: #f3f4f6;
+}
+
+.storefront-stat-tile__hint {
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-stat-tile__hint {
+    color: #9ca3af;
+}
+
+.storefront-member-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.storefront-member-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 0.875rem;
+}
+
+body[data-theme='dark'] .storefront-member-row {
+    border-color: #374151;
+}
+
+.storefront-member-row:last-child {
+    border-bottom: 0;
+}
+
+.storefront-member-row--link {
+    border-top: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+}
+
+body[data-theme='dark'] .storefront-member-row--link {
+    border-color: #374151;
+    background-color: rgb(55 65 81 / 50%);
+}
+
+.storefront-member-row__logo {
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+    border-radius: 0.375rem;
+    object-fit: cover;
+    border: 1px solid #e5e7eb;
+}
+
+.storefront-member-row__logo--icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6b7280;
+    background-color: #f3f4f6;
+}
+
+body[data-theme='dark'] .storefront-member-row__logo {
+    border-color: #4b5563;
+}
+
+body[data-theme='dark'] .storefront-member-row__logo--icon {
+    color: #9ca3af;
+    background-color: #374151;
+}
+
+.storefront-member-row__identity {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.storefront-member-row__name {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 600;
+    color: #111827;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .storefront-member-row__name {
+    color: #f3f4f6;
+}
+
+.storefront-member-row__meta,
+.storefront-member-row__share-label {
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-member-row__meta,
+body[data-theme='dark'] .storefront-member-row__share-label {
+    color: #9ca3af;
+}
+
+.storefront-member-row__share {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    width: 14rem;
+    flex-shrink: 0;
+}
+
+.storefront-member-row__amount {
+    font-weight: 600;
+    color: #111827;
+    white-space: nowrap;
+}
+
+body[data-theme='dark'] .storefront-member-row__amount {
+    color: #f3f4f6;
+}
+
+.storefront-member-row__link {
+    max-width: 18rem;
+    font-size: 0.75rem;
+}
+
+.storefront-share-bar {
+    height: 0.375rem;
+    border-radius: 9999px;
+    background-color: #e5e7eb;
+    overflow: hidden;
+}
+
+body[data-theme='dark'] .storefront-share-bar {
+    background-color: #374151;
+}
+
+.storefront-share-bar__fill {
+    height: 100%;
+    border-radius: 9999px;
+    background-color: #0ea5e9;
+}
+
+.storefront-empty-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-empty-row {
+    color: #9ca3af;
+}
+
+/* Status tabs above a table */
+.storefront-status-tabs {
+    display: flex;
+    gap: 0.25rem;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-status-tabs {
+    border-color: #374151;
+}
+
+.storefront-status-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    background: none;
+}
+
+.storefront-status-tab:hover {
+    color: #111827;
+}
+
+.storefront-status-tab.is-active {
+    color: #0284c7;
+    border-bottom-color: #0284c7;
+}
+
+body[data-theme='dark'] .storefront-status-tab {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .storefront-status-tab:hover {
+    color: #f3f4f6;
+}
+
+body[data-theme='dark'] .storefront-status-tab.is-active {
+    color: #38bdf8;
+    border-bottom-color: #38bdf8;
+}
+
+.storefront-status-tab__count {
+    padding: 0 0.375rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    background-color: #f3f4f6;
+    color: #374151;
+}
+
+body[data-theme='dark'] .storefront-status-tab__count {
+    background-color: #374151;
+    color: #e5e7eb;
+}
+
+/* Bulk action bar shown while rows are selected */
+.storefront-bulk-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #bae6fd;
+    border-radius: 0.375rem;
+    background-color: #f0f9ff;
+    font-size: 0.875rem;
+}
+
+body[data-theme='dark'] .storefront-bulk-bar {
+    border-color: #0c4a6e;
+    background-color: rgb(12 74 110 / 35%);
+}
+
+.storefront-bulk-bar__count {
+    font-weight: 600;
+    color: #0369a1;
+    margin-right: 0.25rem;
+}
+
+body[data-theme='dark'] .storefront-bulk-bar__count {
+    color: #7dd3fc;
+}
+
+.storefront-invitation-list {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+body[data-theme='dark'] .storefront-invitation-list {
+    border-color: #374151;
+}
+
+.storefront-invitation-list__title {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #6b7280;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-invitation-list__title {
+    color: #9ca3af;
+    background-color: rgb(55 65 81 / 50%);
+    border-color: #374151;
+}
+
+.storefront-invitation-list__note {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+/* Invite panel */
+.storefront-invite-panel__lede {
+    padding: 0.75rem 1rem 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-invite-panel__lede {
+    color: #9ca3af;
+}
+
+.storefront-invite-panel__tabs {
+    display: flex;
+    gap: 0.25rem;
+    margin: 0.75rem 1rem 0;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-invite-panel__tabs {
+    border-color: #374151;
+}
+
+.storefront-invite-panel__tab {
+    padding: 0.5rem 0.75rem;
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    background: none;
+}
+
+.storefront-invite-panel__tab.is-active {
+    color: #0284c7;
+    border-bottom-color: #0284c7;
+}
+
+body[data-theme='dark'] .storefront-invite-panel__tab {
+    color: #9ca3af;
+}
+
+body[data-theme='dark'] .storefront-invite-panel__tab.is-active {
+    color: #38bdf8;
+    border-bottom-color: #38bdf8;
+}
+
+.storefront-invite-panel__section {
+    padding: 1rem;
+}
+
+.storefront-invite-panel__flag {
+    margin-top: 0.375rem;
+    font-size: 0.75rem;
+    color: #b45309;
+}
+
+.storefront-invite-panel__flag--error {
+    color: #b91c1c;
+}
+
+.storefront-invite-panel__hint {
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+.storefront-invite-panel__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid #e5e7eb;
+}
+
+body[data-theme='dark'] .storefront-invite-panel__footer {
+    border-color: #374151;
+}
diff --git a/addon/templates/networks/index/network/index.hbs b/addon/templates/networks/index/network/index.hbs
index e0d28ae5..7216f968 100644
--- a/addon/templates/networks/index/network/index.hbs
+++ b/addon/templates/networks/index/network/index.hbs
@@ -1,463 +1,130 @@
-<div class="space-y-2">
-    <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-title"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
-        <div class="space-y-4">
-            <div>
-                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                    {{t "storefront.networks.index.network.index.general-network-settings-title"}}
-                </h1>
-                <p class="mt-1 text-sm text-gray-500">
-                    {{t "storefront.networks.index.network.index.general-network-settings-subtitle"}}
-                </p>
-            </div>
-
-            <InputGroup
-                @name={{t "storefront.networks.index.network.index.general-network-settings-form.name"}}
-                @value={{@model.name}}
-                @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.name-placeholder"}}
-                @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.name-help-text"}}
-            />
-            <InputGroup
-                @name={{t "storefront.networks.index.network.index.general-network-settings-form.description"}}
-                @value={{@model.description}}
-                @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.description-placeholder"}}
-                @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.description-help-text"}}
-            />
-
-            <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.currency"}}>
-                <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
-            </InputGroup>
-
-            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this network.">
-                <Select
-                    @value={{@model.order_config_uuid}}
-                    @options={{this.orderConfigs}}
-                    @optionValue="id"
-                    @optionLabel="name"
-                    @onSelect={{fn (mut @model.order_config_uuid)}}
-                    @placeholder="Select default order config"
-                    class="w-full"
-                />
-            </InputGroup>
-
-            <ContentPanel
-                @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}}
-                @open={{false}}
-                @wrapperClass="bordered-classic"
-            >
-                <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.phone"}}>
-                    <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
-                </InputGroup>
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
-                    @value={{@model.email}}
-                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email-help-text"}}
-                />
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
-                    @value={{@model.website}}
-                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website-help-text"}}
-                />
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
-                    @value={{@model.facebook}}
-                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook-help-text"}}
-                />
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
-                    @value={{@model.instagram}}
-                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram-help-text"}}
-                />
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
-                    @value={{@model.twitter}}
-                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter-help-text"}}
-                />
-            </ContentPanel>
-
-            <ContentPanel
-                @title={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.panel-title"}}
-                @open={{false}}
-                @wrapperClass="bordered-classic"
-            >
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-label"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-help-text"}}
-                >
-                    <div class="flex flex-row items-center">
-                        <img src={{@model.logo_url}} alt={{concat @model.name " logo"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
-                        <FileUpload @name="logo" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_logo"}} as |queue|>
-                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
-                                {{#if queue.files.length}}
-                                    <Spinner class="mr-1" />
-                                    <span>
-                                        {{t "storefront.common.uploading"}}
-                                    </span>
-                                {{else}}
-                                    <FaIcon @icon="image" class="mr-1" />
-                                    <span>
-                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-logo-button-text"}}
-                                    </span>
-                                {{/if}}
-                            </a>
-                        </FileUpload>
-                    </div>
-                </InputGroup>
-
-                <InputGroup
-                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-label"}}
-                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-help-text"}}
-                >
-                    <div class="flex flex-row items-center">
-                        <img src={{@model.backdrop_url}} alt={{concat @model.name " backdrop"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
-                        <FileUpload @name="backdrop" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_backdrop"}} as |queue|>
-                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
-                                {{#if queue.files.length}}
-                                    <Spinner class="mr-1" />
-                                    <span>
-                                        {{t "storefront.common.uploading"}}
-                                    </span>
-                                {{else}}
-                                    <FaIcon @icon="image" class="mr-1" />
-                                    <span>
-                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-backdrop-button-text"}}
-                                    </span>
-                                {{/if}}
-                            </a>
-                        </FileUpload>
-                    </div>
-                </InputGroup>
-            </ContentPanel>
-
-            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-title"}} @open={{false}} @wrapperClass="bordered-classic">
-                <div>
-                    <p class="dark:text-gray-100 mb-4">{{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-description"}}</p>
-                    <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-label"}} @wrapperClass="mb-0">
-                        <ModelSelectMultiple
-                            @modelName="user"
-                            @selectedItemComponent={{component "select-option/user" compact=true}}
-                            @selectedModel={{@model.alertable.for_new_order}}
-                            @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-placeholder"}}
-                            @triggerClass="form-select form-input multiple"
-                            @infiniteScroll={{false}}
-                            @renderInPlace={{true}}
-                            @onChange={{fn this.makeAlertable "for_new_order"}}
-                            as |model|
-                        >
-                            <SelectOption::User @option={{model}} />
-                        </ModelSelectMultiple>
-                    </InputGroup>
-                </div>
-            </ContentPanel>
+<Layout::Section::Header @title={{t "storefront.networks.index.network.overview"}}>
+    <Button @icon="store" @text={{t "storefront.networks.index.network.stores.store"}} @size="sm" @onClick={{this.manageStores}} @wrapperClass="mr-2" />
+    <Button @icon="cog" @text={{t "storefront.networks.index.network.settings"}} @size="sm" @onClick={{this.openSettings}} @wrapperClass="mr-2" @permission="storefront update network" />
+    <Button @type="primary" @icon="envelope-open-text" @text={{t "storefront.networks.invitations.invite-stores"}} @size="sm" @onClick={{fn this.openInvitePanel "email"}} @permission="storefront update network" />
+</Layout::Section::Header>
 
-            <div class="store-boolean-settings">
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.online}} @onToggle={{fn (mut @model.online)}}>
-                        <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.online"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.tax_enabled}} @onToggle={{fn (mut @model.options.tax_enabled)}}>
-                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tax"
-                            }}</span>
-                    </Toggle>
-                    {{#if @model.options.tax_enabled}}
-                        <InputGroup
-                            @wrapperClass="mb-0 mt-2"
-                            @type="number"
-                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-label"}}
-                            @value={{@model.options.tax_percentage}}
-                            @placeholder={{t "storefront.networks.index.network.index.placeholder-tax"}}
-                            @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-help-text"}}
-                        />
-                    {{/if}}
-                </div>
-                <div class="input-group">
-                    <Toggle
-                        @isToggled={{@model.options.required_checkout_min}}
-                        @onToggle={{fn (mut @model.options.required_checkout_min)}}
-                        @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.minimum-order-amount-input-help-text"}}
-                    >
-                        <FaIcon @icon="dollar-sign" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-minimum-order-amount"
-                            }}</span>
-                    </Toggle>
-                    {{#if @model.options.required_checkout_min}}
-                        <MoneyInput
-                            @wrapperClass="mb-0 mt-2"
-                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.minimum-order-amount-input-label"}}
-                            @value={{@model.options.required_checkout_min_amount}}
-                            @currency={{@model.currency}}
-                        />
-                    {{/if}}
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.auto_accept_orders}} @onToggle={{fn (mut @model.options.auto_accept_orders)}}>
-                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-accept-incoming-orders"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.auto_dispatch}} @onToggle={{fn (mut @model.options.auto_dispatch)}}>
-                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-dispatch-orders"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.require_pod}} @onToggle={{fn (mut @model.options.require_pod)}}>
-                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.require-proof-of-delivery"
-                            }}</span>
-                    </Toggle>
-                    {{#if @model.options.require_pod}}
-                        <InputGroup
-                            @wrapperClass="mb-0 mt-2"
-                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.proof-of-delivery-method-label"}}
-                        >
-                            <Select
-                                @options={{this.podMethods}}
-                                @optionValue="value"
-                                @optionLabel="name"
-                                @value={{@model.pod_method}}
-                                @onSelect={{fn (mut @model.pod_method)}}
-                                class="w-full"
-                            />
-                        </InputGroup>
-                    {{/if}}
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.cod_enabled}} @onToggle={{fn (mut @model.options.cod_enabled)}}>
-                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-cash-on-delivery"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.pickup_enabled}} @onToggle={{fn (mut @model.options.pickup_enabled)}}>
-                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-order-pickup"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.tips_enabled}} @onToggle={{fn (mut @model.options.tips_enabled)}}>
-                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tips"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.delivery_tips_enabled}} @onToggle={{fn (mut @model.options.delivery_tips_enabled)}}>
-                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-delivery-tips"
-                            }}</span>
-                    </Toggle>
-                </div>
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.multi_cart_enabled}} @onToggle={{fn (mut @model.options.multi_cart_enabled)}}>
-                        <FaIcon @icon="gifts" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-multi-cart-checkout"
-                            }}</span>
-                    </Toggle>
-                </div>
-                {{#if (and @model.options.tips_enabled @model.options.multi_cart_enabled)}}
-                    {{! Off: a multi-store order's store tip goes to the network. On: it is split across the stores by their share of the order. }}
-                    <div class="input-group">
-                        <Toggle @isToggled={{@model.options.split_tips_across_stores}} @onToggle={{fn (mut @model.options.split_tips_across_stores)}}>
-                            <FaIcon @icon="code-branch" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                    "storefront.networks.index.network.index.general-network-settings-form.config-switches.split-tips-across-stores"
-                                }}</span>
-                        </Toggle>
-                    </div>
-                {{/if}}
-                <div class="input-group">
-                    <Toggle @isToggled={{@model.options.reviews_enabled}} @onToggle={{fn (mut @model.options.reviews_enabled)}}>
-                        <FaIcon @icon="star" @prefix="fas" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
-                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-user-reviews"
-                            }}</span>
-                    </Toggle>
-                </div>
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <div class="storefront-network-overview p-4 space-y-4" data-test-network-overview>
+        <div class="storefront-stat-grid">
+            <div class="storefront-stat-tile" data-test-stat="stores">
+                <div class="storefront-stat-tile__label">{{t "storefront.networks.index.network.stores.store"}}</div>
+                <div class="storefront-stat-tile__value">{{this.overview.stores.total}}</div>
+                <div class="storefront-stat-tile__hint">{{t "storefront.networks.overview.online-count" count=this.overview.stores.online}}</div>
             </div>
-
-            <div class="flex justify-end">
-                <Button
-                    @type="primary"
-                    @text={{t "storefront.networks.index.network.index.general-network-settings-form.save-changes-button-text"}}
-                    @icon="save"
-                    @size="lg"
-                    @isLoading={{this.isLoading}}
-                    @onClick={{this.saveSettings}}
-                />
+            <div class="storefront-stat-tile" data-test-stat="invitations">
+                <div class="storefront-stat-tile__label">{{t "storefront.networks.invitations.title"}}</div>
+                <div class="storefront-stat-tile__value">{{this.pendingCount}}</div>
+                <div class="storefront-stat-tile__hint">{{t "storefront.networks.overview.invitations-hint" declined=this.declinedCount}}</div>
             </div>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title={{t "storefront.networks.index.network.index.api-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
-        <div class="space-y-6">
-            <div>
-                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                    {{t "storefront.networks.index.network.index.api-panel.panel-header"}}
-                </h1>
-                <p class="mt-1 text-sm text-gray-500">
-                    {{t "storefront.networks.index.network.index.api-panel.panel-description"}}
-                </p>
+            <div class="storefront-stat-tile" data-test-stat="orders">
+                <div class="storefront-stat-tile__label">{{t "storefront.networks.overview.orders-7d"}}</div>
+                <div class="storefront-stat-tile__value">{{this.overview.orders.count_7d}}</div>
+                <div class="storefront-stat-tile__hint">{{t "storefront.networks.overview.multi-store-count" count=this.overview.orders.multi_store_7d}}</div>
             </div>
-
-            <InputGroup
-                @name={{t "storefront.networks.index.network.index.api-panel.network-key-label"}}
-                @helpText={{t "storefront.networks.index.network.index.api-panel.network-key-help-text"}}
-            >
-                <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
-            </InputGroup>
-        </div>
-    </ContentPanel>
-
-    <ContentPanel @title={{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
-        <div class="space-y-6">
-            <div class="flex justify-between">
-                <div>
-                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}}
-                    </h1>
-                    <p class="mt-1 text-sm text-gray-500">
-                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-description"}}
-                    </p>
-                </div>
-                <div>
-                    <Button
-                        @icon="plus"
-                        @iconPrefix="fas"
-                        @type="primary"
-                        @text={{t "storefront.networks.index.network.index.payment-gateways-panel.new-gateway-button-text"}}
-                        @onClick={{this.createGateway}}
-                    />
-                </div>
+            <div class="storefront-stat-tile" data-test-stat="revenue">
+                <div class="storefront-stat-tile__label">{{t "storefront.networks.overview.revenue-7d"}}</div>
+                <div class="storefront-stat-tile__value">{{format-currency this.overview.revenue.total_7d this.currency}}</div>
+                <div class="storefront-stat-tile__hint">{{t "storefront.networks.overview.tips-hint" tips=(format-currency this.overview.revenue.tips_7d this.currency)}}</div>
+            </div>
+            <div class="storefront-stat-tile" data-test-stat="customers">
+                <div class="storefront-stat-tile__label">{{t "storefront.common.customers"}}</div>
+                <div class="storefront-stat-tile__value">{{this.overview.customers.total}}</div>
+                <div class="storefront-stat-tile__hint">{{t "storefront.networks.overview.new-customers" count=this.overview.customers.new_this_month}}</div>
             </div>
-
-            {{#each this.gateways as |gateway|}}
-                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
-                    {{! Read-only summary; changes are made in the gateway modal, which saves them. }}
-                    <InputGroup
-                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name"}}
-                        @value={{gateway.name}}
-                        @disabled={{true}}
-                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name-help-text"}}
-                    />
-                    <InputGroup
-                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code"}}
-                        @value={{gateway.code}}
-                        @disabled={{true}}
-                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code-help-text"}}
-                    />
-                    <InputGroup
-                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url"}}
-                        @value={{gateway.callback_url}}
-                        @disabled={{true}}
-                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url-help-text"}}
-                    />
-                    <InputGroup
-                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url"}}
-                        @value={{gateway.return_url}}
-                        @disabled={{true}}
-                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url-help-text"}}
-                    />
-                    <div class="input-group">
-                        <Checkbox
-                            @value={{gateway.sandbox}}
-                            @label={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.sandbox-toggle-label"}}
-                            @disabled={{true}}
-                        />
-                    </div>
-                    <div>
-                        <h4 class="mb-2 font-semibold text-sm dark:text-white">{{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.config-header-label"}}</h4>
-                        {{#each-in gateway.config as |key value|}}
-                            {{#if (is-bool-value value)}}
-                                <div class="input-group">
-                                    <Checkbox @value={{value}} @label={{smart-humanize key}} @disabled={{true}} />
-                                </div>
-                            {{else}}
-                                <InputGroup @name={{smart-humanize key}}>
-                                    <Input
-                                        @type={{if (can "storefront update gateway") "text" "password"}}
-                                        class="form-input w-full"
-                                        placeholder={{humanize key}}
-                                        @value={{value}}
-                                        disabled
-                                    />
-                                </InputGroup>
-                            {{/if}}
-                        {{/each-in}}
-                    </div>
-                    <div class="flex flex-row items-center space-x-2">
-                        {{#if (can "storefront update gateway")}}
-                            <Button
-                                @size="sm"
-                                @type="primary"
-                                @icon="pencil"
-                                @text={{t "storefront.settings.gateways.edit-payment-gateway"}}
-                                @onClick={{fn this.editGateway gateway null}}
-                            />
-                        {{/if}}
-                        {{#if (can "storefront delete gateway")}}
-                            <Button
-                                @size="sm"
-                                @type="danger"
-                                @icon="trash"
-                                @text={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.delete-gateway-button-text"}}
-                                @onClick={{fn this.deleteGateway gateway}}
-                            />
-                        {{/if}}
-                    </div>
-                </ContentPanel>
-            {{/each}}
         </div>
-    </ContentPanel>
 
-    <ContentPanel @title={{t "storefront.networks.index.network.index.notification-channels-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
-        <div class="space-y-6">
-            <div class="flex justify-between">
-                <div class="w-3/4">
-                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
-                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-header"}}
-                    </h1>
-                    <p class="mt-1 text-sm text-gray-500">
-                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-description"}}
-                    </p>
+        <ContentPanel @title={{t "storefront.networks.overview.members-title" count=this.members.length}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0">
+            {{#if this.members.length}}
+                <div class="storefront-member-list">
+                    {{#each this.members as |member|}}
+                        <div class="storefront-member-row" data-test-member-row={{member.public_id}}>
+                            <Image src={{member.logo_url}} @fallbackSrc={{config "defaultValues.placeholderImage"}} alt={{member.name}} class="storefront-member-row__logo" />
+                            <div class="storefront-member-row__identity">
+                                <div class="storefront-member-row__name">
+                                    <span>{{member.name}}</span>
+                                    <FaIcon @icon="circle" @size="xs" class="storefront-card__indicator {{if member.online 'text-green-500' 'text-gray-400'}}" />
+                                </div>
+                                <div class="storefront-member-row__meta">{{member.currency}} · {{t "storefront.networks.overview.orders-count-7d" count=member.orders_7d}}</div>
+                            </div>
+                            <div class="storefront-member-row__share">
+                                <div class="storefront-member-row__share-label">{{format-currency member.revenue_7d this.currency}} · {{t "storefront.networks.overview.share-of-network" share=member.revenue_share}}</div>
+                                <div class="storefront-share-bar"><div class="storefront-share-bar__fill" style={{width-style member.share}}></div></div>
+                            </div>
+                            <Badge @status={{if member.online "online" "offline"}} @text={{if member.online (t "storefront.common.online") (t "storefront.common.offline")}} @size="xs" />
+                        </div>
+                    {{/each}}
                 </div>
-                <div>
-                    <Button
-                        @icon="plus"
-                        @iconPrefix="fas"
-                        @type="primary"
-                        @text={{t "storefront.networks.index.network.index.notification-channels-panel.new-channel-button-text"}}
-                        @onClick={{this.createChannel}}
-                    />
+            {{else}}
+                <div class="storefront-empty-row">
+                    <span>{{t "storefront.networks.overview.no-members"}}</span>
+                    <Button @size="xs" @icon="envelope-open-text" @text={{t "storefront.networks.invitations.invite-stores"}} @onClick={{fn this.openInvitePanel "email"}} />
                 </div>
-            </div>
+            {{/if}}
+        </ContentPanel>
 
-            <div class="space-y-3">
-                {{#each this.channels as |notificationChannel|}}
-                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200">
-                        <div>
-                            <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
-                        </div>
-                        <div class="flex items-center">
-                            <Button @size="xs" @type="default" @text={{t "storefront.settings.notification.send-test"}} @wrapperClass="mr-2" @onClick={{fn this.testChannel notificationChannel}} />
-                            <Button @size="xs" @type="default" @text={{t "storefront.common.edit"}} @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
-                            <Button @size="xs" @type="danger" @text={{t "storefront.common.delete"}} @onClick={{fn this.deleteChannel notificationChannel}} />
+        <ContentPanel @title={{t "storefront.networks.invitations.title"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0">
+            {{#if this.openInvitations.length}}
+                <div class="storefront-member-list">
+                    {{#each this.openInvitations as |invitation|}}
+                        <div class="storefront-member-row" data-test-invitation-row={{invitation.id}}>
+                            <div class="storefront-member-row__logo storefront-member-row__logo--icon"><FaIcon @icon="at" /></div>
+                            <div class="storefront-member-row__identity">
+                                <div class="storefront-member-row__name">{{invitation.email}}</div>
+                                <div class="storefront-member-row__meta">{{t "storefront.networks.invitations.sent-ago" ago=invitation.sentAgo}}</div>
+                            </div>
+                            <Badge @status={{invitation.status}} @text={{t (concat "storefront.networks.invitations.status." invitation.status)}} @size="xs" />
+                            <div class="storefront-card__buttons">
+                                {{#if (eq invitation.status "pending")}}
+                                    <Button @size="xs" @icon="paper-plane" @text={{t "storefront.networks.invitations.resend"}} @onClick={{fn this.resendInvitation invitation}} @permission="storefront update network" />
+                                    <Button @size="xs" @icon="ban" @helpText={{t "storefront.networks.invitations.revoke"}} @onClick={{fn this.revokeInvitation invitation}} @permission="storefront update network" />
+                                {{else}}
+                                    <Button @size="xs" @icon="redo" @text={{t "storefront.networks.invitations.invite-again"}} @onClick={{fn this.resendInvitation invitation}} @permission="storefront update network" />
+                                {{/if}}
+                            </div>
                         </div>
-                    </div>
-                {{/each}}
+                    {{/each}}
+                </div>
+            {{else}}
+                <div class="storefront-empty-row">
+                    <span>{{t "storefront.networks.invitations.none"}}</span>
+                    <Button @size="xs" @icon="envelope-open-text" @text={{t "storefront.networks.invitations.invite-stores"}} @onClick={{fn this.openInvitePanel "email"}} />
+                </div>
+            {{/if}}
+            <div class="storefront-member-row storefront-member-row--link">
+                <div class="storefront-member-row__logo storefront-member-row__logo--icon"><FaIcon @icon="link" /></div>
+                <div class="storefront-member-row__identity">
+                    <div class="storefront-member-row__name">{{t "storefront.networks.invitations.shareable-link"}}</div>
+                    <div class="storefront-member-row__meta">{{if this.shareableLinkEnabled (t "storefront.common.on") (t "storefront.common.off")}}</div>
+                </div>
+                {{#if this.shareableLinkEnabled}}
+                    <ClickToCopy @value={{this.shareableLink}} class="storefront-member-row__link truncate" />
+                {{/if}}
+                <Button @size="xs" @icon="cog" @text={{t "storefront.networks.invitations.manage-link"}} @onClick={{fn this.openInvitePanel "link"}} />
             </div>
-        </div>
-    </ContentPanel>
-</div>
\ No newline at end of file
+        </ContentPanel>
+
+        <ContentPanel @title={{t "storefront.networks.overview.recent-orders"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top" @panelBodyClass="p-0" @actionButtons={{array (hash type="link" text=(t "storefront.networks.overview.all-orders") onClick=this.viewOrders size="xs")}}>
+            {{#if this.recentOrders.length}}
+                <div class="storefront-member-list">
+                    {{#each this.recentOrders as |order|}}
+                        <div class="storefront-member-row" data-test-recent-order={{order.public_id}}>
+                            <div class="storefront-member-row__identity">
+                                <div class="storefront-member-row__name">{{order.public_id}}</div>
+                                <div class="storefront-member-row__meta">{{n-a order.customer_name}} · {{n-a order.store_name}}</div>
+                            </div>
+                            <div class="storefront-member-row__amount">{{format-currency order.total order.currency}}</div>
+                            <Badge @status={{order.status}} @size="xs" />
+                        </div>
+                    {{/each}}
+                </div>
+            {{else}}
+                <div class="storefront-empty-row"><span>{{t "storefront.networks.overview.no-orders"}}</span></div>
+            {{/if}}
+        </ContentPanel>
+    </div>
+</Layout::Section::Body>
+
+{{#if this.isInvitePanelOpen}}
+    <Storefront::Network::InvitePanel @network={{this.network}} @activeTab={{this.invitePanelTab}} @onClose={{this.closeInvitePanel}} @onSent={{this.refresh}} />
+{{/if}}
diff --git a/addon/templates/networks/index/network/settings.hbs b/addon/templates/networks/index/network/settings.hbs
new file mode 100644
index 00000000..e0d28ae5
--- /dev/null
+++ b/addon/templates/networks/index/network/settings.hbs
@@ -0,0 +1,463 @@
+<div class="space-y-2">
+    <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-title"}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
+        <div class="space-y-4">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    {{t "storefront.networks.index.network.index.general-network-settings-title"}}
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    {{t "storefront.networks.index.network.index.general-network-settings-subtitle"}}
+                </p>
+            </div>
+
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.general-network-settings-form.name"}}
+                @value={{@model.name}}
+                @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.name-placeholder"}}
+                @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.name-help-text"}}
+            />
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.general-network-settings-form.description"}}
+                @value={{@model.description}}
+                @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.description-placeholder"}}
+                @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.description-help-text"}}
+            />
+
+            <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.currency"}}>
+                <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
+            </InputGroup>
+
+            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this network.">
+                <Select
+                    @value={{@model.order_config_uuid}}
+                    @options={{this.orderConfigs}}
+                    @optionValue="id"
+                    @optionLabel="name"
+                    @onSelect={{fn (mut @model.order_config_uuid)}}
+                    @placeholder="Select default order config"
+                    class="w-full"
+                />
+            </InputGroup>
+
+            <ContentPanel
+                @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}}
+                @open={{false}}
+                @wrapperClass="bordered-classic"
+            >
+                <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.phone"}}>
+                    <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
+                </InputGroup>
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
+                    @value={{@model.email}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.email-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
+                    @value={{@model.website}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.website-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
+                    @value={{@model.facebook}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.facebook-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
+                    @value={{@model.instagram}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.instagram-help-text"}}
+                />
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
+                    @value={{@model.twitter}}
+                    @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.twitter-help-text"}}
+                />
+            </ContentPanel>
+
+            <ContentPanel
+                @title={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.panel-title"}}
+                @open={{false}}
+                @wrapperClass="bordered-classic"
+            >
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-label"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.logo-help-text"}}
+                >
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.logo_url}} alt={{concat @model.name " logo"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="logo" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_logo"}} as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                                {{#if queue.files.length}}
+                                    <Spinner class="mr-1" />
+                                    <span>
+                                        {{t "storefront.common.uploading"}}
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1" />
+                                    <span>
+                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-logo-button-text"}}
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+
+                <InputGroup
+                    @name={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-label"}}
+                    @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.backdrop-help-text"}}
+                >
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.backdrop_url}} alt={{concat @model.name " backdrop"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="backdrop" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_backdrop"}} as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                                {{#if queue.files.length}}
+                                    <Spinner class="mr-1" />
+                                    <span>
+                                        {{t "storefront.common.uploading"}}
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1" />
+                                    <span>
+                                        {{t "storefront.networks.index.network.index.general-network-settings-form.logo-backdrop-panel.upload-backdrop-button-text"}}
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+            </ContentPanel>
+
+            <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-title"}} @open={{false}} @wrapperClass="bordered-classic">
+                <div>
+                    <p class="dark:text-gray-100 mb-4">{{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.panel-description"}}</p>
+                    <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-label"}} @wrapperClass="mb-0">
+                        <ModelSelectMultiple
+                            @modelName="user"
+                            @selectedItemComponent={{component "select-option/user" compact=true}}
+                            @selectedModel={{@model.alertable.for_new_order}}
+                            @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.alert-panel.new-order-alert-placeholder"}}
+                            @triggerClass="form-select form-input multiple"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.makeAlertable "for_new_order"}}
+                            as |model|
+                        >
+                            <SelectOption::User @option={{model}} />
+                        </ModelSelectMultiple>
+                    </InputGroup>
+                </div>
+            </ContentPanel>
+
+            <div class="store-boolean-settings">
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.online}} @onToggle={{fn (mut @model.online)}}>
+                        <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.online"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.tax_enabled}} @onToggle={{fn (mut @model.options.tax_enabled)}}>
+                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tax"
+                            }}</span>
+                    </Toggle>
+                    {{#if @model.options.tax_enabled}}
+                        <InputGroup
+                            @wrapperClass="mb-0 mt-2"
+                            @type="number"
+                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-label"}}
+                            @value={{@model.options.tax_percentage}}
+                            @placeholder={{t "storefront.networks.index.network.index.placeholder-tax"}}
+                            @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.tax-percentage-input-help-text"}}
+                        />
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle
+                        @isToggled={{@model.options.required_checkout_min}}
+                        @onToggle={{fn (mut @model.options.required_checkout_min)}}
+                        @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.minimum-order-amount-input-help-text"}}
+                    >
+                        <FaIcon @icon="dollar-sign" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-minimum-order-amount"
+                            }}</span>
+                    </Toggle>
+                    {{#if @model.options.required_checkout_min}}
+                        <MoneyInput
+                            @wrapperClass="mb-0 mt-2"
+                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.minimum-order-amount-input-label"}}
+                            @value={{@model.options.required_checkout_min_amount}}
+                            @currency={{@model.currency}}
+                        />
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_accept_orders}} @onToggle={{fn (mut @model.options.auto_accept_orders)}}>
+                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-accept-incoming-orders"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_dispatch}} @onToggle={{fn (mut @model.options.auto_dispatch)}}>
+                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.auto-dispatch-orders"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.require_pod}} @onToggle={{fn (mut @model.options.require_pod)}}>
+                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.require-proof-of-delivery"
+                            }}</span>
+                    </Toggle>
+                    {{#if @model.options.require_pod}}
+                        <InputGroup
+                            @wrapperClass="mb-0 mt-2"
+                            @name={{t "storefront.networks.index.network.index.general-network-settings-form.config-switches.proof-of-delivery-method-label"}}
+                        >
+                            <Select
+                                @options={{this.podMethods}}
+                                @optionValue="value"
+                                @optionLabel="name"
+                                @value={{@model.pod_method}}
+                                @onSelect={{fn (mut @model.pod_method)}}
+                                class="w-full"
+                            />
+                        </InputGroup>
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.cod_enabled}} @onToggle={{fn (mut @model.options.cod_enabled)}}>
+                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-cash-on-delivery"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.pickup_enabled}} @onToggle={{fn (mut @model.options.pickup_enabled)}}>
+                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-order-pickup"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.tips_enabled}} @onToggle={{fn (mut @model.options.tips_enabled)}}>
+                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-tips"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.delivery_tips_enabled}} @onToggle={{fn (mut @model.options.delivery_tips_enabled)}}>
+                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-delivery-tips"
+                            }}</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.multi_cart_enabled}} @onToggle={{fn (mut @model.options.multi_cart_enabled)}}>
+                        <FaIcon @icon="gifts" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-multi-cart-checkout"
+                            }}</span>
+                    </Toggle>
+                </div>
+                {{#if (and @model.options.tips_enabled @model.options.multi_cart_enabled)}}
+                    {{! Off: a multi-store order's store tip goes to the network. On: it is split across the stores by their share of the order. }}
+                    <div class="input-group">
+                        <Toggle @isToggled={{@model.options.split_tips_across_stores}} @onToggle={{fn (mut @model.options.split_tips_across_stores)}}>
+                            <FaIcon @icon="code-branch" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                    "storefront.networks.index.network.index.general-network-settings-form.config-switches.split-tips-across-stores"
+                                }}</span>
+                        </Toggle>
+                    </div>
+                {{/if}}
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.reviews_enabled}} @onToggle={{fn (mut @model.options.reviews_enabled)}}>
+                        <FaIcon @icon="star" @prefix="fas" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">{{t
+                                "storefront.networks.index.network.index.general-network-settings-form.config-switches.enable-user-reviews"
+                            }}</span>
+                    </Toggle>
+                </div>
+            </div>
+
+            <div class="flex justify-end">
+                <Button
+                    @type="primary"
+                    @text={{t "storefront.networks.index.network.index.general-network-settings-form.save-changes-button-text"}}
+                    @icon="save"
+                    @size="lg"
+                    @isLoading={{this.isLoading}}
+                    @onClick={{this.saveSettings}}
+                />
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "storefront.networks.index.network.index.api-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
+        <div class="space-y-6">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    {{t "storefront.networks.index.network.index.api-panel.panel-header"}}
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    {{t "storefront.networks.index.network.index.api-panel.panel-description"}}
+                </p>
+            </div>
+
+            <InputGroup
+                @name={{t "storefront.networks.index.network.index.api-panel.network-key-label"}}
+                @helpText={{t "storefront.networks.index.network.index.api-panel.network-key-help-text"}}
+            >
+                <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div>
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-title"}}
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        {{t "storefront.networks.index.network.index.payment-gateways-panel.panel-description"}}
+                    </p>
+                </div>
+                <div>
+                    <Button
+                        @icon="plus"
+                        @iconPrefix="fas"
+                        @type="primary"
+                        @text={{t "storefront.networks.index.network.index.payment-gateways-panel.new-gateway-button-text"}}
+                        @onClick={{this.createGateway}}
+                    />
+                </div>
+            </div>
+
+            {{#each this.gateways as |gateway|}}
+                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{false}} @wrapperClass="bordered-top">
+                    {{! Read-only summary; changes are made in the gateway modal, which saves them. }}
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name"}}
+                        @value={{gateway.name}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.name-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code"}}
+                        @value={{gateway.code}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.code-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url"}}
+                        @value={{gateway.callback_url}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.callback-url-help-text"}}
+                    />
+                    <InputGroup
+                        @name={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url"}}
+                        @value={{gateway.return_url}}
+                        @disabled={{true}}
+                        @helpText={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.return-url-help-text"}}
+                    />
+                    <div class="input-group">
+                        <Checkbox
+                            @value={{gateway.sandbox}}
+                            @label={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.sandbox-toggle-label"}}
+                            @disabled={{true}}
+                        />
+                    </div>
+                    <div>
+                        <h4 class="mb-2 font-semibold text-sm dark:text-white">{{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.config-header-label"}}</h4>
+                        {{#each-in gateway.config as |key value|}}
+                            {{#if (is-bool-value value)}}
+                                <div class="input-group">
+                                    <Checkbox @value={{value}} @label={{smart-humanize key}} @disabled={{true}} />
+                                </div>
+                            {{else}}
+                                <InputGroup @name={{smart-humanize key}}>
+                                    <Input
+                                        @type={{if (can "storefront update gateway") "text" "password"}}
+                                        class="form-input w-full"
+                                        placeholder={{humanize key}}
+                                        @value={{value}}
+                                        disabled
+                                    />
+                                </InputGroup>
+                            {{/if}}
+                        {{/each-in}}
+                    </div>
+                    <div class="flex flex-row items-center space-x-2">
+                        {{#if (can "storefront update gateway")}}
+                            <Button
+                                @size="sm"
+                                @type="primary"
+                                @icon="pencil"
+                                @text={{t "storefront.settings.gateways.edit-payment-gateway"}}
+                                @onClick={{fn this.editGateway gateway null}}
+                            />
+                        {{/if}}
+                        {{#if (can "storefront delete gateway")}}
+                            <Button
+                                @size="sm"
+                                @type="danger"
+                                @icon="trash"
+                                @text={{t "storefront.networks.index.network.index.payment-gateways-panel.gateway-form.delete-gateway-button-text"}}
+                                @onClick={{fn this.deleteGateway gateway}}
+                            />
+                        {{/if}}
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "storefront.networks.index.network.index.notification-channels-panel.panel-title"}} @open={{false}} @pad={{false}} @wrapperClass="bordered-top">
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div class="w-3/4">
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-header"}}
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        {{t "storefront.networks.index.network.index.notification-channels-panel.panel-description"}}
+                    </p>
+                </div>
+                <div>
+                    <Button
+                        @icon="plus"
+                        @iconPrefix="fas"
+                        @type="primary"
+                        @text={{t "storefront.networks.index.network.index.notification-channels-panel.new-channel-button-text"}}
+                        @onClick={{this.createChannel}}
+                    />
+                </div>
+            </div>
+
+            <div class="space-y-3">
+                {{#each this.channels as |notificationChannel|}}
+                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200">
+                        <div>
+                            <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <Button @size="xs" @type="default" @text={{t "storefront.settings.notification.send-test"}} @wrapperClass="mr-2" @onClick={{fn this.testChannel notificationChannel}} />
+                            <Button @size="xs" @type="default" @text={{t "storefront.common.edit"}} @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
+                            <Button @size="xs" @type="danger" @text={{t "storefront.common.delete"}} @onClick={{fn this.deleteChannel notificationChannel}} />
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </ContentPanel>
+</div>
\ No newline at end of file
diff --git a/addon/templates/networks/index/network/stores.hbs b/addon/templates/networks/index/network/stores.hbs
index 4bd549d8..a039dd5c 100644
--- a/addon/templates/networks/index/network/stores.hbs
+++ b/addon/templates/networks/index/network/stores.hbs
@@ -1,39 +1,79 @@
-<Layout::Section::Header @title={{t "storefront.networks.index.network.stores.store"}} @searchQuery={{this.storeQuery}} @onSearch={{perform this.search}}>
-    <Button
-        @type="primary"
-        @icon="plus"
-        @text={{t "storefront.networks.index.network.stores.add-stores-button-text"}}
-        @textClass="truncate"
-        @size="sm"
-        @onClick={{this.addStores}}
-        @wrapperClass="mr-2"
-    />
-    <Button
-        @type="primary"
-        @icon="envelope-open-text"
-        @textClass="truncate"
-        @size="sm"
-        @text={{t "storefront.networks.index.network.stores.invite-stores-button-text"}}
-        @onClick={{this.invite}}
-    />
+<Layout::Section::Header
+    @title={{t "storefront.networks.index.network.stores.store"}}
+    @subtitle={{t "storefront.networks.invitations.stores-subtitle" members=this.members.length pending=this.pendingInvitations.length}}
+    @searchQuery={{this.storeQuery}}
+    @onSearch={{perform this.search}}
+>
+    <Button @icon="plus" @text={{t "storefront.networks.invitations.add-existing-store"}} @textClass="truncate" @size="sm" @onClick={{fn this.invite this.network "own"}} @wrapperClass="mr-2" @permission="storefront update network" />
+    <Button @type="primary" @icon="envelope-open-text" @textClass="truncate" @size="sm" @text={{t "storefront.networks.invitations.invite-stores"}} @onClick={{fn this.invite this.network "email"}} @permission="storefront update network" />
     <Layout::Resource::ActionButtons @buttons={{this.registeredActionButtons}} />
 </Layout::Section::Header>
 
-<Layout::Section::Body>
-    <div class="flex flex-row items-center space-x-2">
-        <NetworkCategoryPicker
-            @network={{this.network}}
-            @category={{this.category}}
-            @onCreateNewCategory={{this.createNewCategory}}
-            @onSelect={{this.selectCategory}}
-            @onReady={{this.setCategoryPickerContext}}
-            @wrapperClass="w-64 my-4 ml-9"
-        />
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <div class="storefront-status-tabs px-4 pt-3" role="tablist" data-test-network-store-tabs>
+        {{#each this.statusTabs as |tab|}}
+            <button type="button" role="tab" aria-selected={{if tab.isActive "true" "false"}} class="storefront-status-tab {{if tab.isActive 'is-active'}}" {{on "click" (fn this.selectStatusTab tab)}} data-test-status-tab={{tab.id}}>
+                <span>{{tab.label}}</span>
+                <span class="storefront-status-tab__count">{{tab.count}}</span>
+            </button>
+        {{/each}}
+    </div>
+
+    <div class="flex flex-row items-center flex-wrap gap-2 px-4 my-3">
+        <NetworkCategoryPicker @network={{this.network}} @category={{this.category}} @onCreateNewCategory={{this.createNewCategory}} @onSelect={{this.selectCategory}} @onReady={{this.setCategoryPickerContext}} @wrapperClass="w-64" />
         {{#if this.categoryModel}}
             <Button @icon="arrow-left" @size="xs" @onClick={{this.categoryPicker.loadParentCategories}} />
-            <Button @icon="cog" @text="Edit Category" @size="xs" @onClick={{fn this.editCategory this.categoryModel}} />
-            <Button @icon="trash" @text="Delete Category" @size="xs" @type="danger" @onClick={{fn this.deleteCategory this.categoryModel}} />
+            <Button @icon="cog" @text={{t "storefront.networks.invitations.edit-category"}} @size="xs" @onClick={{fn this.editCategory this.categoryModel}} />
+            <Button @icon="trash" @text={{t "storefront.networks.invitations.delete-category"}} @size="xs" @type="danger" @onClick={{fn this.deleteCategory this.categoryModel}} />
         {{/if}}
     </div>
-    <Table @rows={{@model}} @columns={{this.registeredColumns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfoot={{false}} @selectAllColumnWidth={{20}} />
-</Layout::Section::Body>
\ No newline at end of file
+
+    {{#if this.hasSelection}}
+        <div class="storefront-bulk-bar mx-4 mb-3" data-test-network-store-bulk-bar>
+            <span class="storefront-bulk-bar__count">{{t "storefront.networks.invitations.selected-count" count=this.selectedStores.length}}</span>
+            <Button @size="xs" @icon="folder-tree" @text={{t "storefront.networks.index.network.stores.assign-category"}} @onClick={{this.assignCategoryToSelected}} @permission="storefront update network" />
+            <Button @size="xs" @type="danger" @icon="trash" @text={{t "storefront.networks.index.network.stores.remove-store-from-network"}} @onClick={{this.removeSelected}} @permission="storefront update network" />
+            <Button @size="xs" @text={{t "storefront.networks.invitations.clear"}} @onClick={{this.clearSelection}} />
+        </div>
+    {{/if}}
+
+    {{#if (eq this.statusTab "invited")}}
+        {{#unless this.openInvitations.length}}
+            <div class="storefront-empty-row mx-4">
+                <span>{{t "storefront.networks.invitations.none"}}</span>
+                <Button @size="xs" @icon="envelope-open-text" @text={{t "storefront.networks.invitations.invite-stores"}} @onClick={{fn this.invite this.network "email"}} />
+            </div>
+        {{/unless}}
+    {{else}}
+        <Table @rows={{this.visibleStores}} @columns={{this.registeredColumns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfoot={{false}} @selectAllColumnWidth={{20}} />
+    {{/if}}
+
+    {{#if this.showInvitations}}
+        <div class="storefront-invitation-list mx-4 my-4" data-test-network-invitations>
+            <div class="storefront-invitation-list__title">{{t "storefront.networks.invitations.title"}}</div>
+            {{#each this.openInvitations as |invitation|}}
+                <div class="storefront-member-row" data-test-invitation-row={{invitation.id}}>
+                    <div class="storefront-member-row__logo storefront-member-row__logo--icon"><FaIcon @icon="at" /></div>
+                    <div class="storefront-member-row__identity">
+                        <div class="storefront-member-row__name">{{invitation.email}}</div>
+                        <div class="storefront-member-row__meta">{{t "storefront.networks.invitations.sent-ago" ago=invitation.sentAgo}}</div>
+                    </div>
+                    <Badge @status={{invitation.status}} @text={{t (concat "storefront.networks.invitations.status." invitation.status)}} @size="xs" />
+                    <div class="storefront-card__buttons">
+                        {{#if (eq invitation.status "pending")}}
+                            <Button @size="xs" @icon="paper-plane" @text={{t "storefront.networks.invitations.resend"}} @onClick={{fn this.resendInvitation invitation}} @permission="storefront update network" />
+                            <Button @size="xs" @icon="ban" @text={{t "storefront.networks.invitations.revoke"}} @onClick={{fn this.revokeInvitation invitation}} @permission="storefront update network" />
+                        {{else}}
+                            <Button @size="xs" @icon="redo" @text={{t "storefront.networks.invitations.invite-again"}} @onClick={{fn this.resendInvitation invitation}} @permission="storefront update network" />
+                        {{/if}}
+                    </div>
+                </div>
+            {{/each}}
+            <p class="storefront-invitation-list__note">{{t "storefront.networks.invitations.rows-note"}}</p>
+        </div>
+    {{/if}}
+</Layout::Section::Body>
+
+{{#if this.isInvitePanelOpen}}
+    <Storefront::Network::InvitePanel @network={{this.network}} @activeTab={{this.invitePanelTab}} @onClose={{this.closeInvitePanel}} @onSent={{this.afterInvitationsSent}} />
+{{/if}}
diff --git a/app/components/select-option/store.js b/app/components/select-option/store.js
new file mode 100644
index 00000000..3db1e2ec
--- /dev/null
+++ b/app/components/select-option/store.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/select-option/store';
diff --git a/app/components/storefront/network/invite-panel.js b/app/components/storefront/network/invite-panel.js
new file mode 100644
index 00000000..4320f607
--- /dev/null
+++ b/app/components/storefront/network/invite-panel.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/invite-panel';
diff --git a/app/controllers/networks/index/network/settings.js b/app/controllers/networks/index/network/settings.js
new file mode 100644
index 00000000..6a274f1f
--- /dev/null
+++ b/app/controllers/networks/index/network/settings.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/controllers/networks/index/network/settings';
diff --git a/app/helpers/width-style.js b/app/helpers/width-style.js
new file mode 100644
index 00000000..945636d4
--- /dev/null
+++ b/app/helpers/width-style.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/helpers/width-style';
diff --git a/app/instance-initializers/register-storefront-resource-descriptors.js b/app/instance-initializers/register-storefront-resource-descriptors.js
new file mode 100644
index 00000000..90d4bcff
--- /dev/null
+++ b/app/instance-initializers/register-storefront-resource-descriptors.js
@@ -0,0 +1 @@
+export { default, initialize } from '@fleetbase/storefront-engine/instance-initializers/register-storefront-resource-descriptors';
diff --git a/app/routes/networks/index/network/settings.js b/app/routes/networks/index/network/settings.js
new file mode 100644
index 00000000..fa6bfdb4
--- /dev/null
+++ b/app/routes/networks/index/network/settings.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/routes/networks/index/network/settings';
diff --git a/app/templates/networks/index/network/settings.js b/app/templates/networks/index/network/settings.js
new file mode 100644
index 00000000..bbbc3329
--- /dev/null
+++ b/app/templates/networks/index/network/settings.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/templates/networks/index/network/settings';
diff --git a/server/src/Http/Controllers/NetworkController.php b/server/src/Http/Controllers/NetworkController.php
index bb240e1b..f9f6fc99 100644
--- a/server/src/Http/Controllers/NetworkController.php
+++ b/server/src/Http/Controllers/NetworkController.php
@@ -2,6 +2,7 @@
 
 namespace Fleetbase\Storefront\Http\Controllers;
 
+use Fleetbase\FleetOps\Models\Order;
 use Fleetbase\FleetOps\Support\Utils;
 use Fleetbase\Models\Category;
 use Fleetbase\Models\Invite;
@@ -10,6 +11,9 @@
 use Fleetbase\Storefront\Mail\StorefrontNetworkInvite;
 use Fleetbase\Storefront\Models\Network;
 use Fleetbase\Storefront\Models\NetworkStore;
+use Fleetbase\Storefront\Models\Store;
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Str;
 
@@ -52,31 +56,253 @@ public function findNetwork(string $id)
      * @return \Illuminate\Http\Response
      */
     public function sendInvites(string $id, NetworkActionRequest $request)
+    {
+        $network       = Network::find($id);
+        $recipients    = collect($request->array('recipients'))->filter(fn ($email) => is_string($email) && filter_var($email, FILTER_VALIDATE_EMAIL))->map(fn ($email) => strtolower(trim($email)))->unique()->values();
+        $expiresInDays = $request->input('expires_in_days');
+        $meta          = array_filter([
+            'status'           => 'pending',
+            'category_uuid'    => $request->input('category_uuid'),
+            'message'          => $request->input('message'),
+            'require_approval' => (bool) $request->input('require_approval', false),
+        ], fn ($value) => $value !== null && $value !== '');
+
+        // One invitation per recipient so each can be resent, revoked or declined on its own.
+        $invitations = [];
+        foreach ($recipients as $email) {
+            $invitation = Invite::create([
+                'company_uuid'    => session('company'),
+                'created_by_uuid' => session('user'),
+                'subject_uuid'    => $network->uuid,
+                'subject_type'    => Utils::getMutationType($network),
+                'protocol'        => 'email',
+                'recipients'      => [$email],
+                'reason'          => 'join_storefront_network',
+                'meta'            => $meta,
+            ]);
+
+            if (is_numeric($expiresInDays) && (int) $expiresInDays > 0) {
+                $invitation->expires_at = Carbon::now()->addDays((int) $expiresInDays);
+                $invitation->save();
+            }
+
+            // make sure subject is set
+            $invitation->setRelation('subject', $network);
+            $invitation->setRelation('createdBy', $request->user());
+
+            // send invite
+            Mail::send(new StorefrontNetworkInvite($invitation));
+
+            $invitations[] = static::serializeInvitation($invitation);
+        }
+
+        return response()->json(['status' => 'ok', 'invitations' => $invitations]);
+    }
+
+    /**
+     * List the invitations a network has sent, newest first, with a derived state.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function invitations(string $id)
+    {
+        $network = Network::where('uuid', $id)->orWhere('public_id', $id)->first();
+
+        if (!$network) {
+            return response()->error('Network not found.', 404);
+        }
+
+        $invitations = Invite::where(['subject_uuid' => $network->uuid, 'reason' => 'join_storefront_network'])
+            ->orderBy('created_at', 'desc')
+            ->get()
+            ->map(fn (Invite $invitation) => static::serializeInvitation($invitation))
+            ->values();
+
+        return response()->json($invitations);
+    }
+
+    /**
+     * Resend a pending or expired invitation with a fresh expiry.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function resendInvitation(string $id, string $invitationId, Request $request)
     {
         $network    = Network::find($id);
-        $recipients = $request->input('recipients', []);
-
-        // create invitation
-        $invitation = Invite::create([
-            'company_uuid'    => session('company'),
-            'created_by_uuid' => session('user'),
-            'subject_uuid'    => $network->uuid,
-            'subject_type'    => Utils::getMutationType($network),
-            'protocol'        => 'email',
-            'recipients'      => $recipients,
-            'reason'          => 'join_storefront_network',
-        ]);
+        $invitation = Invite::where(['subject_uuid' => $network->uuid, 'reason' => 'join_storefront_network'])->where(fn ($query) => $query->where('uuid', $invitationId)->orWhere('public_id', $invitationId))->first();
+
+        if (!$invitation) {
+            return response()->error('Invitation not found.', 404);
+        }
 
-        // make sure subject is set
+        $meta           = $invitation->meta ?? [];
+        $meta['status'] = 'pending';
+        $meta['resent_at'] = Carbon::now()->toIso8601String();
+        $invitation->meta = $meta;
+
+        $expiresInDays = $request->input('expires_in_days');
+        if (is_numeric($expiresInDays) && (int) $expiresInDays > 0) {
+            $invitation->expires_at = Carbon::now()->addDays((int) $expiresInDays);
+        } elseif ($invitation->expires_at && Carbon::parse($invitation->expires_at)->isPast()) {
+            $invitation->expires_at = Carbon::now()->addDays(14);
+        }
+
+        $invitation->save();
         $invitation->setRelation('subject', $network);
         $invitation->setRelation('createdBy', $request->user());
 
-        // send invite
         Mail::send(new StorefrontNetworkInvite($invitation));
 
+        return response()->json(['status' => 'ok', 'invitation' => static::serializeInvitation($invitation)]);
+    }
+
+    /**
+     * Revoke an invitation so its link stops working.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function revokeInvitation(string $id, string $invitationId)
+    {
+        $network    = Network::find($id);
+        $invitation = Invite::where(['subject_uuid' => $network->uuid, 'reason' => 'join_storefront_network'])->where(fn ($query) => $query->where('uuid', $invitationId)->orWhere('public_id', $invitationId))->first();
+
+        if (!$invitation) {
+            return response()->error('Invitation not found.', 404);
+        }
+
+        $invitation->delete();
+
         return response()->json(['status' => 'ok']);
     }
 
+    /**
+     * Numbers the network overview shows: members, invitations, the last seven days of
+     * orders and revenue, customers, each member's share, and the latest orders.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function overview(string $id)
+    {
+        $network = Network::where('uuid', $id)->orWhere('public_id', $id)->with(['stores'])->first();
+
+        if (!$network) {
+            return response()->error('Network not found.', 404);
+        }
+
+        $since        = Carbon::now()->subDays(7);
+        $monthStart   = Carbon::now()->startOfMonth();
+        $canceled     = ['canceled', 'order_canceled'];
+        $orders       = Order::where(['company_uuid' => $network->company_uuid, 'type' => 'storefront'])
+            ->where('meta->storefront_network_id', $network->public_id)
+            ->whereNull('deleted_at')
+            ->where('created_at', '>=', $since)
+            ->with(['customer'])
+            ->orderBy('created_at', 'desc')
+            ->get();
+        $liveOrders   = $orders->whereNotIn('status', $canceled);
+        $revenue      = round($liveOrders->sum(fn ($order) => (float) (data_get($order, 'meta.total') ?? 0)), 2);
+        $tips         = round($liveOrders->sum(fn ($order) => (float) (data_get($order, 'meta.tip') ?? 0) + (float) (data_get($order, 'meta.delivery_tip') ?? 0)), 2);
+        $multiStore   = $liveOrders->filter(fn ($order) => data_get($order, 'meta.checkout_id'))->groupBy(fn ($order) => data_get($order, 'meta.checkout_id'))->filter(fn ($group) => $group->count() > 1)->count();
+        $allCustomers = Order::where(['company_uuid' => $network->company_uuid, 'type' => 'storefront'])->where('meta->storefront_network_id', $network->public_id)->whereNull('deleted_at')->whereNotNull('customer_uuid');
+        $customers    = (clone $allCustomers)->distinct()->count('customer_uuid');
+        $newCustomers = (clone $allCustomers)->where('created_at', '>=', $monthStart)->distinct()->count('customer_uuid');
+
+        $invitations = Invite::where(['subject_uuid' => $network->uuid, 'reason' => 'join_storefront_network'])->orderBy('created_at', 'desc')->get()->map(fn (Invite $invitation) => static::serializeInvitation($invitation));
+        $byStore     = $liveOrders->groupBy(fn ($order) => data_get($order, 'meta.storefront_id'));
+        $stores      = $network->stores->map(function (Store $store) use ($byStore, $liveOrders, $revenue) {
+            $storeOrders  = $byStore->get($store->public_id, collect());
+            $storeRevenue = round($storeOrders->sum(fn ($order) => (float) (data_get($order, 'meta.total') ?? 0)), 2);
+
+            return [
+                'uuid'          => $store->uuid,
+                'public_id'     => $store->public_id,
+                'name'          => $store->name,
+                'logo_url'      => $store->logo_url,
+                'online'        => (bool) $store->online,
+                'currency'      => $store->currency,
+                'category_uuid' => $store->pivot->category_uuid ?? null,
+                'orders_7d'     => $storeOrders->count(),
+                'revenue_7d'    => $storeRevenue,
+                'share'         => $liveOrders->count() > 0 ? round(($storeOrders->count() / $liveOrders->count()) * 100) : 0,
+                'revenue_share' => $revenue > 0 ? round(($storeRevenue / $revenue) * 100) : 0,
+            ];
+        })->values();
+
+        return response()->json([
+            'currency' => $network->currency,
+            'stores'   => [
+                'total'  => $network->stores->count(),
+                'online' => $network->stores->where('online', true)->count(),
+            ],
+            'invitations' => [
+                'pending'  => $invitations->where('status', 'pending')->count(),
+                'declined' => $invitations->where('status', 'declined')->count(),
+                'expired'  => $invitations->where('status', 'expired')->count(),
+            ],
+            'orders' => [
+                'count_7d'       => $liveOrders->count(),
+                'multi_store_7d' => $multiStore,
+                'canceled_7d'    => $orders->count() - $liveOrders->count(),
+            ],
+            'revenue' => [
+                'total_7d' => $revenue,
+                'tips_7d'  => $tips,
+                'currency' => $network->currency,
+            ],
+            'customers' => [
+                'total'          => $customers,
+                'new_this_month' => $newCustomers,
+            ],
+            'members'       => $stores,
+            'recent_orders' => $orders->take(5)->map(fn ($order) => [
+                'public_id'     => $order->public_id,
+                'checkout_id'   => data_get($order, 'meta.checkout_id'),
+                'customer_name' => data_get($order, 'customer.name'),
+                'store_id'      => data_get($order, 'meta.storefront_id'),
+                'store_name'    => data_get($order, 'meta.storefront'),
+                'total'         => data_get($order, 'meta.total'),
+                'currency'      => data_get($order, 'meta.currency', $network->currency),
+                'status'        => $order->status,
+                'created_at'    => $order->created_at,
+            ])->values(),
+        ]);
+    }
+
+    /**
+     * The shape the console reads an invitation in: one recipient, a derived state and the
+     * options it was sent with.
+     */
+    public static function serializeInvitation(Invite $invitation): array
+    {
+        $meta      = $invitation->meta ?? [];
+        $status    = data_get($meta, 'status', 'pending');
+        $expiresAt = $invitation->expires_at ? Carbon::parse($invitation->expires_at) : null;
+
+        if ($status === 'pending' && $expiresAt && $expiresAt->isPast()) {
+            $status = 'expired';
+        }
+
+        return [
+            'id'               => $invitation->uuid,
+            'uuid'             => $invitation->uuid,
+            'public_id'        => $invitation->public_id,
+            'uri'              => $invitation->uri,
+            'code'             => $invitation->code,
+            'email'            => collect($invitation->recipients ?? [])->first(),
+            'recipients'       => $invitation->recipients ?? [],
+            'status'           => $status,
+            'category_uuid'    => data_get($meta, 'category_uuid'),
+            'message'          => data_get($meta, 'message'),
+            'require_approval' => (bool) data_get($meta, 'require_approval', false),
+            'resent_at'        => data_get($meta, 'resent_at'),
+            'declined_at'      => data_get($meta, 'declined_at'),
+            'accepted_at'      => data_get($meta, 'accepted_at'),
+            'expires_at'       => $expiresAt,
+            'created_at'       => $invitation->created_at,
+            'updated_at'       => $invitation->updated_at,
+        ];
+    }
+
     /**
      * Add stores to a network.
      *
diff --git a/server/src/Http/Filter/CustomerFilter.php b/server/src/Http/Filter/CustomerFilter.php
index c641cdf4..fda8e2a1 100644
--- a/server/src/Http/Filter/CustomerFilter.php
+++ b/server/src/Http/Filter/CustomerFilter.php
@@ -15,4 +15,17 @@ function ($query) use ($storefront) {
             }
         );
     }
+
+    /**
+     * Customers who ordered through a network.
+     */
+    public function network($network)
+    {
+        $this->builder->whereHas(
+            'customerOrders',
+            function ($query) use ($network) {
+                $query->where('meta->storefront_network_id', $network);
+            }
+        );
+    }
 }
diff --git a/server/src/Http/Filter/OrderFilter.php b/server/src/Http/Filter/OrderFilter.php
index 6b114fb8..4438078b 100644
--- a/server/src/Http/Filter/OrderFilter.php
+++ b/server/src/Http/Filter/OrderFilter.php
@@ -49,4 +49,13 @@ public function storefront(string $storefront)
     {
         $this->builder->where('meta->storefront_id', $storefront);
     }
+
+    /**
+     * Orders placed through a network: the store is always `storefront_id`, the network
+     * that sold it is `storefront_network_id`.
+     */
+    public function network(string $network)
+    {
+        $this->builder->where('meta->storefront_network_id', $network);
+    }
 }
diff --git a/server/src/routes.php b/server/src/routes.php
index 0f39a4d6..a44a9e4f 100644
--- a/server/src/routes.php
+++ b/server/src/routes.php
@@ -237,6 +237,10 @@ function ($router, $controller) {
                                 $router->post('{id}/add-stores', $controller('addStores'));
                                 $router->post('{id}/remove-stores', $controller('removeStores'));
                                 $router->post('{id}/invite', $controller('sendInvites'));
+                                $router->get('{id}/invitations', $controller('invitations'));
+                                $router->post('{id}/invitations/{invitationId}/resend', $controller('resendInvitation'));
+                                $router->delete('{id}/invitations/{invitationId}', $controller('revokeInvitation'));
+                                $router->get('{id}/overview', $controller('overview'));
                             }
                         );
                         $router->fleetbaseRoutes('customers');
diff --git a/tests/unit/controllers/application-test.js b/tests/unit/controllers/application-test.js
index 157e731d..71546df1 100644
--- a/tests/unit/controllers/application-test.js
+++ b/tests/unit/controllers/application-test.js
@@ -370,12 +370,19 @@ module('Unit | Controller | application', function (hooks) {
         assert.true(controller.isNetworkContext);
         assert.deepEqual(
             items.map((item) => item.label),
-            ['Stores', 'Trucks', 'Orders', 'Customers', 'Settings'],
+            ['Overview', 'Stores', 'Trucks', 'Orders', 'Customers', 'Settings'],
             'network sections replace the store sections'
         );
         assert.deepEqual(
             items.map((item) => item.id),
-            ['network:network_123:stores', 'network:network_123:trucks', 'network:network_123:orders', 'network:network_123:customers', 'network:network_123:index'],
+            [
+                'network:network_123:index',
+                'network:network_123:stores',
+                'network:network_123:trucks',
+                'network:network_123:orders',
+                'network:network_123:customers',
+                'network:network_123:settings',
+            ],
             'items are keyed by network so two networks never share an entry'
         );
         assert.ok(
@@ -384,10 +391,10 @@ module('Unit | Controller | application', function (hooks) {
         );
 
         hostRouter.isActive = (route, publicId) => route === 'console.storefront.networks.index.network.trucks' && publicId === 'network_123';
-        assert.true(items[1].activeWhen(), 'the trucks section is active on the network trucks route');
-        assert.false(items[0].activeWhen(), 'the stores section is not');
+        assert.true(items[2].activeWhen(), 'the trucks section is active on the network trucks route');
+        assert.false(items[1].activeWhen(), 'the stores section is not');
 
-        items[2].onClick();
+        items[3].onClick();
         assert.deepEqual(hostRouter.transitions, [['console.storefront.networks.index.network.orders', 'network_123']], 'sections transition with the network id');
     });
 
diff --git a/tests/unit/controllers/networks/index/network/index-test.js b/tests/unit/controllers/networks/index/network/settings-test.js
similarity index 74%
rename from tests/unit/controllers/networks/index/network/index-test.js
rename to tests/unit/controllers/networks/index/network/settings-test.js
index 873bd803..85693ec9 100644
--- a/tests/unit/controllers/networks/index/network/index-test.js
+++ b/tests/unit/controllers/networks/index/network/settings-test.js
@@ -1,12 +1,12 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
 
-module('Unit | Controller | networks/index/network/index', function (hooks) {
+module('Unit | Controller | networks/index/network/settings', function (hooks) {
     setupTest(hooks);
 
     // TODO: Replace this with your real tests.
     test('it exists', function (assert) {
-        let controller = this.owner.lookup('controller:networks/index/network/index');
+        let controller = this.owner.lookup('controller:networks/index/network/settings');
         assert.ok(controller);
     });
 });
diff --git a/tests/unit/routes/networks/index/network/customers-test.js b/tests/unit/routes/networks/index/network/customers-test.js
index b09ef833..33bbf498 100644
--- a/tests/unit/routes/networks/index/network/customers-test.js
+++ b/tests/unit/routes/networks/index/network/customers-test.js
@@ -21,6 +21,6 @@ module('Unit | Route | networks/index/network/customers', function (hooks) {
 
         await route.model({ page: 1 });
 
-        assert.deepEqual(requests, [{ modelName: 'customer', params: { page: 1, storefront: 'network_123' } }]);
+        assert.deepEqual(requests, [{ modelName: 'customer', params: { page: 1, network: 'network_123' } }]);
     });
 });
diff --git a/tests/unit/routes/networks/index/network/orders-test.js b/tests/unit/routes/networks/index/network/orders-test.js
index b0e2c360..c4c66a97 100644
--- a/tests/unit/routes/networks/index/network/orders-test.js
+++ b/tests/unit/routes/networks/index/network/orders-test.js
@@ -56,7 +56,7 @@ module('Unit | Route | networks/index/network/orders', function (hooks) {
         let request = fetch.calls[0];
 
         assert.strictEqual(request.path, 'orders');
-        assert.deepEqual(request.params, { page: 2, sort: '-created_at', storefront: 'network_123' });
+        assert.deepEqual(request.params, { page: 2, sort: '-created_at', network: 'network_123' });
         assert.deepEqual(request.options, { namespace: 'storefront/int/v1' });
         assert.strictEqual(fetch.normalized.modelType, 'orders');
         assert.strictEqual(orders[0].constructor.modelName, 'order');
diff --git a/tests/unit/routes/networks/index/network/index-test.js b/tests/unit/routes/networks/index/network/settings-test.js
similarity index 73%
rename from tests/unit/routes/networks/index/network/index-test.js
rename to tests/unit/routes/networks/index/network/settings-test.js
index bb0e77fe..f78a5b93 100644
--- a/tests/unit/routes/networks/index/network/index-test.js
+++ b/tests/unit/routes/networks/index/network/settings-test.js
@@ -1,11 +1,11 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'dummy/tests/helpers';
 
-module('Unit | Route | networks/index/network/index', function (hooks) {
+module('Unit | Route | networks/index/network/settings', function (hooks) {
     setupTest(hooks);
 
     test('it exists', function (assert) {
-        let route = this.owner.lookup('route:networks/index/network/index');
+        let route = this.owner.lookup('route:networks/index/network/settings');
         assert.ok(route);
     });
 });
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 46aa17d5..de36c292 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -1,6 +1,10 @@
 storefront:
   extension-name: Storefront
   common:
+    off: Off
+    on: On
+    all: All
+    store: Store
     address: Address
     alerts: Alerts
     amount: Amount
@@ -349,6 +353,81 @@ storefront:
   networks:
     card:
       stores-count: "{count, plural, =0 {No stores} one {# store} other {# stores}}"
+    overview:
+      online-count: "{count, plural, =0 {none online} one {# online} other {# online}}"
+      invitations-hint: "pending, {declined} declined"
+      orders-7d: Orders · 7 days
+      multi-store-count: "{count, plural, =0 {no multi-store} one {# multi-store} other {# multi-store}}"
+      revenue-7d: Revenue · 7 days
+      tips-hint: "tips {tips}, split across stores"
+      new-customers: "{count, plural, =0 {none new this month} one {# new this month} other {# new this month}}"
+      members-title: "{count, plural, =0 {Stores} one {Stores · # member} other {Stores · # members}}"
+      orders-count-7d: "{count, plural, =0 {no orders · 7d} one {# order · 7d} other {# orders · 7d}}"
+      share-of-network: "{share}% of network"
+      no-members: No stores sell through this network yet.
+      recent-orders: Recent network orders
+      all-orders: All orders
+      no-orders: No orders through this network in the last seven days.
+    invitations:
+      title: Invitations
+      invite-stores: Invite stores
+      invited: Invited
+      none: No open invitations.
+      sent-ago: "Sent {ago}"
+      resend: Resend
+      revoke: Revoke
+      invite-again: Invite again
+      resent: "Invitation re-sent to {email}."
+      revoke-title: "Revoke the invitation to {email}?"
+      revoke-body: The link in the email stops working immediately. You can invite this address again later.
+      shareable-link: Shareable link
+      manage-link: Manage link
+      link: Link
+      link-hint: Anyone with the link can request to join. Turning the link off invalidates it immediately.
+      status:
+        pending: Pending
+        declined: Declined
+        expired: Expired
+        accepted: Accepted
+        revoked: Revoked
+      stores-subtitle: "{members, plural, =0 {No members} one {# member} other {# members}} · {pending, plural, =0 {no invitations pending} one {# invitation pending} other {# invitations pending}}"
+      add-existing-store: Add existing store
+      edit-category: Edit category
+      delete-category: Delete category
+      selected-count: "{count, plural, one {# selected} other {# selected}}"
+      clear: Clear
+      rows-note: Invited rows are invitations, not members; they leave the list when accepted or revoked.
+      assign-category-count: "Assign a category to {count, plural, one {# store} other {# stores}}"
+      pick-a-category: Pick a category first.
+      remove-count-title: "Remove {count, plural, one {# store} other {# stores}} from {networkName}?"
+      remove-body: The store keeps its own catalog and orders. Open network orders that include this store stay open; new multi-store carts will no longer offer its products.
+      panel-title: "Invite stores to {network}"
+      panel-lede: A store that accepts joins with its own catalog, prices and hours. You choose its category.
+      tab-email: By email
+      tab-link: Shareable link
+      tab-own: Add a store you manage
+      email-addresses: Email addresses
+      email-help: Paste a list; one invitation per address. Members and pending invitees are flagged before sending.
+      already-flagged: "{count, plural, one {# address is already a member or already invited and will be skipped.} other {# addresses are already members or already invited and will be skipped.}}"
+      invalid-flagged: "{count, plural, one {# address is not a valid email.} other {# addresses are not valid emails.}}"
+      category-on-joining: Category on joining
+      let-store-choose: Let the store choose
+      expires: Invitation expires
+      expires-14: In 14 days
+      expires-7: In 7 days
+      expires-30: In 30 days
+      expires-never: Never
+      message: Message (optional)
+      message-placeholder: "Hi, we would like your store on {network}. Accept to list your catalog in the app."
+      require-approval: Require my approval after the store accepts
+      require-approval-help: You review the store before it appears in the app.
+      send-count: "{count, plural, =0 {Send invitations} one {Send # invitation} other {Send # invitations}}"
+      sent: "{count, plural, one {# invitation sent.} other {# invitations sent.}}"
+      own-stores: Stores in your organisation
+      own-stores-help: Stores you administer join immediately; no invitation is sent.
+      pick-stores: Pick stores
+      add-to-network: Add to network
+      own-stores-added: "{count, plural, one {# store added to the network.} other {# stores added to the network.}}"
     index:
       empty-state: Create a network to sell from several stores through one app.
       create-network: Create network
@@ -362,6 +441,7 @@ storefront:
       network:
         manage-network: Manage Network
         all-networks: All networks
+        overview: Overview
         settings: Settings
         customers: Customers
         orders: Orders

From f4b6dbbbc3122e2af847562896f82687b942f946 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 15:58:34 +0800
Subject: [PATCH 10/13] fix(i18n): drop the duplicate common.store key that
 broke the translation build

---
 translations/en-us.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index de36c292..13269860 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -4,7 +4,6 @@ storefront:
     off: Off
     on: On
     all: All
-    store: Store
     address: Address
     alerts: Alerts
     amount: Amount

From 184b5e379b362638ee75f0d83224129f1dc3b895 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 16:15:56 +0800
Subject: [PATCH 11/13] fix(engine): the descriptor initializer runs inside the
 engine; its host re-export broke console boot before the lazy engine loaded

---
 .../register-storefront-resource-descriptors.js                  | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 app/instance-initializers/register-storefront-resource-descriptors.js

diff --git a/app/instance-initializers/register-storefront-resource-descriptors.js b/app/instance-initializers/register-storefront-resource-descriptors.js
deleted file mode 100644
index 90d4bcff..00000000
--- a/app/instance-initializers/register-storefront-resource-descriptors.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default, initialize } from '@fleetbase/storefront-engine/instance-initializers/register-storefront-resource-descriptors';

From 7182093b68253274c63a2bc77a79e8f31d93e4f0 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 14:37:41 +0800
Subject: [PATCH 12/13] feat(network-orders): orders grouped by checkout with
 status tabs, store stacks and next actions

- a multi-store checkout is one expandable row (customer, stores, fulfillment, total with tip split, shared driver, least-advanced status) that opens into each store's order
- status tabs (needs action, preparing, ready for pickup, out for delivery, completed, canceled) drive the status query param; grouped/flat toggle
- new cells: reference, stores (identity stack of store pills), fulfillment, total, driver (inline assign), status, placed, actions (next action promoted, rest behind an ellipsis)
- order index resource keeps meta.checkout_id so the console can group
---
 .../network/orders/cell/actions.hbs           |  25 +
 .../storefront/network/orders/cell/actions.js |  44 ++
 .../storefront/network/orders/cell/driver.hbs |  16 +
 .../storefront/network/orders/cell/driver.js  |  34 ++
 .../network/orders/cell/fulfillment.hbs       |   6 +
 .../storefront/network/orders/cell/placed.hbs |   1 +
 .../network/orders/cell/reference.hbs         |  13 +
 .../storefront/network/orders/cell/status.hbs |   7 +
 .../storefront/network/orders/cell/stores.hbs |  14 +
 .../storefront/network/orders/cell/stores.js  |  33 ++
 .../storefront/network/orders/cell/total.hbs  |  14 +
 .../storefront/network/orders/cell/total.js   |  42 ++
 .../networks/index/network/orders.js          | 468 ++++++------------
 addon/helpers/width-style-px.js               |  15 +
 addon/routes/networks/index/network/orders.js |  26 +-
 addon/styles/storefront-engine.css            | 177 +++++++
 .../networks/index/network/orders.hbs         |  81 ++-
 addon/utils/order-groups.js                   | 135 +++++
 .../storefront/network/orders/cell/actions.js |   1 +
 .../storefront/network/orders/cell/driver.js  |   1 +
 .../network/orders/cell/fulfillment.js        |   1 +
 .../storefront/network/orders/cell/placed.js  |   1 +
 .../network/orders/cell/reference.js          |   1 +
 .../storefront/network/orders/cell/status.js  |   1 +
 .../storefront/network/orders/cell/stores.js  |   1 +
 .../storefront/network/orders/cell/total.js   |   1 +
 app/helpers/width-style-px.js                 |   1 +
 server/src/Http/Resources/Index/Order.php     |   1 +
 translations/en-us.yaml                       |  35 ++
 29 files changed, 871 insertions(+), 325 deletions(-)
 create mode 100644 addon/components/storefront/network/orders/cell/actions.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/actions.js
 create mode 100644 addon/components/storefront/network/orders/cell/driver.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/driver.js
 create mode 100644 addon/components/storefront/network/orders/cell/fulfillment.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/placed.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/reference.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/status.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/stores.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/stores.js
 create mode 100644 addon/components/storefront/network/orders/cell/total.hbs
 create mode 100644 addon/components/storefront/network/orders/cell/total.js
 create mode 100644 addon/helpers/width-style-px.js
 create mode 100644 addon/utils/order-groups.js
 create mode 100644 app/components/storefront/network/orders/cell/actions.js
 create mode 100644 app/components/storefront/network/orders/cell/driver.js
 create mode 100644 app/components/storefront/network/orders/cell/fulfillment.js
 create mode 100644 app/components/storefront/network/orders/cell/placed.js
 create mode 100644 app/components/storefront/network/orders/cell/reference.js
 create mode 100644 app/components/storefront/network/orders/cell/status.js
 create mode 100644 app/components/storefront/network/orders/cell/stores.js
 create mode 100644 app/components/storefront/network/orders/cell/total.js
 create mode 100644 app/helpers/width-style-px.js

diff --git a/addon/components/storefront/network/orders/cell/actions.hbs b/addon/components/storefront/network/orders/cell/actions.hbs
new file mode 100644
index 00000000..83051540
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/actions.hbs
@@ -0,0 +1,25 @@
+<div class="storefront-order-actions" data-test-order-actions>
+    {{#if @row.isGroup}}
+        <span class="storefront-order-driver__muted">{{t "storefront.networks.orders.expand-hint"}}</span>
+    {{else}}
+        {{#if this.primary}}
+            <Button @size="xs" @type={{or this.primary.type "primary"}} @icon={{this.primary.icon}} @text={{this.primary.text}} @onClick={{fn this.run this.primary}} @permission="storefront update order" />
+        {{/if}}
+        <DropdownButton @icon="ellipsis-h" @size="xs" @iconPrefix="fas" @text={{false}} @renderInPlace={{false}} as |dd|>
+            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="order-actions">
+                <div class="px-1">
+                    {{#each this.secondary as |item|}}
+                        {{#if item.separator}}
+                            <div class="next-dd-menu-seperator"></div>
+                        {{else}}
+                            <a href="javascript:;" class="next-dd-item {{item.class}} {{if item.disabled 'opacity-50 pointer-events-none'}}" {{on "click" (dropdown-fn dd this.run item)}}>
+                                {{#if item.icon}}<FaIcon @icon={{item.icon}} class="mr-1" />{{/if}}
+                                {{item.text}}
+                            </a>
+                        {{/if}}
+                    {{/each}}
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/actions.js b/addon/components/storefront/network/orders/cell/actions.js
new file mode 100644
index 00000000..b5ad6334
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/actions.js
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+/**
+ * The next action for an order promoted to a button, the rest behind an ellipsis.
+ * A checkout group has no action of its own; its orders do.
+ */
+export default class StorefrontNetworkOrdersCellActionsComponent extends Component {
+    @service storefrontOrderActions;
+
+    get items() {
+        const { row, column } = this.args;
+
+        if (row?.isGroup) {
+            return [];
+        }
+
+        return this.storefrontOrderActions.actionItemsFor(row, column?.onChange);
+    }
+
+    get primary() {
+        return this.items.find((item) => item.id === 'perform-workflow-action') ?? null;
+    }
+
+    get secondary() {
+        const primary = this.primary;
+        const rest = this.items.filter((item) => item !== primary);
+        const { row, column } = this.args;
+
+        return [
+            { text: 'View order', icon: 'eye', fn: () => column?.onView?.(row) },
+            ...rest,
+            { separator: true },
+            { text: 'Delete order', icon: 'trash', class: 'text-danger', fn: () => column?.onDelete?.(row) },
+        ];
+    }
+
+    @action run(item) {
+        if (typeof item?.fn === 'function') {
+            item.fn();
+        }
+    }
+}
diff --git a/addon/components/storefront/network/orders/cell/driver.hbs b/addon/components/storefront/network/orders/cell/driver.hbs
new file mode 100644
index 00000000..18595d37
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/driver.hbs
@@ -0,0 +1,16 @@
+<div class="storefront-order-driver" data-test-order-driver>
+    {{#if this.driver}}
+        <Resource::Pill @resourceType="driver" @resource={{this.driver}} @size="xs" />
+        {{#if (and @row.isGroup (gt @row.orderCount 1))}}
+            <span class="storefront-order-driver__note">{{t "storefront.networks.orders.driver-shared" count=@row.orderCount}}</span>
+        {{/if}}
+    {{else if this.isPickup}}
+        <span class="storefront-order-driver__muted">{{t "storefront.networks.orders.no-driver-needed"}}</span>
+    {{else if (gt this.driverCount 1)}}
+        <span class="storefront-order-driver__muted">{{t "storefront.networks.orders.drivers-count" count=this.driverCount}}</span>
+    {{else if this.canAssign}}
+        <Button @size="xs" @icon="id-card" @text={{t "storefront.networks.orders.assign-driver"}} @onClick={{fn @column.onAssign @row}} @permission="storefront update order" />
+    {{else}}
+        <span class="storefront-order-driver__muted">{{t "storefront.networks.orders.unassigned"}}</span>
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/driver.js b/addon/components/storefront/network/orders/cell/driver.js
new file mode 100644
index 00000000..c0420634
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/driver.js
@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import { relationValue } from '@fleetbase/ember-ui/utils/resource-registry';
+import { rankOf } from '../../../../../utils/order-groups';
+
+export default class StorefrontNetworkOrdersCellDriverComponent extends Component {
+    get row() {
+        return this.args.row;
+    }
+
+    get driver() {
+        if (this.row?.isGroup) {
+            return this.row.driver;
+        }
+
+        return relationValue(this.row, 'driver_assigned') ?? null;
+    }
+
+    get isPickup() {
+        return Boolean(this.row?.isGroup ? this.row.is_pickup : get(this.row, 'meta.is_pickup'));
+    }
+
+    get driverCount() {
+        return this.row?.isGroup ? this.row.driverCount : this.driver ? 1 : 0;
+    }
+
+    get isTerminal() {
+        return this.row?.isGroup ? this.row.allTerminal : rankOf(this.row?.status) >= 4;
+    }
+
+    get canAssign() {
+        return !this.row?.isGroup && !this.isPickup && !this.driver && !this.isTerminal && typeof this.args.column?.onAssign === 'function';
+    }
+}
diff --git a/addon/components/storefront/network/orders/cell/fulfillment.hbs b/addon/components/storefront/network/orders/cell/fulfillment.hbs
new file mode 100644
index 00000000..b170ef10
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/fulfillment.hbs
@@ -0,0 +1,6 @@
+{{#let (if @row.isGroup @row.is_pickup @row.meta.is_pickup) as |isPickup|}}
+    <span class="storefront-fulfillment {{if isPickup 'storefront-fulfillment--pickup' 'storefront-fulfillment--delivery'}}" data-test-order-fulfillment>
+        <FaIcon @icon={{if isPickup "store" "truck"}} @size="xs" class="mr-1" />
+        {{if isPickup (t "storefront.common.pickup") (t "storefront.networks.orders.delivery")}}
+    </span>
+{{/let}}
diff --git a/addon/components/storefront/network/orders/cell/placed.hbs b/addon/components/storefront/network/orders/cell/placed.hbs
new file mode 100644
index 00000000..cfcd22f6
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/placed.hbs
@@ -0,0 +1 @@
+<span class="storefront-order-placed" title={{@row.createdAt}} data-test-order-placed>{{if @row.isGroup @row.createdAtShort @row.createdAtShort}}</span>
diff --git a/addon/components/storefront/network/orders/cell/reference.hbs b/addon/components/storefront/network/orders/cell/reference.hbs
new file mode 100644
index 00000000..6217e173
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/reference.hbs
@@ -0,0 +1,13 @@
+<div class="storefront-order-ref" data-test-order-reference>
+    {{#if @row.isGroup}}
+        <span class="storefront-order-ref__id">{{@row.id}}</span>
+        <span class="storefront-order-ref__meta">{{t "storefront.networks.orders.group-summary" orders=@row.orderCount items=@row.itemCount}}</span>
+    {{else}}
+        <a href="javascript:;" class="storefront-order-ref__id storefront-order-ref__id--link" {{on "click" (fn @column.onView @row)}}>{{@row.public_id}}</a>
+        {{#if @row.meta.checkout_id}}
+            <span class="storefront-order-ref__meta">{{t "storefront.networks.orders.part-of" checkout=@row.meta.checkout_id}}</span>
+        {{else if @row.item_count}}
+            <span class="storefront-order-ref__meta">{{t "storefront.networks.orders.items-count" count=@row.item_count}}</span>
+        {{/if}}
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/status.hbs b/addon/components/storefront/network/orders/cell/status.hbs
new file mode 100644
index 00000000..79def0bd
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/status.hbs
@@ -0,0 +1,7 @@
+<div class="storefront-order-status" data-test-order-status>
+    {{#if @row.isGroup}}
+        <Badge @status={{@row.status}} @size="xs" @text={{t "storefront.networks.orders.group-status" count=@row.statusSummary.count total=@row.statusSummary.total status=(smart-humanize @row.status)}} />
+    {{else}}
+        <Badge @status={{@row.status}} @size="xs" />
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/stores.hbs b/addon/components/storefront/network/orders/cell/stores.hbs
new file mode 100644
index 00000000..1214a70b
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/stores.hbs
@@ -0,0 +1,14 @@
+<div class="storefront-identity-stack" data-test-order-stores>
+    {{#each this.visible as |entry|}}
+        {{#if entry.store}}
+            <Resource::Pill @resourceType="store" @resource={{entry.store}} @size="xs" @class="storefront-identity-stack__pill" />
+        {{else}}
+            <span class="storefront-identity-stack__text" title={{entry.name}}>{{entry.name}}</span>
+        {{/if}}
+    {{else}}
+        <span class="text-gray-400">{{t "storefront.networks.orders.no-store"}}</span>
+    {{/each}}
+    {{#if this.overflow}}
+        <span class="storefront-identity-stack__overflow" title={{this.overflowTitle}}>+{{this.overflow}}</span>
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/stores.js b/addon/components/storefront/network/orders/cell/stores.js
new file mode 100644
index 00000000..5b06f590
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/stores.js
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { orderStoreId, orderStoreName } from '../../../../../utils/order-groups';
+
+const MAX_VISIBLE = 4;
+
+/**
+ * The stores behind a row: one for an order, up to four tiles plus an overflow count for a checkout group.
+ */
+export default class StorefrontNetworkOrdersCellStoresComponent extends Component {
+    get entries() {
+        const { row, column } = this.args;
+        const storesById = column?.storesById ?? {};
+        const ids = row?.isGroup ? (row.storeIds ?? []) : [orderStoreId(row)].filter(Boolean);
+        const names = row?.isGroup ? (row.storeNames ?? []) : [orderStoreName(row)].filter(Boolean);
+
+        return ids.map((id, index) => ({ id, store: storesById[id] ?? null, name: storesById[id]?.name ?? names[index] ?? names[0] ?? id }));
+    }
+
+    get visible() {
+        return this.entries.slice(0, MAX_VISIBLE);
+    }
+
+    get overflow() {
+        return Math.max(0, this.entries.length - MAX_VISIBLE);
+    }
+
+    get overflowTitle() {
+        return this.entries
+            .slice(MAX_VISIBLE)
+            .map((entry) => entry.name)
+            .join(', ');
+    }
+}
diff --git a/addon/components/storefront/network/orders/cell/total.hbs b/addon/components/storefront/network/orders/cell/total.hbs
new file mode 100644
index 00000000..7f44032e
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/total.hbs
@@ -0,0 +1,14 @@
+<div class="storefront-order-total" data-test-order-total>
+    <span class="storefront-order-total__amount">{{format-currency this.total this.currency}}</span>
+    {{#if this.tip}}
+        <span class="storefront-order-total__tip">
+            {{#if (eq this.tipLabel "split")}}
+                {{t "storefront.networks.orders.tip-split" tip=(format-currency this.tip this.currency) count=@row.orderCount}}
+            {{else if (eq this.tipLabel "shared")}}
+                {{t "storefront.networks.orders.tip-shared" tip=(format-currency this.tip this.currency)}}
+            {{else}}
+                {{t "storefront.networks.orders.tip-to-store" tip=(format-currency this.tip this.currency)}}
+            {{/if}}
+        </span>
+    {{/if}}
+</div>
diff --git a/addon/components/storefront/network/orders/cell/total.js b/addon/components/storefront/network/orders/cell/total.js
new file mode 100644
index 00000000..6f6769a4
--- /dev/null
+++ b/addon/components/storefront/network/orders/cell/total.js
@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+
+function number(value) {
+    const parsed = parseFloat(value);
+
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export default class StorefrontNetworkOrdersCellTotalComponent extends Component {
+    get total() {
+        const { row } = this.args;
+
+        return row?.isGroup ? row.total : number(get(row, 'meta.total') ?? row?.transaction_amount);
+    }
+
+    get tip() {
+        const { row } = this.args;
+
+        return row?.isGroup ? row.tip : number(get(row, 'meta.tip')) + number(get(row, 'meta.delivery_tip'));
+    }
+
+    get currency() {
+        const { row } = this.args;
+
+        return (row?.isGroup ? row.currency : get(row, 'meta.currency') ?? row?.currency) ?? 'USD';
+    }
+
+    get tipLabel() {
+        if (!this.tip) {
+            return null;
+        }
+
+        const { row } = this.args;
+
+        if (row?.isGroup) {
+            return row.orderCount > 1 ? 'split' : 'network';
+        }
+
+        return get(row, 'meta.checkout_id') ? 'shared' : 'store';
+    }
+}
diff --git a/addon/controllers/networks/index/network/orders.js b/addon/controllers/networks/index/network/orders.js
index 2411a5d0..242dc1c6 100644
--- a/addon/controllers/networks/index/network/orders.js
+++ b/addon/controllers/networks/index/network/orders.js
@@ -6,329 +6,156 @@ import { tracked, cached } from '@glimmer/tracking';
 import { isBlank } from '@ember/utils';
 import { timeout, task } from 'ember-concurrency';
 import { action } from '@ember/object';
+import { groupOrdersByCheckout, STATUS_TABS } from '../../../../utils/order-groups';
 
+/**
+ * Everything placed through the network, grouped by checkout: a multi-store purchase is one
+ * row that expands into the order each store fulfils.
+ */
 export default class NetworksIndexNetworkOrdersController extends BaseController {
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service store;
     @service notifications;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `modals-manager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
-
-    /**
-     * Inject the `filters` service
-     *
-     * @var {Service}
-     */
     @service filters;
-
+    @service hostRouter;
     @service storefrontOrderActions;
 
-    /**
-     * Queryable parameters for this controller's model
-     *
-     * @var {Array}
-     */
-    queryParams = this.registeredQueryParams('network-order', []);
+    queryParams = this.registeredQueryParams('network-order', ['view']);
 
     @tracked page = 1;
     @tracked limit;
     @tracked query;
     @tracked sort = '-created_at';
-    @tracked public_id;
-    @tracked internal_id;
-    @tracked tracking;
-    @tracked facilitator;
-    @tracked customer;
-    @tracked driver;
-    @tracked payload;
-    @tracked pickup;
-    @tracked dropoff;
-    @tracked updated_by;
-    @tracked created_by;
     @tracked status;
+    @tracked view = 'grouped';
+    @tracked network;
+    @tracked stores = [];
+    @tracked table;
+
+    get isGrouped() {
+        return this.view !== 'flat';
+    }
+
+    get activeStatusTab() {
+        const current = String(this.status ?? '')
+            .split(',')
+            .filter(Boolean)
+            .sort()
+            .join(',');
 
-    @tracked columns = [
-        {
-            id: 'public-id',
-            label: this.intl.t('storefront.common.id'),
-            valuePath: 'public_id',
-            width: '150px',
-            cellComponent: 'table/cell/anchor',
-            action: this.viewOrder,
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/string',
-        },
-        {
-            id: 'internal-id',
-            label: this.intl.t('storefront.orders.index.internal-id'),
-            valuePath: 'internal_id',
-            width: '125px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/string',
-        },
-        {
-            id: 'customer-name',
-            label: this.intl.t('storefront.orders.index.customer'),
-            valuePath: 'customer.name',
-            cellComponent: 'table/cell/identity',
-            resourceType: 'customer',
-            resourcePath: (order) => relationValue(order, 'customer') ?? buildIdentityStub(order, { type: order.customer_type ?? 'customer', nameKey: 'customer_name' }),
-            action: this.viewCustomer,
-            emptyText: 'No customer',
-            width: '125px',
-            resizable: true,
-            sortable: true,
-            hidden: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-customer'),
-            filterParam: 'customer',
-            model: 'customer',
-        },
-        {
-            id: 'pickup-name',
-            label: this.intl.t('storefront.common.pickup'),
-            valuePath: 'pickupName',
-            cellComponent: 'table/cell/identity',
-            resourceType: 'place',
-            resourcePath: (order) => relationValue(relationValue(order, 'payload'), 'pickup') ?? buildIdentityStub(order, { type: 'place', nameKey: 'pickupName' }),
-            width: '160px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-pickup-location'),
-            filterParam: 'pickup',
-            model: 'place',
-        },
-        {
-            id: 'dropoff-name',
-            label: this.intl.t('storefront.common.dropoff'),
-            valuePath: 'dropoffName',
-            cellComponent: 'table/cell/identity',
-            resourceType: 'place',
-            resourcePath: (order) => relationValue(relationValue(order, 'payload'), 'dropoff') ?? buildIdentityStub(order, { type: 'place', nameKey: 'dropoffName' }),
-            width: '160px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-dropoff-location'),
-            filterParam: 'dropoff',
-            model: 'place',
-        },
-        {
-            id: 'scheduled-at',
-            label: this.intl.t('storefront.orders.index.scheduled-at'),
-            valuePath: 'scheduledAt',
-            sortParam: 'scheduled_at',
-            filterParam: 'scheduled_at',
-            width: '150px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/date',
-        },
-        {
-            id: 'item-count',
-            label: '# Items',
-            cellComponent: 'table/cell/base',
-            valuePath: 'item_count',
-            resizable: true,
-            hidden: true,
-            width: '50px',
-        },
-        {
-            id: 'transaction-amount',
-            label: this.intl.t('storefront.orders.index.transaction-total'),
-            cellComponent: 'table/cell/base',
-            valuePath: 'transaction_amount',
-            width: '50px',
-            resizable: true,
-            hidden: true,
-            sortable: true,
-        },
-        {
-            id: 'tracking-number-tracking-number',
-            label: this.intl.t('storefront.orders.index.tracking-number'),
-            cellComponent: 'table/cell/base',
-            valuePath: 'tracking_number.tracking_number',
-            width: '170px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/string',
-        },
-        {
-            id: 'driver-assigned',
-            label: this.intl.t('storefront.orders.index.driver-assigned'),
-            cellComponent: 'table/cell/identity',
-            resourceType: 'driver',
-            valuePath: 'driver_assigned',
-            resourcePath: (order) =>
-                relationValue(order, 'driver_assigned') ??
-                buildIdentityStub(order, { type: 'driver', load: () => (order.driver_assigned_uuid ? this.store.findRecord('driver', order.driver_assigned_uuid) : null) }),
-            emptyText: 'No driver assigned',
-            width: '170px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-driver-for-order'),
-            filterParam: 'driver',
-            model: 'driver',
-            query: {
-                // no model, serializer, adapter for relations
-                without: ['fleets', 'vendor', 'vehicle', 'currentJob'],
+        return STATUS_TABS.find((tab) => tab.statuses.slice().sort().join(',') === current)?.id ?? 'custom';
+    }
+
+    get statusTabs() {
+        return STATUS_TABS.map((tab) => ({
+            ...tab,
+            label: this.intl.t(`storefront.networks.orders.tabs.${tab.id}`),
+            isActive: tab.id === this.activeStatusTab,
+        }));
+    }
+
+    get storesById() {
+        return this.stores.reduce((map, store) => {
+            map[store.public_id] = store;
+            map[store.id] = store;
+            return map;
+        }, {});
+    }
+
+    /**
+     * Rows for the table: checkout groups in grouped view, orders otherwise.
+     */
+    get rows() {
+        return this.isGrouped ? groupOrdersByCheckout(this.model) : (this.model?.toArray?.() ?? Array.from(this.model ?? []));
+    }
+
+    @cached get columns() {
+        return [
+            {
+                id: 'reference',
+                label: this.intl.t('storefront.networks.orders.columns.reference'),
+                valuePath: 'public_id',
+                cellComponent: 'storefront/network/orders/cell/reference',
+                onView: this.viewOrder,
+                width: '190px',
+                resizable: true,
+                sortable: false,
+            },
+            {
+                id: 'customer',
+                label: this.intl.t('storefront.orders.index.customer'),
+                valuePath: 'customer.name',
+                cellComponent: 'table/cell/identity',
+                resourceType: 'customer',
+                resourcePath: (row) => relationValue(row, 'customer') ?? buildIdentityStub(row, { type: row.customer_type ?? 'customer', nameKey: 'customer_name' }),
+                action: this.viewCustomer,
+                emptyText: this.intl.t('storefront.networks.orders.no-customer'),
+                width: '170px',
+                resizable: true,
+            },
+            {
+                id: 'stores',
+                label: this.intl.t('storefront.networks.index.network.stores.store'),
+                cellComponent: 'storefront/network/orders/cell/stores',
+                storesById: this.storesById,
+                width: '200px',
+                resizable: true,
+            },
+            {
+                id: 'fulfillment',
+                label: this.intl.t('storefront.networks.orders.columns.fulfillment'),
+                cellComponent: 'storefront/network/orders/cell/fulfillment',
+                width: '110px',
+            },
+            {
+                id: 'total',
+                label: this.intl.t('storefront.networks.orders.columns.total'),
+                cellComponent: 'storefront/network/orders/cell/total',
+                width: '140px',
+                resizable: true,
+            },
+            {
+                id: 'driver',
+                label: this.intl.t('storefront.orders.index.driver-assigned'),
+                cellComponent: 'storefront/network/orders/cell/driver',
+                onAssign: this.assignDriver,
+                width: '170px',
+                resizable: true,
+            },
+            {
+                id: 'status',
+                label: this.intl.t('storefront.common.status'),
+                cellComponent: 'storefront/network/orders/cell/status',
+                width: '150px',
+                resizable: true,
             },
-        },
-        {
-            id: 'type',
-            label: this.intl.t('storefront.common.type'),
-            cellComponent: 'cell/humanize',
-            valuePath: 'type',
-            width: '100px',
-            resizable: true,
-            hidden: true,
-            sortable: true,
-        },
-        {
-            id: 'status',
-            label: this.intl.t('storefront.common.status'),
-            valuePath: 'status',
-            cellComponent: 'table/cell/status',
-            width: '120px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/multi-option',
-            // filterOptions: this.statusOptions,
-        },
-        {
-            id: 'created-at',
-            label: this.intl.t('storefront.orders.index.created-at'),
-            valuePath: 'createdAt',
-            sortParam: 'created_at',
-            filterParam: 'created_at',
-            width: '140px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/date',
-        },
-        {
-            id: 'updated-at',
-            label: this.intl.t('storefront.orders.index.updated-at'),
-            valuePath: 'updatedAt',
-            sortParam: 'updated_at',
-            filterParam: 'updated_at',
-            width: '125px',
-            resizable: true,
-            sortable: true,
-            hidden: true,
-            filterable: true,
-            filterComponent: 'filter/date',
-        },
-        {
-            id: 'created-by-name',
-            label: this.intl.t('storefront.orders.index.created-by'),
-            valuePath: 'created_by_name',
-            width: '125px',
-            resizable: true,
-            hidden: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: 'Select user',
-            filterParam: 'created_by',
-            model: 'user',
-        },
-        {
-            id: 'updated-by-name',
-            label: this.intl.t('storefront.orders.index.updated-by'),
-            valuePath: 'updated_by_name',
-            width: '125px',
-            resizable: true,
-            hidden: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-user'),
-            filterParam: 'updated_by',
-            model: 'user',
-        },
-        {
-            id: 'row-actions',
-            label: '',
-            cellComponent: 'table/cell/dropdown',
-            ddButtonText: false,
-            ddButtonIcon: 'ellipsis-h',
-            ddButtonIconPrefix: 'fas',
-            ddMenuLabel: 'Order Actions',
-            cellClassNames: 'overflow-visible',
-            wrapperClass: 'flex items-center justify-end mx-2',
-            width: '12%',
-            actions: [
-                {
-                    id: 'view-order',
-                    label: this.intl.t('storefront.orders.index.view-order'),
-                    icon: 'eye',
-                    fn: this.viewOrder,
-                },
-                {
-                    id: 'cancel-order',
-                    label: this.intl.t('storefront.orders.index.cancel-order'),
-                    icon: 'ban',
-                    fn: this.cancelOrder,
-                },
-                {
-                    separator: true,
-                },
-                {
-                    id: 'delete-order',
-                    label: this.intl.t('storefront.orders.index.delete-order'),
-                    icon: 'trash',
-                    fn: this.deleteOrder,
-                },
-            ],
-            sortable: false,
-            filterable: false,
-            resizable: false,
-            searchable: false,
-        },
-    ];
+            {
+                id: 'placed',
+                label: this.intl.t('storefront.networks.orders.columns.placed'),
+                cellComponent: 'storefront/network/orders/cell/placed',
+                width: '110px',
+            },
+            {
+                id: 'row-actions',
+                label: '',
+                cellComponent: 'storefront/network/orders/cell/actions',
+                onView: this.viewOrder,
+                onCancel: this.cancelOrder,
+                onDelete: this.deleteOrder,
+                onChange: this.refresh,
+                cellClassNames: 'overflow-visible',
+                wrapperClass: 'flex items-center justify-end mx-2',
+                width: '170px',
+                sortable: false,
+                filterable: false,
+                resizable: false,
+                searchable: false,
+            },
+        ];
+    }
 
     /**
      * The search task.
@@ -336,24 +163,33 @@ export default class NetworksIndexNetworkOrdersController extends BaseController
      * @void
      */
     @task({ restartable: true }) *search({ target: { value } }) {
-        // if no query don't search
         if (isBlank(value)) {
             this.query = null;
             return;
         }
 
-        // timeout for typing
         yield timeout(250);
 
-        // reset page for results
         if (this.page > 1) {
             this.page = 1;
         }
 
-        // update the query param
         this.query = value;
     }
 
+    @action selectStatusTab(tab) {
+        this.status = tab.statuses?.length ? tab.statuses.join(',') : null;
+        this.page = 1;
+    }
+
+    @action setView(view) {
+        this.view = view;
+    }
+
+    @action refresh() {
+        return this.hostRouter.refresh();
+    }
+
     /**
      * Opens the storefront customer behind an order. A stub that only carries
      * the customer's name has no page to open.
@@ -368,7 +204,21 @@ export default class NetworksIndexNetworkOrdersController extends BaseController
     }
 
     @action viewOrder(order) {
-        return this.storefrontOrderActions.viewOrder(order);
+        return this.storefrontOrderActions.viewOrder(order, { onChange: this.refresh });
+    }
+
+    @action assignDriver(order) {
+        return this.storefrontOrderActions.assignDriver(order, this.refresh);
+    }
+
+    @action cancelOrder(order) {
+        return this.storefrontOrderActions.cancelOrder(order, this.refresh);
+    }
+
+    @action deleteOrder(order) {
+        return this.crud.delete(order, {
+            onSuccess: () => this.refresh(),
+        });
     }
 
     /**
diff --git a/addon/helpers/width-style-px.js b/addon/helpers/width-style-px.js
new file mode 100644
index 00000000..4b73b2fb
--- /dev/null
+++ b/addon/helpers/width-style-px.js
@@ -0,0 +1,15 @@
+import { helper } from '@ember/component/helper';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * A safe inline width from a column width such as `190px` or `12%`; nothing when unset.
+ */
+export default helper(function widthStylePx([width]) {
+    if (!width) {
+        return htmlSafe('');
+    }
+
+    const value = String(width).trim();
+
+    return htmlSafe(/^\d+(\.\d+)?(px|%|rem|em)$/.test(value) ? `width: ${value}; flex: 0 0 ${value};` : '');
+});
diff --git a/addon/routes/networks/index/network/orders.js b/addon/routes/networks/index/network/orders.js
index d6658315..3b84d1a2 100644
--- a/addon/routes/networks/index/network/orders.js
+++ b/addon/routes/networks/index/network/orders.js
@@ -3,6 +3,16 @@ import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkOrdersRoute extends Route {
     @service fetch;
+    @service store;
+
+    queryParams = {
+        page: { refreshModel: true },
+        limit: { refreshModel: true },
+        sort: { refreshModel: true },
+        query: { refreshModel: true },
+        status: { refreshModel: true },
+        view: { refreshModel: false },
+    };
 
     async model(params) {
         const response = await this.fetch.get('orders', this.buildQueryParams(params), { namespace: 'storefront/int/v1' });
@@ -13,8 +23,22 @@ export default class NetworksIndexNetworkOrdersRoute extends Route {
         return orders;
     }
 
+    async setupController(controller, model) {
+        super.setupController(controller, model);
+        controller.network = this.modelFor('networks.index.network');
+
+        try {
+            const stores = await this.store.query('store', { network: controller.network.id });
+            controller.stores = stores?.toArray?.() ?? Array.from(stores ?? []);
+        } catch {
+            controller.stores = [];
+        }
+    }
+
     buildQueryParams(params = {}) {
-        return Object.entries({ ...params, network: this.modelFor('networks.index.network').public_id }).reduce((queryParams, [key, value]) => {
+        const { view, ...rest } = params;
+
+        return Object.entries({ ...rest, network: this.modelFor('networks.index.network').public_id }).reduce((queryParams, [key, value]) => {
             if (value !== undefined && value !== null && value !== '') {
                 queryParams[key] = value;
             }
diff --git a/addon/styles/storefront-engine.css b/addon/styles/storefront-engine.css
index 603a83b0..4cc69007 100644
--- a/addon/styles/storefront-engine.css
+++ b/addon/styles/storefront-engine.css
@@ -4045,3 +4045,180 @@ body[data-theme='dark'] .storefront-invite-panel__tab.is-active {
 body[data-theme='dark'] .storefront-invite-panel__footer {
     border-color: #374151;
 }
+
+/* Network orders: grouped by checkout */
+.storefront-view-toggle {
+    display: inline-flex;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+body[data-theme='dark'] .storefront-view-toggle {
+    border-color: #4b5563;
+}
+
+.storefront-view-toggle__option {
+    padding: 0.25rem 0.625rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #6b7280;
+    background-color: #ffffff;
+}
+
+.storefront-view-toggle__option.is-active {
+    color: #ffffff;
+    background-color: #0284c7;
+}
+
+body[data-theme='dark'] .storefront-view-toggle__option {
+    color: #d1d5db;
+    background-color: #1f2937;
+}
+
+body[data-theme='dark'] .storefront-view-toggle__option.is-active {
+    background-color: #0369a1;
+}
+
+.storefront-order-ref {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.storefront-order-ref__id {
+    font-weight: 600;
+    color: #111827;
+    white-space: nowrap;
+}
+
+.storefront-order-ref__id--link {
+    color: #0284c7;
+}
+
+body[data-theme='dark'] .storefront-order-ref__id {
+    color: #f3f4f6;
+}
+
+body[data-theme='dark'] .storefront-order-ref__id--link {
+    color: #38bdf8;
+}
+
+.storefront-order-ref__meta,
+.storefront-order-total__tip,
+.storefront-order-driver__note,
+.storefront-order-driver__muted {
+    font-size: 0.75rem;
+    color: #6b7280;
+}
+
+body[data-theme='dark'] .storefront-order-ref__meta,
+body[data-theme='dark'] .storefront-order-total__tip,
+body[data-theme='dark'] .storefront-order-driver__note,
+body[data-theme='dark'] .storefront-order-driver__muted {
+    color: #9ca3af;
+}
+
+.storefront-identity-stack {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.storefront-identity-stack__text {
+    max-width: 10rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.storefront-identity-stack__overflow {
+    padding: 0 0.375rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    background-color: #f3f4f6;
+    color: #374151;
+}
+
+body[data-theme='dark'] .storefront-identity-stack__overflow {
+    background-color: #374151;
+    color: #e5e7eb;
+}
+
+.storefront-fulfillment {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.storefront-fulfillment--pickup {
+    color: #7c3aed;
+}
+
+.storefront-fulfillment--delivery {
+    color: #0284c7;
+}
+
+.storefront-order-total {
+    display: flex;
+    flex-direction: column;
+}
+
+.storefront-order-total__amount {
+    font-weight: 600;
+    color: #111827;
+}
+
+body[data-theme='dark'] .storefront-order-total__amount {
+    color: #f3f4f6;
+}
+
+.storefront-order-driver {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.storefront-order-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.375rem;
+}
+
+.storefront-order-group {
+    display: flex;
+    flex-direction: column;
+    background-color: #f9fafb;
+    border-left: 3px solid #0284c7;
+}
+
+body[data-theme='dark'] .storefront-order-group {
+    background-color: rgb(55 65 81 / 40%);
+    border-left-color: #0369a1;
+}
+
+.storefront-order-group__row {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem 0.5rem 2.75rem;
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 0.875rem;
+}
+
+body[data-theme='dark'] .storefront-order-group__row {
+    border-color: #374151;
+}
+
+.storefront-order-group__row:last-child {
+    border-bottom: 0;
+}
+
+.storefront-order-group__cell {
+    flex: 1 1 0;
+    min-width: 0;
+    padding: 0 0.5rem;
+}
diff --git a/addon/templates/networks/index/network/orders.hbs b/addon/templates/networks/index/network/orders.hbs
index d759a373..2685bb65 100644
--- a/addon/templates/networks/index/network/orders.hbs
+++ b/addon/templates/networks/index/network/orders.hbs
@@ -1,18 +1,69 @@
-<Layout::Section::Header @title={{t "storefront.common.orders"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+<Layout::Section::Header @title={{t "storefront.common.orders"}} @subtitle={{t "storefront.networks.orders.subtitle"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <div class="storefront-view-toggle mr-2" role="group" data-test-order-view-toggle>
+        <button type="button" class="storefront-view-toggle__option {{if this.isGrouped 'is-active'}}" {{on "click" (fn this.setView "grouped")}}>{{t "storefront.networks.orders.group-by-checkout"}}</button>
+        <button type="button" class="storefront-view-toggle__option {{unless this.isGrouped 'is-active'}}" {{on "click" (fn this.setView "flat")}}>{{t "storefront.networks.orders.flat"}}</button>
+    </div>
     <Layout::Resource::ActionButtons @buttons={{this.registeredActionButtons}} />
 </Layout::Section::Header>
 
-<Layout::Section::Body>
-    <Table
-        @wrapperClass="overscroll-y-none"
-        @rows={{@model}}
-        @columns={{this.registeredColumns}}
-        @selectable={{true}}
-        @canSelectAll={{true}}
-        @onSetup={{fn (mut this.table)}}
-        @pagination={{true}}
-        @paginationMeta={{@model.meta}}
-        @page={{this.page}}
-        @onPageChange={{fn (mut this.page)}}
-    />
-</Layout::Section::Body>
\ No newline at end of file
+<Layout::Section::Body class="overflow-y-scroll-i h-full">
+    <div class="storefront-status-tabs px-4 pt-3" role="tablist" data-test-order-status-tabs>
+        {{#each this.statusTabs as |tab|}}
+            <button type="button" role="tab" aria-selected={{if tab.isActive "true" "false"}} class="storefront-status-tab {{if tab.isActive 'is-active'}}" {{on "click" (fn this.selectStatusTab tab)}} data-test-status-tab={{tab.id}}>
+                {{tab.label}}
+            </button>
+        {{/each}}
+    </div>
+
+    {{#if this.isGrouped}}
+        <Table
+            @wrapperClass="overscroll-y-none storefront-network-orders-table"
+            @rows={{this.rows}}
+            @columns={{this.registeredColumns}}
+            @canExpand={{true}}
+            @onSetup={{fn (mut this.table)}}
+            @pagination={{true}}
+            @paginationMeta={{@model.meta}}
+            @page={{this.page}}
+            @onPageChange={{fn (mut this.page)}}
+            @insertPagination={{true}}
+            @useTfootPagination={{true}}
+            as |t|
+        >
+            <t.head />
+            <t.body as |b|>
+                <b.expanded-row as |group|>
+                    {{#if group.isGroup}}
+                        <div class="storefront-order-group" data-test-order-group={{group.id}}>
+                            {{#each group.orders as |order|}}
+                                <div class="storefront-order-group__row">
+                                    {{#each t.columns as |column|}}
+                                        <div class="storefront-order-group__cell" style={{width-style-px column.width}}>
+                                            {{#if column.cellComponent}}
+                                                {{component column.cellComponent row=order column=column value=(get order column.valuePath)}}
+                                            {{else}}
+                                                {{get order column.valuePath}}
+                                            {{/if}}
+                                        </div>
+                                    {{/each}}
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                </b.expanded-row>
+            </t.body>
+        </Table>
+    {{else}}
+        <Table
+            @wrapperClass="overscroll-y-none storefront-network-orders-table"
+            @rows={{this.rows}}
+            @columns={{this.registeredColumns}}
+            @onSetup={{fn (mut this.table)}}
+            @pagination={{true}}
+            @paginationMeta={{@model.meta}}
+            @page={{this.page}}
+            @onPageChange={{fn (mut this.page)}}
+        />
+    {{/if}}
+    <p class="storefront-invitation-list__note px-4">{{t "storefront.networks.orders.group-note"}}</p>
+</Layout::Section::Body>
diff --git a/addon/utils/order-groups.js b/addon/utils/order-groups.js
new file mode 100644
index 00000000..72e43ee0
--- /dev/null
+++ b/addon/utils/order-groups.js
@@ -0,0 +1,135 @@
+import { get } from '@ember/object';
+
+/**
+ * Where an order sits in the fulfillment flow, so a group can report its least-advanced child.
+ */
+export const STATUS_RANK = {
+    created: 0,
+    pending: 0,
+    accepted: 1,
+    preparing: 1,
+    ready: 2,
+    pickup_ready: 2,
+    dispatched: 3,
+    driver_enroute: 3,
+    en_route: 3,
+    out_for_delivery: 3,
+    completed: 4,
+    picked_up: 4,
+    canceled: 5,
+    order_canceled: 5,
+};
+
+/**
+ * The status tabs the network orders page offers and the statuses each one queries.
+ */
+export const STATUS_TABS = [
+    { id: 'all', statuses: [] },
+    { id: 'needs-action', statuses: ['created', 'pending'] },
+    { id: 'preparing', statuses: ['accepted', 'preparing'] },
+    { id: 'ready', statuses: ['ready', 'pickup_ready'] },
+    { id: 'dispatched', statuses: ['dispatched', 'driver_enroute', 'en_route', 'out_for_delivery'] },
+    { id: 'completed', statuses: ['completed', 'picked_up'] },
+    { id: 'canceled', statuses: ['canceled', 'order_canceled'] },
+];
+
+export function rankOf(status) {
+    return STATUS_RANK[String(status ?? '').toLowerCase()] ?? 1;
+}
+
+function number(value) {
+    const parsed = parseFloat(value);
+
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export function orderStoreId(order) {
+    return get(order, 'meta.storefront_id') ?? get(order, 'meta.storefront.public_id') ?? null;
+}
+
+export function orderStoreName(order) {
+    const storefront = get(order, 'meta.storefront');
+
+    return typeof storefront === 'string' ? storefront : (storefront?.name ?? null);
+}
+
+export function groupKeyOf(order) {
+    return get(order, 'meta.checkout_id') ?? get(order, 'meta.master_order_id') ?? null;
+}
+
+/**
+ * Groups the orders of one checkout into a single row. An order without a checkout, or
+ * alone in its checkout, stays a plain order row.
+ *
+ * @param {Array} orders
+ * @returns {Array} group rows and order rows in the orders' original sequence
+ */
+export function groupOrdersByCheckout(orders = []) {
+    const list = orders?.toArray?.() ?? Array.from(orders ?? []);
+    const groups = new Map();
+    const rows = [];
+
+    list.forEach((order) => {
+        const key = groupKeyOf(order);
+
+        if (!key) {
+            rows.push(order);
+            return;
+        }
+
+        if (!groups.has(key)) {
+            const group = { id: key, isGroup: true, orders: [], expanded: false };
+            groups.set(key, group);
+            rows.push(group);
+        }
+
+        groups.get(key).orders.push(order);
+    });
+
+    return rows.map((row) => {
+        if (!row.isGroup) {
+            return row;
+        }
+
+        if (row.orders.length === 1) {
+            return row.orders[0];
+        }
+
+        return summarizeGroup(row);
+    });
+}
+
+export function summarizeGroup(group) {
+    const { orders } = group;
+    const first = orders[0];
+    const statuses = orders.map((order) => String(order.status ?? '').toLowerCase());
+    const leastAdvanced = orders.reduce((lowest, order) => (rankOf(order.status) < rankOf(lowest.status) ? order : lowest), first);
+    const leastRank = rankOf(leastAdvanced.status);
+    const atLeast = orders.filter((order) => rankOf(order.status) === leastRank).length;
+    const drivers = orders.map((order) => order.driver_assigned ?? null).filter(Boolean);
+    const driverIds = new Set(orders.map((order) => order.driver_assigned_uuid ?? order.driver_assigned?.id).filter(Boolean));
+    const currency = get(first, 'meta.currency') ?? first.currency;
+
+    return Object.assign(group, {
+        public_id: group.id,
+        orderCount: orders.length,
+        itemCount: orders.reduce((sum, order) => sum + number(order.item_count ?? order.total_entities), 0),
+        customer: first.customer ?? null,
+        customer_name: first.customer_name ?? first.customer?.name ?? null,
+        customer_type: first.customer_type,
+        storeIds: [...new Set(orders.map(orderStoreId).filter(Boolean))],
+        storeNames: [...new Set(orders.map(orderStoreName).filter(Boolean))],
+        is_pickup: orders.every((order) => get(order, 'meta.is_pickup')),
+        total: orders.reduce((sum, order) => sum + number(get(order, 'meta.total') ?? order.transaction_amount), 0),
+        tip: orders.reduce((sum, order) => sum + number(get(order, 'meta.tip')) + number(get(order, 'meta.delivery_tip')), 0),
+        currency,
+        driver: driverIds.size === 1 ? (drivers[0] ?? null) : null,
+        driverCount: driverIds.size,
+        status: leastAdvanced.status,
+        statuses,
+        statusSummary: { count: atLeast, total: orders.length, status: leastAdvanced.status },
+        created_at: first.created_at,
+        createdAtShort: first.createdAtShort,
+        allTerminal: orders.every((order) => rankOf(order.status) >= 4),
+    });
+}
diff --git a/app/components/storefront/network/orders/cell/actions.js b/app/components/storefront/network/orders/cell/actions.js
new file mode 100644
index 00000000..9444505e
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/actions.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/actions';
diff --git a/app/components/storefront/network/orders/cell/driver.js b/app/components/storefront/network/orders/cell/driver.js
new file mode 100644
index 00000000..baa196db
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/driver.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/driver';
diff --git a/app/components/storefront/network/orders/cell/fulfillment.js b/app/components/storefront/network/orders/cell/fulfillment.js
new file mode 100644
index 00000000..6cb97846
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/fulfillment.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/fulfillment';
diff --git a/app/components/storefront/network/orders/cell/placed.js b/app/components/storefront/network/orders/cell/placed.js
new file mode 100644
index 00000000..1b11e0e1
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/placed.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/placed';
diff --git a/app/components/storefront/network/orders/cell/reference.js b/app/components/storefront/network/orders/cell/reference.js
new file mode 100644
index 00000000..0c0ec923
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/reference.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/reference';
diff --git a/app/components/storefront/network/orders/cell/status.js b/app/components/storefront/network/orders/cell/status.js
new file mode 100644
index 00000000..3f73de26
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/status.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/status';
diff --git a/app/components/storefront/network/orders/cell/stores.js b/app/components/storefront/network/orders/cell/stores.js
new file mode 100644
index 00000000..5ce35c2f
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/stores.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/stores';
diff --git a/app/components/storefront/network/orders/cell/total.js b/app/components/storefront/network/orders/cell/total.js
new file mode 100644
index 00000000..0763cf9d
--- /dev/null
+++ b/app/components/storefront/network/orders/cell/total.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/components/storefront/network/orders/cell/total';
diff --git a/app/helpers/width-style-px.js b/app/helpers/width-style-px.js
new file mode 100644
index 00000000..081345a0
--- /dev/null
+++ b/app/helpers/width-style-px.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/helpers/width-style-px';
diff --git a/server/src/Http/Resources/Index/Order.php b/server/src/Http/Resources/Index/Order.php
index 75ef05b9..a51ccdac 100644
--- a/server/src/Http/Resources/Index/Order.php
+++ b/server/src/Http/Resources/Index/Order.php
@@ -35,6 +35,7 @@ private function storefrontOrderMeta(): array
             'storefront_id',
             'storefront_network',
             'storefront_network_id',
+            'checkout_id',
             'subtotal',
             'delivery_fee',
             'tip',
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index 13269860..65322fe6 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -367,6 +367,41 @@ storefront:
       recent-orders: Recent network orders
       all-orders: All orders
       no-orders: No orders through this network in the last seven days.
+    orders:
+      subtitle: Everything placed through the marketplace app, grouped by checkout
+      group-by-checkout: Group by checkout
+      flat: Flat
+      tabs:
+        all: All
+        needs-action: Needs action
+        preparing: Preparing
+        ready: Ready for pickup
+        dispatched: Out for delivery
+        completed: Completed
+        canceled: Canceled
+        custom: Filtered
+      columns:
+        reference: Checkout / order
+        fulfillment: Fulfillment
+        total: Total
+        placed: Placed
+      group-summary: "{orders, plural, one {# order} other {# orders}} · {items, plural, one {# item} other {# items}}"
+      part-of: "part of {checkout}"
+      items-count: "{count, plural, one {# item} other {# items}}"
+      no-customer: No customer
+      no-store: No store
+      delivery: Delivery
+      tip-split: "tip {tip} split {count} ways"
+      tip-shared: "+ tip {tip} shared"
+      tip-to-store: "tip {tip} to store"
+      driver-shared: "shared across {count} orders"
+      no-driver-needed: No driver needed
+      drivers-count: "{count} drivers"
+      assign-driver: Assign driver
+      unassigned: Unassigned
+      group-status: "{count} of {total} {status}"
+      expand-hint: Expand for each store's order
+      group-note: Group status is the least-advanced child; a group leaves "Needs action" when every child has a driver or is ready for pickup.
     invitations:
       title: Invitations
       invite-stores: Invite stores

From bde36132023a37fb79f33cde8c0f3e0d3d91313c Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Sat, 10 Oct 2026 17:30:13 +0800
Subject: [PATCH 13/13] fix(network-orders): alias the orders query params so
 they cannot collide with the networks list's page, sort and query

---
 addon/controllers/networks/index/network/orders.js |  2 +-
 addon/routes/networks/index/network/orders.js      | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/addon/controllers/networks/index/network/orders.js b/addon/controllers/networks/index/network/orders.js
index 242dc1c6..d6a011a9 100644
--- a/addon/controllers/networks/index/network/orders.js
+++ b/addon/controllers/networks/index/network/orders.js
@@ -23,7 +23,7 @@ export default class NetworksIndexNetworkOrdersController extends BaseController
     @service hostRouter;
     @service storefrontOrderActions;
 
-    queryParams = this.registeredQueryParams('network-order', ['view']);
+    queryParams = this.registeredQueryParams('network-order', [{ page: 'o_page' }, { limit: 'o_limit' }, { sort: 'o_sort' }, { query: 'o_query' }, { status: 'o_status' }, { view: 'o_view' }]);
 
     @tracked page = 1;
     @tracked limit;
diff --git a/addon/routes/networks/index/network/orders.js b/addon/routes/networks/index/network/orders.js
index 3b84d1a2..c573a839 100644
--- a/addon/routes/networks/index/network/orders.js
+++ b/addon/routes/networks/index/network/orders.js
@@ -6,12 +6,12 @@ export default class NetworksIndexNetworkOrdersRoute extends Route {
     @service store;
 
     queryParams = {
-        page: { refreshModel: true },
-        limit: { refreshModel: true },
-        sort: { refreshModel: true },
-        query: { refreshModel: true },
-        status: { refreshModel: true },
-        view: { refreshModel: false },
+        page: { refreshModel: true, as: 'o_page' },
+        limit: { refreshModel: true, as: 'o_limit' },
+        sort: { refreshModel: true, as: 'o_sort' },
+        query: { refreshModel: true, as: 'o_query' },
+        status: { refreshModel: true, as: 'o_status' },
+        view: { refreshModel: false, as: 'o_view' },
     };
 
     async model(params) {