.",
"htmx's trigger filter binds to the event name, not to the end of the spec: input[this.value.length > 1] changed delay:300ms. Written as input changed delay:300ms[…] it is parsed as part of the modifier and the floor never applies. And below that floor nothing fires at all, so deleting back to one character has to clear the rows in script or last search's answer stays on screen under a query that no longer produced it.",
"In Django the multiselect field needs a widget whose value_from_datadict calls getlist — forms.MultipleHiddenInput or forms.SelectMultiple. A ModelMultipleChoiceField handed a plain HiddenInput reads the POST with .get(), which returns the last hidden input and drops every other vendor the user picked. Seed the option list with json_script and never interpolate a queryset into an x-data attribute: one vendor called M/s D'Souza Traders ends the attribute early and the component stops parsing."
],
"anatomy": [
{
"part": "Field",
"description": "The bordered box. It owns the focus ring through focus-within, as the input does, so the icon, the chips and the clear button sit inside the ring."
},
{
"part": "Search input",
"description": "role=\"combobox\" with aria-autocomplete=\"list\", aria-controls, aria-expanded and aria-activedescendant. It has no name — it is the search, not the value."
},
{
"part": "Hidden input",
"description": "What actually posts. One for a single select; one per value sharing a name for a multiselect."
},
{
"part": "Popup",
"description": "An absolutely positioned panel pinned to both edges of the field, x-show and x-cloak, holding a scrolling listbox."
},
{
"part": "Option",
"description": "role=\"option\" with a stable id and aria-selected. The active row is tinted bg-zinc-100 and named by aria-activedescendant, which is a different fact from being selected."
},
{
"part": "Chip",
"description": "A committed value in a multiselect field: the graphite pill with its ring, a truncating label, and a remove button whose accessible name says which vendor it removes."
},
{
"part": "Empty state",
"description": "What the popup shows at zero matches — the query quoted back and the way out of it."
},
{
"part": "Live region",
"description": "A sr-only role=\"status\" outside the popup, in the document from first paint, carrying the number of matches."
}
],
"behaviour": [
"Typing filters, and the first keystroke moves the highlight to the first match, so Enter always takes the row at the top of the list.",
"Opening does not filter to the value already in the box. The query counts as a filter only once the user has typed, or a committed vendor reopens to a list of exactly one row.",
"Arrow down and up move the highlight and clamp at the ends. Enter commits, Escape closes without committing and leaves focus in the input, Tab closes and moves on.",
"The highlight follows the mouse as well as the keyboard, so the row under the pointer and the row Enter would take are never two different rows.",
"A single select closes on commit and writes the label back into the box. A multiselect stays open, clears the query, and leaves the highlight on the row just toggled.",
"Backspace on an empty query removes the last chip. It fires only when the query is empty, so it never eats a character somebody was still deleting.",
"Select all applies to the rows the filter is showing and says how many that is; Clear releases everything and says how many that is.",
"Selected values are chips in the field, not a number beside it. Where a bulk control can select nine at once the field shows one name and collapses everything past it into a pill, so the box holds a single row at every count and every width rather than growing one when the pill appears. The popup is where the whole selection is legible and every row can be toggled off.",
"Remote options are fetched by htmx on a debounced input with a two-character floor. Alpine never fetches: it owns the open state and the keyboard, and because htmx replaced the rows without telling Alpine, the keyboard reads the option elements out of the DOM rather than out of an array.",
"A value that is not in the list is offered as the last row whenever there is a query and no exact match, and it posts as text in a second field rather than as an invented id."
],
"accessibility": [
"The input is role=\"combobox\" with aria-expanded, aria-controls naming the listbox, aria-autocomplete=\"list\" and aria-activedescendant naming the active option.",
"The popup is role=\"listbox\" with an accessible name, every row is role=\"option\" with aria-selected, and a multiselect listbox carries aria-multiselectable=\"true\".",
"Focus never leaves the input. The highlight moves through aria-activedescendant, which is why every option needs a stable id and why no row is a tab stop.",
"The number of matches is announced from a role=\"status\" that was in the document before the count changed.",
"Every chip remove button names its own option — \"Remove Nashik Steel Traders\" — because twelve buttons all called Remove say nothing about which one the cursor is on.",
"Grouped options sit in role=\"group\" with an aria-label, and the visible sticky heading is aria-hidden: the group is already named, and a bare paragraph is not a permitted child of a listbox.",
"Escape closes the list and leaves focus in the input, and stops propagating only while the list is open, so a second Escape still reaches the dialog around it.",
"A disabled field disables the hidden input as well as the box. An invalid field sets aria-invalid=\"true\" and points aria-describedby at real text under it, never at a title attribute."
],
"related": [
"input",
"checkbox",
"command-palette"
],
"variants": [
{
"id": "default",
"name": "Single select",
"html": "\n (o.label + ' ' + o.meta).toLowerCase().includes(s));\n },\n get chosen() { return this.options.find(o => o.id === this.sel) || null; },\n rowId(o) { return 'cb-vendor-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() {\n if (this.open) return;\n this.open = true; this.typed = false;\n this.ai = Math.max(0, this.list.findIndex(o => o.id === this.sel));\n this.scroll();\n },\n close() { this.open = false; this.typed = false; this.q = this.chosen ? this.chosen.label : ''; },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n edge(end) { if (!this.list.length) return; this.ai = end ? this.list.length - 1 : 0; this.scroll(); },\n pick(o) { this.sel = o.id; this.close(); this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.pick(o); },\n clear() { this.sel = null; this.q = ''; this.typed = false; this.open = false; this.$refs.q.focus(); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Vendor * \n\n
\n \n \n\n \n \n \n \n \n
\n\n \n
\n\n
Only vendors with a live rate contract are listed.
\n\n \n
\n\n
\n\n
\n
\n \n \n \n
\n \n
\n\n \n
\n
No vendor matches “
\n
Check the spelling, or search by vendor code — VEN-0142.
\n
\n
\n
(o.label + ' ' + o.meta).toLowerCase().includes(s));\n },\n has(id) { return this.sel.includes(id); },\n label(id) { const o = this.options.find(x => x.id === id); return o ? o.label : id; },\n rowId(o) { return 'cb-rfq-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() { if (!this.open) { this.open = true; this.typed = false; this.ai = 0; this.scroll(); } },\n close() { this.open = false; this.typed = false; this.q = ''; },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n edge(end) { if (!this.list.length) return; this.ai = end ? this.list.length - 1 : 0; this.scroll(); },\n toggle(o) {\n this.sel = this.has(o.id) ? this.sel.filter(v => v !== o.id) : [...this.sel, o.id];\n this.q = ''; this.typed = false;\n this.ai = Math.max(0, this.list.findIndex(x => x.id === o.id));\n this.$refs.q.focus();\n },\n drop(id) { this.sel = this.sel.filter(v => v !== id); this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.toggle(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Send this RFQ to \n\n
\n\n \n \n \n \n \n \n\n
\n\n \n
\n \n\n
\n\n
\n\n
\n\n
\n
\n \n \n \n \n
\n \n
\n\n
\n
No vendor matches “
\n
Search by vendor code instead — VEN-0142.
\n
\n
\n
0; },\n get list() {\n if (!this.filtering) return this.options;\n const s = this.q.trim().toLowerCase();\n return this.options.filter(o => (o.label + ' ' + o.meta).toLowerCase().includes(s));\n },\n get allShown() { return this.list.length > 0 && this.list.every(o => this.sel.includes(o.id)); },\n cap: 1,\n get chips() { return this.sel.length > this.cap ? this.sel.slice(0, 1) : this.sel; },\n get extra() { return this.sel.length - this.chips.length; },\n has(id) { return this.sel.includes(id); },\n label(id) { const o = this.options.find(x => x.id === id); return o ? o.label : id; },\n drop(id) { this.sel = this.sel.filter(v => v !== id); this.$refs.q.focus(); },\n rowId(o) { return 'cb-cc-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() { if (!this.open) { this.open = true; this.typed = false; this.ai = 0; this.scroll(); } },\n close() { this.open = false; this.typed = false; this.q = ''; },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n toggle(o) {\n this.sel = this.has(o.id) ? this.sel.filter(v => v !== o.id) : [...this.sel, o.id];\n this.$refs.q.focus();\n },\n takeShown() { this.sel = [...new Set([...this.sel, ...this.list.map(o => o.id)])]; this.$refs.q.focus(); },\n clearAll() { this.sel = []; this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.toggle(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Cost centres this expense is split across \n\n \n
\n\n \n \n \n \n \n \n\n \n \n\n
\n\n
\n \n\n
\n\n
\n\n
\n\n
\n \n \n \n \n
\n\n
\n\n
\n
\n \n \n \n
\n \n
\n\n
\n
No cost centre matches “
\n
Cost centres run from CC-1100 upwards.
\n
\n
\n
g.options); },\n match(g) {\n if (!this.typed) return g.options;\n const s = this.q.trim().toLowerCase();\n return g.options.filter(o => (o.label + ' ' + o.meta + ' ' + g.state).toLowerCase().includes(s));\n },\n get list() { return this.groups.flatMap(g => this.match(g)); },\n rowId(o) { return 'cb-state-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() {\n if (this.open) return;\n this.open = true; this.typed = false;\n this.ai = Math.max(0, this.list.findIndex(o => o.id === this.sel));\n this.scroll();\n },\n close() {\n this.open = false; this.typed = false;\n const o = this.all.find(x => x.id === this.sel);\n this.q = o ? o.label : '';\n },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n pick(o) { this.sel = o.id; this.close(); this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.pick(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Ship-from vendor \n\n
\n
\n\n
\n\n
\n\n
\n\n
\n
\n \n
\n
\n x.id === o.id)\"\n :class=\"list[ai] && list[ai].id === o.id ? 'bg-zinc-100' : ''\"\n class=\"flex items-center gap-2.5 px-3 py-2 text-[13px]/5\">\n \n \n
\n \n
\n
\n\n
\n
No vendor matches “
\n
Try a state — Maharashtra, Gujarat, Tamil Nadu.
\n
\n
\n
(o.label + ' ' + o.code + ' ' + o.gstin).toLowerCase().includes(s));\n },\n get chosen() { return this.options.find(o => o.id === this.sel) || null; },\n rowId(o) { return 'cb-rich-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() {\n if (this.open) return;\n this.open = true; this.typed = false;\n this.ai = Math.max(0, this.list.findIndex(o => o.id === this.sel));\n this.scroll();\n },\n close() { this.open = false; this.typed = false; this.q = this.chosen ? this.chosen.label : ''; },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n pick(o) { this.sel = o.id; this.close(); this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.pick(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Vendor \n\n
\n
\n\n
\n\n
\n\n
\n\n
\n
\n \n \n \n \n \n · \n · \n \n \n \n \n
\n \n
\n\n
\n
No vendor matches “
\n
A GSTIN search needs all 15 characters.
\n
\n
\n
el.classList.toggle('bg-zinc-100', i === this.ai));\n const el = r[this.ai];\n this.aid = el ? el.id : null;\n if (el) el.scrollIntoView({ block: 'nearest' });\n },\n move(n) {\n if (!this.open) { this.open = true; return; }\n const r = this.rows();\n if (!r.length) return;\n this.ai = Math.min(r.length - 1, Math.max(0, this.ai + n));\n this.paint();\n },\n take(el) {\n if (!el) return;\n this.sel = el.dataset.value; this.label = el.dataset.label; this.term = this.label;\n this.rows().forEach(r => r.setAttribute('aria-selected', r === el));\n this.$refs.q.value = this.label;\n this.open = false; this.aid = null;\n this.$refs.q.focus();\n },\n commit() { this.take(this.rows()[this.ai]); },\n changed(v) {\n this.term = v; this.open = true; this.failed = false;\n if (v.trim().length < 2) { this.searched = false; this.empty = false; this.$refs.list.innerHTML = ''; }\n },\n close() { this.open = false; this.aid = null; this.term = this.label; this.$refs.q.value = this.label; }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\"\n @htmx:before-request.camel=\"loading = true; failed = false; open = true\"\n @htmx:after-request.camel=\"loading = false; if (!$event.detail.successful) failed = true\"\n @htmx:after-swap.camel=\"searched = true; ai = 0; $nextTick(() => { empty = rows().length === 0; paint() })\">\n\n
Vendor \n\n
\n \n \n
\n\n
\n\n
\n\n
\n\n \n
\n\n
\n
Type two characters to search 248 vendors.
\n
\n\n
\n\n
\n
No vendor matches “
\n
248 vendors searched by name, code and GSTIN.
\n
\n\n
\n
\n
\n
Type another character to try again.
\n
\n
\n
(o.label + ' ' + o.meta).toLowerCase().includes(s));\n },\n get creating() {\n return this.term.length > 0 &&\n !this.options.some(o => o.label.toLowerCase() === this.term.toLowerCase());\n },\n get list() {\n return this.creating ? [...this.found, { id: '__new', label: this.term, isNew: true }] : this.found;\n },\n rowId(o) { return 'cb-new-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n show() { if (!this.open) { this.open = true; this.typed = false; this.ai = 0; this.scroll(); } },\n close() {\n this.open = false; this.typed = false;\n const o = this.options.find(x => x.id === this.sel);\n this.q = o ? o.label : this.fresh;\n },\n move(n) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = Math.min(this.list.length - 1, Math.max(0, this.ai + n));\n this.scroll();\n },\n pick(o) {\n if (o.isNew) { this.sel = ''; this.fresh = o.label; }\n else { this.sel = o.id; this.fresh = ''; }\n this.close();\n this.$refs.q.focus();\n },\n commit() { const o = this.list[this.ai]; if (o) this.pick(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Vendor on the quotation \n\n
\n
\n\n \n
\n
\n\n
\n\n
\n\n
\n\n
\n
\n \n \n \n
\n \n
\n
\n
\n\n \n
\n
Vendor \n
\n \n \n
\n
\n
Set on the rate contract. It changes there, not here.
\n
\n\n \n
\n
Vendor
\n
\n VEN-0142 \n
\n
\n
Fixed when GRN-24-0912 was posted against this order.
\n
\n\n \n
(o.label + ' ' + o.meta).toLowerCase().includes(s));\n },\n get chosen() { return this.options.find(o => o.id === this.sel) || null; },\n rowId(o) { return 'cb-bad-' + o.id; },\n get activeId() { return this.open && this.list[this.ai] ? this.rowId(this.list[this.ai]) : null; },\n scroll() { this.$nextTick(() => { const el = document.getElementById(this.activeId); if (el) el.scrollIntoView({ block: 'nearest' }); }); },\n next(from, step) {\n for (let i = from + step; i >= 0 && i < this.list.length; i += step) {\n if (!this.list[i].blocked) return i;\n }\n return from < 0 ? 0 : from;\n },\n show() { if (!this.open) { this.open = true; this.typed = false; this.ai = this.next(-1, 1); this.scroll(); } },\n close() { this.open = false; this.typed = false; this.q = this.chosen ? this.chosen.label : ''; },\n move(step) {\n if (!this.open) { this.show(); return; }\n if (!this.list.length) return;\n this.ai = this.next(this.ai, step);\n this.scroll();\n },\n pick(o) { if (o.blocked) return; this.sel = o.id; this.close(); this.$refs.q.focus(); },\n commit() { const o = this.list[this.ai]; if (o) this.pick(o); }\n }\"\n @click.outside=\"close()\"\n @keydown.escape=\"if (open) { $event.stopPropagation(); close(); $refs.q.focus() }\">\n\n
Vendor * \n\n
\n
\n\n
\n\n
\n
\n\n
\n\n
\n\n \n
\n
\n \n Rate contract expired \n
\n \n
\n\n
\n
No vendor matches “
\n
Two of these five are locked until their rate contract is renewed.
\n
\n
\n
\n
\n {{ v.name }} \n {{ v.code }} \n
\n{% endfor %}"
}
]
},
{
"id": "attachment",
"name": "Attachment",
"category": "forms",
"description": "The documents hanging off a record — a drop zone over the list of what is already there. Every file shows its type, size, who attached it and when.",
"when_to_use": "Any record people staple paperwork to: quotations against an order, a signed GRN, a delivery photo, an invoice PDF. For a single file that is really just one field of a form, use the single-file variant rather than a whole panel.",
"rules": [
"Keep a real \n
Attachments \n\n
0 ? 'border-zinc-700 bg-zinc-50' : 'border-zinc-200 bg-zinc-100'\">\n
\n Drag files here or \n \n Browse files\n \n PDF, JPG or XLSX · up to 10 MB each \n
\n
\n\n
\n \n \n
quotation-sharma-extrusions-aug.pdf
\n
248 KB · Ritu Deshpande · 19 Aug 2024
\n
\n \n \n \n \n \n \n
rate-comparison-q3.xlsx
\n
54 KB · Anil Kulkarni · 14 Aug 2024
\n
\n \n \n \n \n \n
\n
Attachments \n
0 ? 'border-zinc-700 bg-zinc-50' : 'border-zinc-200 bg-zinc-100'\">\n
\n
No documents on this order yet
\n
\n Approvals above ₹10,00,000 need the vendor quotation attached before the plant head can sign off.\n
\n
\n
\n \n
PDF, JPG or XLSX · up to 10 MB each
\n
\n
\n \n \n
\n
\n
signed-grn-1142.pdf
\n
1.8 MB of 4.2 MB
\n
\n
43% \n
\n \n
\n \n \n
delivery-gate-photo.jpg
\n
1.1 MB · Ritu Deshpande · just now
\n
\n "
},
{
"id": "rejected",
"name": "Rejected file",
"html": "\n\n \n \n
quotation-sharma-extrusions-aug.pdf
\n
248 KB · Ritu Deshpande · 19 Aug 2024
\n
\n \n \n \n \n
plant-layout-revised.dwg
\n
\n
\n
\n \n \n "
},
{
"id": "readonly",
"name": "Read only",
"html": "\n\n
\n
Attachments \n 3 files · 2.4 MB \n \n
\n
\n
\n Signed GRN * \n \n
\n
\n
\n
signed-grn-1142.pdf
\n
4.2 MB · attached just now
\n
\n
\n
\n Replace\n \n
\n
PDF or JPG, up to 10 MB.
\n
\n
\n Delivery photographs \n 4 of 10 \n
\n
\n
\n
\n
\n \n
gate-in-truck.jpg
\n
\n
\n
\n
\n \n
unloading-bay-3.jpg
\n
\n
\n
\n
\n \n
weighbridge-slip.jpg
\n
\n
\n \n Add photo \n \n
\n
\n
\n
Attachment \n\n
\n\n
\n \n \n
\n\n
Uploading a new file replaces the current one.
\n
\n
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n sel: null,\n vy: new Date().getFullYear(),\n vm: new Date().getMonth(),\n today: (() => { const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n move(n) {\n const f = this.parse(this.focus);\n f.setDate(f.getDate() + n);\n this.focus = this.iso(f.getFullYear(), f.getMonth(), f.getDate());\n this.vy = f.getFullYear(); this.vm = f.getMonth();\n this.$nextTick(() => { const b = this.$refs.grid.querySelector('[data-focus]'); if (b) b.focus(); });\n },\n cls(s) {\n if (s === this.sel) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'bg-zinc-200 font-medium text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n }\">\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n sel: null,\n vy: new Date().getFullYear(),\n vm: new Date().getMonth(),\n today: (() => { const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n move(n) {\n const f = this.parse(this.focus);\n f.setDate(f.getDate() + n);\n this.focus = this.iso(f.getFullYear(), f.getMonth(), f.getDate());\n this.vy = f.getFullYear(); this.vm = f.getMonth();\n this.$nextTick(() => { const b = this.$refs.grid.querySelector('[data-focus]'); if (b) b.focus(); });\n },\n pick(s) { this.sel = s; this.focus = s; this.open = false; this.$nextTick(() => this.$refs.trigger.focus()); },\n cls(s) {\n if (s === this.sel) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'bg-zinc-200 font-medium text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n }\" @click.outside=\"open = false\" @keydown.escape.window=\"open = false\">\n
Due date \n
\n\n
\n \n\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n Clear \n Today \n
\n
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n start: null, end: null, hover: null,\n pick(s) {\n if (!this.start || (this.start && this.end)) { this.start = s; this.end = null; return; }\n if (s < this.start) { this.end = this.start; this.start = s; } else { this.end = s; }\n this.hover = null;\n },\n tail() { return this.end || this.hover; },\n isEnd(s) { return s === this.start || s === this.end; },\n span() { return (this.start && this.end) ? Math.round((this.parse(this.end) - this.parse(this.start)) / 86400000) + 1 : 0; },\n band(s) {\n const t = this.tail();\n if (!this.start || !t || this.start === t) return '';\n const lo = this.start < t ? this.start : t, hi = this.start < t ? t : this.start;\n if (s < lo || s > hi) return '';\n if (s === lo) return 'bg-zinc-200 rounded-l-lg';\n if (s === hi) return 'bg-zinc-200 rounded-r-lg';\n return 'bg-zinc-200';\n },\n cls(s) {\n if (this.isEnd(s)) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'font-medium text-zinc-900 ring-1 ring-inset ring-zinc-400 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n }\">\n
\n \n \n \n \n
\n
\n
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n Clear \n
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n sel: null,\n months: ['January','February','March','April','May','June','July','August','September','October','November','December'],\n years: (() => { const y = new Date().getFullYear(); const a = []; for (let i = y - 8; i <= y + 3; i++) a.push(i); return a; })(),\n vy: new Date().getFullYear(),\n vm: new Date().getMonth(),\n today: (() => { const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n move(n) {\n const f = this.parse(this.focus);\n f.setDate(f.getDate() + n);\n this.focus = this.iso(f.getFullYear(), f.getMonth(), f.getDate());\n this.vy = f.getFullYear(); this.vm = f.getMonth();\n this.$nextTick(() => { const b = this.$refs.grid.querySelector('[data-focus]'); if (b) b.focus(); });\n },\n cls(s) {\n if (s === this.sel) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'bg-zinc-200 font-medium text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n }\">\n
\n \n \n\n Month \n clamp())\"\n class=\"h-8 min-w-0 flex-1 rounded-lg border border-zinc-200 bg-white px-2 text-[13px]/5 font-medium outline-none focus:border-zinc-700 focus:ring-3 focus:ring-zinc-700/15\">\n \n \n \n\n Year \n clamp())\"\n class=\"h-8 shrink-0 rounded-lg border border-zinc-200 bg-white px-2 text-[13px]/5 font-medium tabular-nums outline-none focus:border-zinc-700 focus:ring-3 focus:ring-zinc-700/15\">\n \n \n \n\n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n sel: null,\n holidays: ['2026-10-02', '2026-11-08', '2026-12-25'],\n vy: new Date().getFullYear(),\n vm: new Date().getMonth(),\n today: (() => { const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n move(n) {\n const f = this.parse(this.focus);\n f.setDate(f.getDate() + n);\n this.focus = this.iso(f.getFullYear(), f.getMonth(), f.getDate());\n this.vy = f.getFullYear(); this.vm = f.getMonth();\n this.$nextTick(() => { const b = this.$refs.grid.querySelector('[data-focus]'); if (b) b.focus(); });\n },\n max: (() => { const t = new Date(); t.setDate(t.getDate() + 90); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n blocked(s, dow) { return s < this.today || s > this.max || dow === 0 || this.holidays.includes(s); },\n why(s, dow) {\n if (s < this.today) return ' — in the past';\n if (s > this.max) return ' — beyond the 90 day window';\n if (dow === 0) return ' — Sunday, plant closed';\n if (this.holidays.includes(s)) return ' — plant holiday';\n return '';\n },\n cls(s) {\n if (s === this.sel) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'bg-zinc-200 font-medium text-zinc-900 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n }\">\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Sundays and plant holidays are closed. Delivery can be booked up to 90 days ahead.
\n
{ const t = new Date(); return t.getFullYear() + '-' + String(t.getMonth() + 1).padStart(2, '0') + '-' + String(t.getDate()).padStart(2, '0'); })(),\n head: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],\n iso(y, m, d) { return y + '-' + String(m + 1).padStart(2, '0') + '-' + String(d).padStart(2, '0'); },\n parse(s) { const p = s.split('-'); return new Date(+p[0], +p[1] - 1, +p[2]); },\n title(o) { return new Date(this.vy, this.vm + o, 1).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }); },\n long(s) { return this.parse(s).toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); },\n fmt(s) { return s ? this.parse(s).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' }) : '—'; },\n weeks(o) {\n const y = this.vy, m = this.vm + o;\n const lead = (new Date(y, m, 1).getDay() + 6) % 7;\n const total = new Date(y, m + 1, 0).getDate();\n const cells = [];\n for (let i = 0; i < lead; i++) cells.push(null);\n for (let d = 1; d <= total; d++) {\n const dt = new Date(y, m, d);\n cells.push({ iso: this.iso(dt.getFullYear(), dt.getMonth(), d), day: d, dow: dt.getDay() });\n }\n while (cells.length % 7) cells.push(null);\n const out = [];\n for (let i = 0; i < cells.length; i += 7) out.push(cells.slice(i, i + 7));\n return out;\n },\n shift(n) { const v = new Date(this.vy, this.vm + n, 1); this.vy = v.getFullYear(); this.vm = v.getMonth(); this.clamp(); },\n clamp() {\n if (!this.focus) return;\n const f = this.parse(this.focus);\n if (f.getFullYear() === this.vy && f.getMonth() === this.vm) return;\n const last = new Date(this.vy, this.vm + 1, 0).getDate();\n this.focus = this.iso(this.vy, this.vm, Math.min(f.getDate(), last));\n },\n start: null, end: null, hover: null,\n pick(s) {\n if (!this.start || (this.start && this.end)) { this.start = s; this.end = null; return; }\n if (s < this.start) { this.end = this.start; this.start = s; } else { this.end = s; }\n this.hover = null;\n },\n tail() { return this.end || this.hover; },\n isEnd(s) { return s === this.start || s === this.end; },\n span() { return (this.start && this.end) ? Math.round((this.parse(this.end) - this.parse(this.start)) / 86400000) + 1 : 0; },\n band(s) {\n const t = this.tail();\n if (!this.start || !t || this.start === t) return '';\n const lo = this.start < t ? this.start : t, hi = this.start < t ? t : this.start;\n if (s < lo || s > hi) return '';\n if (s === lo) return 'bg-zinc-200 rounded-l-lg';\n if (s === hi) return 'bg-zinc-200 rounded-r-lg';\n return 'bg-zinc-200';\n },\n cls(s) {\n if (this.isEnd(s)) return 'bg-zinc-700 font-medium text-white hover:bg-zinc-800';\n if (s === this.today) return 'font-medium text-zinc-900 ring-1 ring-inset ring-zinc-400 hover:bg-zinc-300';\n return 'text-zinc-900 hover:bg-zinc-200';\n }\n ,\n presets: ['Today', 'Last 7 days', 'Last 30 days', 'This month', 'Last month', 'This FY'],\n preset: null,\n apply(name) {\n const t = new Date(), y = t.getFullYear(), m = t.getMonth(), d = t.getDate();\n let a, b;\n if (name === 'Today') { a = new Date(y, m, d); b = new Date(y, m, d); }\n if (name === 'Last 7 days') { a = new Date(y, m, d - 6); b = new Date(y, m, d); }\n if (name === 'Last 30 days') { a = new Date(y, m, d - 29); b = new Date(y, m, d); }\n if (name === 'This month') { a = new Date(y, m, 1); b = new Date(y, m + 1, 0); }\n if (name === 'Last month') { a = new Date(y, m - 1, 1); b = new Date(y, m, 0); }\n if (name === 'This FY') { a = new Date(m < 3 ? y - 1 : y, 3, 1); b = new Date(y, m, d); }\n this.start = this.iso(a.getFullYear(), a.getMonth(), a.getDate());\n this.end = this.iso(b.getFullYear(), b.getMonth(), b.getDate());\n this.preset = name;\n this.vy = a.getFullYear(); this.vm = a.getMonth();\n },\n tap(s) { this.preset = null; this.pick(s); }\n }\" @click.outside=\"open = false\" @keydown.escape.window=\"open = false\">\n
\n \n\n
\n
\n \n \n \n \n
\n\n
\n
\n \n \n \n \n
\n
\n
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n Clear \n Apply \n
\n
\n
\n
\n
\n
GRN date \n
\n
\n
Cannot be later than the invoice date.
\n
, never on . Lucide replaces the with an and any binding on it dies.",
"Sidebar state persists under the localStorage key kon-sidebar. The [ shortcut is ignored while focus is in an input, textarea or select.",
"Only the scrolls. The shell root is h-[640px] here so it previews in a box — as a real page put h-screen overflow-hidden on and drop the wrapper border.",
"Below lg the sidebar is off-canvas with a backdrop; the topbar menu button is the only way to open it, so never hide that button on mobile."
],
"anatomy": [
{
"part": "Sidebar",
"description": "255px expanded, a 68px rail collapsed. Off-canvas with a backdrop below lg."
},
{
"part": "Collapse control",
"description": "A full-width strip whose icon sits in a fixed 68px box at the left, so the aim point does not move between states."
},
{
"part": "Topbar",
"description": "Search, notifications, account, and the menu button that is the only way to open the sidebar on a phone."
},
{
"part": "Main",
"description": "The single scrolling column. Everything else in the application renders inside it."
},
{
"part": "Backdrop",
"description": "Below lg only, dimming the main column while the off-canvas sidebar is open."
}
],
"behaviour": [
"Only scrolls. The shell itself is a fixed-height flex frame, so the sidebar and topbar never move.",
"The collapse control keeps its icon at identical coordinates in both states — a control that moves out from under the cursor feels broken even when every click lands.",
"Collapsed labels hide with lg:hidden rather than being removed, so the DOM and the tab order do not change shape.",
"Sidebar state persists under the localStorage key kon-sidebar, so it survives a reload.",
"The [ shortcut toggles the sidebar, and is ignored while focus is in an input, textarea or select.",
"Below lg the sidebar is off-canvas over a backdrop, which is why the topbar menu button must never be hidden on mobile."
],
"accessibility": [
"The sidebar is a with an accessible name, so it can be skipped as a landmark.",
"The collapse control is a real button with aria-expanded reflecting the state.",
"Collapsed items keep an accessible name even with the label visually hidden, or the rail becomes a column of unnamed icons.",
"The off-canvas sidebar traps focus while open on mobile and returns it to the menu button on close.",
"A skip link to comes first in the DOM, so the keyboard is not walked through the whole nav on every page."
],
"related": [
"sidebar-nav",
"topbar",
"page-header"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": " localStorage.setItem('kon-sidebar', v ? '1' : '0'))\"\n @keydown.escape.window=\"nav = false\"\n @keydown.window=\"if ($event.key === '[' && !/^(input|textarea|select)$/i.test($event.target.tagName)) sidebar = !sidebar\">\n\n \n
\n\n
\n\n \n
\n
\n \n \n \n Procurement / Overview \n \n \n
\n
\n
\n \n
AP \n
\n\n
\n \n
\n
Procurement overview \n
Live commitments, receipts and vendor performance · FY 2026–27
\n
\n
\n
\n
Open commitment
\n
₹1,66,40,000
\n
Across 148 purchase orders
\n
\n
\n
Awaiting GRN
\n
27
\n
9 past the promised date
\n
\n
\n
Pending my approval
\n
4
\n
Oldest raised 3 days ago
\n
\n
\n
\n
\n
with aria-label=\"Breadcrumb\" and marks the current page with aria-current.",
"Tabs are a tablist with roles and arrow-key movement, not a row of styled links.",
"The action cluster reads in the same order it is drawn, so the primary action is not announced first by accident.",
"Status in the meta line is text as well as colour."
],
"related": [
"breadcrumbs",
"tabs",
"app-shell"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": "\n
\n
\n Procurement \n / \n Purchase orders \n / \n PO-24-1187 \n \n
Sharma Steel & Alloys \n
PO-24-1187 · raised 04 Aug 2026 by Akshay Prabhu · Fabrication
\n
\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n Master data \n / \n Gujarat Polymers Ltd \n \n
\n Gujarat Polymers Ltd\n \n \n \n
V-0412 · GSTIN 24AACCG1234F1ZP · Vapi, Gujarat
\n
\n
\n \n
\n\n
\n Open orders \n \n Rate contracts 6 \n \n Receipts \n Documents \n
\n
\n
\n
\n
Purchase orders \n
Every order raised against a Konspec plant or project
\n
\n
\n \n \n \n \n
\n
\n\n
\n \n Status: Overdue\n \n \n Plant: Silvassa\n \n \n Value over ₹5,00,000\n \n Clear all \n 34 of 148 orders · ₹2,18,64,500 \n
\n
\n
\n
Delivery terms \n \n
\n
\n \n
Incoterm \n FOR Silvassa plant \n \n \n
Lead time \n 14 days from PO release \n \n \n
Payment \n 45 days from GRN \n \n \n
Freight \n Vendor scope, included in rate \n \n \n
\n
\n
\n
\n
Attached documents \n
Quotation, drawing and test certificate
\n
\n
\n Download all \n \n \n
\n
\n
\n \n \n quotation-sharma-aug.pdf \n 248 KB · uploaded 04 Aug by Akshay Prabhu \n \n View \n \n \n \n drg-fab-2211-rev-c.pdf \n 1.4 MB · uploaded 05 Aug by Nilesh Patil \n \n View \n \n \n
\n
\n
Order value \n
PO-24-1187 · 9 lines · Sharma Steel & Alloys
\n
\n
\n
₹18,42,000
\n
Inclusive of 18% GST · freight in vendor scope
\n
\n
Received against this order 62%
\n
\n
\n
\n
\n
\n
Received
\n
₹11,42,040
\n
\n
\n
Invoiced
\n
₹9,80,000
\n
\n
\n
\n
\n
Approval policy \n
\n Who has to sign off before an order is released to the vendor. Changes apply to orders raised from tomorrow onward.\n
\n
\n \n Require a second approver above ₹5,00,000\n Currently routed to Nilesh Patil, Head of Procurement \n \n \n \n Block release when the vendor has no active rate contract\n 14 vendors would be affected today \n \n \n
\n
\n
\n
\n
Order lines \n
4 of 9 lines · PO-24-1187
\n
\n
\n \n
\n\n
\n \n \n Item \n Qty \n Value \n \n \n \n \n MS angle 50×50×6 \n 1,200 kg \n ₹6,84,000 \n \n \n MS plate 8mm \n 860 kg \n ₹5,16,000 \n \n \n Channel 100×50 \n 440 kg \n ₹3,08,000 \n \n \n Flat 40×6 \n 390 kg \n ₹1,95,000 \n \n \n
\n\n
\n Subtotal, 4 of 9 lines \n ₹17,03,000 \n
\n
\n
\n
\n
Vendor \n \n
\n
Gujarat Polymers Ltd
\n
Vapi, Gujarat
\n
GSTIN 24AABCG1234M1Z5
\n
\n
\n\n
\n\n
\n
\n
Approvals \n \n
\n
\n NP \n Nilesh Patil \n 14 Aug \n
\n
\n RD \n Ritu Deshpande \n 15 Aug \n
\n
\n
\n
\n
\n
Attached documents \n \n
\n
\n \n
No documents yet
\n
\n The quotation and drawing are usually attached before the order goes to the vendor.\n
\n
\n \n
\n
all resolve to a generic node with no name, which is exactly right. aria-hidden on a border is noise for the same reason. The semantic cases are two, and both are narrow: a menu, where role=\"separator\" is what tells a screen reader the destructive item is in a group of its own, and running prose where the subject genuinely changes, which is
.",
"
is already the whole component under this stack, and is still the wrong tag for a list. Preflight zeroes its margins and gives it height 0 with border-top-width 1px, so
measures exactly 1px tall and full width with no margin, and resolves to role=\"separator\" with orientation horizontal — there is no h-px, no border-t and no role left to add. What it is wrong for is rows: forty
s down a table of order lines announce forty separators nobody asked for, which is what the card entry means when it says dividers are borders.",
"divide-y on the parent is the default, and it has exactly one failure. Tailwind v4 compiles divide-y to a border-bottom on & > :not(:last-child) — a DOM position, not a visibility. Hiding a middle row or the first row is therefore correct: measured, a four-row card went from 181px to 136px with the middle row x-shown away and the two remaining rules landed between the visible rows. Hiding the LAST row is not: the row above it is still not :last-child, keeps its border, and the card ends on a rule with nothing under it — measured 137px against 136px, and the extra pixel is the stray line. x-if is no better, because Alpine leaves the
in the DOM and the template takes the :last-child slot; measured, two visible rows still drew two rules. So put anything conditional outside the divided group with a border of its own, or render it server-side where {% if %} really does remove the node.",
"A border on each child fails at the other end, and a border on a group member is worse. Per-child border-t survives a hidden last row and breaks on a hidden first one — measured 92px against 91px, the extra pixel being a rule across the top of the panel with nothing above it. It also does not survive being pasted anywhere else: the rule belongs to the row, so the row takes a line with it into whatever container it lands in, which divide-y never does. The sharpest version of this is the dropdown menu, which currently hangs its divider off the destructive button: measured with the two items above it conditionally hidden, the border still paints 5px below the panel's top edge — a rule introducing nothing. A separator that belongs to a group is its own element, not a border on one of the members.",
"A standalone element between rows is the worst of the three. It needs the same condition as the row it introduces and nobody remembers to give it one: measured, hiding the row between two standalone rules left both in the document one pixel apart, at y 558 and y 559, which paints as a 2px band. Standalone is for a menu or a toolbar, where the separator is semantic and belongs to the group rather than to a row.",
"Two shades and the rule is the length of the line. A horizontal rule inside a card that already has a zinc-200 border is divide-zinc-100 or border-zinc-100 — the registry does this in 15 of 15 divide-y uses. A full-width strip that changes what the region is — a card header, a footer that totals, a sticky action bar — is border-zinc-200, because it is an edge and not a divider. Every vertical rule is zinc-200 regardless: a horizontal rule is 300px of ink and zinc-100 carries it, a vertical one is 16px and zinc-100 vanishes. Never a zinc-100 rule on the zinc-100 page ground — measured, the line and the surface compute to the identical colour, so it is not low contrast, it is absent. On white at devicePixelRatio 1 a zinc-100 rule paints rgb(244,244,245) against rgb(255,255,255) and a zinc-200 rule paints rgb(228,228,231); that first one is already at the floor, which is why it only ever sits on white.",
"A rule is not a tinted shape, so it takes no ring. The ring exists to hold the edge of a filled shape against the surface behind it, and a line one pixel tall is entirely edge. Measured: ring-1 ring-inset ring-zinc-300 on a 1px rule adds no height at all and simply repaints the whole line zinc-300, so the only thing it changed was the shade you already chose; without ring-inset it paints a 3px sandwich of zinc-300, zinc-200, zinc-300 where a 1px divider was wanted.",
"A vertical rule has no height of its own. In flex items-center — every toolbar and meta line here — a bare w-px div measured 0px tall and painted nothing at all. h-5 is the answer beside controls: a fixed 20px whatever the neighbours do, so a row holding a 13px label and a 24px figure does not grow a rule as tall as the figure. self-stretch is the answer when the rule should run the whole row: measured 28px in a row whose tallest item was 28px, which means it tracks whichever neighbour got taller. Add shrink-0 either way, or flex takes the pixel back when the row is tight. For a fixed set of columns, divide-x on the grid is simpler than any of this and cannot be left behind by a hidden child.",
"A labelled rule is a heading with decoration, not a separator with a label. Put the text in the h2 or h3 the page outline already wants and make the two lines aria-hidden spans with flex-1 — measured, the label then appears in the accessibility tree as a level-3 heading and the lines appear nowhere, which is what somebody skimming by heading needs. A role=\"separator\" carrying aria-label reads the same words out but adds nothing to the outline. The exception is a label that names a choice rather than a section — the \"or\" between two ways of signing in — which is plain text between two hidden lines and no role at all.",
"A 1px rule is 1 CSS pixel at every density, and only fractional densities soften it. Measured off the rendered pixels: at devicePixelRatio 1 every form — h-px, border-t and is exposed by Chrome as a separator sitting among the items — divide the list with divide-y and leave the list a list.",
"\n
Payment terms \n
45 days from GRN, against a clean receipt note.
\n\n
\n
Retention of 5% is released after the trial run is signed off.
\n
\n\n
\n\n
Amendment history \n
Two revisions since release, both to the delivery date.
\n
\n
\n
Order lines \n Show cancelled \n \n\n
\n \n
MS angle 50×50×6 \n ₹6,84,000 \n \n \n
MS plate 8mm \n ₹5,16,000 \n \n \n
Channel 100×50 \n ₹3,08,000 \n \n \n\n
\n 2 cancelled lines worth ₹1,04,000 , not counted above.\n
\n
\n
\n
\n \n \n \n \n
\n\n
\n\n
\n \n \n \n \n
\n
\n\n
\n
\n
Received
\n
₹11,42,040
\n
\n
\n
Invoiced
\n
₹9,80,000
\n
\n
\n
\n
\n
Nine lines released to the vendor on 04 Aug 2026.
\n\n
\n
Amendments \n \n\n
Rev C moved the delivery date to 28 Aug 2026.
\n\n
\n or \n
\n
\n
\n \n\n
\n
\n \n
\n \n\n
\n\n
\n \n
\n
\n {% for action in order.menu_actions %}\n \n \n {% endfor %}\n\n {# the separator sits in the same if-block as the item it introduces #}\n {% if order.can_cancel %}\n {% separator %}\n \n \n {% endif %}\n
\n\n\n {% for line in order.active_lines %}\n \n
{{ line.item }} \n ₹{{ line.value|intcomma }} \n \n {% empty %}\n No open lines on this order.
\n {% endfor %}\n "
}
]
},
{
"id": "carousel",
"name": "Carousel",
"category": "layout",
"description": "A horizontal rail of items that snaps one item at a time. CSS scroll snap does the moving; the arrows and the counter are the only JavaScript.",
"when_to_use": "A set of items that will not fit and does not need comparing: photographs against an inspection, drawings on a job, a strip of cards on a phone where the desktop layout is a grid. Never for anything that has to be read in full or compared across rows — that is a table or a grid, and both show everything at once.",
"rules": [
"No autoplay, ever. Nothing moves unless a person moved it. A rail that advances on a timer pulls the row out from under the cursor mid-read, and there is no rotation speed that is right for two different readers.",
"The engine is CSS scroll snap, never a translated track. snap-x snap-mandatory overflow-x-auto on the rail, snap-start shrink-0 on each item. Touch, trackpad, keyboard and find-in-page all work before a line of JavaScript is written; a transform track has to reimplement every one of them and gets most of them wrong.",
"This is the one component allowed to scroll sideways on a phone. The rule holds everywhere else. It is allowed here because the scroll is the component, it snaps, and the next item peeks so nobody has to guess there is more.",
"Every item stays in the DOM and none of them is aria-hidden. Offscreen is not hidden — Ctrl+F must find the sixth card and the tab order must reach the link inside it.",
"It is a scrolling region, not an ARIA carousel. The rail takes role=\"group\", an accessible name and tabindex=\"0\", because a scrollable region that cannot be focused cannot be scrolled by keyboard at all. aria-roledescription=\"carousel\" describes the rotating banner this deliberately is not.",
"A counter reads \"item i of n\" and is only honest when one item fills the rail. With two or three visible it is a lie — drop it and let the arrows and the peek carry it. Dots have the same constraint, and stop being aimable past about six.",
"The counter is not a live region. It would fire on every frame of a swipe. Nothing needs announcing: every slide is already in the DOM and reachable, so nothing is being hidden from a screen reader.",
"Arrows are a pointer affordance, hidden below md where the gesture is a swipe and a 32px target beside a thumb is a miss. They disable at the ends instead of wrapping — a rail that jumps back to the first item hides the fact that the last one was the last one.",
"Scroll by a measured delta, never by clientWidth. The target item's getBoundingClientRect minus the rail's, less the rail's scroll-padding, lands exactly on the snap point at every breakpoint. Paging by container width drifts the moment an item is a fraction of it, and drops the last partial page.",
"Filter out before counting items. Alpine leaves the x-for template in the DOM as an element child, so children.length comes back one too many and a six-photo gallery counts to seven.",
"Smooth scrolling has to check prefers-reduced-motion itself. behavior: \"smooth\" ignores the media query, so read it and pass \"auto\" instead.",
"The scrollbar is hidden on the rail: the peek, the arrows and the counter already say it scrolls, and a classic scrollbar adds 15px of grey under every row on Windows. It takes both [scrollbar-width:none] and [&::-webkit-scrollbar]:hidden — Firefox honours the first, Chrome and Safari the second."
],
"anatomy": [
{
"part": "Rail",
"description": "The scroll container: flex, snap-x snap-mandatory, overflow-x-auto, tabindex=\"0\" and a name. Everything else is optional."
},
{
"part": "Item",
"description": "snap-start shrink-0 with a declared width — w-72 for a strip of records, basis-[86%] sm:basis-1/2 for a gallery that peeks."
},
{
"part": "Peek",
"description": "The sliver of the next item left visible by sizing items under 100%. It is the affordance; without it a rail reads as a static panel."
},
{
"part": "Arrows",
"description": "A disabled-at-the-ends pair, hidden below md. Either in the header beside the title, or overlaid on an image."
},
{
"part": "Indicator",
"description": "A counter or a row of dots, and only when one item fills the rail. Both are optional; neither is a live region."
},
{
"part": "Header",
"description": "The title and the controls on one line above the rail, or the card header when the rail lives inside a card."
}
],
"behaviour": [
"Nothing moves on its own. There is no autoplay, no pause control, and no timer to get wrong.",
"Dragging, swiping, a trackpad and shift+wheel all move the rail natively, and it settles on a snap point.",
"The arrows step one item and stop at the ends. They never wrap.",
"Arrow keys step the rail when the rail itself has focus, and are left alone when focus is inside an item, so a field inside a card still takes its own keystrokes.",
"The active index is read back from scroll position, not tracked separately, so a swipe, an arrow click and a tab into an offscreen item all agree.",
"Below md the arrows are gone and the gesture is the whole interface, which is why the peek and the snap are not optional."
],
"accessibility": [
"The rail is focusable with tabindex=\"0\" and carries role=\"group\" plus an accessible name — a scrollable region with no tab stop is unreachable by keyboard.",
"No aria-roledescription=\"carousel\" and no slide roles. This is a scrolling list of real content, and describing it as a carousel promises rotation semantics that do not exist here.",
"Offscreen items are never aria-hidden and never removed. They stay findable, tabbable and readable in DOM order.",
"Arrow buttons carry aria-label (\"Previous purchase order\", not \"Previous\") and are genuinely disabled at the ends, not just faded.",
"The counter is plain text. Making it a live region turns one swipe into a stream of announcements for no information a reader cannot already get.",
"Dots are buttons with a label naming the destination, and the current one carries aria-current, so the set is usable without seeing which is filled."
],
"related": [
"card",
"attachment",
"pagination"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": " el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\">\n\n
\n
Orders awaiting approval \n
\n \n \n \n \n
\n
\n\n
\n\n
\n \n
\n
PO-24-1187
\n
Gujarat Polymers Ltd
\n
\n
\n \n
\n \n
Value \n ₹18,42,000 \n \n \n
Delivery \n 28 Aug 2026 \n \n \n \n\n
\n \n
\n
PO-24-1191
\n
Nashik Steel Traders
\n
\n
\n \n
\n \n
Value \n ₹4,68,500 \n \n \n
Delivery \n 11 Aug 2026 \n \n \n \n\n
\n \n
\n
PO-24-1194
\n
Sharma Extrusions
\n
\n
\n \n
\n \n
Value \n ₹96,750 \n \n \n
Delivery \n 04 Sep 2026 \n \n \n \n\n
\n \n
\n
PO-24-1198
\n
Deshpande Traders
\n
\n
\n \n
\n \n
Value \n ₹2,31,900 \n \n \n
Delivery \n 02 Aug 2026 \n \n \n \n\n
\n \n
\n
PO-24-1203
\n
Gujarat Polymers Ltd
\n
\n
\n \n
\n \n
Value \n ₹7,04,200 \n \n \n
Delivery \n Not set \n \n \n \n
\n
el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\">\n\n
\n
\n
Other orders on this supplier \n
Gujarat Polymers Ltd, last six months
\n
\n
\n \n \n \n \n
\n
\n\n
\n\n
\n PO-24-1163
\n HDPE granules, 12 MT · Silvassa plant
\n ₹9,12,400
\n Received 22 Mar 2026
\n \n\n
\n PO-24-1179
\n Masterbatch, black · Silvassa plant
\n ₹1,86,000
\n Received 08 May 2026
\n \n\n
\n PO-24-1185
\n HDPE granules, 8 MT · Silvassa plant
\n ₹6,08,300
\n Received 19 Jun 2026
\n \n\n
\n PO-24-1186
\n Antioxidant additive · Silvassa plant
\n ₹74,150
\n Received 30 Jun 2026
\n \n\n
\n PO-24-1187
\n HDPE granules, 15 MT · Silvassa plant
\n ₹18,42,000
\n Received 04 Aug 2026
\n \n
\n
el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\">\n\n
\n\n
\n \n \n \n
Extruder line 2 shutdown, 24 to 26 August
\n
Planned gearbox replacement. Compounding orders due that week move to line 4, so expect a two day slip on anything scheduled after the 23rd.
\n
Maintenance · Sanjay More · 12 Aug 2026
\n
\n\n
\n \n \n \n
Purchase orders above ₹5,00,000 need a second approval
\n
From 1 September the second approver is the cost centre head, not Finance. Orders already raised keep the approval they were created with.
\n
Procurement · Nilesh Patil · 09 Aug 2026
\n
\n\n
\n \n \n \n
Gate timings for inward material
\n
Unloading now closes at 18:00 instead of 20:00. Vehicles reporting after 18:00 are held overnight and weighed the next morning.
\n
Stores · Meera Joshi · 01 Aug 2026
\n
\n
\n\n
\n \n \n \n \n \n \n
\n
el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\">\n\n
\n \n
\n\n
\n \n
\n \n Consignment on the weighbridge
\n gate-inward-01.jpg · 04 Aug 2026 09:12 IST
\n \n \n\n
\n \n
\n \n Bag markings against the packing list
\n gate-inward-02.jpg · 04 Aug 2026 09:18 IST
\n \n \n\n
\n \n
\n \n Torn bag, third pallet from the tail
\n gate-inward-03.jpg · 04 Aug 2026 09:24 IST
\n \n \n\n
\n \n
\n \n Moisture reading at sampling
\n qc-sample-01.jpg · 04 Aug 2026 10:02 IST
\n \n \n
\n\n
\n \n
\n \n
\n\n
\n
el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\"\n class=\"overflow-hidden rounded-xl border border-zinc-200 bg-white\">\n\n
\n
Drawings on JOB-24-0338 \n
Sheet
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n \n\n
\n \n GA-01 \n \n \n GA-02 \n \n \n DET-01 \n \n \n BOM-01 \n \n
\n\n
\n \n
\n
\n\n
\n
Orders raised
\n
128
\n
14 more than July
\n
\n\n
\n
Committed value
\n
₹2.41 Cr
\n
Against a ₹2.75 Cr budget
\n
\n\n
\n
Overdue deliveries
\n
\n
\n
Oldest is 19 days late
\n
\n\n
\n
Awaiting approval
\n
12
\n
4 sitting over a week
\n
\n
\n
Photographs \n
\n
\n \n
No photographs on this inspection
\n
\n Photos taken at the gate appear here in the order they were uploaded, newest last.\n
\n
\n \n
\n
el.localName !== 'template'); },\n pad() { return parseFloat(getComputedStyle(this.$refs.rail).scrollPaddingLeft) || 0; },\n sync() {\n const r = this.$refs.rail, s = this.slides(), edge = r.getBoundingClientRect().left + this.pad();\n this.n = s.length;\n this.atStart = r.scrollLeft < 2;\n this.atEnd = r.scrollLeft > r.scrollWidth - r.clientWidth - 2;\n const near = s.map((el, k) => [Math.abs(el.getBoundingClientRect().left - edge), k]).sort((a, b) => a[0] - b[0]);\n this.i = near.length ? near[0][1] : 0;\n },\n go(k) {\n const r = this.$refs.rail, s = this.slides(), el = s[Math.min(Math.max(k, 0), s.length - 1)];\n if (!el) return;\n r.scrollBy({ left: el.getBoundingClientRect().left - r.getBoundingClientRect().left - this.pad(),\n behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });\n }\n }\"\n x-init=\"sync()\"\n @resize.window.debounce=\"sync()\">\n\n
\n
Photographs \n
\n
\n
\n \n \n \n \n
\n
\n
\n\n {# the loop is server side, so there is no x-for template for slides() to filter out #}\n
\n {% for photo in inspection.photos.all %}\n
\n \n {{ photo.caption }}
\n \n {{ photo.filename }} · {{ photo.taken_at|date:\"d M Y H:i\" }} IST\n
\n \n \n {% endfor %}\n
\n
\n
\n \n
No photographs on this inspection
\n
Photos taken at the gate appear here in the order they were uploaded.
\n
\n
\n\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n \n
\n
\n
\n \n
\n
\n
\n
\n Open full record \n Record GRN \n
\n
\n\n
\n\n
\n\n
\n
Line items
\n
\n \n \n Material \n Qty \n Amount \n \n \n \n MS Angle 50×50×6 420 kg ₹26,208 MS Plate 8 mm 180 kg ₹12,798 Hex bolt M12×60 1,200 nos ₹14,220 \n
\n
\n
\n
\n
\n
\n
\n K \n Konspec Operations \n
\n\n
\n\n
Konspec Industries · internal system · activity is logged
\n
\n
\n
\n
\n \n
Error 404
\n
This page does not exist \n
\n Nothing is served at /orders/PO-24-9910/ . The order may have been deleted, or the link may be out of date.\n
\n
\n
\n
\n
\n
\n \n
Error 403
\n
You cannot open this order \n
\n PO-24-1187 belongs to the Fabrication cost centre. Your account has read access to Moulding and Dispatch only.\n
\n
\n Access is granted by Nilesh Patil, Head of Procurement.\n
\n
\n
Signed in as akshay.prabhu@konspec.com
\n
\n
\n
\n
\n \n
Error 500
\n
Something broke on our side \n
\n The page could not be built. Nothing you did was saved, so it is safe to try again in a minute.\n
\n
\n Reference INC-8342 · 19 Aug 2026 14:07 IST\n
\n
\n
Quote the reference and IT can find the exact failure.
\n
\n
t.id === this.tab);\n this.pick(this.items[(i + step + n) % n].id);\n },\n pick(id) {\n this.tab = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n }\n }\">\n
\n
\n \n \n \n \n \n \n
\n
\n\n
\n
\n
PO-24-1187 raised for Gujarat Polymers Ltd on 4 August, payment 45 days from GRN.
\n
\n
\n
14 lines, ₹18,42,000 before tax.
\n
\n
\n
3 GRNs posted, 2 lines still short.
\n
\n
\n
Approved by R. Menon on 5 August, revised once.
\n
\n
\n
t.id === this.tab);\n this.pick(this.items[(i + step + n) % n].id);\n },\n pick(id) {\n this.tab = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n }\n }\">\n
\n \n \n
\n\n
\n
\n
48 orders open, ₹4,12,60,000 committed.
\n
\n
\n
27 orders delivered but not yet receipted.
\n
\n
\n
73 orders closed this quarter.
\n
\n
\n
this.reveal(this.tab)); },\n move(step) {\n const n = this.items.length;\n const i = this.items.findIndex(t => t.id === this.tab);\n this.pick(this.items[(i + step + n) % n].id);\n },\n pick(id) {\n this.tab = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus({ preventScroll: true });\n this.reveal(id);\n });\n },\n /* scrollIntoView by hand, so only the strip moves and the neighbour\n still peeks by 16px */\n reveal(id) {\n const s = this.$refs.strip, el = this.tabEls().find(e => e.dataset.tab === id);\n if (!el) return;\n const a = el.getBoundingClientRect(), b = s.getBoundingClientRect();\n if (a.left < b.left + 16) s.scrollBy({ left: a.left - b.left - 16 });\n else if (a.right > b.right - 16) s.scrollBy({ left: a.right - b.right + 16 });\n }\n }\">\n
\n\n \n
\n
Showing\n t.id === tab).label\"> .\n On a narrow screen, drag the strip or use the arrow keys.
\n
\n
t.id === this.tab);\n this.pick(this.items[(i + step + n) % n].id);\n },\n pick(id) {\n this.tab = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n }\n }\"\n class=\"grid gap-6 sm:grid-cols-[190px_minmax(0,1fr)]\">\n
\n \n \n
\n\n
\n
\n
General \n
Company name, registered address and the financial year start.
\n
\n
\n
Approval limits \n
Orders above ₹5,00,000 need a second approval.
\n
\n
\n
Document numbering \n
PO-YY-nnnn, reset every financial year.
\n
\n
\n
Tax and HSN \n
Default GST rate per HSN code, applied when a line has none of its own.
\n
\n
\n
Users and roles \n
14 users, 4 roles. Buyers cannot approve their own orders.
\n
\n
\n
t.id === q)) this.tab = q;\n },\n move(step) {\n const n = this.items.length;\n const i = this.items.findIndex(t => t.id === this.tab);\n this.pick(this.items[(i + step + n) % n].id);\n },\n pick(id) {\n this.tab = id;\n const u = new URL(location.href);\n u.searchParams.set('tab', id);\n history.replaceState(null, '', u);\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n }\n }\">\n
\n\n
\n
\n \n
\n
\n
\n
\n
t.id === this.cursor);\n this.focusTab(this.items[(i + step + n) % n].id);\n },\n focusTab(id) {\n this.cursor = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n },\n pick(id) { this.tab = id; this.cursor = id; }\n }\">\n
\n\n \n
\n
Summary renders with the page. Every other tab is fetched from\n /orders/1187/<tab>/\n and swapped in here.
\n
\n
!t.off); },\n tabEls() { return Array.from(this.$refs.list.querySelectorAll('[role=tab]')); },\n move(step) {\n const list = this.open(), n = list.length;\n const i = list.findIndex(t => t.id === this.tab);\n this.pick(list[(i + step + n) % n].id);\n },\n pick(id) {\n if (this.items.find(t => t.id === id).off) return;\n this.tab = id;\n this.$nextTick(() => {\n const el = this.tabEls().find(e => e.dataset.tab === id);\n if (el) el.focus();\n });\n }\n }\">\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n
\n
14 lines, ₹18,42,000 before tax.
\n
\n
\n
3 GRNs posted. Two lines are short against the ordered quantity.
\n
\n
\n\n
\n
\n
\n \n \n\n\n {% block section %}{% endblock %}\n
"
}
]
},
{
"id": "breadcrumbs",
"name": "Breadcrumbs",
"category": "navigation",
"description": "The path from the section root down to the record on screen. The last crumb says where you are and is not a link.",
"when_to_use": "Any page two or more levels deep. One level deep does not need a trail — it needs a back link, which is the last variant here.",
"rules": [
"The separator is a slash, always. There is no chevron variant and no icon variant; a trail that reads \"Home / Procurement / PO-24-1187\" in one file and uses chevrons in another is two components pretending to be one.",
"The last crumb is plain text with aria-current=\"page\". Making it a link to itself is a dead control, and users click it and get nothing.",
"Never truncate the last crumb. It is the one that says where you are. Truncate the middle, or collapse it into an overflow menu.",
"The trail is the information hierarchy, not the browsing history. It does not change based on how the user arrived, so two people on the same record see the same trail.",
"Crumbs are not underlined, unlike every other link in the system. Five underlined links in a row is a fence, not a path; the muted colour and the hover carry it instead."
],
"anatomy": [
{
"part": "Trail",
"description": "A holding an ordered list, because the order is the information and a screen reader needs to be able to skip it."
},
{
"part": "Crumb",
"description": "A link to an ancestor page, text-zinc-600, darkening to zinc-900 on hover."
},
{
"part": "Separator",
"description": "A zinc-400 slash. Decorative and aria-hidden, so it is never read aloud."
},
{
"part": "Current crumb",
"description": "Plain text in zinc-900 font-medium, never a link, carrying aria-current=\"page\"."
},
{
"part": "Overflow",
"description": "A menu holding the collapsed middle of a long trail, behind an ellipsis button."
},
{
"part": "Trailing controls",
"description": "Anything that belongs to the record rather than the page — a status pill, a copy-id button. They sit after the last crumb, never inside it."
}
],
"behaviour": [
"The last crumb is the current page and is not a link. A link to the page you are on is a dead control.",
"The last crumb is never truncated or collapsed — it is the one that says where you are.",
"A long trail collapses its middle into an overflow menu rather than wrapping onto two lines.",
"Below sm the trail collapses to the parent and the current page. Four crumbs at 390px either wrap or push the page sideways, and both are worse than showing two.",
"The trail reflects the hierarchy, not the history, so it does not change based on how the user arrived.",
"Crumb labels match the titles of the pages they point at, so following one is not a surprise."
],
"accessibility": [
"A with aria-label=\"Breadcrumb\", so assistive technology can identify it and skip past it.",
"An ordered list inside, because the sequence carries the meaning.",
"Separators are aria-hidden, or a screen reader reads \"slash\" between every crumb.",
"The current page carries aria-current=\"page\" — that, not the styling, is what announces it.",
"The overflow button has an aria-label naming how many levels it hides, because an ellipsis says nothing on its own.",
"The browser's own focus ring is left alone on crumb links; nothing here overrides outline."
],
"related": [
"page-header",
"tabs",
"sidebar-nav"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": "\n\n \n Home / \n Procurement / \n Purchase orders \n "
},
{
"id": "record",
"name": "On a record",
"html": "\n\n \n Home / \n Procurement / \n Purchase orders / \n \n PO-24-1187 \n \n \n \n \n \n \n "
},
{
"id": "truncated",
"name": "Long labels",
"html": "\n\n \n Home / \n \n Procurement & stores \n \n / \n \n Gujarat Polymers Ltd — annual rate contract \n \n / \n PO-24-1187 \n "
},
{
"id": "overflow",
"name": "Collapsed middle",
"html": "\n\n \n Home / \n \n … \n \n \n / \n PO-24-1187 / \n Line 4 — MS angle 50×50×6 \n "
},
{
"id": "responsive",
"name": "On a phone",
"html": "\n"
},
{
"id": "page-header",
"name": "Above a page title",
"html": "\n\n
\n \n Home / \n Procurement / \n PO-24-1187 \n \n\n
\n
\n
PO-24-1187 \n
Gujarat Polymers Ltd · raised 14 Aug 2026 · 6 lines
\n
\n
\n Export \n Approve \n
\n
\n
\n "
},
{
"id": "django",
"name": "Django template",
"html": "\n\n \n {% for label, url in crumbs %}\n {% if not forloop.first %}/ {% endif %}\n \n {% if forloop.last %}\n {{ label }} \n {% else %}\n {{ label }} \n {% endif %}\n \n {% endfor %}\n \n "
}
]
},
{
"id": "sidebar-nav",
"name": "Sidebar nav",
"category": "navigation",
"description": "The vertical navigation list that lives inside an app shell. This is the list only — the shell, its header and the scroll container belong to the layout.",
"when_to_use": "The primary navigation of a console with more than about five destinations. For two or three destinations use tabs in the topbar.",
"rules": [
"Exactly one item carries aria-current=\"page\". The bg-zinc-100 tint is the visual half of the same statement — never one without the other.",
"Counts are right-aligned and tabular-nums so the column of numbers stays straight.",
"In the rail, the tooltip is a sibling span positioned to the right. Do not put the hover binding on the — Lucide swaps that element for an and the binding is lost.",
"The rail is 68px so a 40px target keeps 14px either side. Below that the icons start colliding with the edge."
],
"anatomy": [
{
"part": "Group",
"description": "An 11px uppercase label over a set of items. Present once the list passes about six entries."
},
{
"part": "Item",
"description": "Icon, label, and an optional right-aligned count."
},
{
"part": "Active item",
"description": "bg-zinc-100 plus aria-current=\"page\" — the visual and the semantic halves of one statement."
},
{
"part": "Count",
"description": "Right-aligned and tabular-nums, so the numbers form a straight column."
},
{
"part": "Rail tooltip",
"description": "A sibling span shown on hover when the sidebar is collapsed. Never bound on the , which Lucide replaces."
}
],
"behaviour": [
"Exactly one item is current at a time, and it carries both the tint and aria-current — never one without the other.",
"In the 68px rail, labels are hidden with lg:hidden rather than removed, so the DOM and the tab order do not change.",
"The rail is 68px so a 40px target keeps 14px either side; below that the icons start colliding with the edge.",
"Hovering a rail item reveals its name in a tooltip, because a column of unlabelled icons is unusable to a new user.",
"Groups do not collapse. A navigation list that hides its own items adds a click to every journey."
],
"accessibility": [
"The list is a with an accessible name, so it is a landmark.",
"The current item carries aria-current=\"page\", which is what a screen reader uses — the tint is for everyone else.",
"Collapsed items keep an accessible name even with the label visually hidden.",
"Counts are part of the item's accessible name — \"Approvals, 12\" rather than an unattached number.",
"Group labels are real headings or list captions, so the structure is announced rather than only drawn."
],
"related": [
"app-shell",
"topbar",
"tabs"
],
"variants": [
{
"id": "expanded",
"name": "Expanded",
"html": "\n Operations
\n \n Overview \n \n \n Purchase orders \n 148 \n \n \n Requisitions \n 62 \n \n \n Goods receipt \n 27 \n \n \n Invoices \n 9 \n \n\n Master data
\n \n Vendors \n 187 \n \n \n Materials \n \n \n Rate contracts \n \n \n Analytics \n \n\n Saved views
\n \n Overdue over 7 days \n 18 \n \n \n Awaiting GRN \n 27 \n \n \n My approvals \n 6 \n \n "
},
{
"id": "rail",
"name": "Rail",
"html": "\n \n\n \n\n \n
\n \n
Requisitions — 62 \n
\n
\n \n
Goods receipt — 27 \n
\n\n \n
\n \n
Vendors — 187 \n
"
},
{
"id": "nested",
"name": "With nested children",
"html": "\n \n Overview \n \n\n \n Purchase orders \n 148 \n \n \n \n \n\n \n Vendors \n 187 \n \n \n \n \n\n \n Materials \n \n "
}
]
},
{
"id": "topbar",
"name": "Topbar",
"category": "navigation",
"description": "The application header above the page content: where you are, what you can search, and who you are signed in as.",
"when_to_use": "Every screen in the console. The page title and the primary action for the record belong in the page header below it, not here.",
"rules": [
"The hamburger is lg:hidden and only ever opens the sidebar. It is not a second menu with its own items.",
"Sticky needs an explicit background — sticky top-0 bg-white — or the content scrolls through it.",
"A notification dot means unread, not a count. If the number matters, show the number.",
"Below lg the search field collapses to an icon button. Do not shrink the input instead; it stops being usable around 200px."
],
"anatomy": [
{
"part": "Menu button",
"description": "lg:hidden. The only way to open the sidebar on a phone, so it is never hidden there."
},
{
"part": "Search",
"description": "A wide input above lg, collapsing to an icon button below it."
},
{
"part": "Notifications",
"description": "A bell with a dot for unread. A dot means unread; if the number matters, show the number."
},
{
"part": "Account",
"description": "The avatar and the menu behind it."
},
{
"part": "Surface",
"description": "sticky top-0 with an explicit bg-white, or content scrolls straight through it."
}
],
"behaviour": [
"The hamburger only ever opens the sidebar. It is not a second menu with its own items.",
"Sticky positioning needs an explicit background. Without one the topbar is transparent and content scrolls through it.",
"Below lg the search collapses to an icon button rather than shrinking — an input stops being usable around 200px.",
"The page title and the record's primary action belong in the page header below, not up here.",
"The notification dot indicates unread state only. A count replaces it when the quantity is actionable."
],
"accessibility": [
"The topbar is a landmark, distinct from the sidebar's .",
"The menu button has aria-label and aria-expanded reflecting the sidebar state.",
"Search is a real labelled input inside a form, so Enter submits it.",
"The unread dot is backed by text in the button's accessible name — \"Notifications, unread\" — since a dot announces nothing.",
"The account menu follows the dropdown pattern: aria-haspopup, arrow keys and Escape."
],
"related": [
"app-shell",
"sidebar-nav",
"dropdown"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": ""
},
{
"id": "compact",
"name": "Compact",
"html": ""
}
]
},
{
"id": "accordion",
"name": "Accordion",
"category": "navigation",
"description": "Sections of content that collapse to their heading. The heading is a button that toggles the panel below it.",
"when_to_use": "Long forms broken into stages, or reference detail most people will not open. Never hide something the user has to act on.",
"rules": [
"x-collapse needs the Alpine collapse plugin loaded before Alpine core. Without it the directive is ignored and the panel never shows — drop x-collapse and the plain x-show still works, it just snaps open instead of animating.",
"The rotate binding goes on a wrapping , never on the . Lucide replaces that element with an and the binding dies with it.",
"Rotation needs a block-level box in Tailwind v4 — the wrapping span is flex for that reason.",
"Give the header a fixed height. If it grows when open, the second click lands somewhere else.",
"Every panel needs an id, and its button needs aria-controls pointing at it. Without that pairing a screen reader announces a button that expands nothing.",
"Never put padding on the element x-collapse animates. box-sizing is border-box, so height:0 cannot go below the padding — the panel bottoms out at the padding height and then x-show removes it in a single frame, which reads as a snap. Put the padding on an inner div."
],
"anatomy": [
{
"part": "Root",
"description": "Holds the open state. One x-data for the whole group when only one panel may be open, one per item when several may."
},
{
"part": "Header",
"description": "A real button at a fixed height, wrapped in a heading element so the group appears in the document outline."
},
{
"part": "Indicator",
"description": "A chevron in a flex span. The rotation class goes on the span, never on the icon."
},
{
"part": "Panel",
"description": "The collapsible region, carrying an id the header points at through aria-controls."
},
{
"part": "Meta",
"description": "Optional right-aligned summary — a count, an amount, a status — so the row is useful while closed."
}
],
"behaviour": [
"Clicking the header toggles its own panel. Clicking an open header closes it.",
"In single-open mode, opening one panel closes the others. Track the open item by id, not by index, so reordering does not move the open state.",
"A panel that starts closed needs x-cloak. A panel that starts open must not have it, or it stays hidden until Alpine boots.",
"The header height does not change between states, so a second click always lands on the same control."
],
"accessibility": [
"The header is a button, never a div with a click handler.",
"aria-expanded reflects the open state and is bound, not hardcoded.",
"aria-controls on the button matches the id on the panel.",
"Wrap the header in h3, or whichever level fits the page outline, so screen readers can jump between sections.",
"The chevron is decorative and carries no label — the heading text alone says what the section is."
],
"related": [
"collapsible",
"tabs",
"card"
],
"variants": [
{
"id": "default",
"name": "Default",
"html": "\n
\n \n Delivery and freight \n 3 of 3 filled \n \n \n \n \n
\n
\n
Deliver to Site store — Vasai plant \n
Promised date 22 August 2026 \n
Freight ₹14,500 — to pay \n \n
\n
\n
\n
\n \n Payment terms \n \n \n \n \n
\n
\n 45 days from GRN posting. 2% early-payment discount inside 10 days.\n
\n
\n
\n
\n
\n \n Tax and GST \n \n \n \n \n
\n
\n IGST 18% on ₹18,42,000 . Vendor GSTIN 24AABCG1429P1ZK verified 12 July.\n
\n
\n
\n
\n
\n \n Inspection \n \n \n \n \n
\n
\n Mill test certificate required per heat number. Reject on hardness outside 190–240 BHN.\n
\n
\n
\n
\n
\n
\n \n \n \n \n GRN-3391 — Gujarat Polymers Ltd \n Posted 11 August · 4 lines \n \n ₹6,18,400 \n \n \n \n \n
\n HDPE granules 8,400 kg received against 8,600 kg ordered. Short-closed by R. Menon.\n
\n
\n\n
\n
\n \n \n \n \n GRN-3388 — Sharma Steel Traders \n Posted 8 August · 2 lines \n \n ₹2,74,900 \n \n \n \n \n
\n MS angle 50×50×6 — 12.4 t accepted, mill test certificates on file.\n
\n
\n