feat: portal reopen, reports, templates and remote access
This commit is contained in:
Esdras Renan
parent
6a75a0a9ed
commit
52c03ff1cf
16 changed files with 1387 additions and 16 deletions
291
src/components/reports/machine-category-report.tsx
Normal file
291
src/components/reports/machine-category-report.tsx
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import { useQuery } from "convex/react"
|
||||
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
||||
|
||||
import { api } from "@/convex/_generated/api"
|
||||
import type { Id } from "@/convex/_generated/dataModel"
|
||||
import { useAuth } from "@/lib/auth-client"
|
||||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { ReportsFilterToolbar } from "@/components/reports/report-filter-toolbar"
|
||||
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
|
||||
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
|
||||
import { formatDateDM } from "@/lib/utils"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
type MachineCategoryDailyItem = {
|
||||
date: string
|
||||
machineId: string | null
|
||||
machineHostname: string | null
|
||||
companyId: string | null
|
||||
companyName: string | null
|
||||
categoryId: string | null
|
||||
categoryName: string
|
||||
total: number
|
||||
}
|
||||
|
||||
type MachineCategoryReportData = {
|
||||
rangeDays: number
|
||||
items: MachineCategoryDailyItem[]
|
||||
}
|
||||
|
||||
export function MachineCategoryReport() {
|
||||
const [timeRange, setTimeRange] = useState("30d")
|
||||
const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
|
||||
const { session, convexUserId, isStaff } = useAuth()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
|
||||
const enabled = Boolean(isStaff && convexUserId)
|
||||
|
||||
const data = useQuery(
|
||||
api.reports.ticketsByMachineAndCategory,
|
||||
enabled
|
||||
? ({
|
||||
tenantId,
|
||||
viewerId: convexUserId as Id<"users">,
|
||||
range: timeRange,
|
||||
companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
|
||||
} as const)
|
||||
: "skip"
|
||||
) as MachineCategoryReportData | undefined
|
||||
|
||||
const companies = useQuery(
|
||||
api.companies.list,
|
||||
enabled ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
||||
) as Array<{ id: Id<"companies">; name: string }> | undefined
|
||||
|
||||
const companyOptions = useMemo<SearchableComboboxOption[]>(() => {
|
||||
const base: SearchableComboboxOption[] = [{ value: "all", label: "Todas as empresas" }]
|
||||
if (!companies || companies.length === 0) {
|
||||
return base
|
||||
}
|
||||
const sorted = [...companies].sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
||||
return [
|
||||
base[0],
|
||||
...sorted.map((company) => ({
|
||||
value: company.id,
|
||||
label: company.name,
|
||||
})),
|
||||
]
|
||||
}, [companies])
|
||||
|
||||
const items = useMemo(() => data?.items ?? [], [data])
|
||||
|
||||
const totals = useMemo(
|
||||
() =>
|
||||
items.reduce(
|
||||
(acc, item) => {
|
||||
acc.totalTickets += item.total
|
||||
acc.machines.add(item.machineId ?? item.machineHostname ?? "sem-maquina")
|
||||
acc.categories.add(item.categoryName)
|
||||
return acc
|
||||
},
|
||||
{
|
||||
totalTickets: 0,
|
||||
machines: new Set<string>(),
|
||||
categories: new Set<string>(),
|
||||
}
|
||||
),
|
||||
[items]
|
||||
)
|
||||
|
||||
const dailySeries = useMemo(
|
||||
() => {
|
||||
const map = new Map<string, number>()
|
||||
for (const item of items) {
|
||||
const current = map.get(item.date) ?? 0
|
||||
map.set(item.date, current + item.total)
|
||||
}
|
||||
return Array.from(map.entries())
|
||||
.map(([date, total]) => ({ date, total }))
|
||||
.sort((a, b) => a.date.localeCompare(b.date))
|
||||
},
|
||||
[items]
|
||||
)
|
||||
|
||||
const tableRows = useMemo(
|
||||
() =>
|
||||
[...items].sort((a, b) => {
|
||||
if (a.date !== b.date) return b.date.localeCompare(a.date)
|
||||
const machineA = (a.machineHostname ?? "").toLowerCase()
|
||||
const machineB = (b.machineHostname ?? "").toLowerCase()
|
||||
if (machineA !== machineB) return machineA.localeCompare(machineB)
|
||||
return a.categoryName.localeCompare(b.categoryName, "pt-BR")
|
||||
}),
|
||||
[items]
|
||||
)
|
||||
|
||||
if (!enabled) {
|
||||
return (
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">Máquinas x categorias</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Este relatório está disponível apenas para a equipe interna.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-16 rounded-2xl" />
|
||||
<Skeleton className="h-64 rounded-2xl" />
|
||||
<Skeleton className="h-80 rounded-2xl" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<ReportsFilterToolbar
|
||||
companyId={companyId}
|
||||
onCompanyChange={(value) => setCompanyId(value)}
|
||||
companyOptions={companyOptions}
|
||||
timeRange={timeRange as "90d" | "30d" | "7d"}
|
||||
onTimeRangeChange={(value) => setTimeRange(value)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Chamados analisados
|
||||
</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Total de tickets com máquina vinculada no período.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">
|
||||
{totals.totalTickets}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Máquinas únicas
|
||||
</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Quantidade de dispositivos diferentes com chamados no período.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">
|
||||
{totals.machines.size}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
Categorias
|
||||
</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Categorias distintas associadas aos tickets dessas máquinas.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-3xl font-semibold text-neutral-900">
|
||||
{totals.categories.size}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">
|
||||
Volume diário por máquina (total)
|
||||
</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Quantidade de chamados com máquina vinculada, somando todas as categorias, por dia.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{dailySeries.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
|
||||
Nenhum ticket com máquina vinculada foi encontrado para o período selecionado.
|
||||
</p>
|
||||
) : (
|
||||
<ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
|
||||
<BarChart data={dailySeries} margin={{ top: 8, left: 20, right: 20, bottom: 32 }}>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={24}
|
||||
tickFormatter={(value) => formatDateDM(new Date(String(value)))}
|
||||
/>
|
||||
<ChartTooltip
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
className="w-[180px]"
|
||||
labelFormatter={(value) => formatDateDM(new Date(String(value)))}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Bar dataKey="total" fill="var(--chart-1)" radius={[4, 4, 0, 0]} name="Chamados" />
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">
|
||||
Detalhamento diário por máquina e categoria
|
||||
</CardTitle>
|
||||
<CardDescription className="text-neutral-600">
|
||||
Cada linha representa o total de chamados abertos em uma data específica, agrupados por
|
||||
máquina e categoria.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{tableRows.length === 0 ? (
|
||||
<p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
|
||||
Nenhum ticket com máquina vinculada foi encontrado para o período selecionado.
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-2xl border border-slate-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-neutral-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left">Data</th>
|
||||
<th className="px-4 py-3 text-left">Máquina</th>
|
||||
<th className="px-4 py-3 text-left">Empresa</th>
|
||||
<th className="px-4 py-3 text-left">Categoria</th>
|
||||
<th className="px-4 py-3 text-right">Chamados</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tableRows.map((row, index) => {
|
||||
const machineLabel =
|
||||
row.machineHostname && row.machineHostname.trim().length > 0
|
||||
? row.machineHostname
|
||||
: "Sem hostname"
|
||||
const companyLabel = row.companyName ?? "Sem empresa"
|
||||
return (
|
||||
<tr key={`${row.date}-${machineLabel}-${row.categoryName}-${index}`} className="border-t border-slate-100">
|
||||
<td className="px-4 py-2 text-neutral-800">
|
||||
{formatDateDM(new Date(`${row.date}T00:00:00Z`))}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-neutral-800">{machineLabel}</td>
|
||||
<td className="px-4 py-2 text-neutral-700">{companyLabel}</td>
|
||||
<td className="px-4 py-2 text-neutral-700">{row.categoryName}</td>
|
||||
<td className="px-4 py-2 text-right font-semibold text-neutral-900">{row.total}</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue