visual improvements

apps/web/src/components/report/ReportChartType.tsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from '@/redux';
 import { chartTypes } from '@/utils/constants';
 import { objectToZodEnums } from '@/utils/validation';
+import { LineChartIcon } from 'lucide-react';
 
 import { Combobox } from '../ui/combobox';
 import { changeChartType } from './reportSlice';
@@ -14,6 +15,7 @@ export function ReportChartType({ className }: ReportChartTypeProps) {
 
   return (
     <Combobox
+      icon={LineChartIcon}
       className={className}
       placeholder="Chart type"
       onChange={(value) => {

apps/web/src/components/report/ReportInterval.tsx

@@ -4,6 +4,7 @@ import {
   isHourIntervalEnabledByRange,
   isMinuteIntervalEnabledByRange,
 } from '@/utils/constants';
+import { ClockIcon } from 'lucide-react';
 
 import { Combobox } from '../ui/combobox';
 import { changeInterval } from './reportSlice';
@@ -27,6 +28,7 @@ export function ReportInterval({ className }: ReportIntervalProps) {
 
   return (
     <Combobox
+      icon={ClockIcon}
       className={className}
       placeholder="Interval"
       onChange={(value) => {

apps/web/src/components/report/ReportLineType.tsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from '@/redux';
 import { lineTypes } from '@/utils/constants';
 import { objectToZodEnums } from '@/utils/validation';
+import { Tv2Icon } from 'lucide-react';
 
 import { Combobox } from '../ui/combobox';
 import { changeLineType } from './reportSlice';
@@ -19,6 +20,7 @@ export function ReportLineType({ className }: ReportLineTypeProps) {
 
   return (
     <Combobox
+      icon={Tv2Icon}
       className={className}
       placeholder="Line type"
       onChange={(value) => {

apps/web/src/components/report/sidebar/ReportBreakdowns.tsx

@@ -6,6 +6,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartBreakdown } from '@/types';
+import { SplitIcon } from 'lucide-react';
 
 import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
 import { ReportBreakdownMore } from './ReportBreakdownMore';
@@ -45,6 +46,7 @@ export function ReportBreakdowns() {
               <div className="flex items-center gap-2 p-2 px-4">
                 <ColorSquare>{index}</ColorSquare>
                 <Combobox
+                  icon={SplitIcon}
                   className="flex-1"
                   searchable
                   value={item.name}
@@ -67,6 +69,7 @@ export function ReportBreakdowns() {
 
         {selectedBreakdowns.length === 0 && (
           <Combobox
+            icon={SplitIcon}
             searchable
             value={''}
             onChange={(value) => {

apps/web/src/components/report/sidebar/ReportEvents.tsx

@@ -10,7 +10,7 @@ import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartEvent } from '@/types';
-import { GanttChart, Users } from 'lucide-react';
+import { GanttChart, GanttChartIcon, Users } from 'lucide-react';
 
 import {
   addEvent,
@@ -62,6 +62,7 @@ export function ReportEvents() {
               <div className="flex items-center gap-2 p-2">
                 <ColorSquare>{event.id}</ColorSquare>
                 <Combobox
+                  icon={GanttChartIcon}
                   className="flex-1"
                   searchable
                   value={event.name}
@@ -175,6 +176,7 @@ export function ReportEvents() {
         })}
 
         <Combobox
+          icon={GanttChartIcon}
           value={''}
           searchable
           onChange={(value) => {

apps/web/src/components/ui/combobox.tsx

@@ -75,10 +75,12 @@ export function Combobox<T extends string>({
             aria-expanded={open}
             className={cn('justify-between', className)}
           >
-            {Icon ? <Icon className="mr-2" size={16} /> : null}
+            <div className="flex min-w-0 gap-2 items-center">
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {Icon ? <Icon className="mr-2" size={16} /> : null}
-              {value ? find(value)?.label ?? 'No match' : placeholder}
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap">
-            </span>
+                {value ? find(value)?.label ?? 'No match' : placeholder}
+              </span>
+            </div>
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         )}

apps/web/src/modals/SaveReport.tsx

@@ -31,9 +31,7 @@ type IForm = z.infer<typeof validator>;
 
 export default function SaveReport({ report }: SaveReportProps) {
   const router = useRouter();
-  const params = useAppParams();
+  const { organizationId: organizationSlug, projectId } = useAppParams();
-  const organizationId = params.organizationId;
-  const projectId = params.projectId;
   const searchParams = useSearchParams();
   const dashboardId = searchParams?.get('dashboardId') ?? undefined;
 
@@ -46,7 +44,7 @@ export default function SaveReport({ report }: SaveReportProps) {
       });
       popModal();
       router.push(
-        `/${organizationId}/${projectId}/reports/${
+        `/${organizationSlug}/${projectId}/reports/${
           res.id
         }?${searchParams?.toString()}`
       );
@@ -85,7 +83,7 @@ export default function SaveReport({ report }: SaveReportProps) {
 
   return (
     <ModalContent>
-      <ModalHeader title="Edit client" />
+      <ModalHeader title="Create report" />
       <form
         className="flex flex-col gap-4"
         onSubmit={handleSubmit(({ name, ...values }) => {
@@ -115,10 +113,12 @@ export default function SaveReport({ report }: SaveReportProps) {
                   {...field}
                   items={dashboards}
                   placeholder="Select a dashboard"
+                  searchable
                   onCreate={(value) => {
                     dashboardMutation.mutate({
                       projectId,
                       name: value,
+                      organizationSlug,
                     });
                   }}
                 />