From be343f375aafcc1cc9974fcf8aeba4059eac82b4 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 11 Sep 2026 12:45:17 +0700
Subject: [PATCH] feat: add order description display and replace input fields
 with textareas for multiline support

---
 src/app/(app)/my-orders/[id]/page.tsx |  7 ++++---
 src/app/(app)/my-orders/page.tsx      |  9 +++++----
 src/app/(app)/order/[id]/page.tsx     | 11 ++++++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/my-orders/[id]/page.tsx b/src/app/(app)/my-orders/[id]/page.tsx
index 767dfec..518d375 100644
--- a/src/app/(app)/my-orders/[id]/page.tsx
+++ b/src/app/(app)/my-orders/[id]/page.tsx
@@ -6,7 +6,8 @@ import { getOrderDetail, updateSubmissionPayment, updateOrderStatus, updateOrder
 import { Card, CardContent } from '@/components/ui/card'
 import { SummaryGenerator } from '@/components/SummaryGenerator'
 import { Button, buttonVariants } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Textarea } from '@/components/ui/textarea'
 import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -725,12 +726,12 @@ function EditDetailOrderModal({ order, onClose, onSuccess }: { order: any, onClo
           <Label htmlFor="detail-edit-desc" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
             Deskripsi <span className="text-slate-400 font-normal lowercase">(opsional)</span>
           </Label>
-          <Input 
+          <Textarea 
             id="detail-edit-desc" 
             placeholder="Keterangan tambahan tentang PO ini" 
             value={description} 
             onChange={(e) => setDescription(e.target.value)}
-            className="h-11 rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
+            className="min-h-[100px] rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
           />
         </div>
         
diff --git a/src/app/(app)/my-orders/page.tsx b/src/app/(app)/my-orders/page.tsx
index 4cd77fb..136ddca 100644
--- a/src/app/(app)/my-orders/page.tsx
+++ b/src/app/(app)/my-orders/page.tsx
@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Badge } from '@/components/ui/badge'
 import { ShareButton } from '@/components/ShareButton'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Textarea } from '@/components/ui/textarea'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -622,12 +623,12 @@ function CreateOrderModal({ userId, onSuccess, initialData }: { userId: string,
           <Label htmlFor="order-desc" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
             Deskripsi <span className="text-slate-400 font-normal lowercase">(opsional)</span>
           </Label>
-          <Input 
+          <Textarea 
             id="order-desc" 
             placeholder="Keterangan tambahan tentang PO ini" 
             value={description} 
             onChange={(e) => setDescription(e.target.value)}
-            className="h-11 rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
+            className="min-h-[100px] rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
           />
         </div>
         
@@ -787,12 +788,12 @@ function EditOrderModal({ order, onClose, onSuccess }: { order: any, onClose: ()
           <Label htmlFor="edit-order-desc" className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
             Deskripsi <span className="text-slate-400 font-normal lowercase">(opsional)</span>
           </Label>
-          <Input 
+          <Textarea 
             id="edit-order-desc" 
             placeholder="Keterangan tambahan tentang PO ini" 
             value={description} 
             onChange={(e) => setDescription(e.target.value)}
-            className="h-11 rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
+            className="min-h-[100px] rounded-xl border-slate-200 dark:border-slate-800 focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 focus-visible:border-[#1B2CC1]"
           />
         </div>
         
diff --git a/src/app/(app)/order/[id]/page.tsx b/src/app/(app)/order/[id]/page.tsx
index 122ce9d..3b02531 100644
--- a/src/app/(app)/order/[id]/page.tsx
+++ b/src/app/(app)/order/[id]/page.tsx
@@ -98,8 +98,17 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
-        {/* Left 2 Cols: Daftar Penitip */}
+        {/* Left 2 Cols: Daftar Penitip & Description */}
         <div className="lg:col-span-2 space-y-6">
+          {order.description && (
+            <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden p-5 sm:p-6">
+              <h3 className="font-bold text-slate-900 dark:text-white mb-3">Deskripsi</h3>
+              <div className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed whitespace-pre-wrap">
+                {order.description}
+              </div>
+            </div>
+          )}
+
           <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden">
             <div className="p-5 sm:p-6 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-between">
               <div className="flex items-center gap-2">