From 82c74972343fdfb7e555714cb0259510d044c92d Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 12 Oct 2025 17:07:33 +0330
Subject: [PATCH] Redesign TicketMessages page with minimal UI

- Minimal header with ticket number and status
- Compact ticket info bar with essential details
- Clean chat-like message design with better spacing
- Inline message form with horizontal layout
- Improved color scheme and typography
- Reduced visual clutter and improved readability
---
 src/pages/ticket/TicketMessages.tsx | 156 +++++++++++++---------------
 1 file changed, 70 insertions(+), 86 deletions(-)

diff --git a/src/pages/ticket/TicketMessages.tsx b/src/pages/ticket/TicketMessages.tsx
index a7066f6..86be5bb 100644
--- a/src/pages/ticket/TicketMessages.tsx
+++ b/src/pages/ticket/TicketMessages.tsx
@@ -80,69 +80,45 @@ const TicketMessages: FC = () => {
     }
 
     return (
-        <div className="space-y-6">
-            {/* Ticket Info */}
-            <div className="bg-white rounded-2xl p-6 shadow-sm">
-                <div className="flex items-center gap-2 mb-4">
-                    <MessageQuestion size={24} color="#2563eb" />
-                    <h1 className="text-xl font-semibold">جزئیات تیکت</h1>
+        <div className="max-w-4xl mx-auto space-y-4">
+            {/* Minimal Header */}
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                    <MessageQuestion size={20} color="#6b7280" />
+                    <div>
+                        <h1 className="text-lg font-medium text-gray-900">تیکت #{ticket.numericId}</h1>
+                        <p className="text-sm text-gray-500">{ticket.subject}</p>
+                    </div>
                 </div>
+                <StatusWithText
+                    variant={getStatusVariant(ticket.status)}
+                    text={getStatusText(ticket.status)}
+                />
+            </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">شماره تیکت</div>
-                        <div className="flex items-center gap-2">
-                            <MessageQuestion size={16} color="#8C90A3" />
-                            <span className="font-medium">{ticket.numericId}</span>
-                        </div>
+            {/* Ticket Info Bar */}
+            <div className="bg-gray-50 rounded-lg p-3">
+                <div className="flex flex-wrap items-center gap-6 text-sm">
+                    <div className="flex items-center gap-2">
+                        <UserIcon size={14} color="#6b7280" />
+                        <span className="text-gray-600">{ticket.seller?.fullName || 'نامشخص'}</span>
                     </div>
-
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">فروشنده</div>
-                        <div className="flex items-center gap-2">
-                            <UserIcon size={16} color="#8C90A3" />
-                            <span>{ticket.seller?.fullName || '-'}</span>
-                        </div>
+                    <div className="flex items-center gap-2">
+                        <Category size={14} color="#6b7280" />
+                        <span className="text-gray-600">{ticket.category?.title_fa || 'دسته‌بندی نشده'}</span>
                     </div>
-
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">موضوع</div>
-                        <div className="font-medium">{ticket.subject}</div>
-                    </div>
-
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">دسته‌بندی</div>
-                        <div className="flex items-center gap-2">
-                            <Category size={16} color="#8C90A3" />
-                            <span>{ticket.category?.title_fa || '-'}</span>
-                        </div>
-                    </div>
-
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">وضعیت</div>
-                        <StatusWithText
-                            variant={getStatusVariant(ticket.status)}
-                            text={getStatusText(ticket.status)}
-                        />
-                    </div>
-
-                    <div className="space-y-1">
-                        <div className="text-sm text-gray-500">تاریخ بروزرسانی</div>
-                        <div className="flex items-center gap-2">
-                            <Calendar size={16} color="#8C90A3" />
-                            <span>{formatDate(ticket.updatedAt)}</span>
-                        </div>
+                    <div className="flex items-center gap-2">
+                        <Calendar size={14} color="#6b7280" />
+                        <span className="text-gray-600">{formatDate(ticket.updatedAt)}</span>
                     </div>
                 </div>
             </div>
 
             {/* Messages Section */}
-            <div className="bg-white rounded-2xl p-6 shadow-sm">
-                <h2 className="text-lg font-semibold mb-4">پیام‌ها</h2>
-
-                <div className="space-y-4 max-h-96 overflow-y-auto">
+            <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+                <div className="h-96 overflow-y-auto p-4 space-y-3">
                     {messages.length === 0 ? (
-                        <div className="text-center py-8 text-gray-500">
+                        <div className="text-center py-12 text-gray-400 text-sm">
                             هیچ پیامی یافت نشد
                         </div>
                     ) : (
@@ -154,16 +130,16 @@ const TicketMessages: FC = () => {
                                     className={`flex ${isAdmin ? 'justify-end' : 'justify-start'}`}
                                 >
                                     <div
-                                        className={`max-w-[70%] p-4 rounded-2xl ${
+                                        className={`max-w-[75%] px-4 py-2 rounded-2xl ${
                                             isAdmin
-                                                ? 'bg-blue-500 text-white rounded-br-md'
-                                                : 'bg-gray-100 text-gray-900 rounded-bl-md'
-                                            }`}
+                                                ? 'bg-blue-500 text-white rounded-br-sm'
+                                                : 'bg-gray-100 text-gray-800 rounded-bl-sm'
+                                        }`}
                                     >
-                                        <div className="text-sm mb-2">
-                                            {isAdmin ? 'ادمین' : 'فروشنده'}
+                                        <div className="text-xs font-medium mb-1 opacity-75">
+                                            {isAdmin ? 'شما' : 'فروشنده'}
                                         </div>
-                                        <div className="whitespace-pre-wrap">
+                                        <div className="text-sm leading-relaxed">
                                             {message.content}
                                         </div>
                                         {message.attachments && message.attachments.length > 0 && (
@@ -172,17 +148,17 @@ const TicketMessages: FC = () => {
                                                     <div
                                                         key={index}
                                                         className={`text-xs underline ${
-                                                            isAdmin ? 'text-blue-100' : 'text-blue-600'
+                                                            isAdmin ? 'text-blue-100' : 'text-blue-500'
                                                         }`}
                                                     >
-                                                        فایل ضمیمه: {attachment}
+                                                        📎 {attachment}
                                                     </div>
                                                 ))}
                                             </div>
                                         )}
-                                        <div className={`text-xs mt-2 ${
+                                        <div className={`text-xs mt-1 ${
                                             isAdmin ? 'text-blue-100' : 'text-gray-500'
-                                        }`}>
+                                        } opacity-60`}>
                                             {message.createdAt && formatDate(message.createdAt)}
                                         </div>
                                     </div>
@@ -194,35 +170,43 @@ const TicketMessages: FC = () => {
             </div>
 
             {/* Send Message Form */}
-            <div className="bg-white rounded-2xl p-6 shadow-sm">
-                <h2 className="text-lg font-semibold mb-4">ارسال پیام جدید</h2>
-
-                <div className="space-y-4">
-                    <Textarea
-                        label="متن پیام"
-                        placeholder="پیام خود را وارد کنید..."
-                        value={messageContent}
-                        onChange={(e) => setMessageContent(e.target.value)}
-                        rows={4}
-                    />
-
-                    <UploadBox
-                        label="فایل‌های ضمیمه (اختیاری)"
-                        isMultiple={true}
-                        onChange={handleFileChange}
-                        isReset={attachments.length === 0}
-                    />
-
-                    <div className="flex justify-end">
+            <div className="bg-white border border-gray-200 rounded-xl p-4">
+                <div className="flex gap-3">
+                    <div className="flex-1">
+                        <Textarea
+                            placeholder="پیام خود را بنویسید..."
+                            value={messageContent}
+                            onChange={(e) => setMessageContent(e.target.value)}
+                            rows={3}
+                            className="border-0 focus:ring-0 resize-none"
+                        />
+                    </div>
+                    <div className="flex flex-col gap-2">
                         <Button
-                            label="ارسال پیام"
+                            label="ارسال"
                             onClick={handleSendMessage}
                             isLoading={addMessageMutation.isPending}
                             disabled={!messageContent.trim()}
-                            className="w-fit"
+                            size="sm"
+                            className="h-8 px-4"
+                        />
+                        <UploadBox
+                            label=""
+                            isMultiple={true}
+                            onChange={handleFileChange}
+                            isReset={attachments.length === 0}
                         />
                     </div>
                 </div>
+                {attachments.length > 0 && (
+                    <div className="mt-3 flex flex-wrap gap-2">
+                        {attachments.map((file, index) => (
+                            <div key={index} className="bg-gray-100 text-xs px-2 py-1 rounded-md flex items-center gap-1">
+                                📎 {file.name}
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
         </div>
     )