feat: link tickets in comments and align admin sidebars
This commit is contained in:
Esdras Renan
parent
c35eb673d3
commit
b0f57009ac
15 changed files with 1606 additions and 424 deletions
|
|
@ -53,6 +53,100 @@ function plainTextLength(html: string): number {
|
|||
}
|
||||
}
|
||||
|
||||
function escapeHtml(input: string): string {
|
||||
return input
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
export function buildAssigneeChangeComment(
|
||||
reason: string,
|
||||
context: { previousName: string; nextName: string },
|
||||
): string {
|
||||
const normalized = reason.replace(/\r\n/g, "\n").trim();
|
||||
const lines = normalized
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0);
|
||||
const previous = escapeHtml(context.previousName || "Não atribuído");
|
||||
const next = escapeHtml(context.nextName || "Não atribuído");
|
||||
const reasonHtml = lines.length
|
||||
? lines.map((line) => `<p>${escapeHtml(line)}</p>`).join("")
|
||||
: `<p>—</p>`;
|
||||
return `<p><strong>Responsável atualizado:</strong> ${previous} → ${next}</p><p><strong>Motivo da troca:</strong></p>${reasonHtml}`;
|
||||
}
|
||||
|
||||
function truncateSubject(subject: string) {
|
||||
if (subject.length <= 60) return subject
|
||||
return `${subject.slice(0, 57)}…`
|
||||
}
|
||||
|
||||
function buildTicketMentionAnchor(ticket: Doc<"tickets">): string {
|
||||
const reference = ticket.reference
|
||||
const subject = escapeHtml(ticket.subject ?? "")
|
||||
const truncated = truncateSubject(subject)
|
||||
const status = (ticket.status ?? "PENDING").toString().toUpperCase()
|
||||
const priority = (ticket.priority ?? "MEDIUM").toString().toUpperCase()
|
||||
return `<a data-ticket-mention="true" data-ticket-id="${String(ticket._id)}" data-ticket-reference="${reference}" data-ticket-status="${status}" data-ticket-priority="${priority}" data-ticket-subject="${subject}" href="/tickets/${String(ticket._id)}" class="ticket-mention" title="Chamado #${reference}${subject ? ` • ${subject}` : ""}"><span class="ticket-mention-dot"></span><span class="ticket-mention-ref">#${reference}</span><span class="ticket-mention-sep">•</span><span class="ticket-mention-subject">${truncated}</span></a>`
|
||||
}
|
||||
|
||||
function canMentionTicket(viewerRole: string, viewerId: Id<"users">, ticket: Doc<"tickets">) {
|
||||
if (viewerRole === "ADMIN" || viewerRole === "AGENT") return true
|
||||
if (viewerRole === "COLLABORATOR") {
|
||||
return String(ticket.requesterId) === String(viewerId)
|
||||
}
|
||||
if (viewerRole === "MANAGER") {
|
||||
// Gestores compartilham contexto interno; permitem apenas tickets da mesma empresa do solicitante
|
||||
return String(ticket.requesterId) === String(viewerId)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
async function normalizeTicketMentions(
|
||||
ctx: MutationCtx,
|
||||
html: string,
|
||||
viewer: { user: Doc<"users">; role: string },
|
||||
tenantId: string,
|
||||
): Promise<string> {
|
||||
if (!html || html.indexOf("data-ticket-mention") === -1) {
|
||||
return html
|
||||
}
|
||||
|
||||
const mentionPattern = /<a\b[^>]*data-ticket-mention="true"[^>]*>[\s\S]*?<\/a>/gi
|
||||
const matches = Array.from(html.matchAll(mentionPattern))
|
||||
if (!matches.length) {
|
||||
return html
|
||||
}
|
||||
|
||||
let output = html
|
||||
|
||||
for (const match of matches) {
|
||||
const full = match[0]
|
||||
const idMatch = /data-ticket-id="([^"]+)"/i.exec(full)
|
||||
const ticketIdRaw = idMatch?.[1]
|
||||
let replacement = ""
|
||||
|
||||
if (ticketIdRaw) {
|
||||
const ticket = await ctx.db.get(ticketIdRaw as Id<"tickets">)
|
||||
if (ticket && ticket.tenantId === tenantId && canMentionTicket(viewer.role, viewer.user._id, ticket)) {
|
||||
replacement = buildTicketMentionAnchor(ticket)
|
||||
} else {
|
||||
const inner = match[0].replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim()
|
||||
replacement = escapeHtml(inner || `#${ticketIdRaw}`)
|
||||
}
|
||||
} else {
|
||||
replacement = escapeHtml(full.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim())
|
||||
}
|
||||
|
||||
output = output.replace(full, replacement)
|
||||
}
|
||||
|
||||
return output
|
||||
}
|
||||
|
||||
function normalizeStatus(status: string | null | undefined): TicketStatusNormalized {
|
||||
if (!status) return "PENDING";
|
||||
const normalized = LEGACY_STATUS_MAP[status.toUpperCase()];
|
||||
|
|
@ -1170,11 +1264,6 @@ export const addComment = mutation({
|
|||
}
|
||||
}
|
||||
|
||||
const bodyPlainLen = plainTextLength(args.body)
|
||||
if (bodyPlainLen > MAX_COMMENT_CHARS) {
|
||||
throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
|
||||
}
|
||||
|
||||
const authorSnapshot: CommentAuthorSnapshot = {
|
||||
name: author.name,
|
||||
email: author.email,
|
||||
|
|
@ -1182,12 +1271,18 @@ export const addComment = mutation({
|
|||
teams: author.teams ?? undefined,
|
||||
};
|
||||
|
||||
const normalizedBody = await normalizeTicketMentions(ctx, args.body, { user: author, role: normalizedRole }, ticketDoc.tenantId)
|
||||
const bodyPlainLen = plainTextLength(normalizedBody)
|
||||
if (bodyPlainLen > MAX_COMMENT_CHARS) {
|
||||
throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const id = await ctx.db.insert("ticketComments", {
|
||||
ticketId: args.ticketId,
|
||||
authorId: args.authorId,
|
||||
visibility: requestedVisibility,
|
||||
body: args.body,
|
||||
body: normalizedBody,
|
||||
authorSnapshot,
|
||||
attachments,
|
||||
createdAt: now,
|
||||
|
|
@ -1240,14 +1335,15 @@ export const updateComment = mutation({
|
|||
await requireTicketStaff(ctx, actorId, ticketDoc)
|
||||
}
|
||||
|
||||
const bodyPlainLen = plainTextLength(body)
|
||||
const normalizedBody = await normalizeTicketMentions(ctx, body, { user: actor, role: normalizedRole }, ticketDoc.tenantId)
|
||||
const bodyPlainLen = plainTextLength(normalizedBody)
|
||||
if (bodyPlainLen > MAX_COMMENT_CHARS) {
|
||||
throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
await ctx.db.patch(commentId, {
|
||||
body,
|
||||
body: normalizedBody,
|
||||
updatedAt: now,
|
||||
});
|
||||
|
||||
|
|
@ -1356,14 +1452,20 @@ export const updateStatus = mutation({
|
|||
});
|
||||
|
||||
export const changeAssignee = mutation({
|
||||
args: { ticketId: v.id("tickets"), assigneeId: v.id("users"), actorId: v.id("users") },
|
||||
handler: async (ctx, { ticketId, assigneeId, actorId }) => {
|
||||
args: {
|
||||
ticketId: v.id("tickets"),
|
||||
assigneeId: v.id("users"),
|
||||
actorId: v.id("users"),
|
||||
reason: v.string(),
|
||||
},
|
||||
handler: async (ctx, { ticketId, assigneeId, actorId, reason }) => {
|
||||
const ticket = await ctx.db.get(ticketId)
|
||||
if (!ticket) {
|
||||
throw new ConvexError("Ticket não encontrado")
|
||||
}
|
||||
const ticketDoc = ticket as Doc<"tickets">
|
||||
const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
|
||||
const viewerUser = viewer.user
|
||||
const isAdmin = viewer.role === "ADMIN"
|
||||
const assignee = (await ctx.db.get(assigneeId)) as Doc<"users"> | null
|
||||
if (!assignee || assignee.tenantId !== ticketDoc.tenantId) {
|
||||
|
|
@ -1381,6 +1483,26 @@ export const changeAssignee = mutation({
|
|||
throw new ConvexError("Somente o responsável atual pode reatribuir este chamado")
|
||||
}
|
||||
|
||||
const normalizedReason = reason.replace(/\r\n/g, "\n").trim()
|
||||
if (normalizedReason.length < 5) {
|
||||
throw new ConvexError("Informe um motivo para registrar a troca de responsável")
|
||||
}
|
||||
if (normalizedReason.length > 1000) {
|
||||
throw new ConvexError("Motivo muito longo (máx. 1000 caracteres)")
|
||||
}
|
||||
const previousAssigneeName =
|
||||
((ticketDoc.assigneeSnapshot as { name?: string } | null)?.name as string | undefined) ??
|
||||
"Não atribuído"
|
||||
const nextAssigneeName = assignee.name ?? assignee.email ?? "Responsável"
|
||||
const commentBody = buildAssigneeChangeComment(normalizedReason, {
|
||||
previousName: previousAssigneeName,
|
||||
nextName: nextAssigneeName,
|
||||
})
|
||||
const commentPlainLength = plainTextLength(commentBody)
|
||||
if (commentPlainLength > MAX_COMMENT_CHARS) {
|
||||
throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const assigneeSnapshot = {
|
||||
name: assignee.name,
|
||||
|
|
@ -1392,9 +1514,39 @@ export const changeAssignee = mutation({
|
|||
await ctx.db.insert("ticketEvents", {
|
||||
ticketId,
|
||||
type: "ASSIGNEE_CHANGED",
|
||||
payload: { assigneeId, assigneeName: assignee.name, actorId },
|
||||
payload: {
|
||||
assigneeId,
|
||||
assigneeName: assignee.name,
|
||||
actorId,
|
||||
previousAssigneeId: currentAssigneeId,
|
||||
previousAssigneeName,
|
||||
reason: normalizedReason,
|
||||
},
|
||||
createdAt: now,
|
||||
});
|
||||
|
||||
const authorSnapshot: CommentAuthorSnapshot = {
|
||||
name: viewerUser.name,
|
||||
email: viewerUser.email,
|
||||
avatarUrl: viewerUser.avatarUrl ?? undefined,
|
||||
teams: viewerUser.teams ?? undefined,
|
||||
}
|
||||
await ctx.db.insert("ticketComments", {
|
||||
ticketId,
|
||||
authorId: actorId,
|
||||
visibility: "INTERNAL",
|
||||
body: commentBody,
|
||||
authorSnapshot,
|
||||
attachments: [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
})
|
||||
await ctx.db.insert("ticketEvents", {
|
||||
ticketId,
|
||||
type: "COMMENT_ADDED",
|
||||
payload: { authorId: actorId, authorName: viewerUser.name, authorAvatar: viewerUser.avatarUrl },
|
||||
createdAt: now,
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
53
docs/propostas/melhoria-plataforma.md
Normal file
53
docs/propostas/melhoria-plataforma.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
# Propostas de Evolução da Plataforma de Chamados
|
||||
|
||||
## 1. Melhorias de Curto Prazo (baixo esforço)
|
||||
|
||||
- **Filtro unificado em todas as listas**
|
||||
Criar um componente padrão com busca, chips de filtros ativos, botão de limpar e layout responsivo. Isso remove duplicidade nas páginas de Tickets, Admin ▸ Usuários, Empresas e melhora coerência visual.
|
||||
|
||||
- **Menções internas (@ticket e @usuário)**
|
||||
Expandir o autocomplete recém-adicionado para permitir citar usuários internos relevantes (solicitantes ou responsáveis frequentes). Facilita handoffs e histórico contextual.
|
||||
|
||||
- **Barra de ações em massa consistente**
|
||||
Padronizar cabeçalhos de tabelas (seleção em massa, contador, botões como “Excluir”, “Exportar”) com feedback visual claro (toasts + badges). Aplica-se a Usuários, Convites, Empresas etc.
|
||||
|
||||
- **Cards acionáveis no Dashboard**
|
||||
Introduzir métricas com links para listas pré-filtradas (ex.: “6 tickets aguardando resposta”, “3 chamados com SLA a vencer hoje”) para navegação mais rápida.
|
||||
|
||||
- **Templates de filtro salvos**
|
||||
Permitir que agentes salvem combinações frequentes (ex.: “Meus tickets urgentes”) e exibí-las como botões rápidos acima da tabela.
|
||||
|
||||
- **Uso do novo recurso de menção para relacionamentos**
|
||||
Mostrar, no cabeçalho do ticket, os chamados relacionados via menção com contagem e navegação rápida.
|
||||
|
||||
- **Portal do cliente com resumo inteligente**
|
||||
Para solicitantes, exibir timeline simplificada e botão “Abrir chamado relacionado” reutilizando o autocomplete, mas limitado aos chamados próprios.
|
||||
|
||||
## 2. Projetos de Médio Prazo
|
||||
|
||||
- **Repaginação dos filtros avançados**
|
||||
Adotar um layout split (filtros à esquerda, resultados à direita), com árvore de categorias, sliders de data e componentes consistentes. Incluir colapsáveis para telas pequenas.
|
||||
|
||||
- **Automação simples no painel Admin**
|
||||
Novo módulo “Automação” para regras básicas (ex.: “Se SLA crítico + sem responsável → notificar gestor e mover para fila X”). Iniciar com condições pré-definidas para reduzir esforço manual.
|
||||
|
||||
- **Painel de chamados linkados**
|
||||
No detalhe do ticket, exibir seção “Chamados relacionados” com preview, status e atalhos, alimentada automaticamente pelas menções internas.
|
||||
|
||||
## 3. Iniciativas de Maior Impacto
|
||||
|
||||
- **Modo de trabalho focado para agentes**
|
||||
Modo “foco” com navegação reduzida, atalhos (“Próximo ticket da minha fila”), indicadores de tempo e layout em painel único para reduzir alternância de contexto.
|
||||
|
||||
- **Integração com calendários externos**
|
||||
Para tickets com datas de acompanhamento ou SLAs agendados, permitir agendar eventos no Google/Microsoft Calendar diretamente da plataforma.
|
||||
|
||||
- **Construtor de relatórios personalizados**
|
||||
Ferramenta drag-and-drop que reutiliza métricas já disponíveis, permitindo salvar e compartilhar dashboards internos (ex.: equipe, gestor).
|
||||
|
||||
## Observações Gerais
|
||||
|
||||
- As propostas priorizam reutilizar componentes já existentes (RichTextEditor, API de menções) e alinhar elementos de UI (filtros, tabelas, sidebars).
|
||||
- As iniciativas estão ordenadas do mais simples ao mais complexo, facilitando entregas incrementais.
|
||||
- Os itens de médio e longo prazo podem ser fatiados em MVPs para garantir feedback rápido dos usuários internos.
|
||||
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
const nextConfig = {}
|
||||
const nextConfig = {
|
||||
experimental: {
|
||||
turbopackFileSystemCacheForDev: true,
|
||||
},
|
||||
}
|
||||
|
||||
export default nextConfig
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
"@tabler/icons-react": "^3.35.0",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@tiptap/extension-link": "^3.6.5",
|
||||
"@tiptap/extension-mention": "^3.6.5",
|
||||
"@tiptap/extension-placeholder": "^3.6.5",
|
||||
"@tiptap/react": "^3.6.5",
|
||||
"@tiptap/starter-kit": "^3.6.5",
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"three": "^0.180.0",
|
||||
"tippy.js": "^6.3.7",
|
||||
"unicornstudio-react": "^1.4.31",
|
||||
"vaul": "^1.1.2",
|
||||
"zod": "^4.1.9"
|
||||
|
|
|
|||
42
pnpm-lock.yaml
generated
42
pnpm-lock.yaml
generated
|
|
@ -89,6 +89,9 @@ importers:
|
|||
'@tiptap/extension-link':
|
||||
specifier: ^3.6.5
|
||||
version: 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
|
||||
'@tiptap/extension-mention':
|
||||
specifier: ^3.6.5
|
||||
version: 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)(@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))
|
||||
'@tiptap/extension-placeholder':
|
||||
specifier: ^3.6.5
|
||||
version: 3.6.5(@tiptap/extensions@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))
|
||||
|
|
@ -155,6 +158,9 @@ importers:
|
|||
three:
|
||||
specifier: ^0.180.0
|
||||
version: 0.180.0
|
||||
tippy.js:
|
||||
specifier: ^6.3.7
|
||||
version: 6.3.7
|
||||
unicornstudio-react:
|
||||
specifier: ^1.4.31
|
||||
version: 1.4.31(next@16.0.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||
|
|
@ -1143,6 +1149,9 @@ packages:
|
|||
'@polka/url@1.0.0-next.29':
|
||||
resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
|
||||
|
||||
'@popperjs/core@2.11.8':
|
||||
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
||||
|
||||
'@prisma/client@6.16.3':
|
||||
resolution: {integrity: sha512-JfNfAtXG+/lIopsvoZlZiH2k5yNx87mcTS4t9/S5oufM1nKdXYxOvpDC1XoTCFBa5cQh7uXnbMPsmZrwZY80xw==}
|
||||
engines: {node: '>=18.18'}
|
||||
|
|
@ -2247,6 +2256,13 @@ packages:
|
|||
'@tiptap/core': ^3.6.5
|
||||
'@tiptap/pm': ^3.6.5
|
||||
|
||||
'@tiptap/extension-mention@3.6.5':
|
||||
resolution: {integrity: sha512-ACElkBvemEJGm8gVYI4QKjf6tfNj3m5dC9MkZL4rwZo4CAwjiNQ8oFhj1x7sPO1OVlnjt+FhnItBix5ztTF8Ng==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^3.6.5
|
||||
'@tiptap/pm': ^3.6.5
|
||||
'@tiptap/suggestion': ^3.6.5
|
||||
|
||||
'@tiptap/extension-ordered-list@3.6.5':
|
||||
resolution: {integrity: sha512-RiBl0Dkw8QtzS7OqUGm84BOyemw/N+hf8DYWsIqVysMRQAGBGhuklbw+DGpCL0nMHW4lh7WtvfKcb0yxLmhbbA==}
|
||||
peerDependencies:
|
||||
|
|
@ -2299,6 +2315,12 @@ packages:
|
|||
'@tiptap/starter-kit@3.6.5':
|
||||
resolution: {integrity: sha512-LNAJQstB/VazmMlRbUyu3rCNVQ9af25Ywkn3Uyuwt3Ks9ZlliIm/x/zertdXTY2adoig+b36zT5Xcx1O4IdJ3A==}
|
||||
|
||||
'@tiptap/suggestion@3.7.2':
|
||||
resolution: {integrity: sha512-CYmIMeLqeGBotl7+4TrnGux/ov9IJoWTUQN/JcHp0aOoN3z8c/dQ6cziXXknr51jGHSdVYMWEyamLDZfcaGC1w==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^3.7.2
|
||||
'@tiptap/pm': ^3.7.2
|
||||
|
||||
'@tweenjs/tween.js@23.1.3':
|
||||
resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
|
||||
|
||||
|
|
@ -4676,6 +4698,9 @@ packages:
|
|||
resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
||||
tippy.js@6.3.7:
|
||||
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
|
||||
|
||||
tldts-core@7.0.17:
|
||||
resolution: {integrity: sha512-DieYoGrP78PWKsrXr8MZwtQ7GLCUeLxihtjC1jZsW1DnvSMdKPitJSe8OSYDM2u5H6g3kWJZpePqkp43TfLh0g==}
|
||||
|
||||
|
|
@ -5828,6 +5853,8 @@ snapshots:
|
|||
|
||||
'@polka/url@1.0.0-next.29': {}
|
||||
|
||||
'@popperjs/core@2.11.8': {}
|
||||
|
||||
'@prisma/client@6.16.3(prisma@6.16.3(typescript@5.9.3))(typescript@5.9.3)':
|
||||
optionalDependencies:
|
||||
prisma: 6.16.3(typescript@5.9.3)
|
||||
|
|
@ -6985,6 +7012,12 @@ snapshots:
|
|||
'@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
|
||||
'@tiptap/pm': 3.6.5
|
||||
|
||||
'@tiptap/extension-mention@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)(@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))':
|
||||
dependencies:
|
||||
'@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
|
||||
'@tiptap/pm': 3.6.5
|
||||
'@tiptap/suggestion': 3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
|
||||
|
||||
'@tiptap/extension-ordered-list@3.6.5(@tiptap/extension-list@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))':
|
||||
dependencies:
|
||||
'@tiptap/extension-list': 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
|
||||
|
|
@ -7079,6 +7112,11 @@ snapshots:
|
|||
'@tiptap/extensions': 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
|
||||
'@tiptap/pm': 3.6.5
|
||||
|
||||
'@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)':
|
||||
dependencies:
|
||||
'@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
|
||||
'@tiptap/pm': 3.6.5
|
||||
|
||||
'@tweenjs/tween.js@23.1.3': {}
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
|
|
@ -9842,6 +9880,10 @@ snapshots:
|
|||
|
||||
tinyrainbow@3.0.3: {}
|
||||
|
||||
tippy.js@6.3.7:
|
||||
dependencies:
|
||||
'@popperjs/core': 2.11.8
|
||||
|
||||
tldts-core@7.0.17: {}
|
||||
|
||||
tldts@7.0.17:
|
||||
|
|
|
|||
96
src/app/api/tickets/mentions/route.ts
Normal file
96
src/app/api/tickets/mentions/route.ts
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { NextResponse } from "next/server"
|
||||
|
||||
import { assertAuthenticatedSession } from "@/lib/auth-server"
|
||||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
import { prisma } from "@/lib/prisma"
|
||||
|
||||
export const runtime = "nodejs"
|
||||
|
||||
const MAX_RESULTS = 10
|
||||
const MAX_SCAN = 60
|
||||
|
||||
function normalizeRole(role?: string | null) {
|
||||
return (role ?? "").toLowerCase()
|
||||
}
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const session = await assertAuthenticatedSession()
|
||||
if (!session) {
|
||||
return NextResponse.json({ items: [] }, { status: 401 })
|
||||
}
|
||||
|
||||
const normalizedRole = normalizeRole(session.user.role)
|
||||
const isAgentOrAdmin = normalizedRole === "admin" || normalizedRole === "agent"
|
||||
const canLinkOwnTickets = normalizedRole === "collaborator"
|
||||
|
||||
if (!isAgentOrAdmin && !canLinkOwnTickets) {
|
||||
return NextResponse.json({ items: [] }, { status: 403 })
|
||||
}
|
||||
|
||||
const tenantId = session.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
const url = new URL(request.url)
|
||||
const rawQuery = url.searchParams.get("q") ?? ""
|
||||
const query = rawQuery.trim()
|
||||
|
||||
const whereBase: {
|
||||
tenantId: string
|
||||
requesterId?: string
|
||||
} = { tenantId }
|
||||
|
||||
if (!isAgentOrAdmin) {
|
||||
whereBase.requesterId = session.user.id
|
||||
}
|
||||
|
||||
const numericQuery = /^\d+$/.test(query)
|
||||
|
||||
const take = numericQuery ? MAX_RESULTS : MAX_SCAN
|
||||
|
||||
const tickets = await prisma.ticket.findMany({
|
||||
where: whereBase,
|
||||
include: {
|
||||
assignee: { select: { name: true } },
|
||||
requester: { select: { name: true } },
|
||||
company: { select: { name: true } },
|
||||
},
|
||||
orderBy: { updatedAt: "desc" },
|
||||
take,
|
||||
})
|
||||
|
||||
const lowered = query.toLowerCase()
|
||||
|
||||
const filtered = tickets
|
||||
.filter((ticket) => {
|
||||
if (!query) return true
|
||||
const referenceMatch = String(ticket.reference).includes(query)
|
||||
if (referenceMatch) return true
|
||||
const subject = ticket.subject ?? ""
|
||||
if (subject.toLowerCase().includes(lowered)) return true
|
||||
const requesterName = ticket.requester?.name ?? ""
|
||||
if (requesterName.toLowerCase().includes(lowered)) return true
|
||||
const companyName = ticket.company?.name ?? ""
|
||||
if (companyName.toLowerCase().includes(lowered)) return true
|
||||
return false
|
||||
})
|
||||
.slice(0, MAX_RESULTS)
|
||||
|
||||
const basePath = isAgentOrAdmin ? "/tickets" : "/portal/tickets"
|
||||
|
||||
const items = filtered.map((ticket) => {
|
||||
const subject = ticket.subject ?? ""
|
||||
return {
|
||||
id: ticket.id,
|
||||
reference: ticket.reference,
|
||||
subject,
|
||||
status: ticket.status,
|
||||
priority: ticket.priority,
|
||||
requesterName: ticket.requester?.name ?? null,
|
||||
assigneeName: ticket.assignee?.name ?? null,
|
||||
companyName: ticket.company?.name ?? null,
|
||||
url: `${basePath}/${ticket.id}`,
|
||||
updatedAt: ticket.updatedAt.toISOString(),
|
||||
}
|
||||
})
|
||||
|
||||
return NextResponse.json({ items })
|
||||
}
|
||||
|
||||
|
|
@ -160,6 +160,34 @@
|
|||
}
|
||||
.rich-text p { @apply my-2; }
|
||||
.rich-text a { @apply text-neutral-900 underline; }
|
||||
.rich-text a[data-ticket-mention="true"],
|
||||
.rich-text .ProseMirror a[data-ticket-mention="true"] {
|
||||
@apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 no-underline transition hover:bg-slate-200;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"] .ticket-mention-dot {
|
||||
@apply inline-flex size-2 rounded-full bg-slate-400;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"] .ticket-mention-ref {
|
||||
@apply text-neutral-900;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"] .ticket-mention-sep {
|
||||
@apply text-neutral-400;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"] .ticket-mention-subject {
|
||||
@apply max-w-[220px] truncate text-neutral-700;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot {
|
||||
@apply bg-amber-400;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
|
||||
@apply bg-sky-500;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot {
|
||||
@apply bg-violet-500;
|
||||
}
|
||||
.rich-text a[data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot {
|
||||
@apply bg-emerald-500;
|
||||
}
|
||||
.rich-text ul { @apply my-2 list-disc ps-5; }
|
||||
.rich-text ol { @apply my-2 list-decimal ps-5; }
|
||||
.rich-text li { @apply my-1; }
|
||||
|
|
|
|||
|
|
@ -20,6 +20,14 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination"
|
||||
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { useQuery } from "convex/react"
|
||||
|
|
@ -356,6 +364,74 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
|
|||
})
|
||||
}, [combinedBaseUsers, usersSearch, usersCompanyFilter])
|
||||
|
||||
const [teamPageSize, setTeamPageSize] = useState<number>(10)
|
||||
const [teamPageIndex, setTeamPageIndex] = useState<number>(0)
|
||||
const teamTotal = filteredTeamUsers.length
|
||||
const teamPageCount = Math.max(1, Math.ceil(teamTotal / teamPageSize))
|
||||
const teamPaginated = useMemo(
|
||||
() => filteredTeamUsers.slice(teamPageIndex * teamPageSize, teamPageIndex * teamPageSize + teamPageSize),
|
||||
[filteredTeamUsers, teamPageIndex, teamPageSize]
|
||||
)
|
||||
const teamStart = teamTotal === 0 ? 0 : teamPageIndex * teamPageSize + 1
|
||||
const teamEnd = teamTotal === 0 ? 0 : Math.min(teamTotal, teamPageIndex * teamPageSize + teamPageSize)
|
||||
|
||||
useEffect(() => {
|
||||
setTeamPageIndex(0)
|
||||
}, [teamSearch, teamRoleFilter, teamCompanyFilter])
|
||||
|
||||
useEffect(() => {
|
||||
if (teamPageIndex > teamPageCount - 1) {
|
||||
setTeamPageIndex(Math.max(0, teamPageCount - 1))
|
||||
}
|
||||
}, [teamPageIndex, teamPageCount])
|
||||
|
||||
const [usersPageSize, setUsersPageSize] = useState<number>(10)
|
||||
const [usersPageIndex, setUsersPageIndex] = useState<number>(0)
|
||||
const usersTotal = filteredCombinedUsers.length
|
||||
const usersPageCount = Math.max(1, Math.ceil(usersTotal / usersPageSize))
|
||||
const usersPaginated = useMemo(
|
||||
() =>
|
||||
filteredCombinedUsers.slice(
|
||||
usersPageIndex * usersPageSize,
|
||||
usersPageIndex * usersPageSize + usersPageSize
|
||||
),
|
||||
[filteredCombinedUsers, usersPageIndex, usersPageSize]
|
||||
)
|
||||
const usersStart = usersTotal === 0 ? 0 : usersPageIndex * usersPageSize + 1
|
||||
const usersEnd = usersTotal === 0 ? 0 : Math.min(usersTotal, usersPageIndex * usersPageSize + usersPageSize)
|
||||
|
||||
useEffect(() => {
|
||||
setUsersPageIndex(0)
|
||||
}, [usersSearch, usersTypeFilter, usersCompanyFilter])
|
||||
|
||||
useEffect(() => {
|
||||
if (usersPageIndex > usersPageCount - 1) {
|
||||
setUsersPageIndex(Math.max(0, usersPageCount - 1))
|
||||
}
|
||||
}, [usersPageIndex, usersPageCount])
|
||||
|
||||
const [invitesPageSize, setInvitesPageSize] = useState<number>(10)
|
||||
const [invitesPageIndex, setInvitesPageIndex] = useState<number>(0)
|
||||
const invitesTotal = invites.length
|
||||
const invitesPageCount = Math.max(1, Math.ceil(invitesTotal / invitesPageSize))
|
||||
const paginatedInvites = useMemo(
|
||||
() => invites.slice(invitesPageIndex * invitesPageSize, invitesPageIndex * invitesPageSize + invitesPageSize),
|
||||
[invites, invitesPageIndex, invitesPageSize]
|
||||
)
|
||||
const invitesStart = invitesTotal === 0 ? 0 : invitesPageIndex * invitesPageSize + 1
|
||||
const invitesEnd =
|
||||
invitesTotal === 0 ? 0 : Math.min(invitesTotal, invitesPageIndex * invitesPageSize + invitesPageSize)
|
||||
|
||||
useEffect(() => {
|
||||
setInvitesPageIndex(0)
|
||||
}, [invitesTotal])
|
||||
|
||||
useEffect(() => {
|
||||
if (invitesPageIndex > invitesPageCount - 1) {
|
||||
setInvitesPageIndex(Math.max(0, invitesPageCount - 1))
|
||||
}
|
||||
}, [invitesPageIndex, invitesPageCount])
|
||||
|
||||
useEffect(() => {
|
||||
void (async () => {
|
||||
try {
|
||||
|
|
@ -1008,104 +1084,168 @@ async function handleDeleteUser() {
|
|||
<CardTitle>Equipe cadastrada</CardTitle>
|
||||
<CardDescription>Usuários com acesso ao sistema. Edite papéis, dados pessoais ou gere uma nova senha.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
|
||||
<th className="w-10 py-3 pr-2 font-medium">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={allTeamSelected || (someTeamSelected && "indeterminate")}
|
||||
onCheckedChange={(value) => toggleTeamSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
<CardContent className="space-y-4">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className="overflow-hidden rounded-lg border">
|
||||
<table className="min-w-full table-fixed text-sm">
|
||||
<thead className="bg-slate-100/80">
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
|
||||
<th className="w-10 px-4 py-3 font-semibold first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={allTeamSelected || (someTeamSelected && "indeterminate")}
|
||||
onCheckedChange={(value) => toggleTeamSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Nome</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">E-mail</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Papel</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Empresa</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Máquinas</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Criado em</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 bg-white">
|
||||
{teamPaginated.length > 0 ? (
|
||||
teamPaginated.map((user) => (
|
||||
<tr key={user.id} className="transition-colors hover:bg-slate-50/80">
|
||||
<td className="px-4 py-3 first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={teamSelection.has(user.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setTeamSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(user.id)
|
||||
else next.delete(user.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-medium text-neutral-800 first:pl-6">{user.name || "—"}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{user.email}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{formatRole(user.role)}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{user.companyName ?? "—"}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">
|
||||
{(() => {
|
||||
const list = machinesByUserEmail.get((user.email ?? "").toLowerCase()) ?? []
|
||||
if (list.length === 0) return "—"
|
||||
const names = list.map((m) => m.hostname || m.id)
|
||||
const head = names.slice(0, 2).join(", ")
|
||||
const extra = names.length > 2 ? ` +${names.length - 2}` : ""
|
||||
return (
|
||||
<span className="text-xs font-medium" title={names.join(", ")}>
|
||||
{head}
|
||||
{extra}
|
||||
</span>
|
||||
)
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-500">{formatDate(user.createdAt)}</td>
|
||||
<td className="px-4 py-3 last:pr-6">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setEditUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setDeleteUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-6 py-6 text-center text-sm text-neutral-500">
|
||||
{teamUsers.length === 0
|
||||
? "Nenhum usuário cadastrado até o momento."
|
||||
: "Nenhum usuário corresponde aos filtros atuais."}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
|
||||
<div>{teamTotal === 0 ? "Nenhum registro" : `Mostrando ${teamStart}-${teamEnd} de ${teamTotal}`}</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
|
||||
<span>Itens por página</span>
|
||||
<Select
|
||||
value={`${teamPageSize}`}
|
||||
onValueChange={(value) => {
|
||||
const next = Number(value)
|
||||
setTeamPageSize(next)
|
||||
setTeamPageIndex(0)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-20">
|
||||
<SelectValue placeholder={`${teamPageSize}`} />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
{[10, 20, 30, 50].map((n) => (
|
||||
<SelectItem key={`team-page-${n}`} value={`${n}`}>
|
||||
{n}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
disabled={teamPageIndex === 0}
|
||||
onClick={() => setTeamPageIndex((previous) => Math.max(0, previous - 1))}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 pr-4 font-medium">Nome</th>
|
||||
<th className="py-3 pr-4 font-medium">E-mail</th>
|
||||
<th className="py-3 pr-4 font-medium">Papel</th>
|
||||
<th className="py-3 pr-4 font-medium">Empresa</th>
|
||||
<th className="py-3 pr-4 font-medium">Máquinas</th>
|
||||
{/* Espaço removido */}
|
||||
<th className="py-3 pr-4 font-medium">Criado em</th>
|
||||
<th className="py-3 font-medium">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{filteredTeamUsers.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-slate-50">
|
||||
<td className="py-3 pr-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={teamSelection.has(user.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setTeamSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(user.id)
|
||||
else next.delete(user.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 pr-4 font-medium text-neutral-800">{user.name || "—"}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{user.email}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{formatRole(user.role)}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{user.companyName ?? "—"}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">
|
||||
{(() => {
|
||||
const list = machinesByUserEmail.get((user.email ?? '').toLowerCase()) ?? []
|
||||
if (list.length === 0) return '—'
|
||||
const names = list.map((m) => m.hostname || m.id)
|
||||
const head = names.slice(0, 2).join(', ')
|
||||
const extra = names.length > 2 ? ` +${names.length - 2}` : ''
|
||||
return <span className="text-xs font-medium" title={names.join(', ')}>{head}{extra}</span>
|
||||
})()}
|
||||
</td>
|
||||
{/* Espaço removido */}
|
||||
<td className="py-3 pr-4 text-neutral-500">{formatDate(user.createdAt)}</td>
|
||||
<td className="py-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setEditUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setDeleteUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredTeamUsers.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="py-6 text-center text-neutral-500">
|
||||
{teamUsers.length === 0
|
||||
? "Nenhum usuário cadastrado até o momento."
|
||||
: "Nenhum usuário corresponde aos filtros atuais."}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
isActive
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
>
|
||||
{teamPageIndex + 1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
disabled={teamPageIndex >= teamPageCount - 1}
|
||||
onClick={() =>
|
||||
setTeamPageIndex((previous) => Math.min(teamPageCount - 1, previous + 1))
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
|
|
@ -1226,112 +1366,193 @@ async function handleDeleteUser() {
|
|||
<CardTitle>Usuários</CardTitle>
|
||||
<CardDescription>Pessoas e máquinas com acesso ao sistema.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
|
||||
<th className="w-10 py-3 pr-2 font-medium">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={usersSelection.size > 0 && usersSelection.size === filteredCombinedUsers.length || (usersSelection.size > 0 && usersSelection.size < filteredCombinedUsers.length && "indeterminate")}
|
||||
onCheckedChange={(value) => toggleUsersCombinedSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
<CardContent className="space-y-4">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className="overflow-hidden rounded-lg border">
|
||||
<table className="min-w-full table-fixed text-sm">
|
||||
<thead className="bg-slate-100/80">
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
|
||||
<th className="w-10 px-4 py-3 font-semibold first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={
|
||||
usersSelection.size > 0 &&
|
||||
usersSelection.size === filteredCombinedUsers.length
|
||||
? true
|
||||
: usersSelection.size > 0
|
||||
? "indeterminate"
|
||||
: false
|
||||
}
|
||||
onCheckedChange={(value) => toggleUsersCombinedSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Nome</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">E-mail</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Tipo</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Perfil</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Empresa</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Criado em</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 bg-white">
|
||||
{usersPaginated.length > 0 ? (
|
||||
usersPaginated.map((user) => (
|
||||
<tr key={user.id} className="transition-colors hover:bg-slate-50/80">
|
||||
<td className="px-4 py-3 first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={usersSelection.has(user.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setUsersSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(user.id)
|
||||
else next.delete(user.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 font-medium text-neutral-800 first:pl-6">
|
||||
{user.name || (user.role === "machine" ? "Máquina" : "—")}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{user.email}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">
|
||||
{user.role === "machine" ? "Máquina" : "Pessoa"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-600">
|
||||
{user.role === "machine" ? (
|
||||
user.machinePersona ? (
|
||||
<Badge
|
||||
variant={machinePersonaBadgeVariant(user.machinePersona)}
|
||||
className="rounded-full px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{formatMachinePersona(user.machinePersona)}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-500">Sem persona</span>
|
||||
)
|
||||
) : (
|
||||
formatRole(user.role)
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{user.companyName ?? "—"}</td>
|
||||
<td className="px-4 py-3 text-neutral-500">{formatDate(user.createdAt)}</td>
|
||||
<td className="px-4 py-3 last:pr-6">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setEditUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
{user.role === "machine" ? (
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link
|
||||
href={
|
||||
extractMachineId(user.email)
|
||||
? `/admin/machines/${extractMachineId(user.email)}`
|
||||
: "/admin/machines"
|
||||
}
|
||||
>
|
||||
Detalhes da máquina
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setDeleteUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-6 py-6 text-center text-sm text-neutral-500">
|
||||
{combinedBaseUsers.length === 0
|
||||
? "Nenhum usuário cadastrado até o momento."
|
||||
: "Nenhum usuário corresponde aos filtros atuais."}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
|
||||
<div>{usersTotal === 0 ? "Nenhum registro" : `Mostrando ${usersStart}-${usersEnd} de ${usersTotal}`}</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
|
||||
<span>Itens por página</span>
|
||||
<Select
|
||||
value={`${usersPageSize}`}
|
||||
onValueChange={(value) => {
|
||||
const next = Number(value)
|
||||
setUsersPageSize(next)
|
||||
setUsersPageIndex(0)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-20">
|
||||
<SelectValue placeholder={`${usersPageSize}`} />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
{[10, 20, 30, 50].map((n) => (
|
||||
<SelectItem key={`users-page-${n}`} value={`${n}`}>
|
||||
{n}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
disabled={usersPageIndex === 0}
|
||||
onClick={() => setUsersPageIndex((previous) => Math.max(0, previous - 1))}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 pr-4 font-medium">Nome</th>
|
||||
<th className="py-3 pr-4 font-medium">E-mail</th>
|
||||
<th className="py-3 pr-4 font-medium">Tipo</th>
|
||||
<th className="py-3 pr-4 font-medium">Perfil</th>
|
||||
<th className="py-3 pr-4 font-medium">Empresa</th>
|
||||
{/* Espaço removido */}
|
||||
<th className="py-3 pr-4 font-medium">Criado em</th>
|
||||
<th className="py-3 font-medium">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{filteredCombinedUsers.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-slate-50">
|
||||
<td className="py-3 pr-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={usersSelection.has(user.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setUsersSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(user.id)
|
||||
else next.delete(user.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 pr-4 font-medium text-neutral-800">{user.name || (user.role === "machine" ? "Máquina" : "—")}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{user.email}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{user.role === "machine" ? "Máquina" : "Pessoa"}</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">
|
||||
{user.role === "machine" ? (
|
||||
user.machinePersona ? (
|
||||
<Badge variant={machinePersonaBadgeVariant(user.machinePersona)} className="rounded-full px-3 py-1 text-xs font-medium">
|
||||
{formatMachinePersona(user.machinePersona)}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-500">Sem persona</span>
|
||||
)
|
||||
) : (
|
||||
formatRole(user.role)
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{user.companyName ?? "—"}</td>
|
||||
{/* Espaço removido */}
|
||||
<td className="py-3 pr-4 text-neutral-500">{formatDate(user.createdAt)}</td>
|
||||
<td className="py-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setEditUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Editar
|
||||
</Button>
|
||||
{user.role === "machine" ? (
|
||||
<Button variant="ghost" size="sm" asChild>
|
||||
<Link href={(extractMachineId(user.email) ? `/admin/machines/${extractMachineId(user.email)}` : "/admin/machines")}>Detalhes da máquina</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
|
||||
disabled={!canManageUser(user.role)}
|
||||
onClick={() => {
|
||||
if (!canManageUser(user.role)) return
|
||||
setDeleteUserId(user.id)
|
||||
}}
|
||||
>
|
||||
Remover
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{filteredCombinedUsers.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={9} className="py-6 text-center text-neutral-500">
|
||||
{combinedBaseUsers.length === 0
|
||||
? "Nenhum usuário cadastrado até o momento."
|
||||
: "Nenhum usuário corresponde aos filtros atuais."}
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
isActive
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
>
|
||||
{usersPageIndex + 1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
disabled={usersPageIndex >= usersPageCount - 1}
|
||||
onClick={() =>
|
||||
setUsersPageIndex((previous) => Math.min(usersPageCount - 1, previous + 1))
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
|
@ -1422,113 +1643,172 @@ async function handleDeleteUser() {
|
|||
<CardTitle>Convites emitidos</CardTitle>
|
||||
<CardDescription>Histórico e status atual de todos os convites enviados para o workspace.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-auto">
|
||||
<table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
|
||||
<th className="w-10 py-3 pr-2 font-medium">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={allInvitesSelected || (someInvitesSelected && "indeterminate")}
|
||||
onCheckedChange={(value) => toggleInvitesSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="py-3 pr-4 font-medium">Colaborador</th>
|
||||
<th className="py-3 pr-4 font-medium">Papel</th>
|
||||
{/* Espaço removido */}
|
||||
<th className="py-3 pr-4 font-medium">Expira em</th>
|
||||
<th className="py-3 pr-4 font-medium">Status</th>
|
||||
<th className="py-3 font-medium">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{invites.map((invite) => (
|
||||
<tr key={invite.id} className="hover:bg-slate-50">
|
||||
<td className="py-3 pr-2">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={inviteSelection.has(invite.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setInviteSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(invite.id)
|
||||
else next.delete(invite.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
<CardContent className="space-y-4">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className="overflow-hidden rounded-lg border">
|
||||
<table className="min-w-full table-fixed text-sm">
|
||||
<thead className="bg-slate-100/80">
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
|
||||
<th className="w-10 px-4 py-3 font-semibold first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={allInvitesSelected || (someInvitesSelected && "indeterminate")}
|
||||
onCheckedChange={(value) => toggleInvitesSelectAll(!!value)}
|
||||
aria-label="Selecionar todos"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Colaborador</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Papel</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Expira em</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600">Status</th>
|
||||
<th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 bg-white">
|
||||
{paginatedInvites.length > 0 ? (
|
||||
paginatedInvites.map((invite) => (
|
||||
<tr key={invite.id} className="transition-colors hover:bg-slate-50/80">
|
||||
<td className="px-4 py-3 first:pl-6">
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={inviteSelection.has(invite.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
setInviteSelection((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (checked) next.add(invite.id)
|
||||
else next.delete(invite.id)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
aria-label="Selecionar linha"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 first:pl-6">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-neutral-800">{invite.name || invite.email}</span>
|
||||
<span className="text-xs text-neutral-500">{invite.email}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{formatRole(invite.role)}</td>
|
||||
<td className="px-4 py-3 text-neutral-600">{formatDate(invite.expiresAt)}</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge
|
||||
variant={inviteStatusVariant(invite.status)}
|
||||
className="rounded-full px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{formatStatus(invite.status)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 last:pr-6">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => handleCopy(invite.inviteUrl)}>
|
||||
Copiar link
|
||||
</Button>
|
||||
{invite.status === "pending" && canManageInvite(invite.role) ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-600 transition-colors hover:bg-red-500/10"
|
||||
onClick={() => setRevokeDialogInviteId(invite.id)}
|
||||
disabled={revokingId === invite.id}
|
||||
>
|
||||
{revokingId === invite.id ? "Revogando..." : "Revogar"}
|
||||
</Button>
|
||||
) : null}
|
||||
{invite.status === "revoked" && canReactivateInvitePolicy(invite) && canManageInvite(invite.role) ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-amber-400 text-amber-600 hover:bg-amber-50"
|
||||
onClick={() => handleReactivate(invite)}
|
||||
disabled={reactivatingId === invite.id}
|
||||
>
|
||||
{reactivatingId === invite.id ? "Reativando..." : "Reativar"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-6 py-6 text-center text-sm text-neutral-500">
|
||||
Nenhum convite emitido até o momento.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
|
||||
<div>{invitesTotal === 0 ? "Nenhum registro" : `Mostrando ${invitesStart}-${invitesEnd} de ${invitesTotal}`}</div>
|
||||
<div className="flex flex-col-reverse gap-3 md:flex-row md:items-center md:gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700 disabled:text-rose-300 disabled:border-rose-100"
|
||||
disabled={selectedInvites.length === 0 || isBulkRevokingInvites}
|
||||
onClick={() => setBulkRevokeInvitesOpen(true)}
|
||||
>
|
||||
<IconTrash className="size-4" /> Revogar selecionados
|
||||
</Button>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
|
||||
<span>Itens por página</span>
|
||||
<Select
|
||||
value={`${invitesPageSize}`}
|
||||
onValueChange={(value) => {
|
||||
const next = Number(value)
|
||||
setInvitesPageSize(next)
|
||||
setInvitesPageIndex(0)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-20">
|
||||
<SelectValue placeholder={`${invitesPageSize}`} />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
{[10, 20, 30, 50].map((n) => (
|
||||
<SelectItem key={`invites-page-${n}`} value={`${n}`}>
|
||||
{n}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
disabled={invitesPageIndex === 0}
|
||||
onClick={() => setInvitesPageIndex((previous) => Math.max(0, previous - 1))}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 pr-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium text-neutral-800">{invite.name || invite.email}</span>
|
||||
<span className="text-xs text-neutral-500">{invite.email}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 pr-4 text-neutral-600">{formatRole(invite.role)}</td>
|
||||
{/* Espaço removido */}
|
||||
<td className="py-3 pr-4 text-neutral-600">{formatDate(invite.expiresAt)}</td>
|
||||
<td className="py-3 pr-4">
|
||||
<Badge
|
||||
variant={inviteStatusVariant(invite.status)}
|
||||
className="rounded-full px-3 py-1 text-xs font-medium"
|
||||
>
|
||||
{formatStatus(invite.status)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="py-3">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => handleCopy(invite.inviteUrl)}>
|
||||
Copiar link
|
||||
</Button>
|
||||
{invite.status === "pending" && canManageInvite(invite.role) ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-600 transition-colors hover:bg-red-500/10"
|
||||
onClick={() => setRevokeDialogInviteId(invite.id)}
|
||||
disabled={revokingId === invite.id}
|
||||
>
|
||||
{revokingId === invite.id ? "Revogando..." : "Revogar"}
|
||||
</Button>
|
||||
) : null}
|
||||
{invite.status === "revoked" && canReactivateInvitePolicy(invite) && canManageInvite(invite.role) ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-amber-400 text-amber-600 hover:bg-amber-50"
|
||||
onClick={() => handleReactivate(invite)}
|
||||
disabled={reactivatingId === invite.id}
|
||||
>
|
||||
{reactivatingId === invite.id ? "Reativando..." : "Reativar"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{invites.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="py-6 text-center text-neutral-500">
|
||||
Nenhum convite emitido até o momento.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="mt-3 flex items-center justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700 disabled:text-rose-300 disabled:border-rose-100"
|
||||
disabled={selectedInvites.length === 0 || isBulkRevokingInvites}
|
||||
onClick={() => setBulkRevokeInvitesOpen(true)}
|
||||
>
|
||||
<IconTrash className="size-4" /> Revogar selecionados
|
||||
</Button>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
isActive
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
>
|
||||
{invitesPageIndex + 1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
disabled={invitesPageIndex >= invitesPageCount - 1}
|
||||
onClick={() =>
|
||||
setInvitesPageIndex((previous) => Math.min(invitesPageCount - 1, previous + 1))
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -758,7 +758,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
|
|||
<div className="space-y-3">
|
||||
<div className="overflow-hidden rounded-lg border">
|
||||
<Table className="w-full table-auto">
|
||||
<TableHeader className="bg-muted border-b">
|
||||
<TableHeader className="bg-slate-100/80 border-b border-slate-200">
|
||||
<TableRow>
|
||||
<TableHead>Empresa</TableHead>
|
||||
<TableHead>Contratos ativos</TableHead>
|
||||
|
|
@ -787,7 +787,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
|
|||
return (
|
||||
<TableRow key={company.id} className="hover:bg-muted/40">
|
||||
<TableCell className="align-middle">
|
||||
<div className="space-y-1">
|
||||
<div className="flex h-full flex-col justify-center gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-semibold text-foreground">{company.name}</p>
|
||||
{company.isAvulso ? <Badge variant="outline">Avulso</Badge> : null}
|
||||
|
|
|
|||
|
|
@ -91,6 +91,8 @@ const ROLE_LABEL: Record<AdminAccount["role"], string> = {
|
|||
COLLABORATOR: "Colaborador",
|
||||
}
|
||||
|
||||
const NO_CONTACT_VALUE = "__none__"
|
||||
|
||||
function createId(prefix: string) {
|
||||
if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
|
||||
return `${prefix}-${crypto.randomUUID()}`
|
||||
|
|
@ -612,16 +614,16 @@ function CompanySectionSheet({ editor, onClose, onUpdated }: CompanySectionSheet
|
|||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(value) => (!value ? onClose() : null)}>
|
||||
<SheetContent className="flex w-full max-w-4xl flex-col gap-0 p-0">
|
||||
<SheetHeader className="border-b border-border/60 px-6 py-4">
|
||||
<SheetTitle className="text-base font-semibold">
|
||||
<SheetContent className="flex w-full max-w-none flex-col gap-0 bg-background p-0 sm:max-w-[48rem] lg:max-w-[60rem] xl:max-w-[68rem]">
|
||||
<SheetHeader className="border-b border-border/60 px-10 py-7">
|
||||
<SheetTitle className="text-xl font-semibold">
|
||||
{editor?.section === "contacts" ? "Contatos da empresa" : null}
|
||||
{editor?.section === "locations" ? "Localizações e unidades" : null}
|
||||
{editor?.section === "contracts" ? "Contratos ativos" : null}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex-1 overflow-y-auto px-6 py-6">{content}</div>
|
||||
<SheetFooter className="border-t border-border/60 px-6 py-4">
|
||||
<div className="flex-1 overflow-y-auto px-10 py-8">{content}</div>
|
||||
<SheetFooter className="border-t border-border/60 px-10 py-5">
|
||||
<div className="flex w-full items-center justify-end">
|
||||
{isSubmitting ? (
|
||||
<span className="text-sm text-muted-foreground">Salvando...</span>
|
||||
|
|
@ -674,11 +676,11 @@ function ContactsEditor({
|
|||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={submit} className="space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">Contatos estratégicos</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<form onSubmit={submit} className="space-y-8">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-base font-semibold text-foreground">Contatos estratégicos</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cadastre responsáveis por aprovação, faturamento e comunicação.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -686,6 +688,7 @@ function ContactsEditor({
|
|||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="self-start sm:self-auto"
|
||||
onClick={() =>
|
||||
fieldArray.append({
|
||||
id: createId("contact"),
|
||||
|
|
@ -703,18 +706,18 @@ function ContactsEditor({
|
|||
})
|
||||
}
|
||||
>
|
||||
<IconPlus className="mr-1 size-3.5" />
|
||||
<IconPlus className="mr-2 size-4" />
|
||||
Novo contato
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{fieldArray.fields.map((field, index) => {
|
||||
const errors = form.formState.errors.contacts?.[index]
|
||||
return (
|
||||
<Card key={field.id}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle className="text-base font-semibold">Contato #{index + 1}</CardTitle>
|
||||
<Card key={field.id} className="border border-border/60 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-lg font-semibold">Contato #{index + 1}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
|
|
@ -725,29 +728,39 @@ function ContactsEditor({
|
|||
<IconTrash className="size-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<Label>Nome completo</Label>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Nome completo
|
||||
</Label>
|
||||
<Input {...form.register(`contacts.${index}.fullName` as const)} />
|
||||
<FieldError message={errors?.fullName?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>E-mail</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
E-mail
|
||||
</Label>
|
||||
<Input {...form.register(`contacts.${index}.email` as const)} />
|
||||
<FieldError message={errors?.email?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Telefone</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Telefone
|
||||
</Label>
|
||||
<Input {...form.register(`contacts.${index}.phone` as const)} placeholder="(11) 99999-0000" />
|
||||
<FieldError message={errors?.phone?.message as string | undefined} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>WhatsApp</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
WhatsApp
|
||||
</Label>
|
||||
<Input {...form.register(`contacts.${index}.whatsapp` as const)} placeholder="(11) 99999-0000" />
|
||||
<FieldError message={errors?.whatsapp?.message as string | undefined} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Função</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Função
|
||||
</Label>
|
||||
<Controller
|
||||
name={`contacts.${index}.role` as const}
|
||||
control={form.control}
|
||||
|
|
@ -767,12 +780,16 @@ function ContactsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Cargo interno</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Cargo interno
|
||||
</Label>
|
||||
<Input {...form.register(`contacts.${index}.title` as const)} placeholder="ex.: Coordenador TI" />
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label>Preferências de contato</Label>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Preferências de contato
|
||||
</Label>
|
||||
<Controller
|
||||
name={`contacts.${index}.preference` as const}
|
||||
control={form.control}
|
||||
|
|
@ -785,26 +802,28 @@ function ContactsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="md:col-span-2 flex items-center gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3">
|
||||
<Checkbox
|
||||
checked={form.watch(`contacts.${index}.canAuthorizeTickets` as const)}
|
||||
onCheckedChange={(checked) =>
|
||||
form.setValue(`contacts.${index}.canAuthorizeTickets` as const, Boolean(checked))
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">Pode autorizar tickets</span>
|
||||
<span className="text-sm font-medium text-neutral-700">Pode autorizar tickets</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="md:col-span-2 flex items-center gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3">
|
||||
<Checkbox
|
||||
checked={form.watch(`contacts.${index}.canApproveCosts` as const)}
|
||||
onCheckedChange={(checked) =>
|
||||
form.setValue(`contacts.${index}.canApproveCosts` as const, Boolean(checked))
|
||||
}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">Pode aprovar custos</span>
|
||||
<span className="text-sm font-medium text-neutral-700">Pode aprovar custos</span>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label>Anotações</Label>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Anotações
|
||||
</Label>
|
||||
<Textarea {...form.register(`contacts.${index}.notes` as const)} />
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -813,11 +832,11 @@ function ContactsEditor({
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button type="button" variant="ghost" onClick={onCancel}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
|
||||
<Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Button type="submit" className="whitespace-nowrap sm:w-auto">
|
||||
<IconPencil className="mr-2 size-4" />
|
||||
Salvar contatos
|
||||
</Button>
|
||||
|
|
@ -862,18 +881,19 @@ function LocationsEditor({
|
|||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={submit} className="space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">Localizações</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Define unidades críticas, data centers e filiais para atendimento dedicado.
|
||||
<form onSubmit={submit} className="space-y-8">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-base font-semibold text-foreground">Localizações</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Defina unidades críticas, data centers e filiais para atendimento dedicado.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="self-start sm:self-auto"
|
||||
onClick={() =>
|
||||
fieldArray.append({
|
||||
id: createId("location"),
|
||||
|
|
@ -886,18 +906,18 @@ function LocationsEditor({
|
|||
})
|
||||
}
|
||||
>
|
||||
<IconPlus className="mr-1 size-3.5" />
|
||||
<IconPlus className="mr-2 size-4" />
|
||||
Nova unidade
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{fieldArray.fields.map((field, index) => {
|
||||
const errors = form.formState.errors.locations?.[index]
|
||||
return (
|
||||
<Card key={field.id}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle className="text-base font-semibold">Unidade #{index + 1}</CardTitle>
|
||||
<Card key={field.id} className="border border-border/60 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-lg font-semibold">Unidade #{index + 1}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
|
|
@ -908,14 +928,14 @@ function LocationsEditor({
|
|||
<IconTrash className="size-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<Label>Nome</Label>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Nome</Label>
|
||||
<Input {...form.register(`locations.${index}.name` as const)} />
|
||||
<FieldError message={errors?.name?.message} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Tipo</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Tipo</Label>
|
||||
<Controller
|
||||
name={`locations.${index}.type` as const}
|
||||
control={form.control}
|
||||
|
|
@ -935,18 +955,25 @@ function LocationsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Contato responsável</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Contato responsável
|
||||
</Label>
|
||||
<Controller
|
||||
name={`locations.${index}.responsibleContactId` as const}
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Select value={field.value ?? ""} onValueChange={(value) => field.onChange(value || null)}>
|
||||
<Select
|
||||
value={field.value ?? NO_CONTACT_VALUE}
|
||||
onValueChange={(value) =>
|
||||
field.onChange(value === NO_CONTACT_VALUE ? null : value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">Nenhum</SelectItem>
|
||||
<SelectItem value={NO_CONTACT_VALUE}>Nenhum</SelectItem>
|
||||
{contacts.map((contact) => (
|
||||
<SelectItem key={contact.id} value={contact.id}>
|
||||
{contact.fullName}
|
||||
|
|
@ -957,8 +984,10 @@ function LocationsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Notas</Label>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Notas
|
||||
</Label>
|
||||
<Textarea {...form.register(`locations.${index}.notes` as const)} />
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -967,11 +996,11 @@ function LocationsEditor({
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button type="button" variant="ghost" onClick={onCancel}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
|
||||
<Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Button type="submit" className="whitespace-nowrap sm:w-auto">
|
||||
<IconPencil className="mr-2 size-4" />
|
||||
Salvar localizações
|
||||
</Button>
|
||||
|
|
@ -1019,11 +1048,11 @@ function ContractsEditor({
|
|||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form onSubmit={submit} className="space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">Contratos</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<form onSubmit={submit} className="space-y-8">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-base font-semibold text-foreground">Contratos</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Registre vigência, escopo e condições para este cliente.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1031,6 +1060,7 @@ function ContractsEditor({
|
|||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="self-start sm:self-auto"
|
||||
onClick={() =>
|
||||
fieldArray.append({
|
||||
id: createId("contract"),
|
||||
|
|
@ -1047,18 +1077,18 @@ function ContractsEditor({
|
|||
})
|
||||
}
|
||||
>
|
||||
<IconPlus className="mr-1 size-3.5" />
|
||||
<IconPlus className="mr-2 size-4" />
|
||||
Novo contrato
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-6">
|
||||
{fieldArray.fields.map((field, index) => {
|
||||
const errors = form.formState.errors.contracts?.[index]
|
||||
return (
|
||||
<Card key={field.id}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<CardTitle className="text-base font-semibold">Contrato #{index + 1}</CardTitle>
|
||||
<Card key={field.id} className="border border-border/60 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<CardTitle className="text-lg font-semibold">Contrato #{index + 1}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
|
|
@ -1069,9 +1099,11 @@ function ContractsEditor({
|
|||
<IconTrash className="size-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<Label>Tipo</Label>
|
||||
<CardContent className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Tipo
|
||||
</Label>
|
||||
<Controller
|
||||
name={`contracts.${index}.contractType` as const}
|
||||
control={form.control}
|
||||
|
|
@ -1091,34 +1123,46 @@ function ContractsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label>SKU/plano</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
SKU/plano
|
||||
</Label>
|
||||
<Input {...form.register(`contracts.${index}.planSku` as const)} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Início</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Início
|
||||
</Label>
|
||||
<Input type="date" {...form.register(`contracts.${index}.startDate` as const)} />
|
||||
<FieldError message={errors?.startDate?.message as string | undefined} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Fim</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Fim
|
||||
</Label>
|
||||
<Input type="date" {...form.register(`contracts.${index}.endDate` as const)} />
|
||||
<FieldError message={errors?.endDate?.message as string | undefined} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Renovação</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Renovação
|
||||
</Label>
|
||||
<Input type="date" {...form.register(`contracts.${index}.renewalDate` as const)} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>Valor (R$)</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Valor (R$)
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
{...form.register(`contracts.${index}.price` as const, { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label>Escopo</Label>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Escopo
|
||||
</Label>
|
||||
<Controller
|
||||
name={`contracts.${index}.scope` as const}
|
||||
control={form.control}
|
||||
|
|
@ -1138,8 +1182,10 @@ function ContractsEditor({
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<Label>Observações</Label>
|
||||
<div className="md:col-span-2 space-y-2">
|
||||
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Observações
|
||||
</Label>
|
||||
<Textarea {...form.register(`contracts.${index}.notes` as const)} />
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -1148,11 +1194,11 @@ function ContractsEditor({
|
|||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button type="button" variant="ghost" onClick={onCancel}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
|
||||
<Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Button type="submit" className="whitespace-nowrap sm:w-auto">
|
||||
<IconPencil className="mr-2 size-4" />
|
||||
Salvar contratos
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ const navigation: NavigationGroup[] = [
|
|||
url: "/admin/companies",
|
||||
icon: Building2,
|
||||
requiredRole: "admin",
|
||||
children: [{ title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" }],
|
||||
},
|
||||
{ title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" },
|
||||
{ title: "Máquinas", url: "/admin/machines", icon: MonitorCog, requiredRole: "admin" },
|
||||
{ title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
|
|||
const isManager = normalizedRole === "manager"
|
||||
const canStaffComment = hasAssignee || isManager
|
||||
const canComment = isRequester || (isStaff && canStaffComment)
|
||||
const allowTicketMentions = normalizedRole === "admin" || normalizedRole === "agent"
|
||||
const addComment = useMutation(api.tickets.addComment)
|
||||
const removeAttachment = useMutation(api.tickets.removeCommentAttachment)
|
||||
const updateComment = useMutation(api.tickets.updateComment)
|
||||
|
|
@ -303,6 +304,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
|
|||
}
|
||||
disabled={savingCommentId === commentId}
|
||||
placeholder="Edite o comentário..."
|
||||
ticketMention={{ enabled: allowTicketMentions }}
|
||||
/>
|
||||
<div className="mt-3 flex items-center justify-end gap-2">
|
||||
<Button
|
||||
|
|
@ -381,7 +383,14 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
|
|||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="mt-4 space-y-3">
|
||||
<RichTextEditor value={body} onChange={setBody} placeholder="Escreva um comentário..." className="rounded-2xl border border-slate-200" disabled={!canComment} />
|
||||
<RichTextEditor
|
||||
value={body}
|
||||
onChange={setBody}
|
||||
placeholder="Escreva um comentário..."
|
||||
className="rounded-2xl border border-slate-200"
|
||||
disabled={!canComment}
|
||||
ticketMention={{ enabled: allowTicketMentions }}
|
||||
/>
|
||||
<Dropzone
|
||||
onUploaded={(files) => setAttachmentsToSend((prev) => [...prev, ...files])}
|
||||
currentFileCount={attachmentsToSend.length}
|
||||
|
|
|
|||
|
|
@ -208,6 +208,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
const [pausing, setPausing] = useState(false)
|
||||
const [exportingPdf, setExportingPdf] = useState(false)
|
||||
const [closeOpen, setCloseOpen] = useState(false)
|
||||
const [assigneeChangeReason, setAssigneeChangeReason] = useState("")
|
||||
const [assigneeReasonError, setAssigneeReasonError] = useState<string | null>(null)
|
||||
const selectedCategoryId = categorySelection.categoryId
|
||||
const selectedSubcategoryId = categorySelection.subcategoryId
|
||||
const dirty = useMemo(
|
||||
|
|
@ -321,12 +323,25 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
setAssigneeSelection(currentAssigneeId)
|
||||
throw new Error("assignee-not-allowed")
|
||||
}
|
||||
const reasonValue = assigneeChangeReason.trim()
|
||||
if (reasonValue.length < 5) {
|
||||
setAssigneeReasonError("Descreva o motivo com pelo menos 5 caracteres.")
|
||||
toast.error("Informe um motivo para registrar a troca do responsável.", { id: "assignee" })
|
||||
return
|
||||
}
|
||||
if (reasonValue.length > 1000) {
|
||||
setAssigneeReasonError("Use no máximo 1.000 caracteres.")
|
||||
toast.error("Reduza o motivo para até 1.000 caracteres.", { id: "assignee" })
|
||||
return
|
||||
}
|
||||
setAssigneeReasonError(null)
|
||||
toast.loading("Atualizando responsável...", { id: "assignee" })
|
||||
try {
|
||||
await changeAssignee({
|
||||
ticketId: ticket.id as Id<"tickets">,
|
||||
assigneeId: assigneeSelection as Id<"users">,
|
||||
actorId: convexUserId as Id<"users">,
|
||||
reason: reasonValue,
|
||||
})
|
||||
toast.success("Responsável atualizado!", { id: "assignee" })
|
||||
if (assigneeSelection) {
|
||||
|
|
@ -341,6 +356,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
})
|
||||
}
|
||||
}
|
||||
setAssigneeChangeReason("")
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Não foi possível atualizar o responsável.", { id: "assignee" })
|
||||
|
|
@ -387,11 +403,15 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
})
|
||||
setQueueSelection(currentQueueName)
|
||||
setAssigneeSelection(currentAssigneeId)
|
||||
setAssigneeChangeReason("")
|
||||
setAssigneeReasonError(null)
|
||||
setEditing(false)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (editing) return
|
||||
setAssigneeChangeReason("")
|
||||
setAssigneeReasonError(null)
|
||||
setCategorySelection({
|
||||
categoryId: ticket.category?.id ?? "",
|
||||
subcategoryId: ticket.subcategory?.id ?? "",
|
||||
|
|
@ -1097,6 +1117,28 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
<span className={sectionValueClass}>{assigneeState?.name ?? "Não atribuído"}</span>
|
||||
)}
|
||||
</div>
|
||||
{editing && assigneeDirty ? (
|
||||
<div className="flex flex-col gap-2 sm:col-span-2 lg:col-span-3">
|
||||
<span className={sectionLabelClass}>Motivo da troca</span>
|
||||
<Textarea
|
||||
value={assigneeChangeReason}
|
||||
onChange={(event) => {
|
||||
setAssigneeChangeReason(event.target.value)
|
||||
if (assigneeReasonError) {
|
||||
setAssigneeReasonError(null)
|
||||
}
|
||||
}}
|
||||
placeholder="Explique brevemente por que o chamado será reatribuído..."
|
||||
className="min-h-[96px]"
|
||||
/>
|
||||
<p className="text-xs text-neutral-500">
|
||||
O motivo é registrado como comentário interno visível para administradores e agentes.
|
||||
</p>
|
||||
{assigneeReasonError ? (
|
||||
<p className="text-xs font-semibold text-rose-600">{assigneeReasonError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={sectionLabelClass}>Criado em</span>
|
||||
<span className={sectionValueClass}>{format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,21 @@
|
|||
"use client"
|
||||
|
||||
import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react"
|
||||
import type { ReactNode } from "react"
|
||||
import { useEditor, EditorContent } from "@tiptap/react"
|
||||
import StarterKit from "@tiptap/starter-kit"
|
||||
import Link from "@tiptap/extension-link"
|
||||
import Placeholder from "@tiptap/extension-placeholder"
|
||||
import Mention from "@tiptap/extension-mention"
|
||||
import { ReactRenderer } from "@tiptap/react"
|
||||
import tippy, { type Instance, type Props as TippyProps } from "tippy.js"
|
||||
import { cn } from "@/lib/utils"
|
||||
import sanitize from "sanitize-html"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
|
@ -33,8 +43,356 @@ type RichTextEditorProps = {
|
|||
placeholder?: string
|
||||
disabled?: boolean
|
||||
minHeight?: number
|
||||
ticketMention?: {
|
||||
enabled?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
type TicketMentionItem = {
|
||||
id: string
|
||||
reference: number
|
||||
subject: string
|
||||
status: string
|
||||
priority: string
|
||||
requesterName: string | null
|
||||
assigneeName: string | null
|
||||
companyName: string | null
|
||||
url: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
type TicketMentionSuggestionProps = {
|
||||
command: (item: TicketMentionItem) => void
|
||||
items: TicketMentionItem[]
|
||||
onRegister?: (handler: ((event: KeyboardEvent) => boolean) | null) => void
|
||||
}
|
||||
|
||||
const TICKET_MENTION_CLASS = "ticket-mention"
|
||||
|
||||
function formatMentionSubject(subject: string) {
|
||||
if (!subject) return ""
|
||||
return subject.length > 60 ? `${subject.slice(0, 57)}…` : subject
|
||||
}
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
PENDING: "Pendente",
|
||||
AWAITING_ATTENDANCE: "Em andamento",
|
||||
PAUSED: "Pausado",
|
||||
RESOLVED: "Resolvido",
|
||||
}
|
||||
|
||||
const statusTone: Record<string, string> = {
|
||||
PENDING: "bg-amber-400",
|
||||
AWAITING_ATTENDANCE: "bg-sky-500",
|
||||
PAUSED: "bg-violet-500",
|
||||
RESOLVED: "bg-emerald-500",
|
||||
}
|
||||
|
||||
const priorityLabels: Record<string, string> = {
|
||||
LOW: "Baixa",
|
||||
MEDIUM: "Média",
|
||||
HIGH: "Alta",
|
||||
URGENT: "Urgente",
|
||||
}
|
||||
|
||||
const mentionCache = new Map<string, TicketMentionItem[]>()
|
||||
let mentionAbortController: AbortController | null = null
|
||||
|
||||
async function fetchTicketMentions(query: string): Promise<TicketMentionItem[]> {
|
||||
const cacheKey = query.trim().toLowerCase()
|
||||
if (mentionCache.has(cacheKey)) {
|
||||
return mentionCache.get(cacheKey) ?? []
|
||||
}
|
||||
|
||||
try {
|
||||
mentionAbortController?.abort()
|
||||
mentionAbortController = new AbortController()
|
||||
const response = await fetch(`/api/tickets/mentions?q=${encodeURIComponent(query)}`, {
|
||||
signal: mentionAbortController.signal,
|
||||
})
|
||||
if (!response.ok) {
|
||||
return []
|
||||
}
|
||||
const json = (await response.json()) as { items?: TicketMentionItem[] }
|
||||
const items = Array.isArray(json.items) ? json.items : []
|
||||
mentionCache.set(cacheKey, items)
|
||||
return items
|
||||
} catch (error) {
|
||||
if ((error as Error).name === "AbortError") {
|
||||
return []
|
||||
}
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function TicketMentionList({ items, command, onRegister }: TicketMentionSuggestionProps) {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
|
||||
const selectItem = useCallback(
|
||||
(index: number) => {
|
||||
const item = items[index]
|
||||
if (item) {
|
||||
command(item)
|
||||
}
|
||||
},
|
||||
[command, items]
|
||||
)
|
||||
|
||||
const upHandler = useCallback(() => {
|
||||
setSelectedIndex((prev) => {
|
||||
const nextIndex = (prev + items.length - 1) % items.length
|
||||
return nextIndex
|
||||
})
|
||||
}, [items.length])
|
||||
|
||||
const downHandler = useCallback(() => {
|
||||
setSelectedIndex((prev) => {
|
||||
const nextIndex = (prev + 1) % items.length
|
||||
return nextIndex
|
||||
})
|
||||
}, [items.length])
|
||||
|
||||
const enterHandler = useCallback(() => {
|
||||
selectItem(selectedIndex)
|
||||
}, [selectItem, selectedIndex])
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key === "ArrowUp") {
|
||||
upHandler()
|
||||
return true
|
||||
}
|
||||
if (event.key === "ArrowDown") {
|
||||
downHandler()
|
||||
return true
|
||||
}
|
||||
if (event.key === "Enter") {
|
||||
enterHandler()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
[downHandler, enterHandler, upHandler]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
onRegister?.(handleKeyDown)
|
||||
return () => {
|
||||
onRegister?.(null)
|
||||
}
|
||||
}, [handleKeyDown, onRegister])
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedIndex(0)
|
||||
}, [items])
|
||||
|
||||
if (!items.length) {
|
||||
return (
|
||||
<div className="min-w-[260px] p-3 text-sm text-muted-foreground">
|
||||
Nenhum chamado encontrado com esse termo.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-h-72 min-w-[320px] space-y-1 overflow-y-auto p-2">
|
||||
{items.map((item, index) => {
|
||||
const isActive = index === selectedIndex
|
||||
const status = statusLabels[item.status] ?? item.status
|
||||
const statusDot = statusTone[item.status] ?? "bg-slate-400"
|
||||
const priority = priorityLabels[item.priority] ?? item.priority
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
className={cn(
|
||||
"w-full rounded-lg border border-transparent px-3 py-2 text-left transition",
|
||||
isActive ? "border-slate-200 bg-slate-100" : "hover:bg-slate-50"
|
||||
)}
|
||||
onMouseEnter={() => setSelectedIndex(index)}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault()
|
||||
selectItem(index)
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-neutral-900">#{item.reference}</span>
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-neutral-500">{priority}</span>
|
||||
</div>
|
||||
<div className="mt-1 line-clamp-1 text-sm text-neutral-700">{formatMentionSubject(item.subject)}</div>
|
||||
<div className="mt-1 flex items-center gap-2 text-xs text-neutral-500">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className={cn("inline-flex size-2 rounded-full", statusDot)} />
|
||||
{status}
|
||||
</span>
|
||||
{item.companyName ? <span>• {item.companyName}</span> : null}
|
||||
{item.assigneeName ? <span>• {item.assigneeName}</span> : null}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
TicketMentionList.displayName = "TicketMentionList"
|
||||
|
||||
const TicketMentionListComponent = (props: TicketMentionSuggestionProps) => (
|
||||
<TicketMentionList {...props} />
|
||||
)
|
||||
|
||||
const TicketMentionExtension = Mention.extend({
|
||||
name: "ticketMention",
|
||||
addAttributes() {
|
||||
return {
|
||||
id: { default: null },
|
||||
reference: { default: null },
|
||||
subject: { default: null },
|
||||
status: { default: null },
|
||||
priority: { default: null },
|
||||
url: { default: null },
|
||||
}
|
||||
},
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: `a[data-ticket-mention="true"]`,
|
||||
getAttrs: (dom: HTMLElement | string) => {
|
||||
if (dom instanceof HTMLElement) {
|
||||
return {
|
||||
id: dom.dataset.ticketId ?? null,
|
||||
reference: dom.dataset.ticketReference ?? null,
|
||||
status: dom.dataset.ticketStatus ?? null,
|
||||
priority: dom.dataset.ticketPriority ?? null,
|
||||
subject: dom.getAttribute("data-ticket-subject") ?? dom.textContent ?? null,
|
||||
url: dom.getAttribute("href") ?? null,
|
||||
}
|
||||
}
|
||||
return {}
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
|
||||
const referenceValue =
|
||||
HTMLAttributes.reference ?? HTMLAttributes["data-ticket-reference"] ?? ""
|
||||
const reference = String(referenceValue ?? "")
|
||||
const subjectValue =
|
||||
HTMLAttributes.subject ?? HTMLAttributes["data-ticket-subject"] ?? ""
|
||||
const subject = String(subjectValue ?? "")
|
||||
const status = String(HTMLAttributes.status ?? HTMLAttributes["data-ticket-status"] ?? "PENDING").toUpperCase()
|
||||
const priority = String(HTMLAttributes.priority ?? HTMLAttributes["data-ticket-priority"] ?? "MEDIUM").toUpperCase()
|
||||
const href = String(HTMLAttributes.url ?? HTMLAttributes.href ?? "#")
|
||||
return [
|
||||
"a",
|
||||
{
|
||||
...HTMLAttributes,
|
||||
href,
|
||||
"data-ticket-mention": "true",
|
||||
"data-ticket-id": HTMLAttributes.id ?? HTMLAttributes["data-ticket-id"] ?? "",
|
||||
"data-ticket-reference": reference ?? "",
|
||||
"data-ticket-status": status,
|
||||
"data-ticket-priority": priority,
|
||||
"data-ticket-subject": subject ?? "",
|
||||
class: TICKET_MENTION_CLASS,
|
||||
},
|
||||
[
|
||||
"span",
|
||||
{ class: "ticket-mention-dot" },
|
||||
],
|
||||
[
|
||||
"span",
|
||||
{ class: "ticket-mention-ref" },
|
||||
`#${reference ?? ""}`,
|
||||
],
|
||||
[
|
||||
"span",
|
||||
{ class: "ticket-mention-sep" },
|
||||
"•",
|
||||
],
|
||||
[
|
||||
"span",
|
||||
{ class: "ticket-mention-subject" },
|
||||
formatMentionSubject(subject ?? ""),
|
||||
],
|
||||
]
|
||||
},
|
||||
renderLabel({ node }: { node: { attrs: Record<string, unknown> } }) {
|
||||
const subjectAttr = node.attrs.subject ?? node.attrs["data-ticket-subject"] ?? ""
|
||||
const displayedSubject = typeof subjectAttr === "string" ? subjectAttr : String(subjectAttr ?? "")
|
||||
const refAttr = node.attrs.reference ?? node.attrs.id ?? node.attrs["data-ticket-reference"] ?? ""
|
||||
const reference = typeof refAttr === "string" ? refAttr : String(refAttr ?? "")
|
||||
const subjectPart = displayedSubject ? ` • ${formatMentionSubject(displayedSubject)}` : ""
|
||||
return `#${reference}${subjectPart}`
|
||||
},
|
||||
}).configure({
|
||||
suggestion: {
|
||||
char: "@",
|
||||
startOfLine: false,
|
||||
allowSpaces: false,
|
||||
render: () => {
|
||||
let component: ReactRenderer | null = null
|
||||
let popup: Instance<TippyProps> | null = null
|
||||
let keydownHandler: ((event: KeyboardEvent) => boolean) | null = null
|
||||
const registerHandler = (handler: ((event: KeyboardEvent) => boolean) | null) => {
|
||||
keydownHandler = handler
|
||||
}
|
||||
return {
|
||||
onStart: (props) => {
|
||||
const listProps: TicketMentionSuggestionProps = {
|
||||
command: props.command,
|
||||
items: props.items,
|
||||
onRegister: registerHandler,
|
||||
}
|
||||
component = new ReactRenderer(TicketMentionListComponent, {
|
||||
props: listProps,
|
||||
editor: props.editor,
|
||||
})
|
||||
if (!props.clientRect) return
|
||||
popup = tippy(document.body, {
|
||||
getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
|
||||
appendTo: () => document.body,
|
||||
content: component.element,
|
||||
showOnCreate: true,
|
||||
interactive: true,
|
||||
trigger: "manual",
|
||||
placement: "bottom-start",
|
||||
})
|
||||
},
|
||||
onUpdate(props) {
|
||||
component?.updateProps({
|
||||
command: props.command,
|
||||
items: props.items,
|
||||
onRegister: registerHandler,
|
||||
})
|
||||
if (!props.clientRect) return
|
||||
popup?.setProps({
|
||||
getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
|
||||
})
|
||||
},
|
||||
onKeyDown(props) {
|
||||
if (props.event.key === "Escape") {
|
||||
popup?.hide()
|
||||
return true
|
||||
}
|
||||
if (keydownHandler && keydownHandler(props.event)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
onExit() {
|
||||
popup?.destroy()
|
||||
component?.destroy()
|
||||
keydownHandler = null
|
||||
},
|
||||
}
|
||||
},
|
||||
items: async ({ query }) => {
|
||||
return fetchTicketMentions(query)
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function RichTextEditor({
|
||||
value,
|
||||
onChange,
|
||||
|
|
@ -42,9 +400,10 @@ export function RichTextEditor({
|
|||
placeholder = "Escreva aqui...",
|
||||
disabled,
|
||||
minHeight = 120,
|
||||
ticketMention,
|
||||
}: RichTextEditorProps) {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
const extensions = useMemo(() => {
|
||||
const baseExtensions = [
|
||||
StarterKit.configure({
|
||||
bulletList: { keepMarks: true },
|
||||
orderedList: { keepMarks: true },
|
||||
|
|
@ -56,6 +415,13 @@ export function RichTextEditor({
|
|||
HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
|
||||
}),
|
||||
Placeholder.configure({ placeholder }),
|
||||
]
|
||||
return ticketMention?.enabled ? [...baseExtensions, TicketMentionExtension] : baseExtensions
|
||||
}, [placeholder, ticketMention?.enabled])
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
...extensions,
|
||||
],
|
||||
editorProps: {
|
||||
attributes: {
|
||||
|
|
@ -300,15 +666,48 @@ export function sanitizeEditorHtml(html: string): string {
|
|||
"p","br","a","strong","em","u","s","blockquote","ul","ol","li","code","pre","span","h1","h2","h3"
|
||||
],
|
||||
allowedAttributes: {
|
||||
a: ["href","name","target","rel"],
|
||||
span: ["style"],
|
||||
a: [
|
||||
"href",
|
||||
"name",
|
||||
"target",
|
||||
"rel",
|
||||
"class",
|
||||
"data-ticket-mention",
|
||||
"data-ticket-id",
|
||||
"data-ticket-reference",
|
||||
"data-ticket-status",
|
||||
"data-ticket-priority",
|
||||
"data-ticket-subject",
|
||||
"title",
|
||||
],
|
||||
span: [
|
||||
"style",
|
||||
"class",
|
||||
"data-ticket-mention",
|
||||
"data-ticket-id",
|
||||
"data-ticket-reference",
|
||||
"data-ticket-status",
|
||||
"data-ticket-priority",
|
||||
"data-ticket-subject",
|
||||
],
|
||||
code: ["class"],
|
||||
pre: ["class"],
|
||||
},
|
||||
allowedSchemes: ["http","https","mailto"],
|
||||
// prevent target=_self phishing
|
||||
transformTags: {
|
||||
a: sanitize.simpleTransform("a", { rel: "noopener noreferrer", target: "_blank" }, true),
|
||||
a: (tagName, attribs) => {
|
||||
const isMention = attribs["data-ticket-mention"] === "true"
|
||||
const nextAttribs = {
|
||||
...attribs,
|
||||
rel: attribs.rel ?? "noopener noreferrer",
|
||||
target: isMention ? "_self" : "_blank",
|
||||
}
|
||||
return {
|
||||
tagName,
|
||||
attribs: nextAttribs,
|
||||
}
|
||||
},
|
||||
},
|
||||
// disallow inline event handlers
|
||||
allowVulnerableTags: false,
|
||||
|
|
|
|||
29
tests/change-assignee-comment.test.ts
Normal file
29
tests/change-assignee-comment.test.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { describe, expect, it } from "vitest"
|
||||
|
||||
import { buildAssigneeChangeComment } from "../convex/tickets"
|
||||
|
||||
describe("buildAssigneeChangeComment", () => {
|
||||
it("inclui nomes antigos e novos e quebra o motivo em parágrafos", () => {
|
||||
const html = buildAssigneeChangeComment("Transferir para o time B\nCliente solicitou gestor.", {
|
||||
previousName: "Ana",
|
||||
nextName: "Bruno",
|
||||
})
|
||||
|
||||
expect(html).toContain("Ana")
|
||||
expect(html).toContain("Bruno")
|
||||
expect(html).toContain("<p>Transferir para o time B</p>")
|
||||
expect(html).toContain("<p>Cliente solicitou gestor.</p>")
|
||||
})
|
||||
|
||||
it("escapa caracteres perigosos", () => {
|
||||
const html = buildAssigneeChangeComment("<script>alert(1)</script>", {
|
||||
previousName: "<Ana>",
|
||||
nextName: "Bruno & Co",
|
||||
})
|
||||
|
||||
expect(html).toContain("<Ana>")
|
||||
expect(html).toContain("Bruno & Co")
|
||||
expect(html).not.toContain("<script>")
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue