Atualiza portal e admin com bloqueio de máquinas desativadas
This commit is contained in:
Esdras Renan
parent
e5085962e9
commit
630110bf3a
31 changed files with 1756 additions and 244 deletions
|
|
@ -15,6 +15,7 @@ import { useAuth } from "@/lib/auth-client"
|
|||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Dropzone } from "@/components/ui/dropzone"
|
||||
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
|
@ -60,13 +61,26 @@ type ClientTimelineEntry = {
|
|||
}
|
||||
|
||||
export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
||||
const { convexUserId, session, isCustomer } = useAuth()
|
||||
const { convexUserId, session, isCustomer, machineContext } = useAuth()
|
||||
const addComment = useMutation(api.tickets.addComment)
|
||||
const getFileUrl = useAction(api.files.getUrl)
|
||||
const [comment, setComment] = useState("")
|
||||
const [attachments, setAttachments] = useState<
|
||||
Array<{ storageId: string; name: string; size?: number; type?: string; previewUrl?: string }>
|
||||
>([])
|
||||
const attachmentsTotalBytes = useMemo(
|
||||
() => attachments.reduce((acc, item) => acc + (item.size ?? 0), 0),
|
||||
[attachments]
|
||||
)
|
||||
const [previewAttachment, setPreviewAttachment] = useState<{ url: string; name: string; type?: string } | null>(null)
|
||||
const isPreviewImage = useMemo(() => {
|
||||
if (!previewAttachment) return false
|
||||
const type = previewAttachment.type ?? ""
|
||||
if (type.startsWith("image/")) return true
|
||||
const name = previewAttachment.name ?? ""
|
||||
return /\.(png|jpe?g|gif|webp|svg)$/i.test(name)
|
||||
}, [previewAttachment])
|
||||
const machineInactive = machineContext?.isActive === false
|
||||
|
||||
const ticketRaw = useQuery(
|
||||
api.tickets.getById,
|
||||
|
|
@ -225,6 +239,10 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
const updatedAgo = formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })
|
||||
async function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
if (machineInactive) {
|
||||
toast.error("Esta máquina está desativada. Reative-a para enviar novas mensagens.")
|
||||
return
|
||||
}
|
||||
if (!convexUserId || !comment.trim() || !ticket) return
|
||||
const toastId = "portal-add-comment"
|
||||
toast.loading("Enviando comentário...", { id: toastId })
|
||||
|
|
@ -303,8 +321,13 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6 px-5 pb-6">
|
||||
{machineInactive ? (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
|
||||
Esta máquina está desativada. Ative-a novamente para enviar novas mensagens.
|
||||
</div>
|
||||
) : null}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
<label htmlFor="comment" className="text-sm font-medium text-neutral-800">
|
||||
Enviar uma mensagem para a equipe
|
||||
</label>
|
||||
|
|
@ -313,12 +336,16 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
onChange={(html) => setComment(html)}
|
||||
placeholder="Descreva o que aconteceu, envie atualizações ou compartilhe novas informações."
|
||||
className="rounded-2xl border border-slate-200 shadow-sm focus-within:border-neutral-900 focus-within:ring-neutral-900/20"
|
||||
disabled={machineInactive}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Dropzone
|
||||
onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
|
||||
className="rounded-xl border border-dashed border-slate-300 bg-slate-50 px-3 py-4 text-sm text-neutral-600 shadow-inner"
|
||||
currentFileCount={attachments.length}
|
||||
currentTotalBytes={attachmentsTotalBytes}
|
||||
disabled={machineInactive}
|
||||
/>
|
||||
{attachments.length > 0 ? (
|
||||
<div className="grid max-w-xl grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-3">
|
||||
|
|
@ -371,10 +398,9 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<p className="text-xs text-neutral-500">Máximo 5MB • Até 5 arquivos</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" className="rounded-full bg-neutral-900 px-6 text-sm font-semibold text-white hover:bg-neutral-900/90">
|
||||
<Button type="submit" disabled={machineInactive} className="rounded-full bg-neutral-900 px-6 text-sm font-semibold text-white hover:bg-neutral-900/90 disabled:opacity-60">
|
||||
Enviar comentário
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -429,6 +455,7 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
key={attachment.id}
|
||||
attachment={attachment}
|
||||
getFileUrl={getFileUrl}
|
||||
onOpenPreview={(payload) => setPreviewAttachment(payload)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -465,6 +492,38 @@ export function PortalTicketDetail({ ticketId }: PortalTicketDetailProps) {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Dialog open={!!previewAttachment} onOpenChange={(open) => { if (!open) setPreviewAttachment(null) }}>
|
||||
<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">
|
||||
{previewAttachment?.name ?? "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>
|
||||
{previewAttachment ? (
|
||||
isPreviewImage ? (
|
||||
<div className="rounded-b-2xl bg-neutral-900/5">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={previewAttachment.url} alt={previewAttachment.name ?? "Anexo"} className="h-auto w-full rounded-b-2xl" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 px-6 pb-6 text-sm text-neutral-700">
|
||||
<p>Não é possível visualizar este tipo de arquivo aqui. Abra em uma nova aba para conferi-lo.</p>
|
||||
<a
|
||||
href={previewAttachment.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-neutral-800 transition hover:bg-slate-100"
|
||||
>
|
||||
Abrir em nova aba
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -488,7 +547,15 @@ function DetailItem({ label, value, subtitle }: DetailItemProps) {
|
|||
type CommentAttachment = TicketWithDetails["comments"][number]["attachments"][number]
|
||||
type GetFileUrlAction = (args: { storageId: Id<"_storage"> }) => Promise<string | null>
|
||||
|
||||
function PortalCommentAttachmentCard({ attachment, getFileUrl }: { attachment: CommentAttachment; getFileUrl: GetFileUrlAction }) {
|
||||
function PortalCommentAttachmentCard({
|
||||
attachment,
|
||||
getFileUrl,
|
||||
onOpenPreview,
|
||||
}: {
|
||||
attachment: CommentAttachment
|
||||
getFileUrl: GetFileUrlAction
|
||||
onOpenPreview: (payload: { url: string; name: string; type?: string }) => void
|
||||
}) {
|
||||
const [url, setUrl] = useState<string | null>(attachment.url ?? null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errored, setErrored] = useState(false)
|
||||
|
|
@ -532,10 +599,13 @@ function PortalCommentAttachmentCard({ attachment, getFileUrl }: { attachment: C
|
|||
|
||||
const handlePreview = useCallback(async () => {
|
||||
const target = await ensureUrl()
|
||||
if (target) {
|
||||
window.open(target, "_blank", "noopener,noreferrer")
|
||||
if (!target) return
|
||||
if (isImageType) {
|
||||
onOpenPreview({ url: target, name: attachment.name ?? "Anexo", type: attachment.type ?? undefined })
|
||||
return
|
||||
}
|
||||
}, [ensureUrl])
|
||||
window.open(target, "_blank", "noopener,noreferrer")
|
||||
}, [attachment.name, attachment.type, ensureUrl, isImageType, onOpenPreview])
|
||||
|
||||
const handleDownload = useCallback(async () => {
|
||||
const target = await ensureUrl()
|
||||
|
|
|
|||
|
|
@ -41,12 +41,16 @@ export function PortalTicketList() {
|
|||
if (isLoading) {
|
||||
return (
|
||||
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<CardHeader className="flex items-center gap-2 px-5 py-5">
|
||||
<Spinner className="size-4 text-neutral-500" />
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Carregando chamados...</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-5 pb-6 text-sm text-neutral-600">
|
||||
Estamos buscando seus chamados mais recentes. Isso deve levar apenas alguns instantes.
|
||||
<CardContent className="flex h-56 flex-col items-center justify-center gap-3 px-5 text-center">
|
||||
<div className="inline-flex size-12 items-center justify-center rounded-full border border-slate-200 bg-slate-50">
|
||||
<Spinner className="size-5 text-neutral-600" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Carregando chamados...</CardTitle>
|
||||
<p className="text-sm text-neutral-600">
|
||||
Estamos buscando seus chamados mais recentes. Isso deve levar apenas alguns instantes.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue