@hed-hog/ticket 0.0.285

package/hedhog/frontend/app/inbox/page.tsx.ejs

@@ -0,0 +1,500 @@
+'use client';
+
+import {
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  StatsCards,
+} 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import Link from 'next/link';
+import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import {
+  TicketAiReviewModeBadge,
+  TicketPriorityBadge,
+  TicketStatusBadge,
+} from '../_components/ticket-badges';
+import {
+  dashboardSummary,
+  getChannelAccountById,
+  getChannelById,
+  getPersonById,
+  getTicketContextByTicketId,
+  ticketChannels,
+  ticketItems,
+  ticketPeople,
+} from '../_lib/mock-data';
+
+export default function TicketInboxPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const [search, setSearch] = useState('');
+  const [status, setStatus] = useState('all');
+  const [priority, setPriority] = useState('all');
+  const [channel, setChannel] = useState('all');
+  const [owner, setOwner] = useState('all');
+  const [requester, setRequester] = useState('all');
+  const [course, setCourse] = useState('all');
+  const [section, setSection] = useState('all');
+  const [lesson, setLesson] = useState('all');
+  const [video, setVideo] = useState('all');
+  const [aiStatus, setAiStatus] = useState('all');
+  const [dateStart, setDateStart] = useState('');
+  const [dateEnd, setDateEnd] = useState('');
+  const [tags, setTags] = useState('all');
+  const [categories, setCategories] = useState('all');
+  const [quick, setQuick] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  const filtered = useMemo(() => {
+    return ticketItems.filter((item) => {
+      const text = `${item.code} ${item.subject}`.toLowerCase();
+      const context = getTicketContextByTicketId(item.id);
+
+      const aiStatusValue =
+        item.aiReviewMode === 'required'
+          ? 'pending_review'
+          : item.aiReviewMode === 'optional'
+            ? 'approved'
+            : 'all';
+
+      const itemDate = item.lastActivity.slice(0, 10);
+      const dateStartMatch = !dateStart || itemDate >= dateStart;
+      const dateEndMatch = !dateEnd || itemDate <= dateEnd;
+
+      const quickMatch =
+        quick === 'all' ||
+        (quick === 'my' && item.ownerId === 101) ||
+        (quick === 'urgent' && item.priority === 'urgent') ||
+        (quick === 'open' && item.status === 'open') ||
+        (quick === 'waiting_customer' && item.status === 'waiting_customer') ||
+        (quick === 'resolved' && item.status === 'resolved');
+
+      return (
+        text.includes(search.toLowerCase()) &&
+        (status === 'all' || item.status === status) &&
+        (priority === 'all' || item.priority === priority) &&
+        (channel === 'all' || String(item.channelId) === channel) &&
+        (owner === 'all' || String(item.ownerId) === owner) &&
+        (requester === 'all' || String(item.requesterId) === requester) &&
+        (course === 'all' || context?.courseName?.toLowerCase() === course) &&
+        (section === 'all' ||
+          context?.sectionName?.toLowerCase() === section) &&
+        (lesson === 'all' || context?.lessonName?.toLowerCase() === lesson) &&
+        (video === 'all' || context?.videoName?.toLowerCase() === video) &&
+        (aiStatus === 'all' || aiStatusValue === aiStatus) &&
+        (tags === 'all' || item.tags.includes(tags)) &&
+        (categories === 'all' || item.categories.includes(categories)) &&
+        dateStartMatch &&
+        dateEndMatch &&
+        quickMatch
+      );
+    });
+  }, [
+    search,
+    status,
+    priority,
+    channel,
+    owner,
+    requester,
+    course,
+    section,
+    lesson,
+    video,
+    aiStatus,
+    tags,
+    categories,
+    dateStart,
+    dateEnd,
+    quick,
+  ]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const safePage = Math.min(page, totalPages);
+  const paged = filtered.slice((safePage - 1) * pageSize, safePage * pageSize);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('inbox.title')}
+        description={t('inbox.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('inbox.breadcrumb') },
+        ]}
+        actions={[
+          {
+            label: t('inbox.newTicket'),
+            onClick: () => setSearch(''),
+          },
+        ]}
+      />
+
+      <StatsCards
+        stats={[
+          {
+            title: t('inbox.stats.open'),
+            value: dashboardSummary.totalOpen,
+            icon: <span>O</span>,
+          },
+          {
+            title: t('inbox.stats.pending'),
+            value: dashboardSummary.pending,
+            icon: <span>P</span>,
+          },
+          {
+            title: t('inbox.stats.waitingCustomer'),
+            value: dashboardSummary.waitingCustomer,
+            icon: <span>W</span>,
+          },
+          {
+            title: t('inbox.stats.urgent'),
+            value: dashboardSummary.urgent,
+            icon: <span>U</span>,
+          },
+        ]}
+      />
+
+      <div className="flex flex-wrap gap-2">
+        {[
+          { key: 'all', label: t('inbox.quick.all') },
+          { key: 'my', label: t('inbox.quick.my') },
+          { key: 'open', label: t('inbox.quick.open') },
+          { key: 'waiting_customer', label: t('inbox.quick.waiting_customer') },
+          { key: 'resolved', label: t('inbox.quick.resolved') },
+          { key: 'urgent', label: t('inbox.quick.urgent') },
+        ].map((tab) => (
+          <Button
+            key={tab.key}
+            variant={quick === tab.key ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => {
+              setQuick(tab.key);
+              setPage(1);
+            }}
+          >
+            {tab.label}
+          </Button>
+        ))}
+      </div>
+
+      <SearchBar
+        searchQuery={search}
+        onSearchChange={setSearch}
+        onSearch={() => setPage(1)}
+        placeholder={t('inbox.searchPlaceholder')}
+        controls={[
+          {
+            id: 'status',
+            type: 'select',
+            value: status,
+            onChange: setStatus,
+            placeholder: t('inbox.filters.status'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allStatus') },
+              { value: 'open', label: t('badges.status.open') },
+              { value: 'pending', label: t('badges.status.pending') },
+              {
+                value: 'waiting_customer',
+                label: t('badges.status.waiting_customer'),
+              },
+              { value: 'resolved', label: t('badges.status.resolved') },
+            ],
+          },
+          {
+            id: 'priority',
+            type: 'select',
+            value: priority,
+            onChange: setPriority,
+            placeholder: t('inbox.filters.priority'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allPriority') },
+              { value: 'low', label: t('badges.priority.low') },
+              { value: 'normal', label: t('badges.priority.normal') },
+              { value: 'high', label: t('badges.priority.high') },
+              { value: 'urgent', label: t('badges.priority.urgent') },
+            ],
+          },
+          {
+            id: 'channel',
+            type: 'select',
+            value: channel,
+            onChange: setChannel,
+            placeholder: t('inbox.filters.channel'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allChannels') },
+              ...ticketChannels.map((item) => ({
+                value: String(item.id),
+                label: item.name,
+              })),
+            ],
+          },
+          {
+            id: 'owner',
+            type: 'select',
+            value: owner,
+            onChange: (value) => {
+              setOwner(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.owner'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allOwners') },
+              ...ticketPeople
+                .filter((item) => item.roleLabel !== 'Requester')
+                .map((item) => ({ value: String(item.id), label: item.name })),
+            ],
+          },
+          {
+            id: 'requester',
+            type: 'select',
+            value: requester,
+            onChange: (value) => {
+              setRequester(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.requester'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allRequesters') },
+              ...ticketPeople
+                .filter((item) => item.roleLabel === 'Requester')
+                .map((item) => ({ value: String(item.id), label: item.name })),
+            ],
+          },
+          {
+            id: 'course',
+            type: 'select',
+            value: course,
+            onChange: (value) => {
+              setCourse(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.course'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allCourses') },
+              { value: 'nestjs', label: 'NestJS' },
+              { value: 'sql completo', label: 'SQL Completo' },
+              { value: 'php', label: 'PHP' },
+            ],
+          },
+          {
+            id: 'section',
+            type: 'select',
+            value: section,
+            onChange: (value) => {
+              setSection(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.section'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allSections') },
+              { value: 'auth', label: 'Autenticacao' },
+              { value: 'advanced-sql', label: 'Consultas Avancadas' },
+            ],
+          },
+          {
+            id: 'lesson',
+            type: 'select',
+            value: lesson,
+            onChange: (value) => {
+              setLesson(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.lesson'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allLessons') },
+              {
+                value: 'jwt com refresh token',
+                label: 'JWT com Refresh Token',
+              },
+              {
+                value: 'inner join e left join',
+                label: 'INNER JOIN e LEFT JOIN',
+              },
+            ],
+          },
+          {
+            id: 'video',
+            type: 'select',
+            value: video,
+            onChange: (value) => {
+              setVideo(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.video'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allVideos') },
+              {
+                value: 'curso de php - aula 10',
+                label: 'Curso de PHP - Aula 10',
+              },
+            ],
+          },
+          {
+            id: 'ai-status',
+            type: 'select',
+            value: aiStatus,
+            onChange: (value) => {
+              setAiStatus(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.aiStatus'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allAiStatus') },
+              { value: 'pending_review', label: t('inbox.filters.pendingReview') },
+              { value: 'approved', label: t('inbox.filters.approved') },
+            ],
+          },
+          {
+            id: 'date-start',
+            type: 'date',
+            value: dateStart,
+            onChange: (value) => {
+              setDateStart(value);
+              setPage(1);
+            },
+          },
+          {
+            id: 'date-end',
+            type: 'date',
+            value: dateEnd,
+            onChange: (value) => {
+              setDateEnd(value);
+              setPage(1);
+            },
+          },
+          {
+            id: 'tags',
+            type: 'select',
+            value: tags,
+            onChange: (value) => {
+              setTags(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.tags'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allTags') },
+              { value: 'nestjs', label: 'nestjs' },
+              { value: 'sql', label: 'sql' },
+              { value: 'financeiro', label: 'financeiro' },
+            ],
+          },
+          {
+            id: 'categories',
+            type: 'select',
+            value: categories,
+            onChange: (value) => {
+              setCategories(value);
+              setPage(1);
+            },
+            placeholder: t('inbox.filters.categories'),
+            options: [
+              { value: 'all', label: t('inbox.filters.allCategories') },
+              { value: 'duvida_tecnica', label: 'duvida_tecnica' },
+              { value: 'certificacao', label: 'certificacao' },
+              { value: 'financeiro', label: 'financeiro' },
+            ],
+          },
+        ]}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('inbox.table.title')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('common.code')}</TableHead>
+                <TableHead>{t('inbox.table.subject')}</TableHead>
+                <TableHead>{t('common.requester')}</TableHead>
+                <TableHead>{t('common.channel')}</TableHead>
+                <TableHead>{t('inbox.table.channelAccount')}</TableHead>
+                <TableHead>{t('common.context')}</TableHead>
+                <TableHead>{t('common.owner')}</TableHead>
+                <TableHead>{t('common.priority')}</TableHead>
+                <TableHead>{t('common.status')}</TableHead>
+                <TableHead>{t('inbox.table.lastActivity')}</TableHead>
+                <TableHead>{t('inbox.table.aiReview')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paged.map((item) => {
+                const requester = getPersonById(item.requesterId);
+                const owner = getPersonById(item.ownerId);
+                const channelItem = getChannelById(item.channelId);
+                const account = getChannelAccountById(item.channelAccountId);
+                const context = getTicketContextByTicketId(item.id);
+
+                return (
+                  <TableRow key={item.id}>
+                    <TableCell>
+                      <Link
+                        className="text-blue-600 hover:underline"
+                        href={`/ticket/${item.id}`}
+                      >
+                        {item.code}
+                      </Link>
+                    </TableCell>
+                    <TableCell className="max-w-[280px]">
+                      <div className="font-medium">{item.subject}</div>
+                      <div className="text-xs text-muted-foreground">
+                        {item.tags.map((tag) => (
+                          <Badge key={tag} variant="outline" className="mr-1">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>{requester?.name}</TableCell>
+                    <TableCell>{channelItem?.name}</TableCell>
+                    <TableCell>{account?.code}</TableCell>
+                    <TableCell>
+                      {context?.courseName ||
+                        context?.videoName ||
+                        context?.pageName ||
+                        '-'}
+                    </TableCell>
+                    <TableCell>{owner?.name}</TableCell>
+                    <TableCell>
+                      <TicketPriorityBadge value={item.priority} />
+                    </TableCell>
+                    <TableCell>
+                      <TicketStatusBadge value={item.status} />
+                    </TableCell>
+                    <TableCell>{item.lastActivity}</TableCell>
+                    <TableCell>
+                      <TicketAiReviewModeBadge value={item.aiReviewMode} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+
+          <PaginationFooter
+            currentPage={safePage}
+            pageSize={pageSize}
+            totalItems={filtered.length}
+            onPageChange={setPage}
+            onPageSizeChange={setPageSize}
+          />
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

package/hedhog/frontend/app/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function TicketIndexPage() {
+  redirect('/ticket/dashboard');
+}

package/hedhog/frontend/app/reports/page.tsx.ejs

@@ -0,0 +1,151 @@
+'use client';
+
+import { Page, PageHeader, StatsCards } from '@/components/entity-list';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useTranslations } from 'next-intl';
+import {
+  dashboardSummary,
+  ticketsByChannel,
+  ticketsByCourse,
+} from '../_lib/mock-data';
+
+const byOperator = [
+  { label: 'Camila Moraes', value: 51, color: 'bg-sky-500' },
+  { label: 'Bruno Araujo', value: 43, color: 'bg-emerald-500' },
+  { label: 'Rodrigo Pires', value: 31, color: 'bg-orange-500' },
+];
+
+export default function TicketReportsPage() {
+  const t = useTranslations('ticket.TicketModule');
+  const maxOperator = Math.max(...byOperator.map((item) => item.value));
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('reports.title')}
+        description={t('reports.description')}
+        breadcrumbs={[
+          { label: t('common.home'), href: '/' },
+          { label: t('common.tickets'), href: '/ticket' },
+          { label: t('reports.breadcrumb') },
+        ]}
+      />
+
+      <StatsCards
+        stats={[
+          {
+            title: t('reports.stats.firstResponse'),
+            value: '11m',
+            icon: <span>FR</span>,
+          },
+          {
+            title: t('reports.stats.resolution'),
+            value: '6h 23m',
+            icon: <span>RT</span>,
+          },
+          {
+            title: t('reports.stats.approvalRate'),
+            value: '78%',
+            icon: <span>AI</span>,
+          },
+          {
+            title: t('reports.stats.usageByChannel'),
+            value: '64%',
+            icon: <span>UC</span>,
+          },
+        ]}
+      />
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t('reports.cards.byChannel')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {ticketsByChannel.map((item) => (
+              <div key={item.label}>
+                <div className="mb-1 flex items-center justify-between text-sm">
+                  <span>{item.label}</span>
+                  <span className="font-semibold">{item.value}</span>
+                </div>
+                <div className="h-2 rounded bg-slate-100">
+                  <div
+                    className={`h-2 rounded ${item.color}`}
+                    style={{ width: `${item.value}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t('reports.cards.byCourse')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {ticketsByCourse.map((item) => (
+              <div
+                key={item.label}
+                className="flex items-center justify-between rounded border p-2 text-sm"
+              >
+                <span>{item.label}</span>
+                <span className="font-semibold">{item.value}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t('reports.cards.byLesson')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div className="rounded border p-2">JWT com Refresh Token: 22</div>
+            <div className="rounded border p-2">INNER JOIN e LEFT JOIN: 17</div>
+            <div className="rounded border p-2">NestJS Guards e Roles: 14</div>
+            <div className="rounded border p-2">Curso de PHP - Aula 10: 9</div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">{t('reports.cards.byOperator')}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {byOperator.map((item) => (
+              <div key={item.label}>
+                <div className="mb-1 flex items-center justify-between text-sm">
+                  <span>{item.label}</span>
+                  <span className="font-semibold">{item.value}</span>
+                </div>
+                <div className="h-2 rounded bg-slate-100">
+                  <div
+                    className={`h-2 rounded ${item.color}`}
+                    style={{
+                      width: `${Math.round((item.value / maxOperator) * 100)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('reports.cards.summary')}</CardTitle>
+        </CardHeader>
+        <CardContent className="grid gap-2 text-sm md:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded border p-3">{t('reports.summary.open', { value: dashboardSummary.totalOpen })}</div>
+          <div className="rounded border p-3">{t('reports.summary.pending', { value: dashboardSummary.pending })}</div>
+          <div className="rounded border p-3">{t('reports.summary.waiting', { value: dashboardSummary.waitingCustomer })}</div>
+          <div className="rounded border p-3">{t('reports.summary.resolved', { value: dashboardSummary.resolvedToday })}</div>
+          <div className="rounded border p-3">{t('reports.summary.urgent', { value: dashboardSummary.urgent })}</div>
+          <div className="rounded border p-3">{t('reports.summary.aiPending', { value: dashboardSummary.aiPendingReview })}</div>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}