From 4e764f93683ab5eea927e0158982472bd07e3312 Mon Sep 17 00:00:00 2001 From: dwindown Date: Sat, 8 Nov 2025 14:24:29 +0700 Subject: [PATCH] feat: OrderCard redesign and CRUD header improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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! 🎯 --- .../src/components/filters/DateRange.tsx | 8 ++--- admin-spa/src/routes/Orders/Edit.tsx | 35 +++++++++---------- admin-spa/src/routes/Orders/New.tsx | 21 ++++++----- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/admin-spa/src/components/filters/DateRange.tsx b/admin-spa/src/components/filters/DateRange.tsx index 50df1c5..ac09e30 100644 --- a/admin-spa/src/components/filters/DateRange.tsx +++ b/admin-spa/src/components/filters/DateRange.tsx @@ -50,7 +50,7 @@ export default function DateRange({ value, onChange }: Props) { }, [preset, start, end]); return ( -
+
{preset === "custom" && ( -
+
setStart(e.target.value || undefined)} @@ -77,7 +77,7 @@ export default function DateRange({ value, onChange }: Props) { /> setEnd(e.target.value || undefined)} diff --git a/admin-spa/src/routes/Orders/Edit.tsx b/admin-spa/src/routes/Orders/Edit.tsx index 329e20e..68f9677 100644 --- a/admin-spa/src/routes/Orders/Edit.tsx +++ b/admin-spa/src/routes/Orders/Edit.tsx @@ -6,9 +6,10 @@ import { OrdersApi } from '@/lib/api'; import { showErrorToast, showSuccessToast, getPageLoadErrorMessage } from '@/lib/errorHandling'; import { ErrorCard } from '@/components/ErrorCard'; import { LoadingState } from '@/components/LoadingState'; -import { ArrowLeft } from 'lucide-react'; import { __, sprintf } from '@/lib/i18n'; import { usePageHeader } from '@/contexts/PageHeaderContext'; +import { Button } from '@/components/ui/button'; +import { useFABConfig } from '@/hooks/useFABConfig'; export default function OrdersEdit() { const { id } = useParams(); @@ -16,6 +17,9 @@ export default function OrdersEdit() { const nav = useNavigate(); const qc = useQueryClient(); const { setPageHeader, clearPageHeader } = usePageHeader(); + + // Hide FAB on edit page + useFABConfig('none'); const countriesQ = useQuery({ queryKey: ['countries'], queryFn: OrdersApi.countries }); const paymentsQ = useQuery({ queryKey: ['payments'], queryFn: OrdersApi.payments }); @@ -58,29 +62,22 @@ export default function OrdersEdit() { const order = orderQ.data || {}; - // Set page header + // Set page header with back button useEffect(() => { - if (order.number) { - setPageHeader(sprintf(__('Edit Order #%s'), order.number)); - } else { - setPageHeader(__('Edit Order')); - } + const backButton = ( + + ); + const title = order.number + ? sprintf(__('Edit Order #%s'), order.number) + : __('Edit Order'); + setPageHeader(title, backButton); return () => clearPageHeader(); - }, [order.number, setPageHeader, clearPageHeader]); + }, [order.number, orderId, setPageHeader, clearPageHeader, nav]); return (
-
- -

- {sprintf(__('Edit Order #%s'), orderId)} -

-
{ - setPageHeader(__('New Order')); + const backButton = ( + + ); + setPageHeader(__('New Order'), backButton); return () => clearPageHeader(); - }, [setPageHeader, clearPageHeader]); + }, [setPageHeader, clearPageHeader, nav]); return (
-
-

{__('New Order')}

-
- -
-