Hours report: add company filter (select) and CSV support via companyId; include filter metadata in file name

src/components/reports/hours-report.tsx

@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 
 function formatHours(ms: number) {
   const hours = ms / 3600000
@@ -31,6 +32,7 @@ type HoursItem = {
 export function HoursReport() {
   const [timeRange, setTimeRange] = useState("90d")
   const [query, setQuery] = useState("")
+  const [companyId, setCompanyId] = useState<string>("all")
   const { session, convexUserId } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
 
@@ -40,11 +42,14 @@ export function HoursReport() {
   ) as { rangeDays: number; items: HoursItem[] } | undefined
 
   const items = data?.items ?? []
+  const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
-    if (!q) return items
-    return items.filter((it) => it.name.toLowerCase().includes(q))
-  }, [items, query])
+    let list = items
+    if (companyId !== "all") list = list.filter((it) => String(it.companyId) === companyId)
+    if (q) list = list.filter((it) => it.name.toLowerCase().includes(q))
+    return list
+  }, [items, query, companyId])
 
   return (
     <div className="space-y-6">
@@ -60,13 +65,24 @@ export function HoursReport() {
                 onChange={(e) => setQuery(e.target.value)}
                 className="h-9 w-full min-w-56 sm:w-72"
               />
+              <Select value={companyId} onValueChange={setCompanyId}>
+                <SelectTrigger className="w-full min-w-56 sm:w-64">
+                  <SelectValue placeholder="Todas as empresas" />
+                </SelectTrigger>
+                <SelectContent className="rounded-xl">
+                  <SelectItem value="all">Todas as empresas</SelectItem>
+                  {(companies ?? []).map((c) => (
+                    <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <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>
               <Button asChild size="sm" variant="outline">
-              <a href={`/api/reports/hours-by-client.csv?range=${timeRange}${query ? `&q=${encodeURIComponent(query)}` : ""}`} download>
+              <a href={`/api/reports/hours-by-client.csv?range=${timeRange}${query ? `&q=${encodeURIComponent(query)}` : ""}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
                 Exportar CSV
               </a>
               </Button>