Build a Kanban pipeline board
Transform status-driven workflows into an interactive drag-and-drop Kanban board grouped by a select field.
This generated recipe is review-ready source material. Use it from the runtime where it appears in the sidebar and search results.
Transform status-driven workflows into an interactive drag-and-drop Kanban board grouped by a select field.
Use this when
- create a kanban board view
- group records into status columns
- build an order fulfillment pipeline
- drag cards to change document status
Dyrected concepts
defineView, layout: kanban, groupBy, columns, actions
Additional packages: No additional packages.
Decisions and cautions
Use this recipe only when its runtime matches the project you are documenting or building. Cloud recipes must stay inside the managed content backend boundary. Self-hosted recipes may use the server runtime, database, hooks, and infrastructure you control.
Complete recipe
This is the canonical source compiled and behavior-tested by @dyrected/knowledge.
import {
defineCollection,
defineTextField,
defineBooleanField,
defineNumberField,
defineSelectField,
defineView,
defineAction,
} from "@dyrected/core";
export const markPaidAction = defineAction({
name: "markPaid",
label: "Mark Paid",
icon: "CheckCircle2",
type: "row",
mutation: { status: "paid", paidAt: "now()" },
});
export const markCollectedAction = defineAction({
name: "markCollected",
label: "Mark Collected",
icon: "PackageCheck",
type: "row",
mutation: { status: "collected", collectedAt: "now()" },
});
export const fulfillmentPipelineView = defineView({
slug: "fulfillment-pipeline",
label: "Order Fulfillment",
icon: "Shirt",
layout: "kanban",
groupBy: "status",
columns: ["customerName", "itemSize", "quantity"],
actions: [markPaidAction, markCollectedAction],
});
export const Orders = defineCollection({
slug: "orders",
fields: [
defineTextField({ name: "customerName", label: "Customer Name", required: true }),
defineSelectField({
name: "status",
label: "Order Status",
options: ["requested", "paid", "collected"],
defaultValue: "requested",
}),
defineSelectField({
name: "itemSize",
label: "Size",
options: ["S", "M", "L", "XL", "XXL"],
}),
defineNumberField({ name: "quantity", label: "Quantity", defaultValue: 1 }),
],
views: [fulfillmentPipelineView],
});