kempo-inventory 0.3.0 → 0.3.2

package/README.md

@@ -446,3 +446,7 @@ All routes require a session holding the permission above.
 ## Development
 
 The documentation site is written in `docs-src/` and built into `docs/` (served by GitHub Pages from the `docs` folder). Edit `docs-src/`, never `docs/`, then run `npm run docs:build`; `npm run docs:dev` serves it on port 4050. Screenshots come in pairs: write `<img src="./media/name.png" ...>` in a page, and put `name-light.png` and `name-dark.png` in `docs-src/media`. The build turns the tag into both images and the site shows the one matching the visitor's theme.
+
+## Dashboard widget
+
+Adds a **Inventory** widget to the kempo admin dashboard showing item, unit and out-of-stock counts and the latest stock movements, with a **New item** button. It is declared in `widgets` in `kempo-config.json` and registered when the extension is installed or updated; people only see it if they hold its permission, and can hide, reorder or resize it from the dashboard's Customize dialog. Needs a kempo with the dashboard (see kempo's `docs/dashboard.md`); on an older kempo the entry is ignored.

package/admin/nav.global.html

@@ -1,3 +1,3 @@
-<content id="kempo-inventory-nav" name="Inventory" owner="kempo-inventory" enabled="true" locked="true" location="admin-nav-extensions" priority="20">
+<content id="kempo-inventory-nav" name="Inventory" owner="kempo-inventory" enabled="true" locked="true" location="admin-nav-extensions" priority="30">
 <k-aside-item icon="archive" group="Commerce" href="/admin/extension/kempo-inventory/" no-expand>Inventory</k-aside-item>
 </content>

package/kempo-config.json

@@ -1,6 +1,22 @@
 {
   "public-scope": "inventory",
   "schema": "./server/db/schema.js",
+  "widgets": [
+    {
+      "key": "stock",
+      "title": "Inventory",
+      "description": "Item and unit counts, what is out of stock and the latest stock movements.",
+      "icon": "archive",
+      "element": "k-inv-widget",
+      "module": "/inventory/components/StockWidget.js",
+      "defaultWidth": 2,
+      "defaultHeight": 2,
+      "minWidth": 1,
+      "minHeight": 2,
+      "permission": "kempo-inventory:items:read",
+      "priority": 100
+    }
+  ],
   "permissions": [
     {
       "name": "kempo-inventory:items:read",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-inventory",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "A basic inventory management system for kempo cms",
   "license": "MIT",
   "author": "Dustin Poissant",

package/public/components/StockWidget.js

@@ -0,0 +1,71 @@
+import DashboardWidget from '/kempo/components/DashboardWidget.js';
+import { html, nothing } from '/kempo-ui/lit-all.min.js';
+import { getItems, getMovements } from '/inventory/sdk.js';
+const stat = (value, label, classes = '') => html`<div class="flex"><div class="h2 m0 ${classes}">${value}</div><div class="small tc-muted">${label}</div></div>`;
+
+/*
+  Stock at a glance. Unit and out-of-stock figures are shown only when the page fetched holds every
+  item, so they are never an under-count.
+*/
+export default class StockWidget extends DashboardWidget {
+  static properties = {
+    ...DashboardWidget.properties,
+    total: { state: true },
+    units: { state: true },
+    outOfStock: { state: true },
+    movements: { state: true },
+    names: { state: true }
+  };
+
+  constructor(){
+    super();
+    this.total = 0;
+    this.units = null;
+    this.outOfStock = null;
+    this.movements = [];
+    this.names = {};
+    this.cta = { label: 'New item', icon: 'add', href: '/admin/extension/kempo-inventory/new', permission: 'kempo-inventory:items:create' };
+  }
+
+  /*
+    Public Methods
+  */
+
+  load = async () => {
+    const [items, movements] = await Promise.all([
+      this.unwrap(getItems({ limit: 500 })),
+      this.unwrap(getMovements({ limit: 9 }))
+    ]);
+    const complete = items.items.length >= items.total;
+    this.total = items.total;
+    this.units = complete ? items.items.reduce((sum, item) => sum + item.quantity, 0) : null;
+    this.outOfStock = complete ? items.items.filter(item => item.quantity <= 0).length : null;
+    this.names = Object.fromEntries(items.items.map(item => [item.id, item.name]));
+    this.movements = movements.movements;
+  };
+
+  /*
+    Rendering
+  */
+
+  renderContent(){
+    if(!this.total) return html`<p class="tc-muted">No items yet.</p>`;
+    return html`
+      <div class="d-f mb">
+        ${stat(this.total, 'Items')}
+        ${stat(this.units ?? '\u2014', 'Units')}
+        ${stat(this.outOfStock ?? '\u2014', 'Out of stock', this.outOfStock ? 'tc-danger' : '')}
+      </div>
+      ${this.movements.length ? html`<div class="small tc-muted mbq">Latest movements</div>` : nothing}
+      ${this.movements.slice(0, this.height * 2).map(movement => html`
+        <div class="d-f pyq bb">
+          <span class="flex">${this.names[movement.itemId] || movement.itemId}</span>
+          <strong class=${movement.delta < 0 ? 'tc-danger' : ''}>${movement.delta > 0 ? '+' : ''}${movement.delta}</strong>
+          <span class="small tc-muted ml">${movement.reason}</span>
+        </div>
+      `)}
+    `;
+  }
+}
+
+customElements.define('k-inv-widget', StockWidget);