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