Major improvements to WooNooW Page Editor system:
Schema & Architecture:
- Canonical section schema with unified sectionSchema.ts
- Normalized feature-grid to use items (not features)
- Standardized default values across all section types
- Schema versioning with automatic migration on read
Backend (PHP):
- Enhanced PlaceholderRenderer with typed output contracts
- Added fallback behavior for empty/invalid dynamic sources
- Added caching support for post data resolution
- New SchemaMigration class for backward compatibility
- New Features class for feature flags
- Enhanced PageSSR with full style support
- Removed controller-level special-casing for related_posts
Frontend (Admin SPA):
- Updated CanvasRenderer with schema-aware transformation
- Enhanced InspectorPanel with canonical schema metadata
- Added new section renderers
Frontend (Customer SPA):
- New section components: BentoCategoryGrid, MarqueeBanner, ProductCarousel, ShoppableImage
- Updated FeatureGridSection for items prop contract
Testing:
- Add PHP tests: SchemaMigrationTest, PlaceholderRendererTest, PageSSRTest
- Add TypeScript tests: schema-integration, feature-grid-regression
- Add parity tests for React vs SSR content matching
- Add CI script: check-schema-drift.mjs
- Add VERIFICATION_CHECKLIST.md
Documentation:
- RELEASE_NOTES-v1.0.md with full release notes
- docs/PAGE_EDITOR_SECTION_SCHEMA_V1.md
- docs/PAGE_EDITOR_SSR_COVERAGE_AUDIT.md
Implemented proper contextual header pattern for all Order CRUD pages.
Problem:
- New/Edit pages had action buttons at bottom of form
- Detail page showed duplicate headers (contextual + inline)
- Not following mobile-first best practices
Solution: [Back] Page Title [Action]
1. Edit Order Page
Header: [Back] Edit Order #337 [Save]
Implementation:
- Added formRef to trigger form submit from header
- Save button in contextual header
- Removed submit button from form bottom
- Button shows loading state during save
Changes:
- Edit.tsx: Added formRef, updated header with Save button
- OrderForm.tsx: Added formRef and hideSubmitButton props
- Form submit triggered via formRef.current.requestSubmit()
2. New Order Page
Header: [Back] New Order [Create]
Implementation:
- Added formRef to trigger form submit from header
- Create button in contextual header
- Removed submit button from form bottom
- Button shows loading state during creation
Changes:
- New.tsx: Added formRef, updated header with Create button
- Same OrderForm props as Edit page
3. Order Detail Page
Header: (hidden)
Implementation:
- Cleared contextual header completely
- Detail page has its own inline header with actions
- Inline header: [Back] Order #337 [Print] [Invoice] [Label] [Edit]
Changes:
- Detail.tsx: clearPageHeader() in useEffect
- No duplicate headers
OrderForm Component Updates:
- Added formRef prop (React.RefObject<HTMLFormElement>)
- Added hideSubmitButton prop (boolean)
- Form element accepts ref: <form ref={formRef}>
- Submit button conditionally rendered: {!hideSubmitButton && <Button...>}
- Backward compatible (both props optional)
Benefits:
✅ Consistent header pattern across all CRUD pages
✅ Action buttons always visible (sticky header)
✅ Better mobile UX (no scrolling to find buttons)
✅ Loading states in header buttons
✅ Clean, modern interface
✅ Follows industry standards (Gmail, Notion, Linear)
Files Modified:
- routes/Orders/New.tsx
- routes/Orders/Edit.tsx
- routes/Orders/Detail.tsx
- routes/Orders/partials/OrderForm.tsx
Result:
✅ New/Edit: Action buttons in contextual header
✅ Detail: No contextual header (has inline header)
✅ Professional, mobile-first UX! 🎯
Implemented three major improvements based on user feedback.
1. OrderCard Redesign - Order ID Badge with Status Colors
Problem: Icon wasted space, status badge redundant
Solution: Replace icon with Order ID badge using status colors
New Design:
┌─────────────────────────────────┐
│ ☐ [#337] Nov 04, 2025, 11:44 PM│ ← Order ID with status color
│ Dwindi Ramadhana →│ ← Customer (bold)
│ 1 item · Test Digital │ ← Items
│ Rp64.500 │ ← Total (large, primary)
└─────────────────────────────────┘
Status Colors:
- Completed: Green background
- Processing: Blue background
- Pending: Amber background
- Failed: Red background
- Cancelled: Gray background
- Refunded: Purple background
- On-hold: Slate background
Changes:
- Removed Package icon
- Order ID badge: w-16 h-16, rounded-xl, status color bg
- Order ID: font-bold, centered in badge
- Removed status badge from bottom
- Customer name promoted to h3 (more prominent)
- Total: text-lg, text-primary (stands out)
- Cleaner, more modern look
Inspiration: Uber, DoorDash, Airbnb order cards
Result: More efficient use of space, status visible at a glance!
2. CRUD Header Improvements - Back Button in Contextual Header
Problem: Inline headers on New/Edit pages, no back button in header
Solution: Add back button to contextual header, remove inline headers
New Order:
┌─────────────────────────────────┐
│ [Back] New Order │ ← Contextual header
├─────────────────────────────────┤
│ Order form... │
└─────────────────────────────────┘
Edit Order:
┌─────────────────────────────────┐
│ [Back] Edit Order #337 │ ← Contextual header
├─────────────────────────────────┤
│ Order form... │
└─────────────────────────────────┘
Changes:
- Added Back button to contextual header (ghost variant)
- Removed inline page headers
- Cleaner, more consistent UI
- Back button always visible (no scroll needed)
Result: Better UX, consistent with mobile patterns!
3. FAB Visibility Fix - Hide on New/Edit Pages
Problem: FAB visible on Edit page, causing confusion
Solution: Hide FAB on New/Edit pages using useFABConfig("none")
Changes:
- New.tsx: Added useFABConfig("none")
- Edit.tsx: Added useFABConfig("none")
- FAB only visible on Orders list page
Result: No confusion, FAB only where it makes sense!
Files Modified:
- routes/Orders/components/OrderCard.tsx
- routes/Orders/New.tsx
- routes/Orders/Edit.tsx
Summary:
✅ OrderCard: Order ID badge with status colors
✅ CRUD Headers: Back button in contextual header
✅ FAB: Hidden on New/Edit pages
✅ Cleaner, more modern, more intuitive! 🎯
