fix: improvements for frontend

apps/start/src/routes/_app.$organizationId.$projectId.tsx

@@ -1,5 +1,7 @@
-import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+  OverviewFilterButton,
+  OverviewFiltersButtons,
+} from '@/components/overview/filters/overview-filters-buttons';
 import { LiveCounter } from '@/components/overview/live-counter';
 import { OverviewInterval } from '@/components/overview/overview-interval';
 import OverviewMetrics from '@/components/overview/overview-metrics';
@@ -35,7 +37,7 @@ function ProjectDashboard() {
           <div className="flex gap-2">
             <OverviewRange />
             <OverviewInterval />
-            <OverviewFiltersDrawer projectId={projectId} mode="events" />
+            <OverviewFilterButton mode="events" />
           </div>
           <div className="flex gap-2">
             <LiveCounter projectId={projectId} />

apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx

@@ -1,4 +1,5 @@
 import { EventsTable } from '@/components/events/table';
+import { useEventQueryNamesFilter } from '@/hooks/use-event-query-filters';
 import { useTRPC } from '@/integrations/trpc/react';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
@@ -18,12 +19,14 @@ function Component() {
     parseAsIsoDateTime,
   );
   const [endDate, setEndDate] = useQueryState('endDate', parseAsIsoDateTime);
+  const [eventNames] = useEventQueryNamesFilter();
   const query = useInfiniteQuery(
     trpc.event.conversions.infiniteQueryOptions(
       {
         projectId,
         startDate: startDate || undefined,
         endDate: endDate || undefined,
+        events: eventNames,
       },
       {
         getNextPageParam: (lastPage) => lastPage.meta.next,

apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx

@@ -1,5 +1,7 @@
-import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+  OverviewFilterButton,
+  OverviewFiltersButtons,
+} from '@/components/overview/filters/overview-filters-buttons';
 import { ReportChartShortcut } from '@/components/report-chart/shortcut';
 import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
 import {
@@ -34,11 +36,7 @@ function Component() {
   return (
     <div>
       <div className="mb-2 flex items-center gap-2">
-        <OverviewFiltersDrawer
-          mode="events"
-          projectId={projectId}
-          enableEventsFilter
-        />
+        <OverviewFilterButton enableEventsFilter />
         <OverviewFiltersButtons className="justify-end p-0" />
       </div>
       <div className="grid grid-cols-1 gap-2 md:grid-cols-2">

apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx

@@ -1,5 +1,5 @@
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import { OverviewFilterButton } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewInterval } from '@/components/overview/overview-interval';
 import { OverviewRange } from '@/components/overview/overview-range';
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
@@ -79,7 +79,7 @@ function Component() {
       <TableButtons>
         <OverviewRange />
         <OverviewInterval />
-        <OverviewFiltersDrawer projectId={projectId} mode="events" />
+        <OverviewFilterButton enableEventsFilter />
         <Input
           className="self-auto"
           placeholder="Search path"

apps/start/src/routes/_app.$organizationId.$projectId_.references.tsx

@@ -1,3 +1,4 @@
+import { ColumnCreatedAt } from '@/components/column-created-at';
 import { PageContainer } from '@/components/page-container';
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
@@ -87,9 +88,10 @@ export const columnDefs: ColumnDef<IServiceReference>[] = [
   {
     accessorKey: 'createdAt',
     header: createHeaderColumn('Created at'),
-    cell({ row }) {
-      const date = row.original.createdAt;
-      return formatDate(date);
+    size: ColumnCreatedAt.size,
+    cell: ({ row }) => {
+      const item = row.original;
+      return <ColumnCreatedAt>{item.createdAt}</ColumnCreatedAt>;
     },
     filterFn: 'isWithinRange',
     sortingFn: 'datetime',