feat: núcleo de tickets com Convex (CRUD, play, comentários com anexos) + auth placeholder; docs em AGENTS.md; toasts e updates otimistas; mapeadores Zod; refinos PT-BR e layout do painel de detalhes

This commit is contained in:
esdrasrenan 2025-10-04 00:31:44 -03:00
parent 2230590e57
commit 27b103cb46
97 changed files with 15117 additions and 15715 deletions

View file

@ -1,263 +1,263 @@
"use client"
import * as React from "react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import { useIsMobile } from "@/hooks/use-mobile"
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
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")
React.useEffect(() => {
if (isMobile) {
setTimeRange("7d")
}
}, [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
})
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>
</CardDescription>
<CardAction>
<ToggleGroup
type="single"
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
>
<ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
<ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
<ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
</ToggleGroup>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger
className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
size="sm"
aria-label="Selecionar período"
>
<SelectValue placeholder="Últimos 90 dias" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="90d" className="rounded-lg">
Últimos 90 dias
</SelectItem>
<SelectItem value="30d" className="rounded-lg">
Últimos 30 dias
</SelectItem>
<SelectItem value="7d" className="rounded-lg">
Últimos 7 dias
</SelectItem>
</SelectContent>
</Select>
</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>
</CardContent>
</Card>
)
}
"use client"
import * as React from "react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import { useIsMobile } from "@/hooks/use-mobile"
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/toggle-group"
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")
React.useEffect(() => {
if (isMobile) {
setTimeRange("7d")
}
}, [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
})
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>
</CardDescription>
<CardAction>
<ToggleGroup
type="single"
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
>
<ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
<ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
<ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
</ToggleGroup>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger
className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
size="sm"
aria-label="Selecionar período"
>
<SelectValue placeholder="Últimos 90 dias" />
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="90d" className="rounded-lg">
Últimos 90 dias
</SelectItem>
<SelectItem value="30d" className="rounded-lg">
Últimos 30 dias
</SelectItem>
<SelectItem value="7d" className="rounded-lg">
Últimos 7 dias
</SelectItem>
</SelectContent>
</Select>
</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>
</CardContent>
</Card>
)
}