[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import ServiceDeskApp from "../service-desk-app" export default function Page() { return } [V0_FILE]typescriptreact:file="service-desk-app.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useMemo } from "react" import { Plus, Search, Filter, Edit, CheckCircle, Clock, AlertTriangle, User, Mail } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Mock data for tickets const initialTickets = [ { id: "TK-001", title: "Email server not responding", description: "Users unable to send/receive emails since 9 AM", status: "In Progress", priority: "High", assignedTo: "John Smith", requester: "Sarah Johnson", createdDate: "2024-01-15", updatedDate: "2024-01-15", source: "Manual", }, { id: "TK-002", title: "Password reset request", description: "User needs password reset for domain account", status: "New", priority: "Medium", assignedTo: "Unassigned", requester: "Mike Wilson", createdDate: "2024-01-15", updatedDate: "2024-01-15", source: "Power Automate", }, { id: "TK-003", title: "Software installation request", description: "Need Adobe Creative Suite installed on workstation", status: "Pending", priority: "Low", assignedTo: "Jane Doe", requester: "Tom Brown", createdDate: "2024-01-14", updatedDate: "2024-01-15", source: "Manual", }, { id: "TK-004", title: "Network connectivity issues", description: "Intermittent connection drops in Building A", status: "Resolved", priority: "Critical", assignedTo: "John Smith", requester: "IT Manager", createdDate: "2024-01-13", updatedDate: "2024-01-14", source: "Power Automate", }, ] const statusColors = { New: "bg-blue-100 text-blue-800 border-blue-200", "In Progress": "bg-yellow-100 text-yellow-800 border-yellow-200", Pending: "bg-orange-100 text-orange-800 border-orange-200", Resolved: "bg-green-100 text-green-800 border-green-200", Closed: "bg-gray-100 text-gray-800 border-gray-200", } const priorityColors = { Low: "bg-green-100 text-green-800", Medium: "bg-yellow-100 text-yellow-800", High: "bg-orange-100 text-orange-800", Critical: "bg-red-100 text-red-800", } export default function ServiceDeskApp() { const [currentUser, setCurrentUser] = useState("John Smith") // Simulating logged-in user const [tickets, setTickets] = useState(initialTickets) const [searchTerm, setSearchTerm] = useState("") const [statusFilter, setStatusFilter] = useState("All") const [priorityFilter, setPriorityFilter] = useState("All") const [selectedTicket, setSelectedTicket] = useState(null) const [isNewTicketOpen, setIsNewTicketOpen] = useState(false) const [isEditTicketOpen, setIsEditTicketOpen] = useState(false) const [newTicket, setNewTicket] = useState({ title: "", description: "", priority: "Medium", requester: "", assignedTo: "Unassigned", }) // Filter tickets based on search and filters const filteredTickets = useMemo(() => { return tickets.filter((ticket) => { const matchesSearch = ticket.title.toLowerCase().includes(searchTerm.toLowerCase()) || ticket.description.toLowerCase().includes(searchTerm.toLowerCase()) || ticket.id.toLowerCase().includes(searchTerm.toLowerCase()) const matchesStatus = statusFilter === "All" || ticket.status === statusFilter const matchesPriority = priorityFilter === "All" || ticket.priority === priorityFilter return matchesSearch && matchesStatus && matchesPriority }) }, [tickets, searchTerm, statusFilter, priorityFilter]) // Calculate dashboard metrics const dashboardMetrics = useMemo(() => { const total = tickets.length const newTickets = tickets.filter((t) => t.status === "New").length const inProgress = tickets.filter((t) => t.status === "In Progress").length const resolved = tickets.filter((t) => t.status === "Resolved").length const critical = tickets.filter((t) => t.priority === "Critical").length const myTickets = tickets.filter((t) => t.assignedTo === currentUser).length const unassigned = tickets.filter((t) => t.assignedTo === "Unassigned").length return { total, newTickets, inProgress, resolved, critical, myTickets, unassigned } }, [tickets, currentUser]) const handleCreateTicket = () => { const ticket = { id: `TK-${String(tickets.length + 1).padStart(3, "0")}`, title: newTicket.title, description: newTicket.description, status: "New", priority: newTicket.priority, assignedTo: newTicket.assignedTo, requester: newTicket.requester, createdDate: new Date().toISOString().split("T")[0], updatedDate: new Date().toISOString().split("T")[0], source: "Manual", } setTickets([...tickets, ticket]) setNewTicket({ title: "", description: "", priority: "Medium", requester: "", assignedTo: "Unassigned" }) setIsNewTicketOpen(false) } const handleUpdateTicketStatus = (ticketId, newStatus) => { setTickets( tickets.map((ticket) => ticket.id === ticketId ? { ...ticket, status: newStatus, updatedDate: new Date().toISOString().split("T")[0] } : ticket, ), ) } const handleEditTicket = (ticket) => { setSelectedTicket(ticket) setIsEditTicketOpen(true) } const handleSaveEdit = () => { setTickets( tickets.map((ticket) => ticket.id === selectedTicket.id ? { ...selectedTicket, updatedDate: new Date().toISOString().split("T")[0] } : ticket, ), ) setIsEditTicketOpen(false) setSelectedTicket(null) } const handleReplyToCustomer = (ticket) => { const subject = `Re: ${ticket.id} - ${ticket.title}` const body = `Dear ${ticket.requester}, Thank you for contacting our service desk regarding: ${ticket.title} We have received your request and assigned ticket ID: ${ticket.id} Our team is reviewing your request and will provide an update shortly. Best regards, ${currentUser} Service Desk Team` const mailtoLink = `mailto:${ticket.requester.toLowerCase().replace(" ", ".")}@company.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}` // Try to open in Outlook first, fallback to default mail client try { window.location.href = `outlook:${mailtoLink}` } catch (error) { window.location.href = mailtoLink } } return (

{/* Header */}

Service Desk

Manage and track support tickets

Logged in as: