From 75f472c4a39ac54eccdc162af5d3bfe75e6e53ff Mon Sep 17 00:00:00 2001
From: RydersS7 <riian-costa@hotmail.com>
Date: Fri, 10 Oct 2025 12:19:17 -0300
Subject: [PATCH 1/2] =?UTF-8?q?Remo=C3=A7=C3=A3o=20campo=20habitat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Utils/SearchArea/SearchArea.tsx           | 52 +------------------
 1 file changed, 2 insertions(+), 50 deletions(-)

diff --git a/src/components/Utils/SearchArea/SearchArea.tsx b/src/components/Utils/SearchArea/SearchArea.tsx
index 5dfe506..5721364 100644
--- a/src/components/Utils/SearchArea/SearchArea.tsx
+++ b/src/components/Utils/SearchArea/SearchArea.tsx
@@ -8,7 +8,6 @@ import getClassificationName from '../../../Utils/Enums/BemClassification';
 import SelectInterface from '../../../Interfaces/Select';
 import SelectStates from '../../../Utils/SelectStates';
 import SelectBemClassification from '../../../Utils/SelectBemClassification';
-import SelectHabitat from '../../../Utils/selectHabitat'; 
 
 interface SearchAreaProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -72,12 +71,10 @@ const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
   const fungiService: FungiService = new FungiService();
   const states: SelectInterface = SelectStates();
   const bemClassifications: SelectInterface = SelectBemClassification();
-  const habitats: SelectInterface = SelectHabitat(); // Inicializando SelectHabitat
   const [fungis, setFungis] = useState<Array<any>>([]);
   const [state, setState] = useState<string>("");
   const [bem, setBem] = useState<string>("");
   const [taxon, setTaxon] = useState<string>("");
-  const [habitatValue, setHabitatValue] = useState<string>("");
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
 
   const handleOpenDialog = () => {
@@ -111,18 +108,11 @@ const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
     }
   };
 
-  const handleChangeHabitatValue = (event: SelectChangeEvent) => {
-    setHabitatValue(event.target.value);
-  };
 
   const onClickSearchButton = async () => {
-    let habitatTextField = document.getElementById(
-      "input-habitat"
-    ) as HTMLInputElement;
-    let habitatValue = habitatTextField?.value;
-
+    
     window.location.href = `/list?taxonomy=${taxon ?? ""}&state=${state ?? ""
-      }&bem=${bem ?? ""}&habitat=${habitatValue ?? ""}`;
+      }&bem=${bem ?? ""}`;
   };
 
   return (
@@ -253,44 +243,6 @@ const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
                   </Select>
                 </FormControl>
               </FilterBox>
-
-              <FilterBox>
-                <FormControl variant="outlined" sx={{ minWidth: 200 }}>
-                  <InputLabel id="select-habitat-label" sx={{ color: '#fff' }}>Habitat</InputLabel>
-                  <Select
-                    labelId="select-habitat-label"
-                    id="select-habitat"
-                    value={habitatValue}
-                    onChange={handleChangeHabitatValue}
-                    label="Habitat"
-                    sx={{
-                      '.MuiOutlinedInput-root': {
-                        fieldset: {
-                          borderColor: '#fff',
-                        },
-                        '&:hover fieldset': {
-                          borderColor: '#fff',
-                        },
-                        '&.Mui-focused fieldset': {
-                          borderColor: '#fff',
-                        },
-                        svg: { color: '#fff' },
-                        color: '#fff', 
-                      },
-                      label: { color: '#fff' }, 
-                    }}
-                  >
-                    <MenuItem value="">
-                      <em>Nenhum</em>
-                    </MenuItem>
-                    {habitats.options.map((habitat) => (
-                      <MenuItem key={habitat.id} value={habitat.value}>
-                        {habitat.value}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </FilterBox>
             </FilterContainer>
           </FormControl>
         </DialogContent>

From 79f477f5bb6f3e831f191b237dc8c5b804207595 Mon Sep 17 00:00:00 2001
From: RydersS7 <riian-costa@hotmail.com>
Date: Tue, 28 Oct 2025 14:05:05 -0300
Subject: [PATCH 2/2] =?UTF-8?q?Remo=C3=A7=C3=A3o=20do=20campo=20habitat=20?=
 =?UTF-8?q?no=20filtro=20de=20busca?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Utils/SearchArea/SearchArea.tsx           | 311 +++++++++---------
 1 file changed, 157 insertions(+), 154 deletions(-)

diff --git a/src/components/Utils/SearchArea/SearchArea.tsx b/src/components/Utils/SearchArea/SearchArea.tsx
index 5721364..2c61083 100644
--- a/src/components/Utils/SearchArea/SearchArea.tsx
+++ b/src/components/Utils/SearchArea/SearchArea.tsx
@@ -1,13 +1,24 @@
-import React, { ChangeEvent, FC, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import SearchIcon from '@mui/icons-material/Search';
-import CloseIcon from '@mui/icons-material/Close';
-import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from '@mui/material';
-import FungiService from '../../../services/FungiService';
-import getClassificationName from '../../../Utils/Enums/BemClassification';
-import SelectInterface from '../../../Interfaces/Select';
-import SelectStates from '../../../Utils/SelectStates';
-import SelectBemClassification from '../../../Utils/SelectBemClassification';
+import React, { ChangeEvent, FC, useEffect, useState } from "react";
+import styled from "styled-components";
+import SearchIcon from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+import FungiService from "../../../services/FungiService";
+import getClassificationName from "../../../Utils/Enums/BemClassification";
+import SelectInterface from "../../../Interfaces/Select";
+import SelectStates from "../../../Utils/SelectStates";
+import SelectBemClassification from "../../../Utils/SelectBemClassification";
 
 interface SearchAreaProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -15,13 +26,13 @@ interface SearchAreaProps {
 }
 
 const FilterBox = styled.div`
-  border: 2px solid #fff; /* Borda branca */
-  border-radius: 8px; /* Bordas arredondadas */
-  padding: -1px; /* Espaçamento interno */
+  border: 2px solid #fff;
+  border-radius: 8px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: transparent; /* Fundo transparente */
+  background-color: transparent;
 `;
 
 const Container = styled.div`
@@ -65,34 +76,20 @@ const FilterContainer = styled.div`
   display: flex;
   gap: 10px;
   justify-content: space-between;
+  margin-top: 20px;
 `;
 
 const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
   const fungiService: FungiService = new FungiService();
   const states: SelectInterface = SelectStates();
   const bemClassifications: SelectInterface = SelectBemClassification();
+
   const [fungis, setFungis] = useState<Array<any>>([]);
   const [state, setState] = useState<string>("");
-  const [bem, setBem] = useState<string>("");
+  const [classification, setClassification] = useState<string>("");
   const [taxon, setTaxon] = useState<string>("");
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
 
-  const handleOpenDialog = () => {
-    setIsDialogOpen(true);
-  };
-
-  const handleCloseDialog = () => {
-    setIsDialogOpen(false);
-  };
-
-  const handleChangeState = (event: SelectChangeEvent) => {
-    setState(event.target.value);
-  };
-
-  const handleChangeBem = (event: SelectChangeEvent) => {
-    setBem(event.target.value);
-  };
-
   useEffect(() => {
     getFungis();
   }, []);
@@ -108,11 +105,16 @@ const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
     }
   };
 
+  const handleOpenDialog = () => setIsDialogOpen(true);
+  const handleCloseDialog = () => setIsDialogOpen(false);
+
+  const handleChangeState = (event: SelectChangeEvent) => setState(event.target.value);
+  const handleChangeClassification = (event: SelectChangeEvent) =>
+    setClassification(event.target.value);
+  const handleChangeTaxon = (event: SelectChangeEvent) => setTaxon(event.target.value);
 
-  const onClickSearchButton = async () => {
-    
-    window.location.href = `/list?taxonomy=${taxon ?? ""}&state=${state ?? ""
-      }&bem=${bem ?? ""}`;
+  const onClickSearchButton = () => {
+    window.location.href = `/list?taxonomy=${taxon ?? ""}&state=${state ?? ""}&classification=${classification ?? ""}`;
   };
 
   return (
@@ -121,136 +123,137 @@ const SearchArea: FC<SearchAreaProps> = ({ onChange, placeholder }) => {
         <SearchIcon />
       </SearchButton>
 
-      <Dialog open={isDialogOpen} onClose={handleCloseDialog} maxWidth="md" fullWidth PaperProps={{
-        sx: {
-        borderRadius: 5,
-        backgroundColor: '#000',
-    },
-  }}>
-        <DialogTitle sx={{ backgroundColor: '#000', color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <Dialog
+        open={isDialogOpen}
+        onClose={handleCloseDialog}
+        maxWidth="md"
+        fullWidth
+        PaperProps={{
+          sx: { borderRadius: 5, backgroundColor: "#000" },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            backgroundColor: "#000",
+            color: "#fff",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            fontWeight: "bold",
+          }}
+        >
           Pesquisa e Filtros
-          <CloseButton onClick={handleCloseDialog}>
-            <CloseIcon />
-          </CloseButton>
         </DialogTitle>
-        <DialogContent sx={{ backgroundColor: '#000' }}>
-          <FormControl fullWidth>
-            <Autocomplete
-              id="grouped-demo"
-              freeSolo
-              options={fungis?.sort((a: any, b: any) => a.bem - b.bem)}
-              onInputChange={(event, value) => (value ? setTaxon(value) : null)}
-              groupBy={(option: any) => option?.bemName}
-              getOptionLabel={(option: any) => option?.scientific_name}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label="Espécie"
-                  variant="outlined"
-                  fullWidth
+        <DialogContent sx={{ backgroundColor: "#000" }}>
+          <FilterContainer>
+            {/* Estado */}
+            <FilterBox style={{ minWidth: 200 }}>
+              <FormControl variant="outlined" fullWidth>
+                <InputLabel id="select-state-label" sx={{ color: "#fff" }}>
+                  Estado
+                </InputLabel>
+                <Select
+                  labelId="select-state-label"
+                  value={state}
+                  onChange={handleChangeState}
+                  label="Estado"
                   sx={{
-                    '.MuiOutlinedInput-root': {
-                      fieldset: {
-                        borderColor: '#fff',
-                      },
-                      '&:hover fieldset': {
-                        borderColor: '#fff',
-                      },
-                      '&.Mui-focused fieldset': {
-                        borderColor: '#fff',
-                      },
-                      input: { color: '#fff' }, 
+                    ".MuiOutlinedInput-root": {
+                      fieldset: { borderColor: "#fff" },
+                      "&:hover fieldset": { borderColor: "#fff" },
+                      "&.Mui-focused fieldset": { borderColor: "#fff" },
+                      svg: { color: "#fff" },
+                      color: "#fff",
                     },
-                    label: { color: '#fff' }, 
+                    label: { color: "#fff" },
                   }}
-                />
-              )}
-              sx={{ marginBlockStart: 1, marginBottom: 2}}
-            />
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {states.options.map((s) => (
+                    <MenuItem key={s.id} value={s.value}>
+                      {s.value}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </FilterBox>
 
-            <FilterContainer>
-              <FilterBox>
-                <FormControl variant="outlined" sx={{ minWidth: 200 }}>
-                  <InputLabel id="select-state-label" sx={{ color: '#fff' }}>Estado</InputLabel>
-                  <Select
-                    labelId="select-state-label"
-                    id="select-state"
-                    value={state}
-                    onChange={handleChangeState}
-                    label="Estado"
-                    sx={{
-                      '.MuiOutlinedInput-root': {
-                        fieldset: {
-                          borderColor: '#fff', 
-                        },
-                        '&:hover fieldset': {
-                          borderColor: '#fff',
-                        },
-                        '&.Mui-focused fieldset': {
-                          borderColor: '#fff',
-                        },
-                        svg: { color: '#fff' }, 
-                        color: '#fff', 
-                      },
-                      label: { color: '#fff' },
-                    }}
-                  >
-                    <MenuItem value="">
-                      <em>Nenhum</em>
+            {/* Espécie */}
+            <FilterBox style={{ minWidth: 200 }}>
+              <FormControl variant="outlined" fullWidth>
+                <InputLabel id="select-taxon-label" sx={{ color: "#fff" }}>
+                  Espécie
+                </InputLabel>
+                <Select
+                  labelId="select-taxon-label"
+                  value={taxon}
+                  onChange={handleChangeTaxon}
+                  label="Espécie"
+                  sx={{
+                    ".MuiOutlinedInput-root": {
+                      fieldset: { borderColor: "#fff" },
+                      "&:hover fieldset": { borderColor: "#fff" },
+                      "&.Mui-focused fieldset": { borderColor: "#fff" },
+                      svg: { color: "#fff" },
+                      color: "#fff",
+                    },
+                    label: { color: "#fff" },
+                  }}
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {fungis.map((f) => (
+                    <MenuItem key={f.id} value={f.scientific_name}>
+                      {f.scientific_name}
                     </MenuItem>
-                    {states.options.map((state) => (
-                      <MenuItem key={state.id} value={state.value}>
-                        {state.value}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </FilterBox>
-              <FilterBox>
-                <FormControl variant="outlined" sx={{ minWidth: 200 }}>
-                  <InputLabel id="select-bem-label" sx={{ color: '#fff' }}>BEM</InputLabel>
-                  <Select
-                    labelId="select-bem-label"
-                    id="select-bem"
-                    value={bem}
-                    onChange={handleChangeBem}
-                    label="BEM"
-                    sx={{
-                      '.MuiOutlinedInput-root': {
-                        fieldset: {
-                          borderColor: '#fff',
-                        },
-                        '&:hover fieldset': {
-                          borderColor: '#fff',
-                        },
-                        '&.Mui-focused fieldset': {
-                          borderColor: '#fff',
-                        },
-                        svg: { color: '#fff' }, 
-                        color: '#fff',
-                      },
-                      label: { color: '#fff' },
-                    }}
-                  >
-                    <MenuItem value="">
-                      <em>Nenhum</em>
+                  ))}
+                </Select>
+              </FormControl>
+            </FilterBox>
+
+            {/* Classificação */}
+            <FilterBox style={{ minWidth: 200 }}>
+              <FormControl variant="outlined" fullWidth>
+                <InputLabel id="select-classification-label" sx={{ color: "#fff" }}>
+                  Classificação
+                </InputLabel>
+                <Select
+                  labelId="select-classification-label"
+                  value={classification}
+                  onChange={handleChangeClassification}
+                  label="Classificação"
+                  sx={{
+                    ".MuiOutlinedInput-root": {
+                      fieldset: { borderColor: "#fff" },
+                      "&:hover fieldset": { borderColor: "#fff" },
+                      "&.Mui-focused fieldset": { borderColor: "#fff" },
+                      svg: { color: "#fff" },
+                      color: "#fff",
+                    },
+                    label: { color: "#fff" },
+                  }}
+                >
+                  <MenuItem value="">
+                    <em>Nenhum</em>
+                  </MenuItem>
+                  {bemClassifications.options.map((b) => (
+                    <MenuItem key={b.id} value={b.value}>
+                      {`${b.id}`}
                     </MenuItem>
-                    {bemClassifications.options.map((bem) => (
-                      <MenuItem key={bem.id} value={bem.value}>
-                        {bem.id}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </FilterBox>
-            </FilterContainer>
-          </FormControl>
+                  ))}
+                </Select>
+              </FormControl>
+            </FilterBox>
+          </FilterContainer>
         </DialogContent>
-        <DialogActions sx={{ backgroundColor: '#000' }}>
-        <Button
+        <DialogActions sx={{ backgroundColor: "#000" }}>
+          <Button
             onClick={onClickSearchButton}
             variant="contained"
-            sx={{ backgroundColor: '#ff5e14', color: '#fff', '&:hover': { backgroundColor: '#e04d0d' } }}
+            sx={{ backgroundColor: "#ff5e14", color: "#fff", "&:hover": { backgroundColor: "#e04d0d" } }}
           >
             Buscar
           </Button>