feat: Improve discount settings UX with mode-first layout and proper limits

[khaira777]

Problem

The current discount settings UI has several UX issues:

1. Percentage limit says "0 = no limit" — but percentage discounts can never exceed 100%. A 0% or unlimited percentage makes no sense.
2. Mode dropdown is buried — The "Discount Mode" dropdown (percentage/amount/both) is not the primary control. Users see both percentage AND amount fields regardless of mode, which is confusing.
3. No smart defaults — New installs should start with sensible defaults, not require configuration.

Current Behavior

Settings page shows:

• Discount Mode: [dropdown: percentage / amount / both]
• Max Discount Percentage: ___% (0 = no limit) ← misleading
• Max Discount Amount: ___ (0 = no limit)

All fields are always visible regardless of mode selection.

Desired Behavior

Layout (top to bottom)

1. Discount Mode (dropdown, first field)

   • Percentage Only (default)
   • Amount Only
   • Both Percentage & Amount

2. Conditional fields (show/hide based on mode):

   • If "Percentage Only" → Show only Max Discount Percentage
   • If "Amount Only" → Show only Max Discount Amount
   • If "Both" → Show both fields

3. Percentage field:

   • Label: "Maximum Discount %"
   • Placeholder: "25"
   • Helper text: "Maximum 100%"
   • Validation: 1–100 (not 0)
   • Default: 25

4. Amount field:

   • Label: "Maximum Discount Amount"
   • Placeholder: "500"
   • Helper text: "0 = no limit"
   • Validation: ≥ 0

5. Approval toggle (existing, keep as-is):

   • "Require approval for discounts above threshold"

Defaults

Setting	Default Value
discount_mode	percentage
discount_requires_approval	0 (false)
discount_max_percentage	25
discount_max_amount	0 (no limit)

Backend Changes

1. Validation — discount_max_percentage should reject values > 100
2. Migration — Update default from 50 to 25 for new installs (existing installs keep their value)

Frontend Changes

1. Settings page — Reorder fields: mode dropdown first, then conditional percentage/amount fields
2. Show/hide logic — Percentage field visible when mode is percentage or both; Amount field visible when mode is amount or both
3. Input validation — Percentage input max=100, min=1
4. Helper text — Update from "0 = no limit" to "Maximum 100%" for percentage field

Screenshots / Mockup

┌─────────────────────────────────────┐
│  Discount Settings                  │
├─────────────────────────────────────┤
│  Discount Mode                      │
│  ┌─────────────────────────────┐    │
│  │ Percentage Only        ▼    │    │
│  └─────────────────────────────┘    │
│                                     │
│  Maximum Discount %                 │
│  ┌─────────────────────────────┐    │
│  │ 25                      %   │    │
│  └─────────────────────────────┘    │
│  Maximum 100%                       │
│                                     │
│  ┌─────────────────────────────┐    │
│  │ Require approval for        │    │
│  │ discounts above threshold   │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘

Related

• Current implementation: frontend/src/app/settings/page.tsx
• Backend validation: main/routes/settings.ts
• Default values: main/db.ts migration v7 (add_discount_settings)

Labels

enhancement, ui/ux, settings