Merge pull request 'fix(ui): improve searchbar responsiveness on mobile' (#7) from fix/searchbar-mobile-layout into master

Reviewed-on: #7

src/features/orders/components/OrderTable.tsx

@@ -72,7 +72,7 @@ export const OrderTable = () => {
   const tableHeight = calculateTableHeight(rows.length, 10);
 
   const mobileTableHeight = calculateTableHeight(rows.length, 5, {
-    minHeight: 500,
+    minHeight: 300,
     rowHeight: 40,
   });
 

src/features/orders/components/SearchBar.tsx

@@ -57,7 +57,6 @@ interface LocalFilters {
   sellerName: string | null;
   deliveryType: string[] | null;
   statusTransfer: string[] | null;
-  markName: string | null;
 }
 
 const DELIVERY_TYPES = ['RI', 'EN', 'EF', 'RP'];
@@ -82,7 +81,6 @@ const getInitialLocalFilters = (
   sellerName: urlFilters.sellerName ?? null,
   deliveryType: urlFilters.deliveryType ?? null,
   statusTransfer: urlFilters.statusTransfer ?? null,
-  markName: urlFilters.markName ?? null,
 });
 
 export const SearchBar = () => {
@@ -146,7 +144,6 @@ export const SearchBar = () => {
       productName: null,
       deliveryType: null,
       statusTransfer: null,
-      markName: null,
     };
 
     setLocalFilters(getInitialLocalFilters(resetState));
@@ -213,7 +210,6 @@ export const SearchBar = () => {
     localFilters.productId,
     localFilters.deliveryType?.length,
     localFilters.statusTransfer?.length,
-    localFilters.markName,
   ].filter(Boolean).length;
 
   const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
@@ -315,19 +311,6 @@ export const SearchBar = () => {
             Limpar
           </Button>
 
-          <Button
-            variant="contained"
-            color="primary"
-            size="small"
-            onClick={handleFilter}
-            disabled={!isDateValid || !!dateError || isFetching}
-            startIcon={isFetching ? <CircularProgress size={16} color="inherit" /> : <SearchIcon />}
-            fullWidth
-            sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
-          >
-            Buscar
-          </Button>
-
           <Badge badgeContent={activeDrawerFiltersCount} color="primary" sx={{ width: { xs: '100%', sm: 'auto' } }}>
             <Button
               variant="outlined"
@@ -341,6 +324,19 @@ export const SearchBar = () => {
               Filtros
             </Button>
           </Badge>
+
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            onClick={handleFilter}
+            disabled={!isDateValid || !!dateError || isFetching}
+            startIcon={isFetching ? <CircularProgress size={16} color="inherit" /> : <SearchIcon />}
+            fullWidth
+            sx={{ textTransform: 'none', minWidth: { xs: '100%', sm: 100 } }}
+          >
+            Buscar
+          </Button>
         </Grid>
       </Grid>
 
@@ -434,17 +430,8 @@ export const SearchBar = () => {
                   updateLocalFilter('sellerId', newValue?.seller.id.toString() || null);
                   updateLocalFilter('sellerName', newValue?.seller.name || null);
                 }}
-                isOptionEqualToValue={(option, value) => option.value === value.value}
                 loading={sellers.isLoading}
                 renderInput={(params) => <TextField {...params} label="Vendedor" placeholder="Selecione vendedor" />}
-                renderOption={(props, option) => {
-                  const { key, ...restProps } = props;
-                  return (
-                    <li key={option.id} {...restProps}>
-                      {option.label}
-                    </li>
-                  );
-                }}
               />
 
               {/* Parceiro */}
@@ -481,16 +468,6 @@ export const SearchBar = () => {
                 filterOptions={(x) => x}
               />
 
-              {/* Marca */}
-              <Autocomplete
-                freeSolo
-                size="small"
-                options={[]}
-                value={localFilters.markName ?? ''}
-                onInputChange={(_, newValue) => updateLocalFilter('markName', newValue || null)}
-                renderInput={(params) => <TextField {...params} label="Marca" placeholder="Digite a marca..." />}
-              />
-
               {/* Tipo de Entrega */}
               <Autocomplete
                 multiple

src/features/orders/hooks/useOrderFilters.ts

@@ -36,7 +36,6 @@ export const useOrderFilters = () => {
       searchTriggered: parseAsBoolean.withDefault(false),
       deliveryType: parseAsArrayOf(parseAsString, ','),
       statusTransfer: parseAsArrayOf(parseAsString, ','),
-    markName: parseAsString,
     },
     {
       shallow: true,

src/features/orders/schemas/order-filters.schema.ts

@@ -130,7 +130,6 @@ export const orderApiParamsSchema = findOrdersSchema
 
     if (filters.partnerId) queryParams.partnerId = filters.partnerId;
     if (filters.productId) queryParams.productId = filters.productId;
-    if (filters.markName) queryParams.markName = filters.markName;
 
     return queryParams;
   })