ConusAI vendor v0.1.0-beta.114

modules/inventory/ui/stock.tsx

@@ -0,0 +1,59 @@
+// An item's stock: the totals and one row per location that holds any. Part of a page's view (F10): it
+// holds no state, and every string is passed in.
+
+import { FactList, PageSection, type ResourceColumn, ResourceList } from "@conusai-kit/ui/patterns"
+import type { ReactElement } from "react"
+import type { AvailabilityView } from "../contract/index.js"
+
+export interface StockLabels {
+  /** `Counted in {unit}`, already filled. */
+  readonly unit: string
+  /** How many locations hold stock, already filled with the plural form. */
+  readonly locations: string
+  readonly onHand: string
+  readonly reserved: string
+  readonly available: string
+  readonly caption: string
+  readonly location: string
+  readonly none: string
+}
+
+type Level = AvailabilityView["locations"][number]
+
+export function Stock({
+  availability,
+  locationName,
+  labels,
+}: {
+  availability: AvailabilityView
+  /** The location's name for a person; the service knows locations by id. */
+  locationName: (locationId: string) => string
+  labels: StockLabels
+}): ReactElement {
+  const columns: ResourceColumn<Level>[] = [
+    { id: "locationId", header: labels.location, cell: (level) => locationName(level.locationId) },
+    { id: "onHand", header: labels.onHand, align: "end" },
+    { id: "reserved", header: labels.reserved, align: "end" },
+    { id: "available", header: labels.available, align: "end" },
+  ]
+  return (
+    <PageSection title={labels.caption} description={labels.unit}>
+      <FactList
+        facts={[
+          { label: labels.onHand, value: availability.onHand },
+          { label: labels.reserved, value: availability.reserved },
+          { label: labels.available, value: availability.available },
+        ]}
+      />
+      <ResourceList
+        label={labels.caption}
+        columns={columns}
+        data={availability.locations}
+        rowId={(level) => level.locationId}
+        count={labels.locations}
+        rowLabel={(level) => locationName(level.locationId)}
+        empty={{ title: labels.none }}
+      />
+    </PageSection>
+  )
+}