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) => {