Refactor code structure for improved readability and maintainability

2025-11-26 09:47:21 -03:00 · 2025-11-26 09:47:21 -03:00 · 783c14f68b
parent e855691fc8
commit 783c14f68b
3 changed files with 122 additions and 28 deletions
--- a/package-lock.json
+++ b/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"
      }
--- a/src/assets/images/car-keys.png
+++ b/src/assets/images/car-keys.png
--- a/src/views/components/header.tsx
+++ b/src/views/components/header.tsx
@ -1,22 +1,11 @@
 import { Button } from '@/views/components/ui/button';
 import { Calendar } from '@/views/components/ui/calendar';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/views/components/ui/drawer';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/views/components/ui/popover';
+import { Drawer, 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="7">Últimos 7 dias</SelectItem>
-              <SelectItem value="30">Últimos 30 dias</SelectItem>
-              <SelectItem value="90">Últimos 90 dias</SelectItem>
+              <SelectItem value="all">
+                <div className="flex items-center gap-2">
+                  <span>Todos os veículos</span>
+                </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>