diff --git a/app/globals.css b/app/globals.css index 0c39c86..404e93b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1349,6 +1349,52 @@ select:disabled { background: var(--surface-soft); } + +.order-flow-steps { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + padding: 0.8rem; + border-radius: var(--radius-lg); + background: color-mix(in srgb, var(--accent-soft) 46%, var(--surface)); + border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); +} + +.order-flow-steps span { + display: inline-flex; + align-items: center; + min-height: 2rem; + padding: 0.3rem 0.65rem; + border-radius: var(--radius-pill); + background: var(--surface); + color: var(--ink-soft); + font-size: 0.84rem; + font-weight: 800; +} + +.order-primary-section { + border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); +} + +.optional-order-section { + background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface)); +} + +.line-entry-card-empty { + padding: 0.85rem; + border-style: dashed; + background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft)); + box-shadow: none; +} + +.line-entry-card-empty .line-entry-top { + padding-bottom: 0; +} + +.line-entry-card-empty .line-grid { + gap: var(--space-3); +} + .line-editor-stack { gap: var(--space-5); } diff --git a/app/orders/new/page.tsx b/app/orders/new/page.tsx index 146df36..16da987 100644 --- a/app/orders/new/page.tsx +++ b/app/orders/new/page.tsx @@ -32,7 +32,7 @@ export default async function NewOrderPage({ {params?.error ?

{params.error}

: null} -
+
{t('orders.newPage.calloutTitle')} diff --git a/components/orders/line-items-editor.tsx b/components/orders/line-items-editor.tsx index f68dd20..c5ac238 100644 --- a/components/orders/line-items-editor.tsx +++ b/components/orders/line-items-editor.tsx @@ -110,6 +110,7 @@ function LineRow({ template?: boolean; }) { const { t } = useI18n(); + const isEmptyDraft = !line.productLabel.trim() && !String(line.quantity).trim() && !line.note.trim(); const labels = { line: t('orders.lineEditor.line'), remove: t('orders.lineEditor.remove'), @@ -118,14 +119,14 @@ function LineRow({ return (
{`${labels.line} ${index + 1}`} -

{t('orders.lineEditor.rowHelp')}

+

{isEmptyDraft && !template ? 'Type the item and quantity. Add more lines only if needed.' : t('orders.lineEditor.rowHelp')}

{status ? {status.label} : null} diff --git a/components/orders/order-form.tsx b/components/orders/order-form.tsx index 40a9762..20b4b63 100644 --- a/components/orders/order-form.tsx +++ b/components/orders/order-form.tsx @@ -50,7 +50,7 @@ export function OrderForm({ }: OrderFormProps) { const { t, locale } = useI18n(); const [selectedCustomerId, setSelectedCustomerId] = useState(order?.customerId ?? initialCustomerId ?? ''); - const lineDrafts = getDefaultLineDrafts(order?.lines); + const lineDrafts = getDefaultLineDrafts(order?.lines, order ? Math.max(order.lines.length, 1) : 1); const visibleCustomers = customers.filter((customer) => customer.active || customer.id === order?.customerId); const selectedCustomer = useMemo( () => visibleCustomers.find((customer) => customer.id === selectedCustomerId) ?? null, @@ -142,8 +142,14 @@ export function OrderForm({
) : null} +
+ 1. Customer and date + 2. Item and quantity + 3. Save order +
+
-
+

{t('orders.orderForm.sections.whoAndWhen')}

@@ -295,7 +301,7 @@ export function OrderForm({ ) : null}
-
+

{t('orders.orderForm.sections.dispatch')}

@@ -338,7 +344,7 @@ export function OrderForm({

{t('orders.orderForm.dispatchHint.delivery')}

-
+

{t('orders.orderForm.sections.visibility')}

@@ -385,7 +391,7 @@ export function OrderForm({

{t('orders.orderForm.sections.lines')}

-

{t('orders.orderForm.sections.linesHelp')}

+

Start with one item. Add another line only when this order needs it.

Confirmed products appear as suggestions, but you can still type a draft item when setup is incomplete. Confirm products.

@@ -395,7 +401,7 @@ export function OrderForm({ productSuggestions={productSuggestions} lineTypeOptions={lineTypeOptions} existingStatuses={existingStatuses} - sectionLabel={t('orders.orderForm.sections.linesHelp')} + sectionLabel="Freeform item names are allowed; product suggestions are optional." />
diff --git a/docs/mwp-readiness-audit.md b/docs/mwp-readiness-audit.md index c7d8123..786eca3 100644 --- a/docs/mwp-readiness-audit.md +++ b/docs/mwp-readiness-audit.md @@ -77,6 +77,7 @@ Do not include these in the first deploy readiness scope: - Added a narrow product confirmation path in `/admin/setup` for MWP product name, default unit, optional category, and active state. - Kept draft product order lines available so catalog setup does not block real work. +- Simplified new order capture so first use starts with one visible line, a clearer customer/date -> item -> save flow, and secondary dispatch details. - Added operator-home runtime/demo visibility and a first-deploy workflow card. - Added empty-state guidance to `/orders` for missing recurring templates and missing first orders. - Added production entry links and clearer empty guidance for production boards with no visible orders.