[V0_FILE]typescriptreact:file="app/page.tsx" import { EmailTicketingSystem } from "@/components/email-ticketing-system" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/email-ticketing-system.tsx" "use client" import { useState } from "react" import { ResizablePanel } from "./resizable-panel" import { TicketList } from "./ticket-list" import { TicketDetail } from "./ticket-detail" import type { Ticket } from "@/types/ticket" import { mockTickets } from "@/data/mock-tickets" export function EmailTicketingSystem() { const [selectedTicket, setSelectedTicket] = useState(null) const [tickets, setTickets] = useState(mockTickets) const handleSelectTicket = (ticket: Ticket) => { setSelectedTicket(ticket) // Mark ticket as read when selected if (!ticket.read) { const updatedTickets = tickets.map((t) => (t.id === ticket.id ? { ...t, read: true } : t)) setTickets(updatedTickets) } } const handleCreateTicket = () => { const newTicket: Ticket = { id: `ticket-${Date.now()}`, subject: "New Ticket", sender: { name: "You", email: "you@example.com", avatar: "/placeholder.svg?height=40&width=40", }, date: new Date().toISOString(), priority: "medium", status: "open", read: true, messages: [ { id: `msg-${Date.now()}`, sender: { name: "You", email: "you@example.com", avatar: "/placeholder.svg?height=40&width=40", }, content: "", date: new Date().toISOString(), attachments: [], }, ], } setTickets([newTicket, ...tickets]) setSelectedTicket(newTicket) } return (

Futuristic Email Ticketing System

{ if (!selectedTicket) return const updatedTickets = tickets.map((t) => (t.id === selectedTicket.id ? updatedTicket : t)) setTickets(updatedTickets) setSelectedTicket(updatedTicket) }} />

) } [V0_FILE]typescriptreact:file="components/resizable-panel.tsx" "use client" import { useState, useRef, useEffect, type ReactNode } from "react" import { cn } from "@/lib/utils" interface ResizablePanelProps { children: [ReactNode, ReactNode] defaultSize?: number minSize?: number maxSize?: number className?: string } export function ResizablePanel({ children, defaultSize = 50, minSize = 10, maxSize = 90, className, }: ResizablePanelProps) { const [leftPanelSize, setLeftPanelSize] = useState(defaultSize) const containerRef = useRef(null) const resizerRef = useRef(null) const isDragging = useRef(false) useEffect(() => { const container = containerRef.current const resizer = resizerRef.current if (!container || !resizer) return const onMouseDown = (e: MouseEvent) => { e.preventDefault() isDragging.current = true document.body.style.cursor = "col-resize" document.body.style.userSelect = "none" } const onMouseUp = () => { isDragging.current = false document.body.style.removeProperty("cursor") document.body.style.removeProperty("user-select") } const onMouseMove = (e: MouseEvent) => { if (!isDragging.current) return const containerRect = container.getBoundingClientRect() const newLeftPanelSize = ((e.clientX - containerRect.left) / containerRect.width) * 100 // Constrain to min/max sizes const clampedSize = Math.min(Math.max(newLeftPanelSize, minSize), maxSize) setLeftPanelSize(clampedSize) } resizer.addEventListener("mousedown", onMouseDown) document.addEventListener("mouseup", onMouseUp) document.addEventListener("mousemove", onMouseMove) return () => { resizer.removeEventListener("mousedown", onMouseDown) document.removeEventListener("mouseup", onMouseUp) document.removeEventListener("mousemove", onMouseMove) } }, [minSize, maxSize]) return (

{children[0]}

{children[1]}

) } [V0_FILE]typescriptreact:file="components/ticket-list.tsx" "use client" import { PlusCircle, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import type { Ticket } from "@/types/ticket" import { formatDistanceToNow } from "@/lib/date-utils" interface TicketListProps { tickets: Ticket[] selectedTicketId: string | undefined onSelectTicket: (ticket: Ticket) => void onCreateTicket: () => void } export function TicketList({ tickets, selectedTicketId, onSelectTicket, onCreateTicket }: TicketListProps) { return (

{tickets.length === 0 ? (

No tickets found

) : (

onSelectTicket(ticket)} className={cn( "p-4 cursor-pointer transition-colors", selectedTicketId === ticket.id ? "bg-slate-800" : "hover:bg-slate-800/50", !ticket.read && "border-l-2 border-primary", )} >

{ticket.subject}

{formatDistanceToNow(new Date(ticket.date))}

{ticket.sender.name}

)}

) } function PriorityBadge({ priority }: { priority: string }) { const colors = { high: "bg-red-500/20 text-red-500 hover:bg-red-500/30", medium: "bg-yellow-500/20 text-yellow-500 hover:bg-yellow-500/30", low: "bg-green-500/20 text-green-500 hover:bg-green-500/30", } return ( {priority} ) } function StatusBadge({ status }: { status: string }) { const colors = { open: "bg-blue-500/20 text-blue-500 hover:bg-blue-500/30", pending: "bg-purple-500/20 text-purple-500 hover:bg-purple-500/30", resolved: "bg-green-500/20 text-green-500 hover:bg-green-500/30", closed: "bg-slate-500/20 text-slate-500 hover:bg-slate-500/30", } return ( {status} ) } import { cn } from "@/lib/utils" [V0_FILE]typescriptreact:file="components/ticket-detail.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ChevronDown, ChevronUp, Paperclip, Send, Tag, Clock } from "lucide-react" import type { Ticket, Message } from "@/types/ticket" import { formatDate } from "@/lib/date-utils" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Separator } from "@/components/ui/separator" interface TicketDetailProps { ticket: Ticket | null onUpdateTicket: (ticket: Ticket) => void } export function TicketDetail({ ticket, onUpdateTicket }: TicketDetailProps) { const [newMessage, setNewMessage] = useState("") const [expandedMessages, setExpandedMessages] = useState>({}) if (!ticket) { return (

No ticket selected

Select a ticket from the list or create a new one

) } const toggleMessageExpand = (messageId: string) => { setExpandedMessages((prev) => ({ ...prev, [messageId]: !prev[messageId], })) } const isMessageExpanded = (messageId: string) => { return expandedMessages[messageId] !== false // Default to expanded } const handleSendMessage = () => { if (!newMessage.trim()) return const newMessageObj: Message = { id: `msg-${Date.now()}`, sender: { name: "You", email: "you@example.com", avatar: "/placeholder.svg?height=40&width=40", }, content: newMessage, date: new Date().toISOString(), attachments: [], } const updatedTicket = { ...ticket, messages: [...ticket.messages, newMessageObj], } onUpdateTicket(updatedTicket) setNewMessage("") } const handleStatusChange = (status: string) => { onUpdateTicket({ ...ticket, status, }) } const handlePriorityChange = (priority: string) => { onUpdateTicket({ ...ticket, priority, }) } return (

{ticket.subject}

{ticket.messages.map((message, index) => (

toggleMessageExpand(message.id)} >

{message.sender.name.charAt(0)}

{message.sender.name}

{formatDate(new Date(message.date))}

{isMessageExpanded(message.id) && ( <>

{message.content}

{message.attachments && message.attachments.length > 0 && (

Attachments

{message.attachments.map((attachment) => (

{attachment.name}

))}

)}

))}

setNewMessage(e.target.value)}
            placeholder="Type your reply..."
            className="min-h-[100px] bg-slate-900 border-slate-700"
          />
          <div className="flex justify-between">
            <Button variant="outline" size="sm">
              <Paperclip className="h-4 w-4 mr-2" />
              Attach
            </Button>
            <Button onClick={handleSendMessage}>
              <Send className="h-4 w-4 mr-2" />
              Send Reply
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="types/ticket.ts"
export interface User {
  name: string
  email: string
  avatar: string
}

export interface Attachment {
  id: string
  name: string
  url: string
  size: number
  type: string
}

export interface Message {
  id: string
  sender: User
  content: string
  date: string
  attachments: Attachment[]
}

export interface Ticket {
  id: string
  subject: string
  sender: User
  date: string
  priority: string
  status: string
  read: boolean
  messages: Message[]
}

[V0_FILE]typescriptreact:file="data/mock-tickets.ts"
import type { Ticket } from "@/types/ticket"

export const mockTickets: Ticket[] = [
  {
    id: "ticket-1",
    subject: "Unable to access dashboard after update",
    sender: {
      name: "John Smith",
      email: "john.smith@example.com",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    date: "2023-03-20T10:30:00Z",
    priority: "high",
    status: "open",
    read: false,
    messages: [
      {
        id: "msg-1",
        sender: {
          name: "John Smith",
          email: "john.smith@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hello Support Team,\n\nAfter the latest update, I'm unable to access my dashboard. I keep getting a 'Server Error' message. This is affecting my ability to manage my projects.\n\nCan you please help me resolve this issue as soon as possible?\n\nThank you,\nJohn",
        date: "2023-03-20T10:30:00Z",
        attachments: [
          {
            id: "attach-1",
            name: "error-screenshot.png",
            url: "/placeholder.svg?height=200&width=300",
            size: 245000,
            type: "image/png",
          },
        ],
      },
      {
        id: "msg-2",
        sender: {
          name: "Support Team",
          email: "support@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hi John,\n\nThank you for reporting this issue. We're sorry for the inconvenience.\n\nCould you please provide us with more details about the error message you're seeing? Also, what browser and operating system are you using?\n\nIn the meantime, you can try clearing your browser cache and cookies, which sometimes resolves such issues.\n\nBest regards,\nSupport Team",
        date: "2023-03-20T11:15:00Z",
        attachments: [],
      },
    ],
  },
  {
    id: "ticket-2",
    subject: "Billing discrepancy on latest invoice",
    sender: {
      name: "Sarah Johnson",
      email: "sarah.johnson@example.com",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    date: "2023-03-19T14:45:00Z",
    priority: "medium",
    status: "pending",
    read: true,
    messages: [
      {
        id: "msg-3",
        sender: {
          name: "Sarah Johnson",
          email: "sarah.johnson@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Dear Billing Department,\n\nI noticed a discrepancy on my latest invoice (#INV-2023-0342). I was charged for the premium plan, but I'm currently on the standard plan.\n\nCould you please review this and make the necessary adjustments?\n\nBest regards,\nSarah Johnson",
        date: "2023-03-19T14:45:00Z",
        attachments: [
          {
            id: "attach-2",
            name: "invoice-march-2023.pdf",
            url: "/placeholder.svg?height=200&width=300",
            size: 125000,
            type: "application/pdf",
          },
        ],
      },
    ],
  },
  {
    id: "ticket-3",
    subject: "Feature request: Dark mode option",
    sender: {
      name: "Michael Chen",
      email: "michael.chen@example.com",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    date: "2023-03-18T09:20:00Z",
    priority: "low",
    status: "open",
    read: true,
    messages: [
      {
        id: "msg-4",
        sender: {
          name: "Michael Chen",
          email: "michael.chen@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hello Product Team,\n\nI love your application, but I often work late at night and the bright interface strains my eyes. Would it be possible to add a dark mode option in a future update?\n\nThis would greatly improve the user experience for night owls like me!\n\nThanks for considering,\nMichael",
        date: "2023-03-18T09:20:00Z",
        attachments: [],
      },
      {
        id: "msg-5",
        sender: {
          name: "Product Team",
          email: "product@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hi Michael,\n\nThank you for your suggestion! We appreciate your feedback.\n\nWe're actually already working on a dark mode feature, which is planned for our next major release. We'll add your vote to our internal tracking system.\n\nStay tuned for updates!\n\nBest regards,\nProduct Team",
        date: "2023-03-18T11:30:00Z",
        attachments: [],
      },
      {
        id: "msg-6",
        sender: {
          name: "Michael Chen",
          email: "michael.chen@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "That's great news! Looking forward to the dark mode feature. Thanks for the quick response.\n\nBest,\nMichael",
        date: "2023-03-18T12:15:00Z",
        attachments: [],
      },
    ],
  },
  {
    id: "ticket-4",
    subject: "Integration with third-party API not working",
    sender: {
      name: "Alex Rodriguez",
      email: "alex.rodriguez@example.com",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    date: "2023-03-17T16:10:00Z",
    priority: "high",
    status: "open",
    read: false,
    messages: [
      {
        id: "msg-7",
        sender: {
          name: "Alex Rodriguez",
          email: "alex.rodriguez@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hello Technical Support,\n\nI'm trying to set up the integration with the XYZ API as described in your documentation, but I keep getting authentication errors.\n\nI've double-checked my API keys and followed all the steps in the guide, but it's still not working. This is blocking our project from moving forward.\n\nCan you please help?\n\nThanks,\nAlex",
        date: "2023-03-17T16:10:00Z",
        attachments: [
          {
            id: "attach-3",
            name: "error-log.txt",
            url: "/placeholder.svg?height=200&width=300",
            size: 5200,
            type: "text/plain",
          },
        ],
      },
    ],
  },
  {
    id: "ticket-5",
    subject: "Thank you for the excellent service",
    sender: {
      name: "Emma Wilson",
      email: "emma.wilson@example.com",
      avatar: "/placeholder.svg?height=40&width=40",
    },
    date: "2023-03-16T13:25:00Z",
    priority: "low",
    status: "closed",
    read: true,
    messages: [
      {
        id: "msg-8",
        sender: {
          name: "Emma Wilson",
          email: "emma.wilson@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Dear Support Team,\n\nI just wanted to take a moment to thank you for the excellent service I received when resolving my recent issue. Your team was prompt, professional, and incredibly helpful.\n\nSpecial thanks to David from your technical team who went above and beyond to help me.\n\nI will definitely be recommending your service to my colleagues.\n\nBest regards,\nEmma Wilson",
        date: "2023-03-16T13:25:00Z",
        attachments: [],
      },
      {
        id: "msg-9",
        sender: {
          name: "Customer Success",
          email: "success@example.com",
          avatar: "/placeholder.svg?height=40&width=40",
        },
        content:
          "Hi Emma,\n\nThank you so much for your kind words! We're delighted to hear that you had a positive experience with our support team, especially with David.\n\nWe strive to provide the best service possible, and feedback like yours motivates us to keep improving.\n\nPlease don't hesitate to reach out if you need any assistance in the future.\n\nWarm regards,\nCustomer Success Team",
        date: "2023-03-16T14:40:00Z",
        attachments: [],
      },
    ],
  },
]

[V0_FILE]typescriptreact:file="lib/date-utils.ts"
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "numeric",
    hour12: true,
  }).format(date)
}

export function formatDistanceToNow(date: Date): string {
  const now = new Date()
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

if (diffInSeconds < 60) {
    return "just now"
  }

const diffInMinutes = Math.floor(diffInSeconds / 60)
  if (diffInMinutes < 60) {
    return `${diffInMinutes} min${diffInMinutes === 1 ? "" : "s"} ago`
  }

const diffInHours = Math.floor(diffInMinutes / 60)
  if (diffInHours < 24) {
    return `${diffInHours} hour${diffInHours === 1 ? "" : "s"} ago`
  }

const diffInDays = Math.floor(diffInHours / 24)
  if (diffInDays < 7) {
    return `${diffInDays} day${diffInDays === 1 ? "" : "s"} ago`
  }

const diffInWeeks = Math.floor(diffInDays / 7)
  if (diffInWeeks < 4) {
    return `${diffInWeeks} week${diffInWeeks === 1 ? "" : "s"} ago`
  }

const diffInMonths = Math.floor(diffInDays / 30)
  if (diffInMonths < 12) {
    return `${diffInMonths} month${diffInMonths === 1 ? "" : "s"} ago`
  }

const diffInYears = Math.floor(diffInDays / 365)
  return `${diffInYears} year${diffInYears === 1 ? "" : "s"} ago`
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This