|
|
|
@@ -2,10 +2,9 @@ import { useState } from "react";
|
|
|
|
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
|
|
|
import type { Bootstrap, Item } from "../../types.js";
|
|
|
|
|
import { helpers, TODAY_STR, enrichItems } from "../../types.js";
|
|
|
|
|
import { remainingShort } from "../../stats.js";
|
|
|
|
|
import { fmt } from "../../format.js";
|
|
|
|
|
import { api } from "../../api.js";
|
|
|
|
|
import { Btn, Field, Icon, Input, Select, Textarea } from "../primitives/index.js";
|
|
|
|
|
import { Btn, Field, Icon, Input, Textarea } from "../primitives/index.js";
|
|
|
|
|
import { ScanField, type ScanResult } from "../ScanField.js";
|
|
|
|
|
import { ModalBackdrop, ModalHeader, ModalFooter } from "./ModalChrome.js";
|
|
|
|
|
import { useToast } from "../Toast.js";
|
|
|
|
@@ -44,11 +43,6 @@ export function ConsumeFlow({
|
|
|
|
|
const handleScan = (result: ScanResult) => {
|
|
|
|
|
if (result.kind === "item") {
|
|
|
|
|
setItemId(result.item.id);
|
|
|
|
|
} else {
|
|
|
|
|
const candidate = active
|
|
|
|
|
.filter((i) => i.productId === result.product.id)
|
|
|
|
|
.sort((a, b) => +new Date(b.purchaseDate) - +new Date(a.purchaseDate))[0];
|
|
|
|
|
if (candidate) setItemId(candidate.id);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
@@ -68,28 +62,16 @@ export function ConsumeFlow({
|
|
|
|
|
boxShadow: "var(--shadow-lg)",
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<ModalHeader title="Mark as consumed" eyebrow="Archive · used up" onClose={onClose} />
|
|
|
|
|
<ModalHeader title="Mark as consumed" eyebrow="" onClose={onClose} />
|
|
|
|
|
|
|
|
|
|
<div style={{ padding: 32 }}>
|
|
|
|
|
<ScanField
|
|
|
|
|
items={active}
|
|
|
|
|
products={data.products}
|
|
|
|
|
products={[]}
|
|
|
|
|
matchedLabel={item ? `${item.assetId} · ${item.name}` : null}
|
|
|
|
|
onMatch={handleScan}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div style={{ marginTop: 16 }}>
|
|
|
|
|
<Field label="Or pick from list">
|
|
|
|
|
<Select value={itemId} onChange={(e) => setItemId(e.target.value)}>
|
|
|
|
|
{active.map((i) => (
|
|
|
|
|
<option key={i.id} value={i.id}>
|
|
|
|
|
{i.assetId} · {i.name} — {helpers.brandName(data, i.brandId)} ({remainingShort(i)} left)
|
|
|
|
|
</option>
|
|
|
|
|
))}
|
|
|
|
|
</Select>
|
|
|
|
|
</Field>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
style={{
|
|
|
|
|
marginTop: 16,
|
|
|
|
|