esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: aprimora upload/anexos e regras de atendimento no portal

Browse source
This commit is contained in:
Esdras Renan 2025-10-16 03:01:27 -03:00
parent 7e8023ed87
commit c90e99820f
8 changed files with 218 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/desktop/src/main.tsx
View file

@ -607,10 +607,14 @@ function App() {
)}
</div>
{validatedCompany ? (
<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
<div className="text-sm font-semibold text-emerald-800">{validatedCompany.name}</div>
<div>Tenant:&nbsp;<span className="font-mono text-emerald-800">{validatedCompany.tenantId}</span></div>
<div>Slug:&nbsp;<span className="font-mono text-emerald-800">{validatedCompany.slug}</span></div>
<div className="flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
<span className="mt-1 inline-flex size-2 rounded-full bg-emerald-500" aria-hidden="true" />
<div className="space-y-1">
<span className="block text-sm font-semibold text-emerald-800">{validatedCompany.name}</span>
<span className="text-xs text-emerald-700/80">
Código reconhecido. Esta máquina será vinculada automaticamente à empresa informada.
</span>
</div>
</div>
) : null}
<div className="grid gap-2">

60
convex/tickets.ts
View file

@ -973,6 +973,7 @@ export const changeAssignee = mutation({
}
const ticketDoc = ticket as Doc<"tickets">
const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
const isAdmin = viewer.role === "ADMIN"
const assignee = (await ctx.db.get(assigneeId)) as Doc<"users"> | null
if (!assignee || assignee.tenantId !== ticketDoc.tenantId) {
throw new ConvexError("Responsável inválido")
@ -980,6 +981,11 @@ export const changeAssignee = mutation({
if (viewer.role === "MANAGER") {
throw new ConvexError("Gestores não podem reatribuir chamados")
}
const currentAssigneeId = ticketDoc.assigneeId ?? null
if (currentAssigneeId && currentAssigneeId !== actorId && !isAdmin) {
throw new ConvexError("Somente o responsável atual pode reatribuir este chamado")
}
const now = Date.now();
await ctx.db.patch(ticketId, { assigneeId, updatedAt: now });
await ctx.db.insert("ticketEvents", {
@ -1165,12 +1171,28 @@ export const startWork = mutation({
if (!ticket) {
throw new ConvexError("Ticket não encontrado")
}
await requireStaff(ctx, actorId, ticket.tenantId)
if (ticket.activeSessionId) {
return { status: "already_started", sessionId: ticket.activeSessionId }
const ticketDoc = ticket as Doc<"tickets">
const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
const isAdmin = viewer.role === "ADMIN"
const currentAssigneeId = ticketDoc.assigneeId ?? null
if (currentAssigneeId && currentAssigneeId !== actorId && !isAdmin) {
throw new ConvexError("Somente o responsável atual pode iniciar este chamado")
}
if (ticketDoc.activeSessionId) {
return { status: "already_started", sessionId: ticketDoc.activeSessionId }
}
const now = Date.now()
let assigneePatched = false
if (!currentAssigneeId) {
await ctx.db.patch(ticketId, { assigneeId: actorId, updatedAt: now })
ticketDoc.assigneeId = actorId
assigneePatched = true
}
const sessionId = await ctx.db.insert("ticketWorkSessions", {
ticketId,
agentId: actorId,
@ -1184,11 +1206,25 @@ export const startWork = mutation({
updatedAt: now,
})
const actor = (await ctx.db.get(actorId)) as Doc<"users"> | null
if (assigneePatched) {
await ctx.db.insert("ticketEvents", {
ticketId,
type: "ASSIGNEE_CHANGED",
payload: { assigneeId: actorId, assigneeName: viewer.user.name, actorId },
createdAt: now,
})
}
await ctx.db.insert("ticketEvents", {
ticketId,
type: "WORK_STARTED",
payload: { actorId, actorName: actor?.name, actorAvatar: actor?.avatarUrl, sessionId, workType: (workType ?? "INTERNAL").toUpperCase() },
payload: {
actorId,
actorName: viewer.user.name,
actorAvatar: viewer.user.avatarUrl,
sessionId,
workType: (workType ?? "INTERNAL").toUpperCase(),
},
createdAt: now,
})
@ -1208,8 +1244,14 @@ export const pauseWork = mutation({
if (!ticket) {
throw new ConvexError("Ticket não encontrado")
}
await requireStaff(ctx, actorId, ticket.tenantId)
if (!ticket.activeSessionId) {
const ticketDoc = ticket as Doc<"tickets">
const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
const isAdmin = viewer.role === "ADMIN"
if (ticketDoc.assigneeId && ticketDoc.assigneeId !== actorId && !isAdmin) {
throw new ConvexError("Somente o responsável atual pode pausar este chamado")
}
if (!ticketDoc.activeSessionId) {
return { status: "already_paused" }
}
@ -1217,7 +1259,7 @@ export const pauseWork = mutation({
throw new ConvexError("Motivo de pausa inválido")
}
const session = await ctx.db.get(ticket.activeSessionId)
const session = await ctx.db.get(ticketDoc.activeSessionId)
if (!session) {
await ctx.db.patch(ticketId, { activeSessionId: undefined, working: false })
return { status: "session_missing" }
@ -1226,7 +1268,7 @@ export const pauseWork = mutation({
const now = Date.now()
const durationMs = now - session.startedAt
await ctx.db.patch(ticket.activeSessionId, {
await ctx.db.patch(ticketDoc.activeSessionId, {
stoppedAt: now,
durationMs,
pauseReason: reason,

4
src/app/portal/profile/page.tsx
View file

@ -12,7 +12,9 @@ export const metadata: Metadata = {
export default async function PortalProfilePage() {
const session = await requireAuthenticatedSession()
const role = (session.user.role ?? "").toLowerCase()
if (role !== "collaborator" && role !== "manager") {
const persona = (session.user.machinePersona ?? "").toLowerCase()
const allowed = role === "collaborator" || role === "manager" || persona === "collaborator" || persona === "manager"
if (!allowed) {
redirect("/portal")
}

1
src/components/admin/machines/admin-machines-overview.tsx
View file

@ -1962,6 +1962,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ machineId: machine.id }),
credentials: "include",
})
if (!res.ok) throw new Error(`HTTP ${res.status}`)
toast.success("Máquina excluída")

2
src/components/tickets/status-badge.tsx
View file

@ -17,7 +17,7 @@ export function TicketStatusBadge({ status, className }: TicketStatusBadgeProps)
const parsed = ticketStatusSchema.parse(status)
const styles = statusStyles[parsed]
return (
<Badge className={cn("inline-flex items-center rounded-full px-3 py-0.5 text-xs font-semibold", styles?.className, className)}>
<Badge className={cn("inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-semibold", styles?.className, className)}>
{styles?.label ?? parsed}
</Badge>
)

17
src/components/tickets/ticket-comments.rich.tsx
View file

@ -17,7 +17,7 @@ import { Button } from "@/components/ui/button"
import { toast } from "sonner"
import { Dropzone } from "@/components/ui/dropzone"
import { RichTextEditor, RichTextContent, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
@ -505,15 +505,18 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
</DialogContent>
</Dialog>
<Dialog open={!!preview} onOpenChange={(open) => !open && setPreview(null)}>
<DialogContent className="max-w-3xl p-0">
<DialogHeader className="sr-only">
<DialogTitle>Visualização de anexo</DialogTitle>
<DialogContent className="max-w-3xl border border-slate-200 p-0">
<DialogHeader className="flex items-center justify-between gap-3 px-4 py-3">
<DialogTitle className="text-base font-semibold text-neutral-800">Visualização do anexo</DialogTitle>
<DialogClose className="inline-flex size-7 items-center justify-center rounded-full border border-slate-200 bg-white text-neutral-600 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400/30">
<X className="size-4" />
</DialogClose>
</DialogHeader>
{preview ? (
<>
<div className="rounded-b-2xl">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={preview} alt="Preview" className="h-auto w-full rounded-xl" />
</>
<img src={preview} alt="Preview do anexo" className="h-auto w-full rounded-b-2xl" />
</div>
) : null}
</DialogContent>
</Dialog>

110
src/components/tickets/ticket-summary-header.tsx
View file

@ -89,7 +89,9 @@ function formatDuration(durationMs: number) {
export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
const { convexUserId, role, isStaff } = useAuth()
const isManager = role === "manager"
const normalizedRole = (role ?? "").toLowerCase()
const isManager = normalizedRole === "manager"
const isAdmin = normalizedRole === "admin"
useDefaultQueues(ticket.tenantId)
const changeAssignee = useMutation(api.tickets.changeAssignee)
const changeQueue = useMutation(api.tickets.changeQueue)
@ -138,6 +140,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
subcategoryId: ticket.subcategory?.id ?? "",
}
)
const currentAssigneeId = ticket.assignee?.id ?? ""
const [assigneeSelection, setAssigneeSelection] = useState(currentAssigneeId)
const [saving, setSaving] = useState(false)
const [pauseDialogOpen, setPauseDialogOpen] = useState(false)
const [pauseReason, setPauseReason] = useState<string>(PAUSE_REASONS[0]?.value ?? "NO_CONTACT")
@ -159,13 +163,20 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
const isAvulso = Boolean(((ticket.company ?? null) as { isAvulso?: boolean } | null)?.isAvulso ?? false)
const [queueSelection, setQueueSelection] = useState(currentQueueName)
const queueDirty = useMemo(() => queueSelection !== currentQueueName, [queueSelection, currentQueueName])
const formDirty = dirty || categoryDirty || queueDirty
const assigneeDirty = useMemo(() => assigneeSelection !== currentAssigneeId, [assigneeSelection, currentAssigneeId])
const formDirty = dirty || categoryDirty || queueDirty || assigneeDirty
const activeCategory = useMemo(
() => categories.find((category) => category.id === selectedCategoryId) ?? null,
[categories, selectedCategoryId]
)
const secondaryOptions = useMemo(() => activeCategory?.secondary ?? [], [activeCategory])
const hasAssignee = Boolean(currentAssigneeId)
const isCurrentResponsible = hasAssignee && convexUserId ? currentAssigneeId === convexUserId : false
const canControlWork = isAdmin || !hasAssignee || isCurrentResponsible
const canPauseWork = isAdmin || isCurrentResponsible
const pauseDisabled = !canPauseWork
const startDisabled = !canControlWork
async function handleSave() {
if (!convexUserId || !formDirty) {
@ -225,6 +236,31 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
setQueueSelection(currentQueueName)
}
if (assigneeDirty && !isManager) {
if (!assigneeSelection) {
toast.error("Selecione um responsável válido.", { id: "assignee" })
setAssigneeSelection(currentAssigneeId)
throw new Error("invalid-assignee")
} else {
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">,
})
toast.success("Responsável atualizado!", { id: "assignee" })
} catch (error) {
console.error(error)
toast.error("Não foi possível atualizar o responsável.", { id: "assignee" })
setAssigneeSelection(currentAssigneeId)
throw error
}
}
} else if (assigneeDirty && isManager) {
setAssigneeSelection(currentAssigneeId)
}
if (dirty) {
toast.loading("Salvando alterações...", { id: "save-header" })
if (subject !== ticket.subject) {
@ -259,6 +295,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
subcategoryId: currentSubcategoryId,
})
setQueueSelection(currentQueueName)
setAssigneeSelection(currentAssigneeId)
setEditing(false)
}
@ -269,6 +306,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
subcategoryId: ticket.subcategory?.id ?? "",
})
setQueueSelection(ticket.queue ?? "")
setAssigneeSelection(ticket.assignee?.id ?? "")
}, [editing, ticket.category?.id, ticket.subcategory?.id, ticket.queue])
useEffect(() => {
@ -387,8 +425,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
} else {
toast.success("Atendimento iniciado", { id: "work" })
}
} catch {
toast.error("Não foi possível atualizar o atendimento", { id: "work" })
} catch (error) {
const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
toast.error(message, { id: "work" })
}
}
@ -410,8 +449,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
toast.success("Atendimento pausado", { id: "work" })
}
setPauseDialogOpen(false)
} catch {
toast.error("Não foi possível atualizar o atendimento", { id: "work" })
} catch (error) {
const message = error instanceof Error ? error.message : "Não foi possível atualizar o atendimento"
toast.error(message, { id: "work" })
} finally {
setPausing(false)
}
@ -506,16 +546,41 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
requesterName={ticket.requester?.name ?? ticket.requester?.email ?? null}
/>
{isPlaying ? (
<Button
size="sm"
className={pauseButtonClass}
onClick={() => {
if (!convexUserId) return
setPauseDialogOpen(true)
}}
>
<IconPlayerPause className="size-4 text-white" /> Pausar
</Button>
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex">
<Button
size="sm"
className={pauseButtonClass}
onClick={() => {
if (!convexUserId || pauseDisabled) return
setPauseDialogOpen(true)
}}
disabled={pauseDisabled}
>
<IconPlayerPause className="size-4 text-white" /> Pausar
</Button>
</span>
</TooltipTrigger>
{pauseDisabled ? (
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
Apenas o responsável atual ou um administrador pode pausar o atendimento.
</TooltipContent>
) : null}
</Tooltip>
) : startDisabled ? (
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex">
<Button size="sm" className={startButtonClass} disabled>
<IconPlayerPlay className="size-4 text-white" /> Iniciar
</Button>
</span>
</TooltipTrigger>
<TooltipContent className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-neutral-700 shadow-lg">
Apenas o responsável atual ou um administrador pode iniciar este atendimento.
</TooltipContent>
</Tooltip>
) : (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -666,17 +731,10 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
{editing ? (
<Select
disabled={isManager}
value={ticket.assignee?.id ?? ""}
onValueChange={async (value) => {
if (!convexUserId) return
value={assigneeSelection}
onValueChange={(value) => {
if (isManager) return
toast.loading("Atribuindo responsável...", { id: "assignee" })
try {
await changeAssignee({ ticketId: ticket.id as Id<"tickets">, assigneeId: value as Id<"users">, actorId: convexUserId as Id<"users"> })
toast.success("Responsável atualizado!", { id: "assignee" })
} catch {
toast.error("Não foi possível atribuir.", { id: "assignee" })
}
setAssigneeSelection(value)
}}
>
<SelectTrigger className={selectTriggerClass}>

86
src/components/ui/dropzone.tsx
View file

@ -5,7 +5,7 @@ import { api } from "@/convex/_generated/api";
import { useCallback, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { Spinner } from "@/components/ui/spinner";
import { Upload } from "lucide-react";
import { Upload, Check, X, AlertCircle } from "lucide-react";
import { Progress } from "@/components/ui/progress";
type Uploaded = { storageId: string; name: string; size?: number; type?: string; previewUrl?: string };
@ -26,7 +26,9 @@ export function Dropzone({
const generateUrl = useAction(api.files.generateUploadUrl);
const inputRef = useRef<HTMLInputElement>(null);
const [drag, setDrag] = useState(false);
const [items, setItems] = useState<Array<{ id: string; name: string; progress: number; status: "idle" | "uploading" | "done" | "error" }>>([]);
const [items, setItems] = useState<
Array<{ id: string; name: string; progress: number; status: "uploading" | "done" | "error" }>
>([]);
const startUpload = useCallback(async (files: FileList | File[]) => {
const list = Array.from(files).slice(0, maxFiles);
@ -55,29 +57,25 @@ export function Dropzone({
const res = JSON.parse(xhr.responseText);
if (res?.storageId) {
uploaded.push({ storageId: res.storageId, name: file.name, size: file.size, type: file.type, previewUrl: localPreview });
setItems((prev) => prev.map((it) => (it.id === id ? { ...it, progress: 100, status: "done" } : it)));
setTimeout(() => {
setItems((prev) => prev.filter((it) => it.id !== id));
}, 600);
setItems((prev) =>
prev.map((it) => (it.id === id ? { ...it, progress: 100, status: "done" } : it))
);
} else {
setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
setTimeout(() => {
setItems((prev) => prev.filter((it) => it.id !== id));
}, 1200);
setItems((prev) =>
prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
);
}
} catch {
setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
setTimeout(() => {
setItems((prev) => prev.filter((it) => it.id !== id));
}, 1200);
setItems((prev) =>
prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
);
}
resolve();
};
xhr.onerror = () => {
setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status: "error" } : it)));
setTimeout(() => {
setItems((prev) => prev.filter((it) => it.id !== id));
}, 1200);
setItems((prev) =>
prev.map((it) => (it.id === id ? { ...it, status: "error" } : it))
);
resolve();
};
xhr.send(file);
@ -130,15 +128,51 @@ export function Dropzone({
</div>
{items.length > 0 && (
<div className="space-y-2">
{items.map((it) => (
<div key={it.id} className="flex items-center justify-between gap-3 rounded-md border p-2 text-sm">
<span className="truncate">{it.name}</span>
<div className="flex min-w-[140px] items-center gap-2">
<Progress value={it.progress} className="h-1.5 w-24" />
<span className="w-10 text-right text-xs text-neutral-500">{it.progress}%</span>
{items.map((it) => {
const isUploading = it.status === "uploading";
const isDone = it.status === "done";
const isError = it.status === "error";
return (
<div key={it.id} className="flex items-center justify-between gap-3 rounded-md border p-2 text-sm">
<div className="flex flex-1 items-center gap-3 overflow-hidden">
<span className="truncate">{it.name}</span>
{isError ? (
<span className="inline-flex items-center gap-1 text-xs text-rose-600">
<AlertCircle className="size-3.5" /> Falhou
</span>
) : null}
</div>
<div className="flex items-center gap-2">
{isUploading ? (
<>
<Progress value={it.progress} className="h-1.5 w-24" />
<span className="w-10 text-right text-xs text-neutral-500">{it.progress}%</span>
</>
) : (
<>
<span
className={cn(
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
isDone ? "bg-emerald-50 text-emerald-700" : "bg-rose-50 text-rose-700"
)}
>
{isDone ? <Check className="size-3.5" /> : <AlertCircle className="size-3.5" />}
{isDone ? "Pronto" : "Erro"}
</span>
<button
type="button"
className="inline-flex size-7 items-center justify-center rounded-full border border-slate-200 bg-white text-neutral-600 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300"
aria-label="Remover item"
onClick={() => setItems((prev) => prev.filter((item) => item.id !== it.id))}
>
<X className="size-3.5" />
</button>
</>
)}
</div>
</div>
</div>
))}
)
})}
</div>
)}
</div>