ankhbayar/Assist_Design
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor OrderDetail layout for improved clarity and responsiveness

Browse Source 
- Restructured the header section to enhance the display of order details, including service label and pricing.
- Improved the layout of the status display and added a new section for next steps.
- Updated installation fee notice for better clarity on additional charges.
- Enhanced overall spacing and typography for a cleaner user interface.
This commit is contained in:
barsa 2025-11-05 16:49:30 +09:00
parent 531627a2eb
commit 8fac5db2b0
1 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
apps/portal/src/features/orders/views/OrderDetail.tsx
View File

@ -329,51 +329,39 @@ export function OrderDetailContainer() {
<div className="rounded-3xl border border-slate-200 bg-white shadow-sm"> <div className="rounded-3xl border border-slate-200 bg-white shadow-sm">
{/* Header Section */} {/* Header Section */}
<div className="border-b border-slate-200 bg-gradient-to-br from-white to-slate-50 px-6 py-6 sm:px-8"> <div className="border-b border-slate-200 bg-gradient-to-br from-white to-slate-50 px-6 py-6 sm:px-8">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
{/* Row 1: Title, Date, Pricing */} {/* Left: Title & Date */}
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-1"> <div className="flex items-center gap-3">
<h2 className="text-2xl font-bold text-gray-900">{serviceLabel}</h2> <h2 className="text-2xl font-bold text-gray-900">{serviceLabel}</h2>
{placedDate && ( {statusDescriptor && (
<p className="text-sm text-gray-500">{placedDate}</p> <StatusPill label={statusDescriptor.label} variant={statusPillVariant} />
)}
</div>
{/* Pricing Section */}
<div className="flex items-start gap-6 sm:gap-8">
{totals.monthlyTotal > 0 && (
<div className="text-right">
<p className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600">Monthly</p>
<p className="text-3xl font-bold text-gray-900">
{yenFormatter.format(totals.monthlyTotal)}
</p>
</div>
)}
{totals.oneTimeTotal > 0 && (
<div className="text-right">
<p className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600">One-Time</p>
<p className="text-3xl font-bold text-gray-900">
{yenFormatter.format(totals.oneTimeTotal)}
</p>
</div>
)} )}
</div> </div>
{placedDate && (
<p className="text-sm text-gray-500">{placedDate}</p>
)}
</div> </div>
{/* Row 2: Status */} {/* Right: Pricing Section */}
{statusDescriptor && ( <div className="flex items-start gap-6 sm:gap-8">
<div className="flex flex-wrap items-center gap-3"> {totals.monthlyTotal > 0 && (
<StatusPill <div className="text-right">
label={statusDescriptor.label} <p className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600">Monthly</p>
variant={statusPillVariant} <p className="text-3xl font-bold text-gray-900">
size="lg" {yenFormatter.format(totals.monthlyTotal)}
className="px-5 py-2 text-base font-bold" </p>
/> </div>
{statusDescriptor.nextAction && ( )}
<span className="text-sm text-blue-700">{statusDescriptor.nextAction}</span> {totals.oneTimeTotal > 0 && (
)} <div className="text-right">
</div> <p className="mb-1 text-xs font-medium uppercase tracking-wider text-blue-600">One-Time</p>
)} <p className="text-3xl font-bold text-gray-900">
{yenFormatter.format(totals.oneTimeTotal)}
</p>
</div>
)}
</div>
</div> </div>
</div> </div>
@ -464,14 +452,29 @@ export function OrderDetailContainer() {
</div> </div>
</div> </div>
{/* Next Steps Section */}
{statusDescriptor?.nextAction && (
<div className="border-l-4 border-blue-500 bg-blue-50 px-4 py-3">
<div className="flex items-start gap-3">
<ClockIcon className="h-5 w-5 flex-shrink-0 text-blue-600" />
<div>
<p className="text-sm font-semibold text-blue-900">Next Steps</p>
<p className="mt-1 text-sm text-blue-800">
{statusDescriptor.nextAction}
</p>
</div>
</div>
</div>
)}
{showFeeNotice && ( {showFeeNotice && (
<div className="rounded-xl bg-amber-50 px-4 py-3"> <div className="border-l-4 border-amber-500 bg-amber-50 px-4 py-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-amber-600" /> <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-amber-600" />
<div> <div>
<p className="text-sm font-bold text-amber-900">Additional fees may apply</p> <p className="text-sm font-semibold text-amber-900">Installation Fee Notice</p>
<p className="mt-1 text-xs leading-relaxed text-amber-800/80"> <p className="mt-1 text-sm text-amber-800">
Weekend installation, express setup, or specialised configuration work can add extra costs. We&apos;ll always confirm with you before applying any additional charges. Standard installation is included. Additional charges may apply for weekend scheduling, express service, or specialized equipment installation. Any extra fees will be discussed and approved by you before work begins.
</p> </p>
</div> </div>
</div> </div>