feat: secure convex admin flows with real metrics\n\nCo-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
esdrasrenan
parent
0ec5b49e8a
commit
29a647f6c6
43 changed files with 4992 additions and 363 deletions
|
|
@ -3,6 +3,12 @@
|
|||
import * as React from "react"
|
||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
||||
|
||||
import { useQuery } from "convex/react"
|
||||
// @ts-expect-error Convex runtime API lacks TypeScript declarations
|
||||
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 { useIsMobile } from "@/hooks/use-mobile"
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -18,6 +24,7 @@ import {
|
|||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
|
|
@ -32,85 +39,11 @@ import {
|
|||
|
||||
export const description = "Distribuição semanal de tickets por canal"
|
||||
|
||||
const chartData = [
|
||||
{ date: "2024-07-01", email: 38, whatsapp: 25 },
|
||||
{ date: "2024-07-02", email: 42, whatsapp: 28 },
|
||||
{ date: "2024-07-03", email: 35, whatsapp: 21 },
|
||||
{ date: "2024-07-04", email: 47, whatsapp: 30 },
|
||||
{ date: "2024-07-05", email: 51, whatsapp: 32 },
|
||||
{ date: "2024-07-06", email: 44, whatsapp: 29 },
|
||||
{ date: "2024-07-07", email: 39, whatsapp: 24 },
|
||||
{ date: "2024-07-08", email: 48, whatsapp: 31 },
|
||||
{ date: "2024-07-09", email: 45, whatsapp: 27 },
|
||||
{ date: "2024-07-10", email: 53, whatsapp: 33 },
|
||||
{ date: "2024-07-11", email: 56, whatsapp: 35 },
|
||||
{ date: "2024-07-12", email: 49, whatsapp: 30 },
|
||||
{ date: "2024-07-13", email: 41, whatsapp: 22 },
|
||||
{ date: "2024-07-14", email: 37, whatsapp: 20 },
|
||||
{ date: "2024-07-15", email: 52, whatsapp: 34 },
|
||||
{ date: "2024-07-16", email: 50, whatsapp: 31 },
|
||||
{ date: "2024-07-17", email: 47, whatsapp: 29 },
|
||||
{ date: "2024-07-18", email: 58, whatsapp: 37 },
|
||||
{ date: "2024-07-19", email: 54, whatsapp: 34 },
|
||||
{ date: "2024-07-20", email: 43, whatsapp: 26 },
|
||||
{ date: "2024-07-21", email: 39, whatsapp: 23 },
|
||||
{ date: "2024-07-22", email: 55, whatsapp: 36 },
|
||||
{ date: "2024-07-23", email: 52, whatsapp: 33 },
|
||||
{ date: "2024-07-24", email: 57, whatsapp: 38 },
|
||||
{ date: "2024-07-25", email: 60, whatsapp: 40 },
|
||||
{ date: "2024-07-26", email: 49, whatsapp: 31 },
|
||||
{ date: "2024-07-27", email: 44, whatsapp: 27 },
|
||||
{ date: "2024-07-28", email: 41, whatsapp: 24 },
|
||||
{ date: "2024-07-29", email: 58, whatsapp: 37 },
|
||||
{ date: "2024-07-30", email: 61, whatsapp: 41 },
|
||||
{ date: "2024-07-31", email: 46, whatsapp: 29 },
|
||||
{ date: "2024-08-01", email: 52, whatsapp: 33 },
|
||||
{ date: "2024-08-02", email: 48, whatsapp: 30 },
|
||||
{ date: "2024-08-03", email: 43, whatsapp: 25 },
|
||||
{ date: "2024-08-04", email: 40, whatsapp: 24 },
|
||||
{ date: "2024-08-05", email: 57, whatsapp: 36 },
|
||||
{ date: "2024-08-06", email: 59, whatsapp: 38 },
|
||||
{ date: "2024-08-07", email: 62, whatsapp: 41 },
|
||||
{ date: "2024-08-08", email: 55, whatsapp: 35 },
|
||||
{ date: "2024-08-09", email: 51, whatsapp: 32 },
|
||||
{ date: "2024-08-10", email: 45, whatsapp: 27 },
|
||||
{ date: "2024-08-11", email: 42, whatsapp: 25 },
|
||||
{ date: "2024-08-12", email: 58, whatsapp: 37 },
|
||||
{ date: "2024-08-13", email: 56, whatsapp: 34 },
|
||||
{ date: "2024-08-14", email: 60, whatsapp: 39 },
|
||||
{ date: "2024-08-15", email: 63, whatsapp: 42 },
|
||||
{ date: "2024-08-16", email: 49, whatsapp: 30 },
|
||||
{ date: "2024-08-17", email: 46, whatsapp: 28 },
|
||||
{ date: "2024-08-18", email: 44, whatsapp: 26 },
|
||||
{ date: "2024-08-19", email: 61, whatsapp: 40 },
|
||||
{ date: "2024-08-20", email: 59, whatsapp: 38 },
|
||||
{ date: "2024-08-21", email: 55, whatsapp: 36 },
|
||||
{ date: "2024-08-22", email: 63, whatsapp: 42 },
|
||||
{ date: "2024-08-23", email: 53, whatsapp: 33 },
|
||||
{ date: "2024-08-24", email: 47, whatsapp: 28 },
|
||||
{ date: "2024-08-25", email: 43, whatsapp: 26 },
|
||||
{ date: "2024-08-26", email: 60, whatsapp: 39 },
|
||||
{ date: "2024-08-27", email: 62, whatsapp: 41 },
|
||||
{ date: "2024-08-28", email: 65, whatsapp: 43 },
|
||||
{ date: "2024-08-29", email: 58, whatsapp: 37 },
|
||||
{ date: "2024-08-30", email: 54, whatsapp: 34 },
|
||||
{ date: "2024-08-31", email: 48, whatsapp: 29 },
|
||||
]
|
||||
|
||||
const chartConfig = {
|
||||
email: {
|
||||
label: "E-mail",
|
||||
color: "var(--chart-1)",
|
||||
},
|
||||
whatsapp: {
|
||||
label: "WhatsApp",
|
||||
color: "var(--chart-2)",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export function ChartAreaInteractive() {
|
||||
const isMobile = useIsMobile()
|
||||
const [timeRange, setTimeRange] = React.useState("90d")
|
||||
const { session, convexUserId } = useAuth()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isMobile) {
|
||||
|
|
@ -118,29 +51,60 @@ export function ChartAreaInteractive() {
|
|||
}
|
||||
}, [isMobile])
|
||||
|
||||
const filteredData = chartData.filter((item) => {
|
||||
const date = new Date(item.date)
|
||||
const referenceDate = new Date("2024-08-31")
|
||||
let daysToSubtract = 90
|
||||
if (timeRange === "30d") {
|
||||
daysToSubtract = 30
|
||||
} else if (timeRange === "7d") {
|
||||
daysToSubtract = 7
|
||||
}
|
||||
const startDate = new Date(referenceDate)
|
||||
startDate.setDate(referenceDate.getDate() - daysToSubtract)
|
||||
return date >= startDate
|
||||
})
|
||||
const report = useQuery(
|
||||
api.reports.ticketsByChannel,
|
||||
convexUserId
|
||||
? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange })
|
||||
: "skip"
|
||||
)
|
||||
|
||||
const channels = React.useMemo(() => report?.channels ?? [], [report])
|
||||
|
||||
const palette = React.useMemo(
|
||||
() => [
|
||||
"var(--chart-1)",
|
||||
"var(--chart-2)",
|
||||
"var(--chart-3)",
|
||||
"var(--chart-4)",
|
||||
"var(--chart-5)",
|
||||
],
|
||||
[]
|
||||
)
|
||||
|
||||
const chartConfig = React.useMemo(() => {
|
||||
const entries = channels.map((channel, index) => [
|
||||
channel,
|
||||
{
|
||||
label: channel
|
||||
.toLowerCase()
|
||||
.replace(/_/g, " ")
|
||||
.replace(/\b\w/g, (letter) => letter.toUpperCase()),
|
||||
color: palette[index % palette.length],
|
||||
},
|
||||
])
|
||||
return Object.fromEntries(entries) as ChartConfig
|
||||
}, [channels, palette])
|
||||
|
||||
const chartData = React.useMemo(() => {
|
||||
if (!report?.points) return []
|
||||
return report.points.map((point) => {
|
||||
const entry: Record<string, number | string> = { date: point.date }
|
||||
for (const channel of channels) {
|
||||
entry[channel] = point.values[channel] ?? 0
|
||||
}
|
||||
return entry
|
||||
})
|
||||
}, [channels, report])
|
||||
|
||||
return (
|
||||
<Card className="@container/card">
|
||||
<CardHeader>
|
||||
<CardTitle>Entrada de tickets por canal</CardTitle>
|
||||
<CardDescription>
|
||||
<span className="hidden @[540px]/card:block">
|
||||
Comparativo entre e-mail e WhatsApp
|
||||
</span>
|
||||
<span className="@[540px]/card:hidden">Últimos 90 dias</span>
|
||||
<span className="hidden @[540px]/card:block">
|
||||
Distribuição dos canais nos últimos {timeRange.replace("d", " dias")}
|
||||
</span>
|
||||
<span className="@[540px]/card:hidden">Período: {timeRange}</span>
|
||||
</CardDescription>
|
||||
<CardAction>
|
||||
<ToggleGroup
|
||||
|
|
@ -177,86 +141,83 @@ export function ChartAreaInteractive() {
|
|||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[250px] w-full"
|
||||
>
|
||||
<AreaChart data={filteredData}>
|
||||
<defs>
|
||||
<linearGradient id="fillEmail" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.85}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient id="fillWhatsapp" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--chart-2)"
|
||||
stopOpacity={0.85}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--chart-2)"
|
||||
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", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) =>
|
||||
new Date(value).toLocaleDateString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
})
|
||||
}
|
||||
indicator="dot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Area
|
||||
dataKey="whatsapp"
|
||||
type="natural"
|
||||
fill="url(#fillWhatsapp)"
|
||||
stroke="var(--chart-2)"
|
||||
strokeWidth={2}
|
||||
stackId="a"
|
||||
name={chartConfig.whatsapp.label}
|
||||
/>
|
||||
<Area
|
||||
dataKey="email"
|
||||
type="natural"
|
||||
fill="url(#fillEmail)"
|
||||
stroke="var(--chart-1)"
|
||||
strokeWidth={2}
|
||||
stackId="a"
|
||||
name={chartConfig.email.label}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
{report === undefined ? (
|
||||
<div className="flex h-[250px] items-center justify-center">
|
||||
<Skeleton className="h-24 w-full" />
|
||||
</div>
|
||||
) : chartData.length === 0 || channels.length === 0 ? (
|
||||
<div className="flex h-[250px] items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
|
||||
Sem dados suficientes no período selecionado.
|
||||
</div>
|
||||
) : (
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-auto h-[250px] w-full"
|
||||
>
|
||||
<AreaChart data={chartData}>
|
||||
<defs>
|
||||
{channels.map((channel) => (
|
||||
<linearGradient key={channel} id={`fill-${channel}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor={chartConfig[channel]?.color ?? "var(--chart-1)"}
|
||||
stopOpacity={0.85}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor={chartConfig[channel]?.color ?? "var(--chart-1)"}
|
||||
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", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={
|
||||
<ChartTooltipContent
|
||||
labelFormatter={(value) =>
|
||||
new Date(value).toLocaleDateString("pt-BR", {
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
})
|
||||
}
|
||||
indicator="dot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{channels
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((channel) => (
|
||||
<Area
|
||||
key={channel}
|
||||
dataKey={channel}
|
||||
type="natural"
|
||||
fill={`url(#fill-${channel})`}
|
||||
stroke={chartConfig[channel]?.color ?? "var(--chart-1)"}
|
||||
strokeWidth={2}
|
||||
stackId="a"
|
||||
name={chartConfig[channel]?.label ?? channel}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue