116 lines
3.8 KiB
TypeScript
116 lines
3.8 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
IconButton,
|
||
Typography,
|
||
Chip,
|
||
Divider,
|
||
} from "@mui/material";
|
||
import CloseIcon from "@mui/icons-material/Close";
|
||
import { ticketPriorities, ticketStatuses } from "@/core/constant";
|
||
import { TicketInterface } from "@/core/types";
|
||
|
||
export default function TicketDetailModal({
|
||
open,
|
||
onClose,
|
||
ticket,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
ticket: TicketInterface | null;
|
||
}) {
|
||
if (!ticket) return null;
|
||
const status = ticketStatuses.find((p) => p.id === ticket?.status);
|
||
const priority = ticketPriorities.find((p) => p.id === ticket?.priority);
|
||
return (
|
||
<Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
|
||
<DialogTitle className="flex justify-between items-center text-slate-800">
|
||
<span>جزئیات تیکت #{ticket.id.slice(-6)}</span>
|
||
<IconButton onClick={onClose} size="small">
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</DialogTitle>
|
||
|
||
<DialogContent dividers>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
واحد / بخش
|
||
</Typography>
|
||
<Typography className="font-semibold text-slate-900">
|
||
{ticket.department?.displayName}
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
كاربر
|
||
</Typography>
|
||
<Typography className="font-semibold text-slate-900">
|
||
{ticket.createdBy}
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
ارجاع به
|
||
</Typography>
|
||
<Typography className="font-semibold text-slate-900">
|
||
{ticket.assignee.fullname}
|
||
</Typography>
|
||
</div>
|
||
<div className="flex items-center justify-start gap-4">
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
وضعیت
|
||
</Typography>
|
||
<Chip
|
||
label={status?.displayName}
|
||
className={`mt-1 bg-blue-100 text-blue-700 font-medium`}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
اولویت
|
||
</Typography>
|
||
<Chip
|
||
label={priority?.displayName}
|
||
className={`mt-1 bg-red-100 text-red-700 font-medium`}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
محل وقوع مشكل
|
||
</Typography>
|
||
<Chip
|
||
label={ticket?.location}
|
||
className={`mt-1 bg-blue-100 text-blue-700 font-medium`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<Divider />
|
||
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
توضیحات
|
||
</Typography>
|
||
<Typography className="text-slate-700 mt-2 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
|
||
{ticket.description || "توضیحی ثبت نشده است."}
|
||
</Typography>
|
||
</div>
|
||
<div>
|
||
<Typography variant="subtitle2" className="text-slate-500">
|
||
اقدام كارشناس
|
||
</Typography>
|
||
<Typography className="text-slate-700 mt-2 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
|
||
{ticket.helpdeskAction || "توضیحی ثبت نشده است."}
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|