All files / src/components/features/support/SupportPortal TicketCard.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

/**
 * TicketCard - Summary card for a support ticket
 */

import React from 'react';
import Link from 'next/link';
import { SupportTicketWithRelations } from '@/types/support';
import {
  TICKET_STATUS_CONFIG,
  TICKET_PRIORITY_CONFIG,
  TICKET_CATEGORY_CONFIG } from '@/constants/support';
import { Icon } from '@/components/ui/icons';

export interface TicketCardProps {
  /** The ticket to display */
  ticket: SupportTicketWithRelations;
}

export default function TicketCard({ ticket }: TicketCardProps) {
  const statusConfig = TICKET_STATUS_CONFIG[ticket.status];
  const priorityConfig = TICKET_PRIORITY_CONFIG[ticket.priority];
  const categoryConfig = TICKET_CATEGORY_CONFIG[ticket.category];

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric'});
  };

  const getTimeAgo = (date: Date) => {
    const now = new Date();
    const diff = now.getTime() - new Date(date).getTime();
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor(diff / (1000 * 60));

    if (days > 0) return `${days}d ago`;
    if (hours > 0) return `${hours}h ago`;
    if (minutes > 0) return `${minutes}m ago`;
    return 'Just now';
  };

  return (
    <Link
      href={`/support/tickets/${ticket.id}`}
      className="
        block bg-white rounded-lg border border-gray-200
        hover:border-blue-300 hover:shadow-md
        transition-all p-6
      "
    >
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        {/* Main Content */}
        <div className="flex-1 min-w-0">
          {/* Ticket Number & Status */}
          <div className="flex flex-wrap items-center gap-2 mb-2">
            <span className="text-sm font-medium text-gray-500">
              {ticket.ticketNumber}
            </span>
            <span
              className={`
                px-2 py-0.5 text-xs font-medium rounded-full
                ${statusConfig.bgColor} ${statusConfig.color}
              `}
            >
              {statusConfig.label}
            </span>
            <span
              className={`
                px-2 py-0.5 text-xs font-medium rounded-full
                ${priorityConfig.bgColor} ${priorityConfig.color}
              `}
            >
              {priorityConfig.label}
            </span>
          </div>

          {/* Subject */}
          <h3 className="text-lg font-semibold text-gray-900 mb-1 truncate">
            {ticket.subject}
          </h3>

          {/* Category & Date */}
          <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
            <span className="flex items-center gap-1">
              <Icon name="tag" size={16} />
              {categoryConfig.label}
            </span>
            <span className="flex items-center gap-1">
              <Icon name="calendar" size={16} />
              {formatDate(ticket.createdAt)}
            </span>
            {ticket._count?.messages && ticket._count.messages > 0 && (
              <span className="flex items-center gap-1">
                <Icon name="chat-bubble" size={16} />
                {ticket._count.messages} messages
              </span>
            )}
          </div>
        </div>

        {/* Right Side - Updated Time */}
        <div className="text-sm text-gray-400 sm:text-right flex-shrink-0">
          <p>Updated</p>
          <p className="font-medium">{getTimeAgo(ticket.updatedAt)}</p>
        </div>
      </div>

      {/* Related Order/Product */}
      {(ticket.order || ticket.product) && (
        <div className="mt-4 pt-4 border-t border-gray-100 flex flex-wrap gap-4 text-sm">
          {ticket.order && (
            <span className="text-gray-500">
              Related to Order #{ticket.order.id}
            </span>
          )}
          {ticket.product && (
            <span className="text-gray-500">
              Product: {ticket.product.title}
            </span>
          )}
        </div>
      )}
    </Link>
  );
}