feat: add queue summary widget and layout fixes
This commit is contained in:
Esdras Renan
parent
f7976e2c39
commit
a542846313
12 changed files with 350 additions and 45 deletions
|
|
@ -132,6 +132,29 @@ function areColumnConfigsEqual(a: DeviceInventoryColumnConfig[], b: DeviceInvent
|
|||
return a.every((col, idx) => col.key === b[idx]?.key && (col.label ?? "") === (b[idx]?.label ?? ""))
|
||||
}
|
||||
|
||||
function formatDeviceCustomFieldDisplay(entry?: { value?: unknown; displayValue?: string }): string {
|
||||
if (!entry) return "—"
|
||||
if (typeof entry.displayValue === "string" && entry.displayValue.trim().length > 0) {
|
||||
return entry.displayValue
|
||||
}
|
||||
const raw = entry.value
|
||||
if (raw === null || raw === undefined) return "—"
|
||||
if (Array.isArray(raw)) {
|
||||
const values = raw
|
||||
.map((item) => (item === null || item === undefined ? "" : String(item).trim()))
|
||||
.filter((item) => item.length > 0)
|
||||
return values.length > 0 ? values.join(", ") : "—"
|
||||
}
|
||||
if (typeof raw === "boolean") {
|
||||
return raw ? "Sim" : "Não"
|
||||
}
|
||||
if (typeof raw === "number") {
|
||||
return Number.isFinite(raw) ? String(raw) : "—"
|
||||
}
|
||||
const asString = String(raw).trim()
|
||||
return asString.length > 0 ? asString : "—"
|
||||
}
|
||||
|
||||
type DeviceAlertEntry = {
|
||||
id: string
|
||||
kind: string
|
||||
|
|
@ -886,7 +909,7 @@ export type DevicesQueryItem = {
|
|||
lastPostureAt?: number | null
|
||||
linkedUsers?: Array<{ id: string; email: string; name: string }>
|
||||
remoteAccessEntries: DeviceRemoteAccessEntry[]
|
||||
customFields?: Array<{ fieldKey: string; label: string; type?: string; value: unknown; displayValue?: string }>
|
||||
customFields?: Array<{ fieldId?: string; fieldKey: string; label: string; type?: string; value: unknown; displayValue?: string }>
|
||||
}
|
||||
|
||||
export function normalizeDeviceItem(raw: Record<string, unknown>): DevicesQueryItem {
|
||||
|
|
@ -3421,6 +3444,49 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
|
|||
[deviceFieldDefs]
|
||||
)
|
||||
|
||||
const displayCustomFields = useMemo(() => {
|
||||
const definitions = deviceFieldDefs ?? []
|
||||
const values = device?.customFields ?? []
|
||||
const result: Array<{ key: string; label: string; value: string }> = []
|
||||
const valueMap = new Map<string, (typeof values)[number]>()
|
||||
|
||||
values.forEach((field) => {
|
||||
if (field.fieldId) {
|
||||
valueMap.set(String(field.fieldId), field)
|
||||
}
|
||||
if (field.fieldKey) {
|
||||
valueMap.set(field.fieldKey, field)
|
||||
}
|
||||
})
|
||||
|
||||
const used = new Set<string>()
|
||||
definitions.forEach((definition) => {
|
||||
const idKey = String(definition.id)
|
||||
const valueEntry = valueMap.get(idKey) ?? valueMap.get(definition.key)
|
||||
used.add(idKey)
|
||||
result.push({
|
||||
key: idKey,
|
||||
label: definition.label,
|
||||
value: formatDeviceCustomFieldDisplay(valueEntry),
|
||||
})
|
||||
})
|
||||
|
||||
values.forEach((field) => {
|
||||
const idKey = field.fieldId ? String(field.fieldId) : undefined
|
||||
const keyKey = field.fieldKey ?? field.label
|
||||
const compositeKey = idKey ?? keyKey
|
||||
if (!compositeKey || used.has(compositeKey)) return
|
||||
used.add(compositeKey)
|
||||
result.push({
|
||||
key: compositeKey,
|
||||
label: field.label,
|
||||
value: formatDeviceCustomFieldDisplay(field),
|
||||
})
|
||||
})
|
||||
|
||||
return result
|
||||
}, [deviceFieldDefs, device?.customFields])
|
||||
|
||||
const handleSaveCustomFields = useCallback(async () => {
|
||||
if (!device || !convexUserId) return
|
||||
try {
|
||||
|
|
@ -3550,14 +3616,14 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
|
|||
{/* Campos personalizados (posicionado logo após métricas) */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold text-neutral-900">Campos personalizados</h4>
|
||||
<Badge variant="outline" className="rounded-full px-2.5 py-0.5 text-[11px] font-semibold">
|
||||
{(device.customFields ?? []).length}
|
||||
{displayCustomFields.length}
|
||||
</Badge>
|
||||
</div>
|
||||
{(!device.customFields || device.customFields.length === 0) ? (
|
||||
{displayCustomFields.length === 0 ? (
|
||||
<p className="text-xs text-neutral-500">Nenhum campo personalizado definido para este dispositivo.</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -3575,12 +3641,12 @@ export function DeviceDetails({ device }: DeviceDetailsProps) {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
{device.customFields && device.customFields.length > 0 ? (
|
||||
{displayCustomFields.length > 0 ? (
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{(device.customFields ?? []).map((f, idx) => (
|
||||
<div key={`${f.fieldKey}-${idx}`} className="rounded-lg border border-slate-200 bg-white p-3 text-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">{f.label}</p>
|
||||
<p className="mt-1 text-neutral-800">{(f.displayValue ?? f.value ?? "—") as string}</p>
|
||||
{displayCustomFields.map((field) => (
|
||||
<div key={field.key} className="rounded-lg border border-slate-200 bg-white p-3 text-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">{field.label}</p>
|
||||
<p className="mt-1 text-neutral-800">{field.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -194,13 +194,16 @@ export function DeviceCustomFieldManager({
|
|||
return (
|
||||
<>
|
||||
{triggerButton}
|
||||
<Dialog open={open} onOpenChange={(value) => {
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(value) => {
|
||||
setOpen(value)
|
||||
if (!value) {
|
||||
resetForm()
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="max-w-3xl space-y-5">
|
||||
}}
|
||||
>
|
||||
<DialogContent className="max-w-4xl space-y-5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Campos personalizados de dispositivos</DialogTitle>
|
||||
<DialogDescription>
|
||||
|
|
@ -209,7 +212,7 @@ export function DeviceCustomFieldManager({
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1.2fr_1fr]">
|
||||
<div className="grid gap-6 lg:grid-cols-[1.4fr_1fr] xl:grid-cols-[1.6fr_1fr]">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Campos cadastrados</h3>
|
||||
|
|
|
|||
|
|
@ -206,6 +206,7 @@ const WIDGET_LIBRARY: Array<{
|
|||
{ type: "radar", title: "Gráfico radar", description: "Comparação radial entre dimensões de performance." },
|
||||
{ type: "gauge", title: "Indicador radial", description: "Mede um percentual (0-100%) em formato de gauge." },
|
||||
{ type: "table", title: "Tabela dinâmica", description: "Lista tabular com cabeçalhos personalizáveis e ordenação." },
|
||||
{ type: "queue-summary", title: "Resumo por fila", description: "Cards com pendências, andamento e SLA por fila." },
|
||||
{ type: "text", title: "Bloco de texto", description: "Destaques, insights ou instruções em rich-text." },
|
||||
]
|
||||
|
||||
|
|
@ -230,6 +231,7 @@ const widgetSizePresets: Record<
|
|||
radar: { default: { w: 5, h: 6 }, min: { w: 4, h: 4 }, max: { w: 8, h: 9 } },
|
||||
gauge: { default: { w: 4, h: 5 }, min: { w: 3, h: 4 }, max: { w: 6, h: 7 } },
|
||||
table: { default: { w: 8, h: 8 }, min: { w: 6, h: 5 }, max: { w: 12, h: 12 } },
|
||||
"queue-summary": { default: { w: 12, h: 6 }, min: { w: 8, h: 4 }, max: { w: 12, h: 9 } },
|
||||
text: { default: { w: 6, h: 4 }, min: { w: 4, h: 3 }, max: { w: 10, h: 8 } },
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export type DashboardMetricDefinition = {
|
|||
| "radar"
|
||||
| "gauge"
|
||||
| "table"
|
||||
| "queue-summary"
|
||||
| "text"
|
||||
keywords?: string[]
|
||||
encoding?: MetricEncoding
|
||||
|
|
@ -116,6 +117,15 @@ export const DASHBOARD_METRIC_DEFINITIONS: DashboardMetricDefinition[] = [
|
|||
options: { legend: false, tooltip: true, indicator: "dot", valueFormatter: "percent" },
|
||||
keywords: ["sla", "fila", "percentual", "qualidade"],
|
||||
},
|
||||
{
|
||||
key: "queues.summary_cards",
|
||||
name: "Resumo por fila (cards)",
|
||||
description: "Resumo visual com pendências, andamento e violações de SLA por fila.",
|
||||
defaultTitle: "Resumo das filas",
|
||||
recommendedWidget: "queue-summary",
|
||||
keywords: ["fila", "cards", "pendências", "sla"],
|
||||
audience: "admin",
|
||||
},
|
||||
{
|
||||
key: "tickets.sla_rate",
|
||||
name: "Taxa geral de cumprimento de SLA",
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import { api } from "@/convex/_generated/api"
|
|||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
import { useAuth } from "@/lib/auth-client"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { TicketQueueSummary } from "@/lib/schemas/ticket"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -59,12 +60,14 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { TicketQueueSummaryCards } from "@/components/tickets/ticket-queue-summary"
|
||||
|
||||
const numberFormatter = new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 1 })
|
||||
const percentFormatter = new Intl.NumberFormat("pt-BR", { style: "percent", maximumFractionDigits: 1 })
|
||||
|
||||
const CHART_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"]
|
||||
const DEFAULT_CHART_HEIGHT = 320
|
||||
const PRESENTATION_CHART_HEIGHT = 420
|
||||
|
||||
export type DashboardFilters = {
|
||||
range?: "7d" | "30d" | "90d" | "custom"
|
||||
|
|
@ -330,6 +333,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "line":
|
||||
return renderLineChart({
|
||||
|
|
@ -337,6 +341,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "area":
|
||||
return renderAreaChart({
|
||||
|
|
@ -344,6 +349,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "pie":
|
||||
return renderPieChart({
|
||||
|
|
@ -351,6 +357,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "radar":
|
||||
return renderRadarChart({
|
||||
|
|
@ -358,6 +365,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "gauge":
|
||||
return renderGauge({
|
||||
|
|
@ -365,6 +373,7 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
})
|
||||
case "table":
|
||||
return renderTable({
|
||||
|
|
@ -373,6 +382,14 @@ export function WidgetRenderer({ widget, filters, mode = "edit", onReadyChange }
|
|||
metric,
|
||||
config,
|
||||
isLoading,
|
||||
mode,
|
||||
})
|
||||
case "queue-summary":
|
||||
return renderQueueSummary({
|
||||
title: resolvedTitle,
|
||||
description,
|
||||
metric,
|
||||
isLoading,
|
||||
})
|
||||
case "text":
|
||||
default:
|
||||
|
|
@ -472,11 +489,13 @@ function renderBarChart({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const xKey = config.encoding?.x ?? "date"
|
||||
const series = Array.isArray(config.encoding?.y) ? config.encoding?.y ?? [] : []
|
||||
|
|
@ -493,6 +512,8 @@ function renderBarChart({
|
|||
const yAxisTickFormatter =
|
||||
valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
|
||||
const allowDecimals = valueFormatter === "percent"
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
|
|
@ -502,7 +523,7 @@ function renderBarChart({
|
|||
<ChartContainer
|
||||
config={chartConfig as ChartConfig}
|
||||
className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<BarChart data={chartData} accessibilityLayer>
|
||||
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
||||
|
|
@ -548,11 +569,13 @@ function renderLineChart({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const xKey = config.encoding?.x ?? "date"
|
||||
const series = Array.isArray(config.encoding?.y) ? config.encoding?.y ?? [] : []
|
||||
|
|
@ -569,6 +592,8 @@ function renderLineChart({
|
|||
const allowDecimals = valueFormatter === "percent"
|
||||
const yAxisTickFormatter =
|
||||
valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
|
|
@ -578,7 +603,7 @@ function renderLineChart({
|
|||
<ChartContainer
|
||||
config={chartConfig as ChartConfig}
|
||||
className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<LineChart data={chartData} accessibilityLayer>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
|
|
@ -618,11 +643,13 @@ function renderAreaChart({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const xKey = config.encoding?.x ?? "date"
|
||||
const series = Array.isArray(config.encoding?.y) ? config.encoding?.y ?? [] : []
|
||||
|
|
@ -640,6 +667,8 @@ function renderAreaChart({
|
|||
const allowDecimals = valueFormatter === "percent"
|
||||
const yAxisTickFormatter =
|
||||
valueFormatter === "percent" ? (value: number) => percentFormatter.format(value) : undefined
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
|
|
@ -649,7 +678,7 @@ function renderAreaChart({
|
|||
<ChartContainer
|
||||
config={chartConfig as ChartConfig}
|
||||
className="group/chart h-full w-full px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<AreaChart data={chartData} accessibilityLayer>
|
||||
<defs>
|
||||
|
|
@ -698,17 +727,21 @@ function renderPieChart({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const categoryKey = config.encoding?.category ?? "name"
|
||||
const valueKey = config.encoding?.value ?? "value"
|
||||
const chartData = Array.isArray(metric.data) ? (metric.data as Array<Record<string, unknown>>) : []
|
||||
const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "dot" })
|
||||
const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
{chartData.length === 0 ? (
|
||||
|
|
@ -721,7 +754,7 @@ function renderPieChart({
|
|||
return acc
|
||||
}, {}) as ChartConfig}
|
||||
className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<PieChart>
|
||||
{showTooltip ? (
|
||||
|
|
@ -759,17 +792,21 @@ function renderRadarChart({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const angleKey = config.encoding?.angle ?? "label"
|
||||
const radiusKey = config.encoding?.radius ?? "value"
|
||||
const chartData = Array.isArray(metric.data) ? (metric.data as Array<Record<string, unknown>>) : []
|
||||
const { showLegend, showTooltip, indicator, valueFormatter } = resolveChartOptions(config, { indicator: "line" })
|
||||
const tooltipValueFormatter = (value: unknown) => formatMetricValue(value, valueFormatter)
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
{chartData.length === 0 ? (
|
||||
|
|
@ -778,7 +815,7 @@ function renderRadarChart({
|
|||
<ChartContainer
|
||||
config={{ [radiusKey]: { label: radiusKey, color: "var(--chart-1)" } }}
|
||||
className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<RadarChart data={chartData} accessibilityLayer>
|
||||
<PolarGrid />
|
||||
|
|
@ -813,21 +850,25 @@ function renderGauge({
|
|||
description,
|
||||
metric,
|
||||
config,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const raw = metric.data as { value?: number; total?: number; resolved?: number } | null
|
||||
const value = parseNumeric(raw?.value) ?? 0
|
||||
const display = Math.max(0, Math.min(1, value))
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const minHeight = isPresentation ? PRESENTATION_CHART_HEIGHT : DEFAULT_CHART_HEIGHT
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={metric.isLoading}>
|
||||
<ChartContainer
|
||||
config={{ value: { label: "SLA", color: "var(--chart-1)" } }}
|
||||
className="group/chart flex h-full w-full items-center justify-center px-2 pb-4 [&_.recharts-legend-wrapper]:px-2 [&_.recharts-legend-wrapper]:pb-1 [&_.recharts-default-legend]:flex [&_.recharts-default-legend]:flex-wrap [&_.recharts-default-legend]:justify-center"
|
||||
style={{ minHeight: DEFAULT_CHART_HEIGHT }}
|
||||
style={{ minHeight, height: "100%" }}
|
||||
>
|
||||
<RadialBarChart
|
||||
startAngle={180}
|
||||
|
|
@ -868,12 +909,14 @@ function renderTable({
|
|||
metric,
|
||||
config,
|
||||
isLoading,
|
||||
mode,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
config: WidgetConfig
|
||||
isLoading: boolean
|
||||
mode: WidgetRendererProps["mode"]
|
||||
}) {
|
||||
const columns = Array.isArray(config.columns) && config.columns.length > 0
|
||||
? config.columns
|
||||
|
|
@ -883,29 +926,43 @@ function renderTable({
|
|||
{ field: "updatedAt", label: "Atualizado em" },
|
||||
]
|
||||
const rows = Array.isArray(metric.data) ? (metric.data as Array<Record<string, unknown>>) : []
|
||||
const isPresentation = mode === "tv" || mode === "print"
|
||||
const containerClass = cn(
|
||||
"flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-white/80",
|
||||
isPresentation ? "min-h-[320px]" : "min-h-[260px]",
|
||||
)
|
||||
const scrollClass = cn(
|
||||
"overflow-x-hidden overflow-y-auto",
|
||||
isPresentation ? "max-h-none" : "max-h-[360px]",
|
||||
)
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={isLoading}>
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="flex h-full min-h-[260px] flex-col overflow-hidden rounded-xl border border-border/60 bg-white/80">
|
||||
<div className="max-h-[360px] overflow-auto">
|
||||
<Table className="min-w-full">
|
||||
<div className={containerClass}>
|
||||
<div className={scrollClass}>
|
||||
<Table className="min-w-full table-fixed">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((column) => (
|
||||
<TableHead key={column.field}>{column.label}</TableHead>
|
||||
<TableHead key={column.field} className="whitespace-nowrap">
|
||||
{column.label}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((row, index) => (
|
||||
<TableRow key={index} className="border-b border-border/60 transition hover:bg-muted/40">
|
||||
{columns.map((column) => (
|
||||
<TableCell key={column.field}>
|
||||
{renderTableCellValue(row[column.field as keyof typeof row])}
|
||||
</TableCell>
|
||||
))}
|
||||
{columns.map((column) => {
|
||||
const cellValue = row[column.field as keyof typeof row]
|
||||
return (
|
||||
<TableCell key={column.field} className="whitespace-normal break-words">
|
||||
{renderTableCellValue(cellValue)}
|
||||
</TableCell>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
|
@ -917,6 +974,31 @@ function renderTable({
|
|||
)
|
||||
}
|
||||
|
||||
function renderQueueSummary({
|
||||
title,
|
||||
description,
|
||||
metric,
|
||||
isLoading,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
metric: MetricResult
|
||||
isLoading: boolean
|
||||
}) {
|
||||
const queues = Array.isArray(metric.data) ? (metric.data as TicketQueueSummary[]) : []
|
||||
return (
|
||||
<WidgetCard title={title} description={description} isLoading={isLoading}>
|
||||
{queues.length === 0 ? (
|
||||
<EmptyState />
|
||||
) : (
|
||||
<div className="pb-1">
|
||||
<TicketQueueSummaryCards queues={queues} />
|
||||
</div>
|
||||
)}
|
||||
</WidgetCard>
|
||||
)
|
||||
}
|
||||
|
||||
function renderTableCellValue(value: unknown) {
|
||||
if (typeof value === "number") {
|
||||
return numberFormatter.format(value)
|
||||
|
|
|
|||
|
|
@ -174,9 +174,10 @@ export function TicketCustomFieldsList({ record, emptyMessage, className }: Tick
|
|||
|
||||
type TicketCustomFieldsSectionProps = {
|
||||
ticket: TicketWithDetails
|
||||
hidePreview?: boolean
|
||||
}
|
||||
|
||||
export function TicketCustomFieldsSection({ ticket }: TicketCustomFieldsSectionProps) {
|
||||
export function TicketCustomFieldsSection({ ticket, hidePreview = false }: TicketCustomFieldsSectionProps) {
|
||||
const { convexUserId, role } = useAuth()
|
||||
const canEdit = Boolean(convexUserId && (role === "admin" || role === "agent"))
|
||||
|
||||
|
|
@ -318,10 +319,14 @@ export function TicketCustomFieldsSection({ ticket }: TicketCustomFieldsSectionP
|
|||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<TicketCustomFieldsList
|
||||
record={ticket.customFields}
|
||||
emptyMessage="Nenhum campo adicional preenchido neste chamado."
|
||||
/>
|
||||
{hidePreview ? (
|
||||
<p className="text-xs text-neutral-500">Visualize os valores no resumo principal.</p>
|
||||
) : (
|
||||
<TicketCustomFieldsList
|
||||
record={ticket.customFields}
|
||||
emptyMessage="Nenhum campo adicional preenchido neste chamado."
|
||||
/>
|
||||
)}
|
||||
|
||||
<Dialog open={editorOpen} onOpenChange={setEditorOpen}>
|
||||
<DialogContent className="max-w-3xl gap-4">
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ export function TicketDetailsPanel({ ticket }: TicketDetailsPanelProps) {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<TicketCustomFieldsSection ticket={ticket} />
|
||||
<TicketCustomFieldsSection ticket={ticket} hidePreview />
|
||||
|
||||
<section className="space-y-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,14 @@ interface TicketQueueSummaryProps {
|
|||
export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
|
||||
const { convexUserId, isStaff } = useAuth()
|
||||
const enabled = Boolean(isStaff && convexUserId)
|
||||
const shouldFetch = Boolean(!queues && enabled)
|
||||
const fromServer = useQuery(
|
||||
api.queues.summary,
|
||||
enabled ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> } : "skip"
|
||||
shouldFetch ? { tenantId: DEFAULT_TENANT_ID, viewerId: convexUserId as Id<"users"> } : "skip"
|
||||
) as TicketQueueSummary[] | undefined
|
||||
const data: TicketQueueSummary[] = queues ?? fromServer ?? []
|
||||
|
||||
if (!queues && fromServer === undefined) {
|
||||
if (!queues && shouldFetch && fromServer === undefined) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { Textarea } from "@/components/ui/textarea"
|
|||
import { Spinner } from "@/components/ui/spinner"
|
||||
import { useTicketCategories } from "@/hooks/use-ticket-categories"
|
||||
import { useDefaultQueues } from "@/hooks/use-default-queues"
|
||||
import { mapTicketCustomFields } from "@/lib/ticket-custom-fields"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
|
@ -213,6 +214,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
queuesEnabled ? { tenantId: ticket.tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
|
||||
)
|
||||
const queues: TicketQueueSummary[] = Array.isArray(queuesResult) ? queuesResult : []
|
||||
const customFieldEntries = useMemo(() => mapTicketCustomFields(ticket.customFields), [ticket.customFields])
|
||||
const { categories, isLoading: categoriesLoading } = useTicketCategories(ticket.tenantId)
|
||||
const workSummaryRemote = useQuery(
|
||||
api.tickets.workSummary,
|
||||
|
|
@ -1583,6 +1585,24 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
|
|||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-6 space-y-2">
|
||||
<span className={sectionLabelClass}>Informações adicionais</span>
|
||||
{customFieldEntries.length > 0 ? (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{customFieldEntries.map((entry) => (
|
||||
<div
|
||||
key={entry.key}
|
||||
className="rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-sm"
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">{entry.label}</p>
|
||||
<p className="mt-1 text-sm font-semibold text-neutral-900">{entry.formattedValue}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-neutral-500">Nenhum campo adicional preenchido para este chamado.</p>
|
||||
)}
|
||||
</div>
|
||||
<Dialog open={pauseDialogOpen} onOpenChange={setPauseDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
|
|
|
|||
|
|
@ -51,15 +51,15 @@ function ChartContainer({
|
|||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-slot="chart"
|
||||
data-chart={chartId}
|
||||
className={cn(
|
||||
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-slot="chart"
|
||||
data-chart={chartId}
|
||||
className={cn(
|
||||
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex h-full w-full justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue