[Front]: 🚧 In Progress: Date range filter in inventory-movements-page…

… and supplier filter in products page

apps/web/src/ui/components/commons/supplier-select/index.tsx

@@ -8,12 +8,14 @@ type SupplierSelectProps = {
   defaultSupplierId?: string
   className?: string
   onSelectChange: (supplierId: string) => void
+  mode?: "filter" | "select"
 }
-
+ 
 export const SupplierSelect = ({
   className,
   defaultSupplierId,
   onSelectChange,
+  mode = "select",
 }: SupplierSelectProps) => {
   const {
     suppliers,

apps/web/src/ui/components/pages/inventory-movements/index.tsx

@@ -4,7 +4,7 @@ import { InventoryMovementsTable } from './inventory-movements-table'
 import { useInventoryMovementPage } from './use-inventory-moviments-page'
 
 export const InventoryMovementsPage = () => {
-  const { isFetching, page, movements, totalPages, handlePageChange,handleMovementTypeSearchChange,movementTypeSearch } =
+  const { isFetching, page, movements, totalPages, handlePageChange, handleMovementTypeSearchChange, movementTypeSearch, handleStartDateChange, handleEndDateChange, } =
     useInventoryMovementPage()
 
   return (
@@ -24,6 +24,24 @@ export const InventoryMovementsPage = () => {
                 Saida
               </SelectItem>
             </Select>
+            <div className='flex gap-4'>
+              <div>
+                <label className='block text-sm font-medium text-gray-700'>Data Inicial</label>
+                <input
+                  type='date'
+                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
+                  onChange={(e) => handleStartDateChange(e.target.value)}
+                />
+              </div>
+              <div>
+                <label className='block text-sm font-medium text-gray-700'>Data Final</label>
+                <input
+                  type='date'
+                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
+                  onChange={(e) => handleEndDateChange(e.target.value)}
+                />
+              </div>
+            </div>
           </div>
         </div>
         <InventoryMovementsTable

apps/web/src/ui/components/pages/inventory-movements/use-inventory-moviments-page.ts

@@ -10,17 +10,22 @@ import { PAGINATION } from '@stocker/core/constants'
 import { InventoryMovement } from '@stocker/core/entities'
 import type { InventoryMovementType } from '@stocker/core/types'
 import { parseAsInteger, useQueryState } from 'nuqs'
+import { useState } from 'react'
 
 export function useInventoryMovementPage() {
   const { inventoryMovementService } = useApi()
   const { showError } = useToast()
   const [page, setPage] = useUrlParamNumber('page', 1)
   const [movementTypeSearch, setMovementTypeSearch] = useUrlParamString('type')
+  const [startDate, setStartDate] = useState<Date | undefined>(undefined)
+  const [endDate, setEndDate] = useState<Date | undefined>(undefined)
 
   async function fetchInventoryMovements() {
     const response = await inventoryMovementService.listInventoryMovements({
       movementType: movementTypeSearch as InventoryMovementType,
       page,
+      startDate,
+      endDate,
     })
     if (response.isFailure) {
       response.throwError()
@@ -32,14 +37,21 @@ export function useInventoryMovementPage() {
   function handleMovementTypeSearchChange(movementType: string) {
     setMovementTypeSearch(movementType)
   }
+  function handleStartDateChange(date: string) {
+    setStartDate(date ? new Date(date) : undefined) 
+  }
+
+  function handleEndDateChange(date: string) {
+    setEndDate(date ? new Date(date) : undefined) 
+  }
   function handlePageChange(page: number) {
     setPage(page)
   }
 
   const { data, isFetching } = useCache({
     fetcher: fetchInventoryMovements,
     key: CACHE.productInventoryMovements.key,
-    dependencies: [page, movementTypeSearch],
+    dependencies: [page, movementTypeSearch, startDate, endDate],
   })
   const movements = data ? data.items.map(InventoryMovement.create) : []
   const itemsCount = data ? data.itemsCount : 0
@@ -53,6 +65,8 @@ export function useInventoryMovementPage() {
     itemsCount,
     movementTypeSearch,
     handleMovementTypeSearchChange,
+    handleStartDateChange,
+    handleEndDateChange,
     handlePageChange,
   }
 }

apps/web/src/ui/components/pages/products/index.tsx

@@ -13,12 +13,14 @@ import { useAuthContext } from '../../contexts/auth-context'
 import { CategorySelect } from '../../commons/category-select'
 import { Icon } from '../../commons/icon'
 import { LocationSelect } from '../../commons/location-select'
+import { SupplierSelect } from '../../commons/supplier-select'
 
 export const ProductsPage = () => {
   const {
     categoryId,
     handleCategoryIdSearchChange,
     handleLocationIdchange,
+    handleSupplierIdSearchChange,
     isFetching,
     isDeleting,
     page,
@@ -49,6 +51,7 @@ export const ProductsPage = () => {
                 mode='filter'
               />
               <LocationSelect onSelectChange={handleLocationIdchange} mode='filter' />
+              <SupplierSelect onSelectChange={handleSupplierIdSearchChange} mode='filter' />
             </div>
           </div>
         </div>

apps/web/src/ui/components/pages/products/use-products-page.ts

@@ -20,6 +20,7 @@ export function useProductsPage() {
   const [productName, productNameValue] = useUrlParamString('name')
   const [categoryId, setCategoryIdValue] = useUrlParamString('categoryId')
   const [locationId, setLocationIdValue] = useUrlParamString('locationId')
+  const [supplierId, setsupplierIdValue] = useUrlParamString('supplierId')
   const [isDeleting, setIsDeleting] = useState(false)
 
   async function fetchProducts() {
@@ -29,6 +30,7 @@ export function useProductsPage() {
       page,
       categoryId,
       locationId,
+      supplierId,
       name: productName,
       companyId: user.companyId,
     })
@@ -54,6 +56,9 @@ export function useProductsPage() {
   function handleCategoryIdSearchChange(categoryId: string) {
     setCategoryIdValue(categoryId ?? null)
   }
+  function handleSupplierIdSearchChange(supplierId: string) {
+    setsupplierIdValue(supplierId ?? null)
+  }
   const { data, isFetching, refetch } = useCache({
     fetcher: fetchProducts,
     key: CACHE.productsList.key,
@@ -102,6 +107,7 @@ export function useProductsPage() {
     selectedProductsIds,
     totalPages: Math.ceil(itemsCount / PAGINATION.itemsPerPage),
     handleCategoryIdSearchChange,
+    handleSupplierIdSearchChange,
     handleUpdateProduct,
     handleDeleteProductsAlertDialogConfirm,
     handleRegisterProductFormSubmit,