feat(reports): hours by client (CSV + UI), company contracted hours, UI to manage companies; adjust ticket list spacing
This commit is contained in:
Esdras Renan
parent
3bafcc5a0a
commit
70f91f5bbd
10 changed files with 294 additions and 4 deletions
|
|
@ -23,6 +23,7 @@ type Company = {
|
|||
name: string
|
||||
slug: string
|
||||
isAvulso: boolean
|
||||
contractedHoursPerMonth?: number | null
|
||||
cnpj: string | null
|
||||
domain: string | null
|
||||
phone: string | null
|
||||
|
|
@ -145,6 +146,16 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
|
|||
<Label>Endereço</Label>
|
||||
<Input value={form.address ?? ""} onChange={(e) => setForm((p) => ({ ...p, address: e.target.value }))} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>Horas contratadas/mês</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
step="0.25"
|
||||
value={form.contractedHoursPerMonth ?? ""}
|
||||
onChange={(e) => setForm((p) => ({ ...p, contractedHoursPerMonth: e.target.value === "" ? undefined : Number(e.target.value) }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 md:col-span-2">
|
||||
<Checkbox
|
||||
checked={Boolean(form.isAvulso ?? false)}
|
||||
|
|
@ -210,4 +221,3 @@ export function AdminCompaniesManager({ initialCompanies }: { initialCompanies:
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
|
|||
{ title: "SLA e produtividade", url: "/reports/sla", icon: Gauge, requiredRole: "staff" },
|
||||
{ title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
|
||||
{ title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
|
||||
{ title: "Horas por cliente", url: "/reports/hours", icon: Gauge, requiredRole: "staff" },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
99
src/components/reports/hours-report.tsx
Normal file
99
src/components/reports/hours-report.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
"use client"
|
||||
|
||||
import { useState, useMemo } from "react"
|
||||
import { useQuery } from "convex/react"
|
||||
|
||||
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 { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
|
||||
|
||||
function formatHours(ms: number) {
|
||||
const hours = ms / 3600000
|
||||
return hours.toFixed(2)
|
||||
}
|
||||
|
||||
export function HoursReport() {
|
||||
const [timeRange, setTimeRange] = useState("90d")
|
||||
const { session, convexUserId } = useAuth()
|
||||
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
|
||||
|
||||
const data = useQuery(
|
||||
api.reports.hoursByClient,
|
||||
convexUserId ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange } : "skip"
|
||||
) as { rangeDays: number; items: Array<{ companyId: string; name: string; isAvulso: boolean; internalMs: number; externalMs: number; totalMs: number; contractedHoursPerMonth?: number | null }> } | undefined
|
||||
|
||||
const items = data?.items ?? []
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<Card className="border-slate-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Horas por cliente</CardTitle>
|
||||
<CardDescription>Horas internas e externas registradas por empresa.</CardDescription>
|
||||
<CardAction className="flex items-center gap-2">
|
||||
<Button asChild size="sm" variant="outline">
|
||||
<a href={`/api/reports/hours-by-client.csv?range=${timeRange}`} download>
|
||||
Exportar CSV
|
||||
</a>
|
||||
</Button>
|
||||
<ToggleGroup type="single" value={timeRange} onValueChange={setTimeRange} variant="outline" className="hidden md:flex">
|
||||
<ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
|
||||
<ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
|
||||
<ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full table-fixed text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
|
||||
<th className="py-2 pr-4">Cliente</th>
|
||||
<th className="py-2 pr-4">Avulso</th>
|
||||
<th className="py-2 pr-4">Horas internas</th>
|
||||
<th className="py-2 pr-4">Horas externas</th>
|
||||
<th className="py-2 pr-4">Total</th>
|
||||
<th className="py-2 pr-4">Contratadas/mês</th>
|
||||
<th className="py-2 pr-4">Uso</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-200">
|
||||
{items.map((row) => {
|
||||
const totalH = Number(formatHours(row.totalMs))
|
||||
const contracted = row.contractedHoursPerMonth ?? null
|
||||
const pct = contracted ? Math.round((totalH / contracted) * 100) : null
|
||||
const pctBadgeVariant = pct !== null && pct >= 90 ? "destructive" : "secondary"
|
||||
return (
|
||||
<tr key={row.companyId}>
|
||||
<td className="py-2 pr-4 font-medium text-neutral-900">{row.name}</td>
|
||||
<td className="py-2 pr-4">{row.isAvulso ? "Sim" : "Não"}</td>
|
||||
<td className="py-2 pr-4">{formatHours(row.internalMs)}</td>
|
||||
<td className="py-2 pr-4">{formatHours(row.externalMs)}</td>
|
||||
<td className="py-2 pr-4 font-semibold text-neutral-900">{formatHours(row.totalMs)}</td>
|
||||
<td className="py-2 pr-4">{contracted ?? "—"}</td>
|
||||
<td className="py-2 pr-4">
|
||||
{pct !== null ? (
|
||||
<Badge variant={pctBadgeVariant as any} className="rounded-full px-3 py-1 text-[11px] uppercase tracking-wide">
|
||||
{pct}%
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-500">—</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue