feat: export reports as xlsx and add machine inventory
This commit is contained in:
Esdras Renan
parent
29b865885c
commit
714b199879
34 changed files with 2304 additions and 245 deletions
|
|
@ -88,6 +88,18 @@ type MachineAlertEntry = {
|
|||
severity: string
|
||||
createdAt: number
|
||||
}
|
||||
type MachineTicketSummary = {
|
||||
id: string
|
||||
reference: number
|
||||
subject: string
|
||||
status: string
|
||||
priority: string
|
||||
updatedAt: number
|
||||
createdAt: number
|
||||
machine: { id: string | null; hostname: string | null } | null
|
||||
assignee: { name: string | null; email: string | null } | null
|
||||
}
|
||||
|
||||
|
||||
type DetailLineProps = {
|
||||
label: string
|
||||
|
|
@ -774,6 +786,13 @@ const statusLabels: Record<string, string> = {
|
|||
unknown: "Desconhecida",
|
||||
}
|
||||
|
||||
const TICKET_STATUS_LABELS: Record<string, string> = {
|
||||
PENDING: "Pendente",
|
||||
AWAITING_ATTENDANCE: "Em andamento",
|
||||
PAUSED: "Pausado",
|
||||
RESOLVED: "Resolvido",
|
||||
}
|
||||
|
||||
const statusClasses: Record<string, string> = {
|
||||
online: "border-emerald-500/20 bg-emerald-500/15 text-emerald-600",
|
||||
offline: "border-rose-500/20 bg-rose-500/15 text-rose-600",
|
||||
|
|
@ -1109,7 +1128,16 @@ export function AdminMachinesOverview({ tenantId, initialCompanyFilterSlug = "al
|
|||
.sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
}, [companies, machines])
|
||||
|
||||
const filteredMachines = useMemo(() => {
|
||||
const exportHref = useMemo(() => {
|
||||
const params = new URLSearchParams()
|
||||
if (companyFilterSlug !== "all") {
|
||||
params.set("companyId", companyFilterSlug)
|
||||
}
|
||||
const qs = params.toString()
|
||||
return `/api/reports/machines-inventory.xlsx${qs ? `?${qs}` : ""}`
|
||||
}, [companyFilterSlug])
|
||||
|
||||
const filteredMachines = useMemo(() => {
|
||||
const text = q.trim().toLowerCase()
|
||||
return machines.filter((m) => {
|
||||
if (onlyAlerts && !(Array.isArray(m.postureAlerts) && m.postureAlerts.length > 0)) return false
|
||||
|
|
@ -1202,6 +1230,11 @@ const filteredMachines = useMemo(() => {
|
|||
<span>Somente com alertas</span>
|
||||
</label>
|
||||
<Button variant="outline" onClick={() => { setQ(""); setStatusFilter("all"); setCompanyFilterSlug("all"); setCompanySearch(""); setOnlyAlerts(false) }}>Limpar</Button>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={exportHref} download>
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<LoadingState />
|
||||
|
|
@ -1305,6 +1338,11 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
|||
machine ? { machineId: machine.id as Id<"machines">, limit: 50 } : ("skip" as const)
|
||||
) as MachineAlertEntry[] | undefined
|
||||
const machineAlertsHistory = alertsHistory ?? []
|
||||
const openTickets = useQuery(
|
||||
machine ? api.machines.listOpenTickets : "skip",
|
||||
machine ? { machineId: machine.id as Id<"machines">, limit: 8 } : ("skip" as const)
|
||||
) as MachineTicketSummary[] | undefined
|
||||
const machineTickets = openTickets ?? []
|
||||
const metadata = machine?.inventory ?? null
|
||||
const metrics = machine?.metrics ?? null
|
||||
const metricsCapturedAt = useMemo(() => getMetricsTimestamp(metrics), [metrics])
|
||||
|
|
@ -2175,6 +2213,43 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
|||
<InfoChip key={chip.key} label={chip.label} value={chip.value} icon={chip.icon} tone={chip.tone} />
|
||||
))}
|
||||
</div>
|
||||
<div className="rounded-2xl border border-indigo-100 bg-indigo-50/40 px-4 py-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<h4 className="text-sm font-semibold text-indigo-900">Tickets abertos por esta máquina</h4>
|
||||
<Badge variant="outline" className="border-indigo-200 bg-white text-[11px] font-semibold uppercase tracking-wide text-indigo-700">
|
||||
{machineTickets.length}
|
||||
</Badge>
|
||||
</div>
|
||||
{machineTickets.length === 0 ? (
|
||||
<p className="mt-3 text-xs text-indigo-700">Nenhum chamado em aberto registrado diretamente por esta máquina.</p>
|
||||
) : (
|
||||
<ul className="mt-3 space-y-2">
|
||||
{machineTickets.map((ticket) => (
|
||||
<li
|
||||
key={ticket.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-indigo-200 bg-white px-3 py-2 text-sm shadow-sm"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium text-neutral-900">
|
||||
#{ticket.reference} · {ticket.subject}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Atualizado {formatRelativeTime(new Date(ticket.updatedAt))}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-slate-200 text-[11px] uppercase text-neutral-600">
|
||||
{ticket.priority}
|
||||
</Badge>
|
||||
<Badge className="bg-indigo-600 text-[11px] uppercase tracking-wide text-white">
|
||||
{TICKET_STATUS_LABELS[ticket.status] ?? ticket.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{machine.authEmail ? (
|
||||
<Button size="sm" variant="outline" onClick={copyEmail} className="gap-2 border-dashed">
|
||||
|
|
|
|||
|
|
@ -72,6 +72,10 @@ export type AdminAccount = {
|
|||
role: "MANAGER" | "COLLABORATOR"
|
||||
companyId: string | null
|
||||
companyName: string | null
|
||||
jobTitle: string | null
|
||||
managerId: string | null
|
||||
managerName: string | null
|
||||
managerEmail: string | null
|
||||
tenantId: string
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
|
|
@ -110,6 +114,7 @@ const ROLE_OPTIONS_DISPLAY: ReadonlyArray<{ value: AdminAccount["role"]; label:
|
|||
const DEFAULT_CREATE_ROLE: AdminAccount["role"] = "COLLABORATOR"
|
||||
|
||||
const NO_COMPANY_SELECT_VALUE = "__none__"
|
||||
const NO_MANAGER_SELECT_VALUE = "__no_manager__"
|
||||
|
||||
const NO_CONTACT_VALUE = "__none__"
|
||||
|
||||
|
|
@ -118,6 +123,8 @@ type CreateAccountFormState = {
|
|||
email: string
|
||||
role: AdminAccount["role"]
|
||||
companyId: string
|
||||
jobTitle: string
|
||||
managerId: string
|
||||
}
|
||||
|
||||
function createDefaultAccountForm(): CreateAccountFormState {
|
||||
|
|
@ -126,6 +133,8 @@ function createDefaultAccountForm(): CreateAccountFormState {
|
|||
email: "",
|
||||
role: DEFAULT_CREATE_ROLE,
|
||||
companyId: NO_COMPANY_SELECT_VALUE,
|
||||
jobTitle: "",
|
||||
managerId: NO_MANAGER_SELECT_VALUE,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -188,6 +197,8 @@ function AccountsTable({
|
|||
email: "",
|
||||
role: "COLLABORATOR" as AdminAccount["role"],
|
||||
companyId: "",
|
||||
jobTitle: "",
|
||||
managerId: "",
|
||||
})
|
||||
const [isSavingAccount, setIsSavingAccount] = useState(false)
|
||||
const [isResettingPassword, setIsResettingPassword] = useState(false)
|
||||
|
|
@ -207,6 +218,9 @@ function AccountsTable({
|
|||
return (
|
||||
account.name.toLowerCase().includes(term) ||
|
||||
account.email.toLowerCase().includes(term) ||
|
||||
(account.jobTitle ?? "").toLowerCase().includes(term) ||
|
||||
(account.managerName ?? "").toLowerCase().includes(term) ||
|
||||
(account.managerEmail ?? "").toLowerCase().includes(term) ||
|
||||
(account.companyName ?? "").toLowerCase().includes(term)
|
||||
)
|
||||
})
|
||||
|
|
@ -256,6 +270,34 @@ function AccountsTable({
|
|||
[companies],
|
||||
)
|
||||
|
||||
const managerOptions = useMemo<SearchableComboboxOption[]>(() => {
|
||||
const base: SearchableComboboxOption[] = [
|
||||
{ value: NO_MANAGER_SELECT_VALUE, label: "Sem gestor", keywords: ["nenhum", "sem"] },
|
||||
]
|
||||
const managers = accounts
|
||||
.filter((account) => account.role === "MANAGER")
|
||||
.map((manager) => {
|
||||
const keywords: string[] = [manager.email]
|
||||
if (manager.jobTitle) {
|
||||
keywords.push(manager.jobTitle)
|
||||
}
|
||||
return {
|
||||
value: manager.id,
|
||||
label: manager.name,
|
||||
description: manager.jobTitle ? `${manager.jobTitle} • ${manager.email}` : manager.email,
|
||||
keywords,
|
||||
}
|
||||
})
|
||||
return [...base, ...managers]
|
||||
}, [accounts])
|
||||
|
||||
const editManagerOptions = useMemo<SearchableComboboxOption[]>(() => {
|
||||
if (!editAccountId) return managerOptions
|
||||
return managerOptions.filter(
|
||||
(option) => option.value === NO_MANAGER_SELECT_VALUE || option.value !== editAccountId,
|
||||
)
|
||||
}, [managerOptions, editAccountId])
|
||||
|
||||
const openDeleteDialog = useCallback((ids: string[]) => {
|
||||
setDeleteDialogIds(ids)
|
||||
}, [])
|
||||
|
|
@ -298,6 +340,17 @@ function AccountsTable({
|
|||
email: editAccount.email,
|
||||
role: editAccount.role,
|
||||
companyId: editAccount.companyId ?? "",
|
||||
jobTitle: editAccount.jobTitle ?? "",
|
||||
managerId: editAccount.managerId ?? "",
|
||||
})
|
||||
} else {
|
||||
setEditForm({
|
||||
name: "",
|
||||
email: "",
|
||||
role: "COLLABORATOR" as AdminAccount["role"],
|
||||
companyId: "",
|
||||
jobTitle: "",
|
||||
managerId: "",
|
||||
})
|
||||
}
|
||||
}, [editAccount])
|
||||
|
|
@ -340,12 +393,21 @@ function AccountsTable({
|
|||
return
|
||||
}
|
||||
|
||||
const jobTitleValue = editForm.jobTitle.trim()
|
||||
const managerIdValue = editForm.managerId ? editForm.managerId : null
|
||||
if (managerIdValue && managerIdValue === editAccount.id) {
|
||||
toast.error("Um usuário não pode ser gestor de si mesmo.")
|
||||
return
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: editForm.name.trim(),
|
||||
email: editForm.email.trim().toLowerCase(),
|
||||
role: ROLE_TO_OPTION[editForm.role] ?? "collaborator",
|
||||
tenantId: editAccount.tenantId,
|
||||
companyId: editForm.companyId ? editForm.companyId : null,
|
||||
jobTitle: jobTitleValue.length > 0 ? jobTitleValue : null,
|
||||
managerId: managerIdValue,
|
||||
}
|
||||
|
||||
if (!payload.name) {
|
||||
|
|
@ -424,11 +486,17 @@ function AccountsTable({
|
|||
return
|
||||
}
|
||||
|
||||
const jobTitleValue = createForm.jobTitle.trim()
|
||||
const managerId =
|
||||
createForm.managerId && createForm.managerId !== NO_MANAGER_SELECT_VALUE ? createForm.managerId : null
|
||||
|
||||
const payload = {
|
||||
name,
|
||||
email,
|
||||
role: ROLE_TO_OPTION[createForm.role] ?? "collaborator",
|
||||
tenantId: effectiveTenantId,
|
||||
jobTitle: jobTitleValue.length > 0 ? jobTitleValue : null,
|
||||
managerId,
|
||||
}
|
||||
|
||||
setIsCreatingAccount(true)
|
||||
|
|
@ -587,7 +655,7 @@ function AccountsTable({
|
|||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-[64rem] overflow-hidden rounded-lg border">
|
||||
<div className="min-w-[80rem] overflow-hidden rounded-lg border">
|
||||
<Table className="w-full table-fixed text-sm">
|
||||
<TableHeader className="bg-muted">
|
||||
<TableRow>
|
||||
|
|
@ -599,6 +667,8 @@ function AccountsTable({
|
|||
/>
|
||||
</TableHead>
|
||||
<TableHead className="min-w-[220px] px-4">Usuário</TableHead>
|
||||
<TableHead className="px-4">Cargo</TableHead>
|
||||
<TableHead className="px-4">Gestor</TableHead>
|
||||
<TableHead className="px-4">Empresa</TableHead>
|
||||
<TableHead className="px-4">Papel</TableHead>
|
||||
<TableHead className="px-4">Último acesso</TableHead>
|
||||
|
|
@ -608,7 +678,7 @@ function AccountsTable({
|
|||
<TableBody>
|
||||
{filteredAccounts.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="px-6 py-6 text-center text-sm text-muted-foreground">
|
||||
<TableCell colSpan={8} className="px-6 py-6 text-center text-sm text-muted-foreground">
|
||||
Nenhum usuário encontrado.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -642,6 +712,25 @@ function AccountsTable({
|
|||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{account.jobTitle ? (
|
||||
account.jobTitle
|
||||
) : (
|
||||
<span className="italic text-muted-foreground/70">Sem cargo</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{account.managerName ? (
|
||||
<div className="flex flex-col">
|
||||
<span>{account.managerName}</span>
|
||||
{account.managerEmail ? (
|
||||
<span className="text-xs text-muted-foreground">{account.managerEmail}</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<span className="italic text-muted-foreground/70">Sem gestor</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{account.companyName ?? <span className="italic text-muted-foreground/70">Sem empresa</span>}
|
||||
</TableCell>
|
||||
|
|
@ -778,6 +867,34 @@ function AccountsTable({
|
|||
disabled={isSavingAccount}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="edit-job-title">Cargo</Label>
|
||||
<Input
|
||||
id="edit-job-title"
|
||||
value={editForm.jobTitle}
|
||||
onChange={(event) => setEditForm((prev) => ({ ...prev, jobTitle: event.target.value }))}
|
||||
placeholder="Cargo ou função"
|
||||
disabled={isSavingAccount}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Gestor direto</Label>
|
||||
<SearchableCombobox
|
||||
value={editForm.managerId ? editForm.managerId : NO_MANAGER_SELECT_VALUE}
|
||||
onValueChange={(next) =>
|
||||
setEditForm((prev) => ({
|
||||
...prev,
|
||||
managerId: next === null || next === NO_MANAGER_SELECT_VALUE ? "" : next,
|
||||
}))
|
||||
}
|
||||
options={editManagerOptions}
|
||||
placeholder="Sem gestor definido"
|
||||
searchPlaceholder="Buscar gestor..."
|
||||
allowClear
|
||||
clearLabel="Remover gestor"
|
||||
disabled={isSavingAccount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-border/60 bg-muted/20 p-4">
|
||||
|
|
@ -871,6 +988,34 @@ function AccountsTable({
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="create-job-title">Cargo</Label>
|
||||
<Input
|
||||
id="create-job-title"
|
||||
value={createForm.jobTitle}
|
||||
onChange={(event) => setCreateForm((prev) => ({ ...prev, jobTitle: event.target.value }))}
|
||||
placeholder="Ex.: Analista de Suporte"
|
||||
disabled={isCreatingAccount}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Gestor direto</Label>
|
||||
<SearchableCombobox
|
||||
value={createForm.managerId}
|
||||
onValueChange={(value) =>
|
||||
setCreateForm((prev) => ({
|
||||
...prev,
|
||||
managerId: value === null ? NO_MANAGER_SELECT_VALUE : value,
|
||||
}))
|
||||
}
|
||||
options={managerOptions}
|
||||
placeholder="Sem gestor definido"
|
||||
searchPlaceholder="Buscar gestor..."
|
||||
allowClear
|
||||
clearLabel="Remover gestor"
|
||||
disabled={isCreatingAccount}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Papel</Label>
|
||||
<Select
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ const navigation: NavigationGroup[] = [
|
|||
{ title: "Produtividade", url: "/reports/sla", icon: TrendingUp, requiredRole: "staff" },
|
||||
{ title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
|
||||
{ title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
|
||||
{ title: "Empresas", url: "/reports/company", icon: Building2, requiredRole: "staff" },
|
||||
{ title: "Horas", url: "/reports/hours", icon: Clock4, requiredRole: "staff" },
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -187,10 +187,10 @@ export function ChartAreaInteractive() {
|
|||
{/* Export button aligned at the end */}
|
||||
<Button asChild size="sm" variant="outline" className="sm:ml-1">
|
||||
<a
|
||||
href={`/api/reports/tickets-by-channel.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
|
||||
href={`/api/reports/tickets-by-channel.xlsx?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
|
||||
download
|
||||
>
|
||||
Exportar CSV
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ export function PortalTicketForm() {
|
|||
requesterId: viewerId,
|
||||
categoryId: categoryId as Id<"ticketCategories">,
|
||||
subcategoryId: subcategoryId as Id<"ticketSubcategories">,
|
||||
machineId: machineContext?.machineId ? (machineContext.machineId as Id<"machines">) : undefined,
|
||||
})
|
||||
|
||||
if (plainDescription.length > 0) {
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@ export function BacklogReport() {
|
|||
</ToggleGroup>
|
||||
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={`/api/reports/backlog.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar CSV
|
||||
<a href={`/api/reports/backlog.xlsx?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
355
src/components/reports/company-report.tsx
Normal file
355
src/components/reports/company-report.tsx
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useQuery } from "convex/react"
|
||||
import { api } from "@/convex/_generated/api"
|
||||
import type { Id } from "@/convex/_generated/dataModel"
|
||||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
import { useAuth } from "@/lib/auth-client"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart"
|
||||
import { Area, AreaChart, CartesianGrid, XAxis, Bar, BarChart, Pie, PieChart } from "recharts"
|
||||
|
||||
type CompanyRecord = { id: Id<"companies">; name: string }
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
PENDING: "Pendente",
|
||||
AWAITING_ATTENDANCE: "Em andamento",
|
||||
PAUSED: "Pausado",
|
||||
RESOLVED: "Resolvido",
|
||||
}
|
||||
|
||||
const TICKET_TREND_CONFIG = {
|
||||
opened: {
|
||||
label: "Abertos",
|
||||
color: "var(--chart-1)",
|
||||
},
|
||||
resolved: {
|
||||
label: "Resolvidos",
|
||||
color: "var(--chart-2)",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
const MACHINE_STATUS_CONFIG = {
|
||||
online: { label: "Online", color: "var(--chart-1)" },
|
||||
offline: { label: "Offline", color: "var(--chart-2)" },
|
||||
stale: { label: "Sem sinal", color: "var(--chart-3)" },
|
||||
maintenance: { label: "Manutenção", color: "var(--chart-4)" },
|
||||
blocked: { label: "Bloqueada", color: "var(--chart-5)" },
|
||||
deactivated: { label: "Desativada", color: "var(--chart-6)" },
|
||||
unknown: { label: "Desconhecida", color: "var(--muted)" },
|
||||
} satisfies ChartConfig
|
||||
|
||||
export function CompanyReport() {
|
||||
const { session, convexUserId, isStaff } = useAuth()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
const [selectedCompany, setSelectedCompany] = useState<string>("")
|
||||
const [timeRange, setTimeRange] = useState<"7d" | "30d" | "90d">("30d")
|
||||
|
||||
const companies = useQuery(api.companies.list, isStaff && convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as CompanyRecord[] | undefined
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCompany && companies && companies.length > 0) {
|
||||
setSelectedCompany(companies[0].id)
|
||||
}
|
||||
}, [companies, selectedCompany])
|
||||
|
||||
const report = useQuery(
|
||||
api.reports.companyOverview,
|
||||
selectedCompany && convexUserId && isStaff
|
||||
? {
|
||||
tenantId,
|
||||
viewerId: convexUserId as Id<"users">,
|
||||
companyId: selectedCompany as Id<"companies">,
|
||||
range: timeRange,
|
||||
}
|
||||
: "skip"
|
||||
)
|
||||
|
||||
const isLoading = selectedCompany !== "" && report === undefined
|
||||
|
||||
const openTickets = ((report?.tickets.open ?? []) as Array<{
|
||||
id: string
|
||||
reference: number
|
||||
subject: string
|
||||
status: string
|
||||
priority: string
|
||||
updatedAt: number
|
||||
}>).slice(0, 6)
|
||||
|
||||
const openTicketCount = (() => {
|
||||
const source = report?.tickets.byStatus ?? {}
|
||||
return Object.entries(source).reduce((acc, [status, total]) => {
|
||||
if (status === "RESOLVED") return acc
|
||||
return acc + (typeof total === "number" ? total : 0)
|
||||
}, 0)
|
||||
})()
|
||||
|
||||
const statusData = Object.entries(report?.tickets.byStatus ?? {}).map(([status, value]) => ({
|
||||
status,
|
||||
value: typeof value === "number" ? value : 0,
|
||||
}))
|
||||
|
||||
const osData = (report?.machines.byOs ?? []).map((item: { label: string; value: number }, index: number) => ({
|
||||
...item,
|
||||
fill: `var(--chart-${(index % 6) + 1})`,
|
||||
}))
|
||||
|
||||
if (!isStaff) {
|
||||
return (
|
||||
<Card className="border-slate-200">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">Somente a equipe interna pode acessar este relatório.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (companies && companies.length === 0) {
|
||||
return (
|
||||
<Card className="border-slate-200">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-muted-foreground">Nenhuma empresa disponível para gerar relatórios.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-semibold text-neutral-900">Visão consolidada por empresa</h2>
|
||||
<p className="text-sm text-neutral-500">Acompanhe tickets, inventário e colaboradores de um cliente específico.</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Select value={selectedCompany} onValueChange={setSelectedCompany} disabled={!companies?.length}>
|
||||
<SelectTrigger className="w-[220px] rounded-xl border-slate-200">
|
||||
<SelectValue placeholder="Selecione a empresa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl">
|
||||
{(companies ?? []).map((company) => (
|
||||
<SelectItem key={company.id} value={company.id as string}>
|
||||
{company.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={timeRange} onValueChange={(value) => setTimeRange(value as typeof timeRange)}>
|
||||
<SelectTrigger className="w-[160px] rounded-xl border-slate-200">
|
||||
<SelectValue placeholder="Período" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl">
|
||||
<SelectItem value="7d">Últimos 7 dias</SelectItem>
|
||||
<SelectItem value="30d">Últimos 30 dias</SelectItem>
|
||||
<SelectItem value="90d">Últimos 90 dias</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!report || isLoading ? (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-24 w-full rounded-2xl" />
|
||||
<Skeleton className="h-72 w-full rounded-2xl" />
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Skeleton className="h-72 w-full rounded-2xl" />
|
||||
<Skeleton className="h-72 w-full rounded-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Tickets em aberto</CardTitle>
|
||||
<CardDescription className="text-neutral-600">Chamados associados a esta empresa.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">{openTicketCount}</CardContent>
|
||||
</Card>
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Máquinas monitoradas</CardTitle>
|
||||
<CardDescription className="text-neutral-600">Inventário registrado nesta empresa.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">{report.machines.total}</CardContent>
|
||||
</Card>
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Colaboradores ativos</CardTitle>
|
||||
<CardDescription className="text-neutral-600">Usuários vinculados à empresa.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">{report.users.total}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Abertura x resolução de tickets</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Comparativo diário no período selecionado.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 pb-6 sm:px-6">
|
||||
<ChartContainer config={TICKET_TREND_CONFIG} className="aspect-auto h-[280px] w-full">
|
||||
<AreaChart data={report.tickets.trend}>
|
||||
<defs>
|
||||
<linearGradient id="trendOpened" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--color-opened)" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="var(--color-opened)" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
<linearGradient id="trendResolved" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="var(--color-resolved)" stopOpacity={0.8} />
|
||||
<stop offset="95%" stopColor="var(--color-resolved)" stopOpacity={0.1} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
tickFormatter={(value) => {
|
||||
const date = new Date(value)
|
||||
return date.toLocaleDateString("pt-BR", { day: "2-digit", month: "short" })
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) =>
|
||||
new Date(value).toLocaleDateString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area dataKey="opened" type="monotone" stroke="var(--color-opened)" fill="url(#trendOpened)" strokeWidth={2} />
|
||||
<Area dataKey="resolved" type="monotone" stroke="var(--color-resolved)" fill="url(#trendResolved)" strokeWidth={2} />
|
||||
<ChartLegend content={<ChartLegendContent />} />
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1.2fr_1fr]">
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Distribuição de status dos tickets</CardTitle>
|
||||
<CardDescription className="text-neutral-600">Status atuais dos chamados da empresa.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 pb-6 sm:px-6">
|
||||
<ChartContainer config={{}} className="aspect-auto h-[280px] w-full">
|
||||
<BarChart data={statusData}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="status"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => STATUS_LABELS[value] ?? value}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
nameKey="value"
|
||||
labelFormatter={(value) => STATUS_LABELS[value] ?? value}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Bar dataKey="value" fill="var(--chart-3)" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Sistemas operacionais</CardTitle>
|
||||
<CardDescription className="text-neutral-600">Inventário das máquinas desta empresa.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pb-6">
|
||||
<ChartContainer config={MACHINE_STATUS_CONFIG} className="mx-auto aspect-square max-h-[240px]">
|
||||
<PieChart>
|
||||
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
|
||||
<Pie data={osData} dataKey="value" nameKey="label" label />
|
||||
</PieChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Tickets recentes (máximo 6)</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Chamados em aberto para a empresa filtrada.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{openTickets.length === 0 ? (
|
||||
<p className="rounded-xl border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
|
||||
Nenhum chamado aberto no período selecionado.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{openTickets.map((ticket) => (
|
||||
<li
|
||||
key={ticket.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-sm"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold text-neutral-900">
|
||||
#{ticket.reference} · {ticket.subject}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">
|
||||
Atualizado{" "}
|
||||
{new Date(ticket.updatedAt).toLocaleString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="border-slate-200 text-[11px] uppercase text-neutral-600">
|
||||
{ticket.priority}
|
||||
</Badge>
|
||||
<Badge className="bg-indigo-600 text-[11px] uppercase tracking-wide text-white">
|
||||
{STATUS_LABELS[ticket.status] ?? ticket.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -82,8 +82,8 @@ export function CsatReport() {
|
|||
</ToggleGroup>
|
||||
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={`/api/reports/csat.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar CSV
|
||||
<a href={`/api/reports/csat.xlsx?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -193,10 +193,10 @@ export function HoursReport() {
|
|||
</ToggleGroup>
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a
|
||||
href={`/api/reports/hours-by-client.csv?range=${timeRange}${query ? `&q=${encodeURIComponent(query)}` : ""}${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
|
||||
href={`/api/reports/hours-by-client.xlsx?range=${timeRange}${query ? `&q=${encodeURIComponent(query)}` : ""}${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
|
||||
download
|
||||
>
|
||||
Exportar CSV
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -164,8 +164,8 @@ export function SlaReport() {
|
|||
</ToggleGroup>
|
||||
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={`/api/reports/sla.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar CSV
|
||||
<a href={`/api/reports/sla.xlsx?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
|
||||
Exportar XLSX
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -258,13 +258,21 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
|
|||
message = "Fila alterada" + (payload.queueName ? " para " + payload.queueName : "")
|
||||
}
|
||||
if (entry.type === "REQUESTER_CHANGED") {
|
||||
const payloadRequest = payload as { requesterName?: string | null; requesterEmail?: string | null; requesterId?: string | null; companyName?: string | null }
|
||||
const name = payloadRequest.requesterName || payloadRequest.requesterEmail || payloadRequest.requesterId
|
||||
const company = payloadRequest.companyName
|
||||
if (name && company) {
|
||||
message = `Solicitante alterado para ${name} (${company})`
|
||||
} else if (name) {
|
||||
message = `Solicitante alterado para ${name}`
|
||||
const payloadRequest = payload as {
|
||||
requesterName?: string | null
|
||||
requesterEmail?: string | null
|
||||
requesterId?: string | null
|
||||
companyName?: string | null
|
||||
}
|
||||
const name = payloadRequest.requesterName?.trim()
|
||||
const email = payloadRequest.requesterEmail?.trim()
|
||||
const fallback = payloadRequest.requesterId ?? null
|
||||
const identifier = name ? (email ? `${name} · ${email}` : name) : email ?? fallback
|
||||
const company = payloadRequest.companyName?.trim()
|
||||
if (identifier && company) {
|
||||
message = `Solicitante alterado para ${identifier} • Empresa: ${company}`
|
||||
} else if (identifier) {
|
||||
message = `Solicitante alterado para ${identifier}`
|
||||
} else if (company) {
|
||||
message = `Solicitante associado à empresa ${company}`
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue