chore: import clean Agent Desk snapshot (6/7)
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { createTicketFromConversation } from "@/lib/api/ticket"
|
||||
import { EditDialog } from "./edit"
|
||||
|
||||
type ConversationSeed = {
|
||||
id: number
|
||||
customerName: string
|
||||
customerId?: number
|
||||
lastMessageSummary?: string
|
||||
currentAssigneeId?: number
|
||||
}
|
||||
|
||||
type CreateTicketFromConversationDialogProps = {
|
||||
open: boolean
|
||||
conversation: ConversationSeed | null
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export function CreateTicketFromConversationDialog({
|
||||
open,
|
||||
conversation,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: CreateTicketFromConversationDialogProps) {
|
||||
const t = useI18n()
|
||||
const initialValues = conversation
|
||||
? {
|
||||
title: conversation.customerName || "",
|
||||
description: conversation.lastMessageSummary || "",
|
||||
currentAssigneeId: conversation.currentAssigneeId || undefined,
|
||||
}
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<EditDialog
|
||||
open={open}
|
||||
saving={false}
|
||||
itemId={null}
|
||||
onOpenChange={onOpenChange}
|
||||
fixedConversationId={conversation?.id}
|
||||
fixedCustomerId={conversation?.customerId}
|
||||
initialValues={initialValues}
|
||||
titleOverride={t("ticket.conversationToTicket")}
|
||||
descriptionOverride={t("ticket.conversationToTicketDescription")}
|
||||
onSubmit={async (payload) => {
|
||||
if (!conversation?.id) {
|
||||
throw new Error(t("ticket.conversationMissing"))
|
||||
}
|
||||
await createTicketFromConversation({
|
||||
conversationId: conversation.id,
|
||||
title: payload.title,
|
||||
description: payload.description,
|
||||
currentAssigneeId: payload.currentAssigneeId,
|
||||
tagIds: payload.tagIds,
|
||||
})
|
||||
toast.success(t("ticket.createSuccess"))
|
||||
onSuccess?.()
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
342
web/app/(dashboard)/dashboard/tickets/_components/edit.tsx
Normal file
342
web/app/(dashboard)/dashboard/tickets/_components/edit.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import type { Resolver } from "react-hook-form"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import { z } from "zod/v4"
|
||||
|
||||
import { ContentEditor } from "@/components/content-editor"
|
||||
import { OptionCombobox } from "@/components/option-combobox"
|
||||
import { ProjectDialog } from "@/components/project-dialog"
|
||||
import { isRichTextEmpty } from "@/components/safe-rich-html"
|
||||
import { TagSelector } from "@/components/tag-selector"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
fetchAgentProfilesAll,
|
||||
fetchTagsAll,
|
||||
type AdminAgentProfile,
|
||||
type TagTree,
|
||||
} from "@/lib/api/admin"
|
||||
import {
|
||||
fetchTicketDetail,
|
||||
type CreateTicketPayload,
|
||||
type TicketItem,
|
||||
type UpdateTicketPayload,
|
||||
} from "@/lib/api/ticket"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
|
||||
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
||||
|
||||
type EditDialogProps = {
|
||||
open: boolean
|
||||
saving: boolean
|
||||
itemId: number | null
|
||||
initialValues?: Partial<CreateTicketPayload>
|
||||
fixedConversationId?: number
|
||||
fixedCustomerId?: number
|
||||
titleOverride?: string
|
||||
descriptionOverride?: string
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSubmit: (payload: CreateTicketPayload | UpdateTicketPayload) => Promise<void>
|
||||
}
|
||||
|
||||
function createSchema(t: TFunction) {
|
||||
return z.object({
|
||||
title: z.string().trim().min(1, t("ticket.titleRequired")),
|
||||
description: z.string().refine((value) => !isRichTextEmpty(value), t("ticket.descriptionRequired")),
|
||||
currentAssigneeId: z.coerce.number().int().min(0).optional(),
|
||||
tagIds: z.array(z.number().int().positive()).default([]),
|
||||
})
|
||||
}
|
||||
|
||||
type EditForm = {
|
||||
title: string
|
||||
description: string
|
||||
currentAssigneeId?: number
|
||||
tagIds: number[]
|
||||
}
|
||||
|
||||
const emptyForm: EditForm = {
|
||||
title: "",
|
||||
description: "",
|
||||
currentAssigneeId: 0,
|
||||
tagIds: [],
|
||||
}
|
||||
|
||||
function buildForm(item: TicketItem | null): EditForm {
|
||||
if (!item) {
|
||||
return emptyForm
|
||||
}
|
||||
return {
|
||||
title: item.title ?? "",
|
||||
description: item.description ?? "",
|
||||
currentAssigneeId: item.currentAssigneeId ?? 0,
|
||||
tagIds: (item.tags ?? []).map((tag) => tag.id),
|
||||
}
|
||||
}
|
||||
|
||||
function buildInitialForm(initialValues?: Partial<CreateTicketPayload>): EditForm {
|
||||
return {
|
||||
title: initialValues?.title?.trim() ?? "",
|
||||
description: initialValues?.description ?? "",
|
||||
currentAssigneeId: initialValues?.currentAssigneeId ?? 0,
|
||||
tagIds: initialValues?.tagIds ?? [],
|
||||
}
|
||||
}
|
||||
|
||||
function buildPayload(form: EditForm): CreateTicketPayload {
|
||||
const currentAssigneeId = form.currentAssigneeId ?? 0
|
||||
return {
|
||||
title: form.title.trim(),
|
||||
description: form.description.trim(),
|
||||
currentAssigneeId,
|
||||
tagIds: form.tagIds,
|
||||
}
|
||||
}
|
||||
|
||||
export function EditDialog({
|
||||
open,
|
||||
saving,
|
||||
itemId,
|
||||
initialValues,
|
||||
fixedConversationId,
|
||||
fixedCustomerId,
|
||||
titleOverride,
|
||||
descriptionOverride,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: EditDialogProps) {
|
||||
if (!open) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<TicketEditDialogBody
|
||||
key={itemId ? `edit-${itemId}` : "create"}
|
||||
open={open}
|
||||
saving={saving}
|
||||
itemId={itemId}
|
||||
initialValues={initialValues}
|
||||
fixedConversationId={fixedConversationId}
|
||||
fixedCustomerId={fixedCustomerId}
|
||||
titleOverride={titleOverride}
|
||||
descriptionOverride={descriptionOverride}
|
||||
onOpenChange={onOpenChange}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type TicketEditDialogBodyProps = EditDialogProps
|
||||
|
||||
function TicketEditDialogBody({
|
||||
open,
|
||||
saving,
|
||||
itemId,
|
||||
initialValues,
|
||||
fixedConversationId,
|
||||
fixedCustomerId,
|
||||
titleOverride,
|
||||
descriptionOverride,
|
||||
onOpenChange,
|
||||
onSubmit,
|
||||
}: TicketEditDialogBodyProps) {
|
||||
const t = useI18n()
|
||||
const formId = "ticket-edit-form"
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [tags, setTags] = useState<TagTree[]>([])
|
||||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
||||
const schema = useMemo(() => createSchema(t), [t])
|
||||
const editFormResolver = useMemo(
|
||||
() => zodResolver(schema) as Resolver<EditForm>,
|
||||
[schema],
|
||||
)
|
||||
const form = useForm<EditForm>({
|
||||
resolver: editFormResolver,
|
||||
defaultValues: emptyForm,
|
||||
})
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = form
|
||||
|
||||
useEffect(() => {
|
||||
async function loadDetail() {
|
||||
if (!itemId) {
|
||||
reset(buildInitialForm(initialValues))
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await fetchTicketDetail(itemId)
|
||||
reset(buildForm(data.ticket))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
void loadDetail()
|
||||
}, [initialValues, itemId, reset])
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return
|
||||
}
|
||||
void (async () => {
|
||||
const [tagData, agentData] = await Promise.all([
|
||||
fetchTagsAll(),
|
||||
fetchAgentProfilesAll(),
|
||||
])
|
||||
setTags(Array.isArray(tagData) ? tagData : [])
|
||||
setAgents(Array.isArray(agentData) ? agentData : [])
|
||||
})()
|
||||
}, [open])
|
||||
|
||||
const agentOptions = [{ value: "0", label: t("ticket.noAssignee") }].concat(
|
||||
agents.map((agent) => ({
|
||||
value: String(agent.userId),
|
||||
label:
|
||||
agent.displayName ||
|
||||
agent.nickname ||
|
||||
agent.username ||
|
||||
t("ticket.agentFallback", { id: agent.userId }),
|
||||
})),
|
||||
)
|
||||
|
||||
async function onFormSubmit(values: EditForm) {
|
||||
const payload = buildPayload(values)
|
||||
if (itemId) {
|
||||
await onSubmit({
|
||||
ticketId: itemId,
|
||||
...payload,
|
||||
})
|
||||
return
|
||||
}
|
||||
await onSubmit({
|
||||
...payload,
|
||||
source: fixedConversationId ? "conversation" : "manual",
|
||||
conversationId: fixedConversationId,
|
||||
customerId: fixedCustomerId,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ProjectDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={titleOverride || (itemId ? t("ticket.editTitle") : t("ticket.createTitle"))}
|
||||
description={descriptionOverride || t("ticket.dialogDescription")}
|
||||
size="lg"
|
||||
allowFullscreen
|
||||
footer={
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={saving}
|
||||
>
|
||||
{t("ticket.cancel")}
|
||||
</Button>
|
||||
<Button type="submit" form={formId} disabled={saving || loading}>
|
||||
{saving ? t("ticket.saving") : itemId ? t("ticket.save") : t("ticket.create")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-muted-foreground">{t("ticket.loading")}</div>
|
||||
</div>
|
||||
) : (
|
||||
<form id={formId} onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
|
||||
<FieldGroup>
|
||||
<Field data-invalid={!!errors.title}>
|
||||
<FieldLabel htmlFor="ticket-title">{t("ticket.title")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Input
|
||||
id="ticket-title"
|
||||
placeholder={t("ticket.titlePlaceholder")}
|
||||
aria-invalid={!!errors.title}
|
||||
{...register("title")}
|
||||
/>
|
||||
<FieldError errors={[errors.title]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={!!errors.description}>
|
||||
<FieldLabel>{t("ticket.description")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<ContentEditor
|
||||
value={{ mode: "html", raw: field.value ?? "" }}
|
||||
onChange={(next) => field.onChange(next.raw)}
|
||||
placeholder={t("ticket.descriptionRequired")}
|
||||
disabled={saving || loading}
|
||||
allowedModes={["html"]}
|
||||
height={260}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.description]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>{t("ticket.assignee")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="currentAssigneeId"
|
||||
render={({ field }) => (
|
||||
<OptionCombobox
|
||||
value={String(field.value ?? 0)}
|
||||
onChange={(value) => field.onChange(Number(value))}
|
||||
placeholder={t("ticket.selectAssignee")}
|
||||
options={agentOptions}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>{t("ticket.ticketTags")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="tagIds"
|
||||
render={({ field }) => (
|
||||
<TagSelector
|
||||
mode="multiple"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
tags={tags}
|
||||
placeholder={t("ticket.selectTags")}
|
||||
selectedCountText={(count) => t("ticket.selectedTags", { count })}
|
||||
searchPlaceholder={t("ticket.searchTags")}
|
||||
emptyText={t("ticket.emptyTags")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
)}
|
||||
</ProjectDialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Controller, type Resolver, useForm } from "react-hook-form"
|
||||
import { toast } from "sonner"
|
||||
import { z } from "zod/v4"
|
||||
|
||||
import { OptionCombobox } from "@/components/option-combobox"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
fetchAgentProfilesAll,
|
||||
type AdminAgentProfile,
|
||||
} from "@/lib/api/admin"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { assignTicket } from "@/lib/api/ticket"
|
||||
|
||||
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
||||
|
||||
function createSchema(t: TFunction) {
|
||||
return z.object({
|
||||
toUserId: z.string().trim().min(1, t("ticket.assigneeRequired")),
|
||||
reason: z.string().trim(),
|
||||
})
|
||||
}
|
||||
|
||||
type FormValues = {
|
||||
toUserId: string
|
||||
reason: string
|
||||
}
|
||||
|
||||
const emptyForm: FormValues = {
|
||||
toUserId: "",
|
||||
reason: "",
|
||||
}
|
||||
|
||||
type TicketAssignDialogProps = {
|
||||
open: boolean
|
||||
ticketId: number | null
|
||||
currentAssigneeId?: number
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSuccess?: () => Promise<void> | void
|
||||
}
|
||||
|
||||
export function TicketAssignDialog({
|
||||
open,
|
||||
ticketId,
|
||||
currentAssigneeId,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: TicketAssignDialogProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
{open ? (
|
||||
<TicketAssignDialogBody
|
||||
key={ticketId ?? "ticket-assign"}
|
||||
ticketId={ticketId}
|
||||
currentAssigneeId={currentAssigneeId}
|
||||
onOpenChange={onOpenChange}
|
||||
onSuccess={onSuccess}
|
||||
/>
|
||||
) : null}
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function TicketAssignDialogBody({
|
||||
ticketId,
|
||||
currentAssigneeId,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: Omit<TicketAssignDialogProps, "open">) {
|
||||
const t = useI18n()
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [agents, setAgents] = useState<AdminAgentProfile[]>([])
|
||||
const activeRef = useRef(false)
|
||||
|
||||
const schema = useMemo(() => createSchema(t), [t])
|
||||
const resolver = useMemo(
|
||||
() => zodResolver(schema) as Resolver<FormValues>,
|
||||
[schema],
|
||||
)
|
||||
const form = useForm<FormValues>({
|
||||
resolver,
|
||||
defaultValues: emptyForm,
|
||||
})
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = form
|
||||
|
||||
useEffect(() => {
|
||||
activeRef.current = true
|
||||
return () => {
|
||||
activeRef.current = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
reset({
|
||||
toUserId: currentAssigneeId ? String(currentAssigneeId) : "",
|
||||
reason: "",
|
||||
})
|
||||
}, [currentAssigneeId, reset, ticketId])
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
fetchAgentProfilesAll()
|
||||
.then((agentData) => {
|
||||
if (!activeRef.current) {
|
||||
return
|
||||
}
|
||||
setAgents(Array.isArray(agentData) ? agentData : [])
|
||||
})
|
||||
.catch((error) => {
|
||||
if (!activeRef.current) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.loadAssigneesFailed"))
|
||||
})
|
||||
.finally(() => {
|
||||
if (activeRef.current) {
|
||||
setLoading(false)
|
||||
}
|
||||
})
|
||||
}, [t])
|
||||
|
||||
async function onFormSubmit(values: FormValues) {
|
||||
if (!ticketId) {
|
||||
toast.error(t("ticket.selectTicket"))
|
||||
return
|
||||
}
|
||||
setSaving(true)
|
||||
try {
|
||||
await assignTicket({
|
||||
ticketId,
|
||||
toUserId: Number(values.toUserId),
|
||||
reason: values.reason.trim() || undefined,
|
||||
})
|
||||
if (!activeRef.current) {
|
||||
return
|
||||
}
|
||||
toast.success(t("ticket.assigneeUpdated"))
|
||||
if (!activeRef.current) {
|
||||
return
|
||||
}
|
||||
onOpenChange(false)
|
||||
await onSuccess?.()
|
||||
} catch (error) {
|
||||
if (!activeRef.current) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.assignFailed"))
|
||||
} finally {
|
||||
if (activeRef.current) {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
|
||||
<DialogHeader className="px-6 pt-6">
|
||||
<DialogTitle>{t("ticket.assignTitle")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<div className="space-y-4 p-6">
|
||||
<Field data-invalid={!!errors.toUserId}>
|
||||
<FieldLabel>{t("ticket.assignee")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="toUserId"
|
||||
render={({ field }) => (
|
||||
<OptionCombobox
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
placeholder={loading ? t("ticket.loading") : t("ticket.selectHandler")}
|
||||
options={agents.map((agent) => ({
|
||||
value: String(agent.userId),
|
||||
label:
|
||||
agent.displayName ||
|
||||
agent.nickname ||
|
||||
agent.username ||
|
||||
t("ticket.agentFallback", { id: agent.userId }),
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.toUserId]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field data-invalid={!!errors.reason}>
|
||||
<FieldLabel>{t("ticket.assignReason")}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Textarea rows={4} placeholder={t("ticket.assignReasonPlaceholder")} {...register("reason")} />
|
||||
<FieldError errors={[errors.reason]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</div>
|
||||
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
{t("ticket.cancel")}
|
||||
</Button>
|
||||
<Button type="submit" disabled={saving}>
|
||||
{saving ? t("ticket.submitting") : t("ticket.confirmAssign")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,639 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
MessageSquareTextIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
RefreshCcwIcon,
|
||||
SendIcon,
|
||||
UserRoundIcon,
|
||||
} from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { type CustomerFormSavePayload } from "@/components/customer-form"
|
||||
import { CustomerFormDialog } from "@/components/customer-form-dialog"
|
||||
import { CustomerLinkOrCreateDialog } from "@/components/customer-link-or-create-dialog"
|
||||
import { useConfirm } from "@/components/confirm-provider"
|
||||
import { ContentEditor } from "@/components/content-editor"
|
||||
import { ProjectDialog } from "@/components/project-dialog"
|
||||
import { isRichTextEmpty, SafeRichHTML } from "@/components/safe-rich-html"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { saveCustomerProfile } from "@/lib/api/customer"
|
||||
import {
|
||||
changeTicketStatus,
|
||||
createTicketProgress,
|
||||
fetchTicketDetail,
|
||||
type CreateTicketPayload,
|
||||
type TicketDetail,
|
||||
type TicketStatus,
|
||||
type UpdateTicketPayload,
|
||||
updateTicket,
|
||||
} from "@/lib/api/ticket"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { cn, formatDateTime } from "@/lib/utils"
|
||||
import { EditDialog } from "./edit"
|
||||
import { TicketAssignDialog } from "./ticket-assign-dialog"
|
||||
import { getTicketStatusMeta, TicketStatusBadge } from "./ticket-status-badge"
|
||||
|
||||
type TicketDetailDialogProps = {
|
||||
ticketId: number | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onChanged: () => void
|
||||
}
|
||||
|
||||
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
||||
|
||||
function getStatusOptions(t: TFunction): Array<{ value: TicketStatus; label: string }> {
|
||||
return [
|
||||
{ value: "pending", label: t("ticket.statusPending") },
|
||||
{ value: "in_progress", label: t("ticket.statusInProgress") },
|
||||
{ value: "done", label: t("ticket.statusDone") },
|
||||
]
|
||||
}
|
||||
|
||||
function getStatusLabel(status: TicketStatus, t: TFunction) {
|
||||
return getStatusOptions(t).find((option) => option.value === status)?.label ?? status
|
||||
}
|
||||
|
||||
function sourceLabel(source: string, t: TFunction) {
|
||||
switch (source) {
|
||||
case "manual":
|
||||
return t("ticket.manualCreated")
|
||||
case "conversation":
|
||||
return t("ticket.conversationGenerated")
|
||||
default:
|
||||
return source || "-"
|
||||
}
|
||||
}
|
||||
|
||||
function metadataValue(value?: string | number | null) {
|
||||
if (value === undefined || value === null || value === "") {
|
||||
return "-"
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
function getTicketCustomerId(ticket?: TicketDetail["ticket"] | null) {
|
||||
return Number(ticket?.customer?.id || ticket?.customerId || 0)
|
||||
}
|
||||
|
||||
export function TicketDetailDialog({
|
||||
ticketId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onChanged,
|
||||
}: TicketDetailDialogProps) {
|
||||
const t = useI18n()
|
||||
const confirm = useConfirm()
|
||||
const [detail, setDetail] = useState<TicketDetail | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [statusSaving, setStatusSaving] = useState<TicketStatus | null>(null)
|
||||
const [progressSaving, setProgressSaving] = useState(false)
|
||||
const [progressOpen, setProgressOpen] = useState(false)
|
||||
const [progressContent, setProgressContent] = useState("")
|
||||
const [assignOpen, setAssignOpen] = useState(false)
|
||||
const [editOpen, setEditOpen] = useState(false)
|
||||
const [editSaving, setEditSaving] = useState(false)
|
||||
const [customerEditOpen, setCustomerEditOpen] = useState(false)
|
||||
const [customerEditSaving, setCustomerEditSaving] = useState(false)
|
||||
const [customerLinkOpen, setCustomerLinkOpen] = useState(false)
|
||||
const loadSeqRef = useRef(0)
|
||||
const dialogSeqRef = useRef(0)
|
||||
const currentTicketIdRef = useRef<number | null>(null)
|
||||
currentTicketIdRef.current = open ? ticketId : null
|
||||
|
||||
function isCurrentOperation(targetTicketId: number, dialogSeq: number) {
|
||||
return currentTicketIdRef.current === targetTicketId && dialogSeqRef.current === dialogSeq
|
||||
}
|
||||
|
||||
const loadDetail = useCallback(async (targetTicketId = ticketId, dialogSeq = dialogSeqRef.current) => {
|
||||
if (!targetTicketId || !isCurrentOperation(targetTicketId, dialogSeq)) {
|
||||
return
|
||||
}
|
||||
const seq = loadSeqRef.current + 1
|
||||
loadSeqRef.current = seq
|
||||
if (!open || !targetTicketId) {
|
||||
setDetail(null)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await fetchTicketDetail(targetTicketId)
|
||||
if (loadSeqRef.current !== seq || !isCurrentOperation(targetTicketId, dialogSeq)) {
|
||||
return
|
||||
}
|
||||
setDetail(data)
|
||||
} catch (error) {
|
||||
if (loadSeqRef.current !== seq || !isCurrentOperation(targetTicketId, dialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.loadDetailFailed"))
|
||||
} finally {
|
||||
if (loadSeqRef.current === seq) {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}, [open, t, ticketId])
|
||||
|
||||
useEffect(() => {
|
||||
dialogSeqRef.current += 1
|
||||
setDetail(null)
|
||||
setLoading(false)
|
||||
setStatusSaving(null)
|
||||
setProgressSaving(false)
|
||||
setProgressOpen(false)
|
||||
setEditSaving(false)
|
||||
setCustomerEditSaving(false)
|
||||
setAssignOpen(false)
|
||||
setEditOpen(false)
|
||||
setCustomerEditOpen(false)
|
||||
setCustomerLinkOpen(false)
|
||||
setProgressContent("")
|
||||
}, [open, ticketId])
|
||||
|
||||
useEffect(() => {
|
||||
void loadDetail(ticketId, dialogSeqRef.current)
|
||||
}, [loadDetail, ticketId])
|
||||
|
||||
async function handleStatusChange(status: TicketStatus) {
|
||||
if (!detail || detail.ticket.status === status) {
|
||||
return
|
||||
}
|
||||
const confirmed = await confirm({
|
||||
title: t("ticket.statusChangeConfirmTitle"),
|
||||
description: t("ticket.statusChangeConfirmDescription", {
|
||||
from: getStatusLabel(detail.ticket.status, t),
|
||||
to: getStatusLabel(status, t),
|
||||
}),
|
||||
confirmText: t("ticket.statusChangeConfirm"),
|
||||
})
|
||||
if (!confirmed) {
|
||||
return
|
||||
}
|
||||
const activeTicketId = detail.ticket.id
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
setStatusSaving(status)
|
||||
try {
|
||||
await changeTicketStatus({ ticketId: activeTicketId, status })
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.success(t("ticket.statusUpdated"))
|
||||
await loadDetail(activeTicketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.statusUpdateFailed"))
|
||||
} finally {
|
||||
if (isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
setStatusSaving(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateProgress() {
|
||||
if (!detail) {
|
||||
return
|
||||
}
|
||||
const activeTicketId = detail.ticket.id
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
const content = progressContent.trim()
|
||||
if (isRichTextEmpty(content)) {
|
||||
toast.error(t("ticket.progressRequired"))
|
||||
return
|
||||
}
|
||||
setProgressSaving(true)
|
||||
try {
|
||||
await createTicketProgress({
|
||||
ticketId: activeTicketId,
|
||||
content,
|
||||
})
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.success(t("ticket.progressRecorded"))
|
||||
setProgressContent("")
|
||||
setProgressOpen(false)
|
||||
await loadDetail(activeTicketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.progressCreateFailed"))
|
||||
} finally {
|
||||
if (isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
setProgressSaving(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssigned() {
|
||||
const activeTicketId = ticket?.id
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
if (!activeTicketId || !isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
await loadDetail(activeTicketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
}
|
||||
|
||||
async function handleUpdateTicket(payload: CreateTicketPayload | UpdateTicketPayload) {
|
||||
if (!("ticketId" in payload) || payload.ticketId <= 0) {
|
||||
toast.error(t("ticket.selectTicket"))
|
||||
return
|
||||
}
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
setEditSaving(true)
|
||||
try {
|
||||
await updateTicket(payload)
|
||||
if (!isCurrentOperation(payload.ticketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.success(t("ticket.updated"))
|
||||
setEditOpen(false)
|
||||
await loadDetail(payload.ticketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(payload.ticketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
if (!isCurrentOperation(payload.ticketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.updateFailed"))
|
||||
} finally {
|
||||
if (isCurrentOperation(payload.ticketId, activeDialogSeq)) {
|
||||
setEditSaving(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateCustomer(payload: CustomerFormSavePayload) {
|
||||
const activeCustomerId = getTicketCustomerId(ticket)
|
||||
if (!ticket?.id || activeCustomerId <= 0) {
|
||||
toast.error(t("ticket.noLinkedCustomer"))
|
||||
return
|
||||
}
|
||||
if (customerEditSaving) {
|
||||
return
|
||||
}
|
||||
const activeTicketId = ticket.id
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
setCustomerEditSaving(true)
|
||||
try {
|
||||
await saveCustomerProfile({ ...payload, id: activeCustomerId })
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.success(t("ticket.saved"))
|
||||
setCustomerEditOpen(false)
|
||||
await loadDetail(activeTicketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
} catch (error) {
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.saveFailed"))
|
||||
} finally {
|
||||
if (isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
setCustomerEditSaving(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCustomerLinked() {
|
||||
const activeTicketId = ticket?.id
|
||||
const activeDialogSeq = dialogSeqRef.current
|
||||
if (!activeTicketId || !isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
await loadDetail(activeTicketId, activeDialogSeq)
|
||||
if (!isCurrentOperation(activeTicketId, activeDialogSeq)) {
|
||||
return
|
||||
}
|
||||
onChanged()
|
||||
}
|
||||
|
||||
const ticket = detail?.ticket
|
||||
const customerId = getTicketCustomerId(ticket)
|
||||
const statusOptions = getStatusOptions(t)
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProjectDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={
|
||||
<div className="flex min-w-0 items-center gap-2 pr-16 text-base">
|
||||
<span className="truncate">{ticket?.title ?? t("ticket.detailTitle")}</span>
|
||||
{ticket ? <TicketStatusBadge status={ticket.status} /> : null}
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
ticket ? (
|
||||
<span className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<span className="font-mono">{ticket.ticketNo}</span>
|
||||
<span>{sourceLabel(ticket.source, t)}</span>
|
||||
<span>{t("ticket.creator", { name: metadataValue(ticket.createdByName || ticket.createdBy) })}</span>
|
||||
</span>
|
||||
) : undefined
|
||||
}
|
||||
size="xxl"
|
||||
defaultFullscreen
|
||||
bodyScrollable={false}
|
||||
bodyClassName="flex w-full"
|
||||
>
|
||||
{loading && !ticket ? (
|
||||
<div className="flex h-130 items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<RefreshCcwIcon className="size-4 animate-spin" />
|
||||
{t("ticket.loading")}
|
||||
</div>
|
||||
) : ticket ? (
|
||||
<div className="grid w-full h-full grid-cols-1 overflow-hidden lg:grid-cols-[minmax(0,1fr)_380px] border-t">
|
||||
<div className="min-h-0 space-y-5 overflow-y-auto border-b p-6 lg:border-r lg:border-b-0">
|
||||
<section className="space-y-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">{t("ticket.description")}</div>
|
||||
<div className="rounded-md border bg-muted/30 px-3 py-2">
|
||||
<SafeRichHTML html={ticket.description} fallback={t("ticket.noDescription")} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">{t("ticket.currentStatus")}</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={!!statusSaving}
|
||||
className={cn(
|
||||
"h-9 min-w-36 justify-between gap-2 border px-3 font-medium",
|
||||
getTicketStatusMeta(ticket.status)?.className,
|
||||
)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<span>{statusSaving ? t("ticket.updating") : getStatusLabel(ticket.status, t)}</span>
|
||||
<ChevronDownIcon className="size-4 opacity-70" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-44 min-w-44">
|
||||
{statusOptions.map((option) => {
|
||||
const selected = ticket.status === option.value
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={option.value}
|
||||
disabled={!!statusSaving || selected}
|
||||
onClick={() => void handleStatusChange(option.value)}
|
||||
className="justify-between"
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{selected ? <CheckIcon className="size-4 text-primary" /> : null}
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">{t("ticket.columnAssignee")}</div>
|
||||
<div className="flex items-center justify-between gap-2 rounded-md border px-3 py-2">
|
||||
<div className="flex min-w-0 items-center gap-2 text-sm">
|
||||
<UserRoundIcon className="size-4 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate">{ticket.currentAssigneeName || t("ticket.unassigned")}</span>
|
||||
</div>
|
||||
<Button type="button" size="sm" variant="outline" onClick={() => setAssignOpen(true)}>
|
||||
{t("ticket.assign")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">{t("ticket.tags")}</div>
|
||||
<Button type="button" size="sm" variant="outline" onClick={() => setEditOpen(true)}>
|
||||
{t("ticket.edit")}
|
||||
</Button>
|
||||
</div>
|
||||
{ticket.tags && ticket.tags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{ticket.tags.map((tag) => (
|
||||
<Badge key={tag.id} variant="outline">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">{t("ticket.emptyTags")}</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="space-y-3 rounded-md border p-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="font-medium text-muted-foreground">{t("ticket.customerInfo")}</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 shrink-0 gap-1 px-2 text-xs"
|
||||
onClick={() => {
|
||||
if (customerId > 0) {
|
||||
setCustomerEditOpen(true)
|
||||
return
|
||||
}
|
||||
setCustomerLinkOpen(true)
|
||||
}}
|
||||
>
|
||||
<PencilIcon className="size-3.5" />
|
||||
{customerId > 0 ? t("ticket.edit") : t("ticket.linkOrCreate")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<MetadataItem label={t("ticket.customer")} value={ticket.customer?.name || ticket.customerId} />
|
||||
<MetadataItem label={t("ticket.contact")} value={ticket.customer?.primaryMobile || ticket.customer?.primaryEmail} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3 rounded-md border p-3 text-sm">
|
||||
<div className="font-medium text-muted-foreground">{t("ticket.ticketInfo")}</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<MetadataItem label={t("ticket.source")} value={sourceLabel(ticket.source, t)} />
|
||||
<MetadataItem label={t("ticket.channel")} value={ticket.channel} />
|
||||
<MetadataItem label={t("ticket.conversationId")} value={ticket.conversationId || undefined} />
|
||||
<MetadataItem label={t("ticket.columnUpdated")} value={ticket.updatedAt ? formatDateTime(ticket.updatedAt) : undefined} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside className="flex min-h-0 flex-col">
|
||||
<div className="flex items-center justify-between gap-2 px-4 py-2">
|
||||
<div className="flex items-center gap-2 text-sm font-medium">
|
||||
<MessageSquareTextIcon className="size-4 text-muted-foreground" />
|
||||
{t("ticket.progress")}
|
||||
</div>
|
||||
<Button type="button" size="sm" onClick={() => setProgressOpen(true)}>
|
||||
<PlusIcon className="size-3.5" />
|
||||
{t("ticket.addProgress")}
|
||||
</Button>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-4">
|
||||
{detail.progresses && detail.progresses.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{detail.progresses.map((progress, index) => (
|
||||
<div key={progress.id} className="flex gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="mt-1 size-2 rounded-full bg-primary" />
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 w-px flex-1 bg-border",
|
||||
index === detail.progresses!.length - 1 ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pb-3">
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>{progress.authorName || t("ticket.userFallback", { id: progress.authorId })}</span>
|
||||
<span>{progress.createdAt ? formatDateTime(progress.createdAt) : "-"}</span>
|
||||
</div>
|
||||
<SafeRichHTML html={progress.content} className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
{t("ticket.noProgress")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-[360px] items-center justify-center text-sm text-muted-foreground">{t("ticket.chooseTicket")}</div>
|
||||
)}
|
||||
</ProjectDialog>
|
||||
|
||||
<TicketAssignDialog
|
||||
open={assignOpen}
|
||||
ticketId={ticket?.id ?? null}
|
||||
currentAssigneeId={ticket?.currentAssigneeId}
|
||||
onOpenChange={setAssignOpen}
|
||||
onSuccess={handleAssigned}
|
||||
/>
|
||||
<EditDialog
|
||||
open={editOpen}
|
||||
saving={editSaving}
|
||||
itemId={ticket?.id ?? null}
|
||||
onOpenChange={setEditOpen}
|
||||
onSubmit={handleUpdateTicket}
|
||||
/>
|
||||
<CustomerFormDialog
|
||||
open={customerEditOpen}
|
||||
onOpenChange={setCustomerEditOpen}
|
||||
saving={customerEditSaving}
|
||||
itemId={customerId > 0 ? customerId : null}
|
||||
onSave={handleUpdateCustomer}
|
||||
/>
|
||||
<CustomerLinkOrCreateDialog
|
||||
open={customerLinkOpen}
|
||||
onOpenChange={setCustomerLinkOpen}
|
||||
ticketId={ticket?.id ?? null}
|
||||
onSuccess={handleCustomerLinked}
|
||||
/>
|
||||
<Dialog
|
||||
open={progressOpen}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (progressSaving) {
|
||||
return
|
||||
}
|
||||
setProgressOpen(nextOpen)
|
||||
if (!nextOpen) {
|
||||
setProgressContent("")
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-2xl gap-0 p-0 sm:max-w-3xl">
|
||||
<DialogHeader className="px-6 pt-6">
|
||||
<DialogTitle>{t("ticket.addProgress")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="px-6 py-4">
|
||||
<ContentEditor
|
||||
value={{ mode: "html", raw: progressContent }}
|
||||
onChange={(next) => setProgressContent(next.raw)}
|
||||
placeholder={t("ticket.progressPlaceholder")}
|
||||
disabled={progressSaving}
|
||||
allowedModes={["html"]}
|
||||
height={260}
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter className="mx-0 mb-0 px-6 py-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={progressSaving}
|
||||
onClick={() => {
|
||||
setProgressOpen(false)
|
||||
setProgressContent("")
|
||||
}}
|
||||
>
|
||||
{t("ticket.cancel")}
|
||||
</Button>
|
||||
<Button type="button" disabled={progressSaving} onClick={() => void handleCreateProgress()}>
|
||||
<SendIcon className="size-3.5" />
|
||||
{progressSaving ? t("ticket.submitting") : t("ticket.submit")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function MetadataItem({ label, value }: { label: string; value?: string | number | null }) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm text-muted-foreground">{label}</div>
|
||||
<div className="mt-1 truncate">{metadataValue(value)}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import type { TicketStatus } from "@/lib/api/ticket"
|
||||
|
||||
const statusMap = {
|
||||
pending: { labelKey: "ticket.statusPending", className: "border-amber-200 bg-amber-50 text-amber-700" },
|
||||
in_progress: { labelKey: "ticket.statusInProgress", className: "border-blue-200 bg-blue-50 text-blue-700" },
|
||||
done: { labelKey: "ticket.statusDone", className: "border-emerald-200 bg-emerald-50 text-emerald-700" },
|
||||
} as const
|
||||
|
||||
export function ticketStatusLabel(status: string) {
|
||||
return status
|
||||
}
|
||||
|
||||
export function getTicketStatusMeta(status: string) {
|
||||
return statusMap[status as TicketStatus]
|
||||
}
|
||||
|
||||
export function TicketStatusBadge({ status }: { status: string }) {
|
||||
const t = useI18n()
|
||||
const option = getTicketStatusMeta(status)
|
||||
|
||||
return (
|
||||
<Badge variant="outline" className={option?.className ?? "border-border bg-muted text-muted-foreground"}>
|
||||
{option ? t(option.labelKey) : status}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
426
web/app/(dashboard)/dashboard/tickets/page.tsx
Normal file
426
web/app/(dashboard)/dashboard/tickets/page.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
"use client"
|
||||
|
||||
import { PlusIcon, SearchXIcon } from "lucide-react"
|
||||
import { useSearchParams } from "next/navigation"
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import {
|
||||
DashboardListPage,
|
||||
type DashboardListColumn,
|
||||
type DashboardListFilter,
|
||||
} from "@/components/dashboard/list"
|
||||
import { type ComboboxOption } from "@/components/option-combobox"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
fetchAgentProfilesAll,
|
||||
fetchTagsAll,
|
||||
type AdminAgentProfile,
|
||||
type TagTree,
|
||||
} from "@/lib/api/admin"
|
||||
import {
|
||||
createTicket,
|
||||
fetchTicketSummary,
|
||||
fetchTickets,
|
||||
type CreateTicketPayload,
|
||||
type TicketItem,
|
||||
type TicketListQuery,
|
||||
type TicketStatus,
|
||||
type TicketSummary,
|
||||
} from "@/lib/api/ticket"
|
||||
import { useI18n } from "@/i18n/provider"
|
||||
import { formatDateTime } from "@/lib/utils"
|
||||
import { EditDialog } from "./_components/edit"
|
||||
import { TicketDetailDialog } from "./_components/ticket-detail-dialog"
|
||||
import { TicketStatusBadge } from "./_components/ticket-status-badge"
|
||||
|
||||
type QuickViewKey =
|
||||
| "all"
|
||||
| "pending"
|
||||
| "in_progress"
|
||||
| "done"
|
||||
| "unassigned"
|
||||
| "mine"
|
||||
| "stale"
|
||||
|
||||
const emptySummary: TicketSummary = {
|
||||
all: 0,
|
||||
pending: 0,
|
||||
inProgress: 0,
|
||||
done: 0,
|
||||
unassigned: 0,
|
||||
mine: 0,
|
||||
stale: 0,
|
||||
}
|
||||
|
||||
type TFunction = (key: string, values?: Record<string, string | number>) => string
|
||||
|
||||
function getAssigneeAllOption(t: TFunction): ComboboxOption {
|
||||
return { value: "0", label: t("ticket.allAssignees") }
|
||||
}
|
||||
|
||||
function getStaleHourOptions(t: TFunction): ComboboxOption[] {
|
||||
return [
|
||||
{ value: "24", label: t("ticket.hours", { hours: 24 }) },
|
||||
{ value: "48", label: t("ticket.hours", { hours: 48 }) },
|
||||
{ value: "168", label: t("ticket.hours", { hours: 168 }) },
|
||||
]
|
||||
}
|
||||
|
||||
function sourceLabel(source: string, t: TFunction) {
|
||||
switch (source) {
|
||||
case "manual":
|
||||
return t("ticket.manual")
|
||||
case "conversation":
|
||||
return t("ticket.conversation")
|
||||
default:
|
||||
return source || "-"
|
||||
}
|
||||
}
|
||||
|
||||
function assigneeLabel(ticket: TicketItem, t: TFunction) {
|
||||
if (ticket.currentAssigneeName) {
|
||||
return ticket.currentAssigneeName
|
||||
}
|
||||
if (ticket.currentAssigneeId > 0) {
|
||||
return t("ticket.agentFallback", { id: ticket.currentAssigneeId })
|
||||
}
|
||||
return t("ticket.unassigned")
|
||||
}
|
||||
|
||||
function quickViewLabel(label: string, count: number) {
|
||||
return `${label} ${count}`
|
||||
}
|
||||
|
||||
export default function TicketsPage() {
|
||||
const t = useI18n()
|
||||
const searchParams = useSearchParams()
|
||||
const [summary, setSummary] = useState<TicketSummary>(emptySummary)
|
||||
const [assigneeOptions, setAssigneeOptions] = useState<ComboboxOption[]>([])
|
||||
const [tags, setTags] = useState<TagTree[]>([])
|
||||
const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
|
||||
const [detailOpen, setDetailOpen] = useState(false)
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [savingCreate, setSavingCreate] = useState(false)
|
||||
const listReloadRef = useRef<() => Promise<void>>(async () => undefined)
|
||||
|
||||
const assigneeAllOption = useMemo(() => getAssigneeAllOption(t), [t])
|
||||
const staleHourOptions = useMemo(() => getStaleHourOptions(t), [t])
|
||||
|
||||
const quickViews = useMemo(
|
||||
() =>
|
||||
[
|
||||
{
|
||||
value: "all",
|
||||
label: quickViewLabel(t("ticket.quickAll"), summary.all),
|
||||
},
|
||||
{
|
||||
value: "pending",
|
||||
label: quickViewLabel(t("ticket.quickPending"), summary.pending),
|
||||
},
|
||||
{
|
||||
value: "in_progress",
|
||||
label: quickViewLabel(
|
||||
t("ticket.quickInProgress"),
|
||||
summary.inProgress,
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "done",
|
||||
label: quickViewLabel(t("ticket.quickDone"), summary.done),
|
||||
},
|
||||
{
|
||||
value: "unassigned",
|
||||
label: quickViewLabel(
|
||||
t("ticket.quickUnassigned"),
|
||||
summary.unassigned,
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "mine",
|
||||
label: quickViewLabel(t("ticket.quickMine"), summary.mine),
|
||||
},
|
||||
{
|
||||
value: "stale",
|
||||
label: quickViewLabel(t("ticket.quickStale"), summary.stale),
|
||||
},
|
||||
] satisfies Array<{ value: QuickViewKey; label: string }>,
|
||||
[summary, t],
|
||||
)
|
||||
|
||||
const filters = useMemo<DashboardListFilter[]>(
|
||||
() => [
|
||||
{
|
||||
name: "quickView",
|
||||
label: t("ticket.quickAll"),
|
||||
type: "segment",
|
||||
defaultValue: "all",
|
||||
allValue: "all",
|
||||
options: quickViews,
|
||||
className: "flex w-full flex-wrap gap-2",
|
||||
},
|
||||
{
|
||||
name: "keyword",
|
||||
label: t("ticket.searchPlaceholder"),
|
||||
placeholder: t("ticket.searchPlaceholder"),
|
||||
defaultValue: "",
|
||||
trim: true,
|
||||
className: "w-full sm:w-72",
|
||||
},
|
||||
{
|
||||
name: "currentAssigneeId",
|
||||
label: t("ticket.allAssignees"),
|
||||
type: "select",
|
||||
defaultValue: "0",
|
||||
allValue: "0",
|
||||
valueType: "number",
|
||||
options: assigneeOptions,
|
||||
className: "w-full sm:w-44",
|
||||
},
|
||||
{
|
||||
name: "tagId",
|
||||
label: t("ticket.allTags"),
|
||||
type: "tag",
|
||||
defaultValue: "0",
|
||||
allValue: "0",
|
||||
valueType: "number",
|
||||
tags,
|
||||
searchPlaceholder: t("ticket.searchTags"),
|
||||
emptyText: t("ticket.emptyTags"),
|
||||
className: "w-full sm:w-44",
|
||||
},
|
||||
{
|
||||
name: "staleHours",
|
||||
label: t("ticket.staleThreshold"),
|
||||
type: "select",
|
||||
defaultValue: "24",
|
||||
options: staleHourOptions,
|
||||
className: "w-full sm:w-40",
|
||||
},
|
||||
],
|
||||
[assigneeOptions, quickViews, staleHourOptions, tags, t],
|
||||
)
|
||||
|
||||
const fetchList = useCallback(
|
||||
async (query: Record<string, string | number | boolean | string[] | number[] | undefined>) => {
|
||||
const quickView = String(query.quickView ?? "all") as QuickViewKey
|
||||
const staleThreshold = Number(query.staleHours ?? 24)
|
||||
const ticketQuery: TicketListQuery = {
|
||||
page: Number(query.page),
|
||||
limit: Number(query.limit),
|
||||
keyword: typeof query.keyword === "string" ? query.keyword : undefined,
|
||||
currentAssigneeId:
|
||||
typeof query.currentAssigneeId === "number"
|
||||
? query.currentAssigneeId
|
||||
: undefined,
|
||||
tagId: typeof query.tagId === "number" ? query.tagId : undefined,
|
||||
}
|
||||
|
||||
if (
|
||||
quickView === "pending" ||
|
||||
quickView === "in_progress" ||
|
||||
quickView === "done"
|
||||
) {
|
||||
ticketQuery.status = quickView as TicketStatus
|
||||
}
|
||||
if (quickView === "unassigned") {
|
||||
ticketQuery.unassigned = 1
|
||||
}
|
||||
if (quickView === "mine") {
|
||||
ticketQuery.mine = 1
|
||||
}
|
||||
if (quickView === "stale") {
|
||||
ticketQuery.staleHours = staleThreshold
|
||||
}
|
||||
|
||||
const [ticketData, summaryData] = await Promise.all([
|
||||
fetchTickets(ticketQuery),
|
||||
fetchTicketSummary({ staleHours: staleThreshold }),
|
||||
])
|
||||
setSummary(summaryData ?? emptySummary)
|
||||
return ticketData
|
||||
},
|
||||
[],
|
||||
)
|
||||
|
||||
const columns = useMemo<DashboardListColumn<TicketItem>[]>(
|
||||
() => [
|
||||
{
|
||||
key: "ticket",
|
||||
label: t("ticket.columnTicket"),
|
||||
render: (ticket) => (
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="truncate text-sm font-medium">{ticket.title}</div>
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
|
||||
<span className="font-mono">{ticket.ticketNo}</span>
|
||||
<span>
|
||||
{ticket.customer?.name ||
|
||||
(ticket.customerId
|
||||
? t("ticket.customerFallback", { id: ticket.customerId })
|
||||
: t("ticket.noCustomer"))}
|
||||
</span>
|
||||
<span>{sourceLabel(ticket.source, t)}</span>
|
||||
{ticket.channel ? <span>{ticket.channel}</span> : null}
|
||||
</div>
|
||||
{ticket.tags && ticket.tags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ticket.tags.slice(0, 3).map((tag) => (
|
||||
<Badge key={tag.id} variant="outline" className="px-1.5 py-0 text-[11px]">
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
{ticket.tags.length > 3 ? (
|
||||
<Badge variant="outline" className="px-1.5 py-0 text-[11px]">
|
||||
+{ticket.tags.length - 3}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: t("ticket.columnStatus"),
|
||||
className: "w-28",
|
||||
render: (ticket) => <TicketStatusBadge status={ticket.status} />,
|
||||
},
|
||||
{
|
||||
key: "assignee",
|
||||
label: t("ticket.columnAssignee"),
|
||||
className: "max-w-36 truncate text-sm text-muted-foreground",
|
||||
render: (ticket) => assigneeLabel(ticket, t),
|
||||
},
|
||||
{
|
||||
key: "updatedAt",
|
||||
label: t("ticket.columnUpdated"),
|
||||
className: "w-40 text-sm text-muted-foreground",
|
||||
render: (ticket) =>
|
||||
ticket.updatedAt ? formatDateTime(ticket.updatedAt) : "-",
|
||||
},
|
||||
{
|
||||
key: "actions",
|
||||
label: t("ticket.columnActions"),
|
||||
className: "w-24 text-right",
|
||||
render: (ticket) => (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedTicketId(ticket.id)
|
||||
setDetailOpen(true)
|
||||
}}
|
||||
>
|
||||
{t("ticket.detail")}
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
],
|
||||
[t],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const ticketId = Number(searchParams.get("ticketId"))
|
||||
if (ticketId > 0) {
|
||||
setSelectedTicketId(ticketId)
|
||||
setDetailOpen(true)
|
||||
}
|
||||
}, [searchParams])
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
Promise.all([fetchAgentProfilesAll(), fetchTagsAll()])
|
||||
.then(([agents, tags]) => {
|
||||
if (!active) {
|
||||
return
|
||||
}
|
||||
setAssigneeOptions([
|
||||
assigneeAllOption,
|
||||
...(Array.isArray(agents) ? agents : []).map((agent: AdminAgentProfile) => ({
|
||||
value: String(agent.userId),
|
||||
label:
|
||||
agent.displayName ||
|
||||
agent.nickname ||
|
||||
agent.username ||
|
||||
t("ticket.agentFallback", { id: agent.userId }),
|
||||
})),
|
||||
])
|
||||
setTags(Array.isArray(tags) ? tags : [])
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.loadFiltersFailed"))
|
||||
})
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [assigneeAllOption, t])
|
||||
|
||||
async function handleCreateTicket(payload: CreateTicketPayload) {
|
||||
setSavingCreate(true)
|
||||
try {
|
||||
await createTicket(payload)
|
||||
toast.success(t("ticket.created"))
|
||||
setCreateOpen(false)
|
||||
await listReloadRef.current()
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : t("ticket.createFailed"))
|
||||
} finally {
|
||||
setSavingCreate(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardListPage<TicketItem>
|
||||
filters={filters}
|
||||
fetchList={fetchList}
|
||||
columns={columns}
|
||||
getItemId={(ticket) => ticket.id}
|
||||
pageSize={50}
|
||||
renderToolbarActions={(context) => {
|
||||
listReloadRef.current = context.reload
|
||||
return (
|
||||
<>
|
||||
<Button type="button" variant="outline" onClick={context.resetFilters}>
|
||||
<SearchXIcon className="size-4" />
|
||||
{t("ticket.reset")}
|
||||
</Button>
|
||||
<Button type="button" onClick={() => setCreateOpen(true)}>
|
||||
<PlusIcon className="size-4" />
|
||||
{t("ticket.newTicket")}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
labels={{
|
||||
refresh: t("ticket.refresh"),
|
||||
query: t("ticket.query"),
|
||||
loading: t("ticket.loadingRows"),
|
||||
empty: t("ticket.emptyRows"),
|
||||
loadFailed: t("ticket.loadFailed"),
|
||||
}}
|
||||
/>
|
||||
|
||||
<EditDialog
|
||||
open={createOpen}
|
||||
saving={savingCreate}
|
||||
itemId={null}
|
||||
onOpenChange={setCreateOpen}
|
||||
onSubmit={handleCreateTicket}
|
||||
/>
|
||||
<TicketDetailDialog
|
||||
open={detailOpen}
|
||||
ticketId={selectedTicketId}
|
||||
onOpenChange={(open) => {
|
||||
setDetailOpen(open)
|
||||
if (!open) {
|
||||
setSelectedTicketId(null)
|
||||
}
|
||||
}}
|
||||
onChanged={() => listReloadRef.current()}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user