@hed-hog/ticket 0.0.285

package/hedhog/frontend/app/[id]/page.tsx.ejs

@@ -0,0 +1,360 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import {
+  TicketAiReviewModeBadge,
+  TicketPriorityBadge,
+  TicketStatusBadge,
+} from '../_components/ticket-badges';
+import { TicketContextCard } from '../_components/ticket-context-card';
+import { TicketTimeline } from '../_components/ticket-timeline';
+import {
+  getChannelAccountById,
+  getChannelById,
+  getPersonById,
+  getTicketContextByTicketId,
+  getTicketMessages,
+  ticketDrafts,
+  ticketItems,
+} from '../_lib/mock-data';
+
+export default function TicketDetailPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const params = useParams<{ id: string }>();
+  const id = Number(params.id);
+  const ticket = ticketItems.find((item) => item.id === id) ?? ticketItems[0];
+
+  const replySchema = useMemo(
+    () =>
+      z.object({
+        subject: z
+          .string()
+          .trim()
+          .min(1, t('detail.validation.replySubjectRequired')),
+        body: z
+          .string()
+          .trim()
+          .min(1, t('detail.validation.replyBodyRequired')),
+      }),
+    [t]
+  );
+
+  const internalNoteSchema = useMemo(
+    () =>
+      z.object({
+        body: z
+          .string()
+          .trim()
+          .min(1, t('detail.validation.internalNoteBodyRequired')),
+      }),
+    [t]
+  );
+
+  type ReplyForm = z.infer<typeof replySchema>;
+  type InternalNoteForm = z.infer<typeof internalNoteSchema>;
+
+  const replyForm = useForm<ReplyForm>({
+    resolver: zodResolver(replySchema),
+    defaultValues: {
+      subject: ticket ? `Re: ${ticket.subject}` : '',
+      body: '',
+    },
+  });
+
+  const internalNoteForm = useForm<InternalNoteForm>({
+    resolver: zodResolver(internalNoteSchema),
+    defaultValues: {
+      body: '',
+    },
+  });
+
+  if (!ticket) {
+    return null;
+  }
+
+  const requester = getPersonById(ticket.requesterId);
+  const owner = getPersonById(ticket.ownerId);
+  const channel = getChannelById(ticket.channelId);
+  const account = getChannelAccountById(ticket.channelAccountId);
+  const context = getTicketContextByTicketId(ticket.id);
+  const messages = getTicketMessages(ticket.id);
+  const draft = ticketDrafts.find((item) => item.ticketId === ticket.id);
+
+  const handleReplySubmit = async (values: ReplyForm) => {
+    console.log('reply payload', values);
+    toast.success(t('detail.messages.replySendSuccess'));
+    replyForm.reset({
+      subject: `Re: ${ticket.subject}`,
+      body: '',
+    });
+  };
+
+  const handleInternalNoteSubmit = async (values: InternalNoteForm) => {
+    console.log('internal note payload', values);
+    toast.success(t('detail.messages.internalNoteSaveSuccess'));
+    internalNoteForm.reset({ body: '' });
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={`${ticket.code} - ${ticket.subject}`}
+        description={t('detail.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('inbox.breadcrumb'), href: '/ticket/inbox' },
+          { label: ticket.code },
+        ]}
+        actions={[
+          { label: t('detail.takeOwnership'), onClick: () => {} },
+          { label: t('detail.assign'), onClick: () => {}, variant: 'outline' },
+          {
+            label: t('detail.changeStatus'),
+            onClick: () => {},
+            variant: 'outline',
+          },
+        ]}
+      />
+
+      <div className="flex flex-wrap items-center gap-2">
+        <TicketStatusBadge value={ticket.status} />
+        <TicketPriorityBadge value={ticket.priority} />
+        <TicketAiReviewModeBadge value={ticket.aiReviewMode} />
+        <Badge variant="outline">
+          {t('detail.ownerBadge', { name: owner?.name || '-' })}
+        </Badge>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('detail.requesterCard.title')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-1 text-sm">
+            <div className="font-semibold">{requester?.name}</div>
+            <div className="text-muted-foreground">{requester?.email}</div>
+            <div className="text-muted-foreground">
+              {t('detail.requesterCard.role', {
+                role: requester?.roleLabel || '-',
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        <TicketContextCard context={context} />
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('detail.sourceCard.title')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div>
+              <span className="text-muted-foreground">
+                {t('detail.sourceCard.channel')}{' '}
+              </span>
+              <span className="font-medium">{channel?.name}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">
+                {t('detail.sourceCard.account')}{' '}
+              </span>
+              <span className="font-medium">{account?.code}</span>
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {ticket.tags.map((tag) => (
+                <Badge key={tag} variant="outline">
+                  {t('detail.sourceCard.tag', { value: tag })}
+                </Badge>
+              ))}
+              {ticket.categories.map((category) => (
+                <Badge key={category} variant="outline">
+                  {t('detail.sourceCard.category', { value: category })}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <div className="space-y-4 lg:col-span-2">
+          <TicketTimeline messages={messages} />
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t('detail.reply.title')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Form {...replyForm}>
+                <form
+                  onSubmit={replyForm.handleSubmit(handleReplySubmit)}
+                  className="space-y-3"
+                >
+                  <FormField
+                    control={replyForm.control}
+                    name="subject"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="sr-only">subject</FormLabel>
+                        <FormControl>
+                          <Input
+                            {...field}
+                            placeholder={t('detail.reply.subjectPlaceholder')}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={replyForm.control}
+                    name="body"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="sr-only">body</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="min-h-[140px]"
+                            placeholder={t('detail.reply.bodyPlaceholder')}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <Button type="submit">{t('detail.reply.send')}</Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">
+                {t('detail.internalNote.title')}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Form {...internalNoteForm}>
+                <form
+                  onSubmit={internalNoteForm.handleSubmit(
+                    handleInternalNoteSubmit
+                  )}
+                  className="space-y-3"
+                >
+                  <FormField
+                    control={internalNoteForm.control}
+                    name="body"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="sr-only">internal note</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="min-h-[120px]"
+                            placeholder={t(
+                              'detail.internalNote.bodyPlaceholder'
+                            )}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <Button type="submit" variant="outline">
+                    {t('detail.internalNote.save')}
+                  </Button>
+                </form>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('detail.aiPanel.title')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <div className="rounded border border-fuchsia-200 bg-fuchsia-50 p-3">
+              <div className="font-semibold">
+                {t('detail.aiPanel.draftTitle')}
+              </div>
+              <div className="mt-1 text-muted-foreground">
+                {draft?.suggestion}
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Button className="w-full">{t('detail.aiPanel.approve')}</Button>
+              <Button className="w-full" variant="outline">
+                {t('detail.aiPanel.edit')}
+              </Button>
+              <Button className="w-full" variant="destructive">
+                {t('detail.aiPanel.reject')}
+              </Button>
+            </div>
+            <div className="rounded border p-3">
+              <div className="font-semibold">
+                {t('detail.aiPanel.participants')}
+              </div>
+              <ul className="mt-2 space-y-1 text-muted-foreground">
+                <li>
+                  {t('detail.aiPanel.participantRequester', {
+                    name: requester?.name || '-',
+                  })}
+                </li>
+                <li>
+                  {t('detail.aiPanel.participantAgent', {
+                    name: owner?.name || '-',
+                  })}
+                </li>
+                <li>{t('detail.aiPanel.participantCollaborator')}</li>
+              </ul>
+            </div>
+            <div className="rounded border p-3">
+              <div className="font-semibold">
+                {t('detail.aiPanel.attachments')}
+              </div>
+              <ul className="mt-2 space-y-1 text-muted-foreground">
+                <li>erro-jwt-refresh.png</li>
+                <li>trecho-token-service.ts</li>
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Page>
+  );
+}

package/hedhog/frontend/app/_components/ai-draft-editor-dialog.tsx.ejs

@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { TicketDraft } from '../_lib/types';
+
+export function AIDraftEditorDialog({
+  open,
+  onOpenChange,
+  draft,
+}: {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  draft?: TicketDraft;
+}) {
+  const t = useTranslations('ticket.TicketModule');
+  const [content, setContent] = useState('');
+
+  useEffect(() => {
+    setContent(draft?.suggestion || '');
+  }, [draft]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{t('draftDialog.title')}</DialogTitle>
+          <DialogDescription>
+            {t('draftDialog.description')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="rounded-md border bg-slate-50 p-3 text-sm">
+            <div className="font-semibold">{t('draftDialog.originalTitle')}</div>
+            <p className="mt-1 text-muted-foreground">
+              {draft?.originalSnippet}
+            </p>
+          </div>
+          <Textarea
+            value={content}
+            onChange={(event) => setContent(event.target.value)}
+            className="min-h-[220px]"
+            placeholder={t('draftDialog.placeholder')}
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('draftDialog.cancel')}
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>
+            {t('draftDialog.save')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/_components/ticket-badges.tsx.ejs

@@ -0,0 +1,65 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import {
+  TicketAiReviewMode,
+  TicketPriority,
+  TicketStatus,
+} from '../_lib/types';
+import { useTranslations } from 'next-intl';
+
+const statusVariant: Record<TicketStatus, string> = {
+  open: 'bg-blue-50 text-blue-700 border-blue-200',
+  pending: 'bg-amber-50 text-amber-700 border-amber-200',
+  waiting_customer: 'bg-violet-50 text-violet-700 border-violet-200',
+  resolved: 'bg-emerald-50 text-emerald-700 border-emerald-200',
+  closed: 'bg-slate-100 text-slate-700 border-slate-300',
+  spam: 'bg-rose-50 text-rose-700 border-rose-200',
+};
+
+const priorityVariant: Record<TicketPriority, string> = {
+  low: 'bg-slate-100 text-slate-700 border-slate-300',
+  normal: 'bg-sky-50 text-sky-700 border-sky-200',
+  high: 'bg-orange-50 text-orange-700 border-orange-200',
+  urgent: 'bg-red-50 text-red-700 border-red-200',
+};
+
+const aiReviewVariant: Record<TicketAiReviewMode, string> = {
+  disabled: 'bg-slate-100 text-slate-700 border-slate-300',
+  optional: 'bg-indigo-50 text-indigo-700 border-indigo-200',
+  required: 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200',
+};
+
+export function TicketStatusBadge({ value }: { value: TicketStatus }) {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Badge variant="outline" className={statusVariant[value]}>
+      {t(`badges.status.${value}`)}
+    </Badge>
+  );
+}
+
+export function TicketPriorityBadge({ value }: { value: TicketPriority }) {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Badge variant="outline" className={priorityVariant[value]}>
+      {t(`badges.priority.${value}`)}
+    </Badge>
+  );
+}
+
+export function TicketAiReviewModeBadge({
+  value,
+}: {
+  value: TicketAiReviewMode;
+}) {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Badge variant="outline" className={aiReviewVariant[value]}>
+      {t(`badges.aiReviewMode.${value}`)}
+    </Badge>
+  );
+}

package/hedhog/frontend/app/_components/ticket-context-card.tsx.ejs

@@ -0,0 +1,80 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+import { TicketContext } from '../_lib/types';
+
+export function TicketContextCard({ context }: { context?: TicketContext }) {
+  const t = useTranslations('ticket.TicketModule');
+
+  if (!context) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('contextCard.title')}</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground">
+          {t('contextCard.empty')}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{t('contextCard.title')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2 text-sm">
+        <div>
+          <span className="text-muted-foreground">{t('contextCard.type')} </span>
+          <span className="font-medium">{context.contextType}</span>
+        </div>
+        <div>
+          <span className="text-muted-foreground">{t('contextCard.source')} </span>
+          <span className="font-medium">{context.sourceLabel}</span>
+        </div>
+        {context.courseName && (
+          <div>
+            <span className="text-muted-foreground">{t('contextCard.course')} </span>
+            <span className="font-medium">{context.courseName}</span>
+          </div>
+        )}
+        {context.sectionName && (
+          <div>
+            <span className="text-muted-foreground">{t('contextCard.section')} </span>
+            <span className="font-medium">{context.sectionName}</span>
+          </div>
+        )}
+        {context.lessonName && (
+          <div>
+            <span className="text-muted-foreground">{t('contextCard.lesson')} </span>
+            <span className="font-medium">{context.lessonName}</span>
+          </div>
+        )}
+        {context.videoName && (
+          <div>
+            <span className="text-muted-foreground">{t('contextCard.video')} </span>
+            <span className="font-medium">{context.videoName}</span>
+          </div>
+        )}
+        {context.pageName && (
+          <div>
+            <span className="text-muted-foreground">{t('contextCard.page')} </span>
+            <span className="font-medium">{context.pageName}</span>
+          </div>
+        )}
+        {context.externalUrl && (
+          <a
+            className="text-sm text-blue-600 hover:underline"
+            href={context.externalUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('contextCard.openSource')}
+          </a>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/hedhog/frontend/app/_components/ticket-timeline.tsx.ejs

@@ -0,0 +1,59 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+import { TicketMessage } from '../_lib/types';
+
+function tone(message: TicketMessage) {
+  if (message.audience === 'internal') return 'border-amber-200 bg-amber-50';
+  if (message.direction === 'inbound') return 'border-sky-200 bg-sky-50';
+  if (message.direction === 'outbound')
+    return 'border-emerald-200 bg-emerald-50';
+  return 'border-slate-200 bg-slate-50';
+}
+
+export function TicketTimeline({ messages }: { messages: TicketMessage[] }) {
+  const t = useTranslations('ticket.TicketModule');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">{t('timeline.title')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`rounded-md border p-3 ${tone(message)}`}
+          >
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <div className="text-sm font-semibold">{message.authorName}</div>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline">
+                  {t(`timeline.directions.${message.direction}`)}
+                </Badge>
+                {message.audience === 'internal' && (
+                  <Badge variant="secondary">{t('timeline.internalNote')}</Badge>
+                )}
+                <span className="text-xs text-muted-foreground">
+                  {message.createdAt}
+                </span>
+              </div>
+            </div>
+            <p className="text-sm leading-relaxed">{message.body}</p>
+            {message.attachments && message.attachments.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-2">
+                {message.attachments.map((attachment) => (
+                  <Badge key={attachment.name} variant="outline">
+                    {attachment.kind}: {attachment.name}
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}