Refactor code structure for improved readability and maintainability

package-lock.json

@@ -78,6 +78,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -2799,6 +2800,60 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.6.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.6.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.7",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
@@ -2998,6 +3053,7 @@
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -3008,6 +3064,7 @@
       "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -3018,6 +3075,7 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3068,6 +3126,7 @@
       "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.47.0",
         "@typescript-eslint/types": "8.47.0",
@@ -3320,6 +3379,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3460,6 +3520,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -3897,6 +3958,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5095,6 +5157,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5125,6 +5188,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5513,6 +5577,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5581,6 +5646,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5744,6 +5810,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -5835,6 +5902,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5894,6 +5962,7 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/views/components/header.tsx

@@ -1,22 +1,11 @@
 import { Button } from '@/views/components/ui/button';
 import { Calendar } from '@/views/components/ui/calendar';
-import {
+import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/views/components/ui/drawer';
-  Drawer,
+import { Popover, PopoverContent, PopoverTrigger } from '@/views/components/ui/popover';
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/views/components/ui/drawer';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/views/components/ui/popover';
 import { Funnel, GearSix } from '@phosphor-icons/react';
 import { ptBR } from 'date-fns/locale';
 import { useState } from 'react';
+
 import type { DateRange as RDateRange } from 'react-day-picker';
 
 import {
@@ -35,6 +24,8 @@ import {
 } from '@/views/components/ui/sheet';
 import { SelectPopover } from './ui/select-popover';
 
+import keyCarImg from '@/assets/images/car-keys.png';
+
 type DateRange = RDateRange;
 
 const projects = [
@@ -65,13 +56,13 @@ export function Header() {
   }));
 
   const [projectValue, setProjectValue] = useState<string>(
-    projects[0]?.descricao ?? ''
+    projects[0]?.descricao ?? '',
   );
   const [sectorValue, setSectorValue] = useState<string>(
-    sectors[0]?.descricao ?? ''
+    sectors[0]?.descricao ?? '',
   );
   const [clientValue, setClientValue] = useState<string>(
-    clients[0]?.descricao ?? ''
+    clients[0]?.descricao ?? '',
   );
 
   function handlePopoverOpenChange(open: boolean) {
@@ -143,14 +134,51 @@ export function Header() {
 
           <Select>
             <SelectTrigger>
-              <SelectValue placeholder="Selecione um opção" />
+              <SelectValue placeholder="Selecione o veículo" />
             </SelectTrigger>
 
             <SelectContent className="rounded-md">
-              <SelectItem value="0">Ultimo dia</SelectItem>
+              <SelectItem value="all">
-              <SelectItem value="7">Últimos 7 dias</SelectItem>
+                <div className="flex items-center gap-2">
-              <SelectItem value="30">Últimos 30 dias</SelectItem>
+                  <span>Todos os veículos</span>
-              <SelectItem value="90">Últimos 90 dias</SelectItem>
+                </div>
+              </SelectItem>
+
+              <SelectItem value="fiat-uno-abc-1234">
+                <div className="flex items-center gap-2">
+                  <img src={keyCarImg} alt="Chave" className="w-5 h-5" />
+                  <p>
+                    <span className="font-bold">ABC1234</span> — Fiat Uno
+                  </p>
+                </div>
+              </SelectItem>
+
+              <SelectItem value="vw-gol-def-5678">
+                <div className="flex items-center gap-2">
+                  <img src={keyCarImg} alt="Chave" className="w-5 h-5" />
+                  <p>
+                    <span className="font-bold">DEF5678</span> — VW Gol
+                  </p>
+                </div>
+              </SelectItem>
+
+              <SelectItem value="hyundai-hb20-ghi-9012">
+                <div className="flex items-center gap-2">
+                  <img src={keyCarImg} alt="Chave" className="w-5 h-5" />
+                  <p>
+                    <span className="font-bold">GHI9012</span> — Hyundai HB20
+                  </p>
+                </div>
+              </SelectItem>
+
+              <SelectItem value="ford-ka-jkl-3456">
+                <div className="flex items-center gap-2">
+                  <img src={keyCarImg} alt="Chave" className="w-5 h-5" />
+                  <p>
+                    <span className="font-bold">JKL3456</span> — Ford Ka
+                  </p>
+                </div>
+              </SelectItem>
             </SelectContent>
           </Select>
 
@@ -175,14 +203,12 @@ export function Header() {
                   <Button
                     variant="ghost"
                     onClick={clearDateFilter}
-                    disabled={!dateValue?.from}
+                    disabled={!dateValue?.from}>
-                  >
                     Limpar
                   </Button>
                   <Button
                     onClick={applyDateFilter}
-                    disabled={!localDateRange?.from}
+                    disabled={!localDateRange?.from}>
-                  >
                     Aplicar
                   </Button>
                 </div>
@@ -196,8 +222,7 @@ export function Header() {
             <Button
               title="Clique para visualizar os filtros"
               variant="outline"
-              size="icon"
+              size="icon">
-            >
               <Funnel size={18} />
             </Button>
           </SheetTrigger>