David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(plan): correct three edit instructions against the real source

Browse source 
The approval card renders the JSON inside a <pre> with max-h-48 classes,
the composer already imports Textarea, and the POS tile is built in a
template string rather than a class-join expression. Each instruction
now names the code that is actually there.
This commit is contained in:
Dave 2026-11-05 07:16:03 +02:00
parent 9254eecc9a
commit a8958abc70
1 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
docs/superpowers/plans/2026-11-05-giellie-stock-quantity-update.md
View file

@ -1641,18 +1641,22 @@ export function renderToolInput(toolName: string, input: unknown): ReactNode {
}
```
Find the line in the component that renders the JSON and replace it:
Find the block in the component that renders the JSON (it sits in a `<pre>` that carries the `max-h-48 overflow-auto` classes) and replace it:
```tsx
<pre className="text-xs">{JSON.stringify(tu.input, null, 2)}</pre>
<pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words text-xs text-muted-foreground">
{JSON.stringify(tu.input, null, 2)}
</pre>
```
with:
```tsx
{renderToolInput(tu.name, tu.input)}
{renderToolInput(tu.name, tu.input)}
```
The table brings its own scroll container, so the `<pre>` wrapper goes with it.
Make sure `ReactNode` is imported. If the file does not already import it from react, add:
```tsx
@ -1798,12 +1802,20 @@ Add the button next to the existing icon buttons, and the panel next to the text
)}
```
Add `Package` to the lucide-react import. If `Textarea` is not already imported from the ui components, add it:
The icon import at the top of the file is currently:
```tsx
import { Textarea } from "@/components/ui/textarea";
import { Camera, Paperclip, Send, X } from "lucide-react";
```
Change it to:
```tsx
import { Camera, Package, Paperclip, Send, X } from "lucide-react";
```
`Textarea` is already imported from `@/components/ui/textarea` — do not add a second import.
- [ ] **Step 4: Run the test to verify it passes**
Run: `npx vitest run src/components/giellie/composer.test.tsx`
@ -1906,31 +1918,33 @@ In `src/lib/server/pos-service.ts`, in `listActiveStockCatalog`, add `min_qty` t
- [ ] **Step 4: Draw the quantity on the tile**
In `public/pos/pos-app.js`, find the tile rendering (around line 283) where the `.sub` line is built:
In `public/pos/pos-app.js`, the tile is built in a template string inside `render()` (around line 275). Add the two locals just above the `return` that opens the tile template:
```js
const sub = [p.sku, p.brand, p.unit, qty ? qty + ' in cart' : ''].filter(Boolean).join(' · ');
const stockQty = Number(p.current_qty ?? 0);
const oos = stockQty <= 0;
```
Then change the button's opening tag so the tile carries the `oos` class:
```js
return `<button class="prod${oos ? ' oos' : ''}" data-id="${p.id}" data-od-id="prod-${p.id}">
```
And change the `.sub` line to carry the quantity. The line is currently:
```js
<div class="sub">${escapeHTML(p.sku||'')}${p.brand?' · '+escapeHTML(p.brand):''}${p.unit?' · '+escapeHTML(p.unit):''}${inCart?' · '+inCart+' in cart':''}</div>
```
Replace it with:
```js
const stockQty = Number(p.current_qty ?? 0);
const inStock = stockQty + ' in stock';
const sub = [p.sku, p.brand, p.unit, inStock, qty ? qty + ' in cart' : ''].filter(Boolean).join(' · ');
const oos = stockQty <= 0;
<div class="sub">${escapeHTML(p.sku||'')}${p.brand?' · '+escapeHTML(p.brand):''}${p.unit?' · '+escapeHTML(p.unit):''} · ${stockQty} in stock${inCart?' · '+inCart+' in cart':''}</div>
```
The wording is deliberately literal — a negative quantity reads `-2581 in stock`, because the operator chose to see the real number rather than a clamped zero. The sign is the signal; the tile styling only reinforces it.
Now find where the tile element is created and add the `oos` class to its class list, so the styling applies:
```js
const cls = 'prod' + (oos ? ' oos' : '');
```
Use whatever the existing class-building expression is — this is the change: append ` oos` when `oos` is true.
In `public/pos/pos.html`, add the styling after the `.prod .price small` rule (line 98). `--danger` already exists in `:root` (`#c92a2a`):
```css