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">
{/* 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="flex flex-col gap-6">
{/* Row 1: Title, Date, Pricing */}
<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-4 sm:flex-row sm:items-start sm:justify-between">
{/* Left: Title & Date */}
<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>
{placedDate && (
<p className="text-sm text-gray-500">{placedDate}</p>
)}
</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>
{statusDescriptor && (
<StatusPill label={statusDescriptor.label} variant={statusPillVariant} />
)}
</div>
{placedDate && (
<p className="text-sm text-gray-500">{placedDate}</p>
)}
</div>
{/* Row 2: Status */}
{statusDescriptor && (
<div className="flex flex-wrap items-center gap-3">
<StatusPill
label={statusDescriptor.label}
variant={statusPillVariant}
size="lg"
className="px-5 py-2 text-base font-bold"
/>
{statusDescriptor.nextAction && (
<span className="text-sm text-blue-700">{statusDescriptor.nextAction}</span>
)}
</div>
)}
{/* Right: 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>
</div>
@ -464,14 +452,29 @@ export function OrderDetailContainer() {
</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 && (
<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">
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-amber-600" />
<div>
<p className="text-sm font-bold text-amber-900">Additional fees may apply</p>
<p className="mt-1 text-xs leading-relaxed text-amber-800/80">
Weekend installation, express setup, or specialised configuration work can add extra costs. We&apos;ll always confirm with you before applying any additional charges.
<p className="text-sm font-semibold text-amber-900">Installation Fee Notice</p>
<p className="mt-1 text-sm text-amber-800">
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>
</div>
</div>