esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(reports): hours by client (CSV + UI), company contracted hours, UI to manage companies; adjust ticket list spacing

Browse source
This commit is contained in:
Esdras Renan 2025-10-07 14:04:36 -03:00
parent 3bafcc5a0a
commit 70f91f5bbd
10 changed files with 294 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/components/reports/hours-report.tsx Normal file
View 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>
)
}