From 8ab7d13d2fbfeb8532f7f1c70527024c6519e1a2 Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Tue, 28 Jan 2025 20:35:53 -0300
Subject: [PATCH 1/6] add filter

---
 .../modules/__shared__/MobileDrawer/index.tsx |  52 +++++++++
 .../modules/__shared__/common/types.ts        |  13 +++
 .../web/SearchNotFoundState/index.tsx         |   8 +-
 .../activity-log/DateFilterChip/index.tsx     |  85 +++++++++++++++
 .../activity-log/DateFilterChip/types.ts      |   6 ++
 .../DateFilterComponent/index.tsx             | 100 ++++++++++++++++++
 .../activity-log/DateFilterComponent/types.ts |  17 +++
 .../graphql/queries/ActivityLogsFragment.ts   |  15 ++-
 .../web/ActivityLogComponent/index.tsx        |  33 +++++-
 packages/utils/constants/date.ts              |   1 +
 10 files changed, 321 insertions(+), 9 deletions(-)
 create mode 100644 packages/components/modules/__shared__/MobileDrawer/index.tsx
 create mode 100644 packages/components/modules/activity-log/DateFilterChip/index.tsx
 create mode 100644 packages/components/modules/activity-log/DateFilterChip/types.ts
 create mode 100644 packages/components/modules/activity-log/DateFilterComponent/index.tsx
 create mode 100644 packages/components/modules/activity-log/DateFilterComponent/types.ts

diff --git a/packages/components/modules/__shared__/MobileDrawer/index.tsx b/packages/components/modules/__shared__/MobileDrawer/index.tsx
new file mode 100644
index 00000000..b5c22e3f
--- /dev/null
+++ b/packages/components/modules/__shared__/MobileDrawer/index.tsx
@@ -0,0 +1,52 @@
+import { FC } from 'react'
+
+import { Box, Divider, Drawer, Typography, styled } from '@mui/material'
+
+import { MobileDrawerProps } from '../types'
+
+const Puller = styled('div')(({ theme }) => ({
+  width: 64,
+  height: 6,
+  backgroundColor: theme.palette.grey[500],
+  borderRadius: 3,
+  position: 'absolute',
+  top: 8,
+  left: 'calc(50% - 32px)',
+}))
+
+const MobileDrawer: FC<MobileDrawerProps> = ({
+  open,
+  onClose,
+  title = 'Drawer Title',
+  children,
+}) => (
+  <Drawer
+    anchor="bottom"
+    open={open}
+    onClose={onClose}
+    PaperProps={{
+      sx: {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+      },
+    }}
+  >
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        padding: 2,
+        boxSizing: 'border-box',
+      }}
+    >
+      <Puller />
+      <Typography variant="subtitle1" m={4} align="center">
+        {title}
+      </Typography>
+      <Divider sx={{ marginBottom: 2 }} />
+      {children}
+    </Box>
+  </Drawer>
+)
+
+export default MobileDrawer
diff --git a/packages/components/modules/__shared__/common/types.ts b/packages/components/modules/__shared__/common/types.ts
index 27187687..b787b310 100644
--- a/packages/components/modules/__shared__/common/types.ts
+++ b/packages/components/modules/__shared__/common/types.ts
@@ -1,3 +1,16 @@
+import { ReactNode } from 'react'
+
 export type SocialUpsertForm = {
   body: string
 }
+
+export interface SearchNotFoundStateProps {
+  message?: string
+}
+
+export interface MobileDrawerProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  children: ReactNode
+}
diff --git a/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx b/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
index 43a9b85c..498397d1 100644
--- a/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
+++ b/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
@@ -2,7 +2,11 @@ import { SearchingImage } from '@baseapp-frontend/design-system/components/web/i
 
 import { Box, Typography } from '@mui/material'
 
-const SearchNotFoundState = () => (
+import { SearchNotFoundStateProps } from '../types'
+
+const SearchNotFoundState = ({
+  message = 'Check your spelling or try another search.',
+}: SearchNotFoundStateProps) => (
   <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={1.5} padding={4}>
     <SearchingImage sx={{ color: 'grey.500' }} />
     <Box display="grid" justifyItems="center" gridAutoRows="min-content" gap={0.5}>
@@ -10,7 +14,7 @@ const SearchNotFoundState = () => (
         No results found
       </Typography>
       <Typography variant="caption" color="text.secondary">
-        Check your spelling or try another search.
+        {message}
       </Typography>
     </Box>
   </Box>
diff --git a/packages/components/modules/activity-log/DateFilterChip/index.tsx b/packages/components/modules/activity-log/DateFilterChip/index.tsx
new file mode 100644
index 00000000..547c665d
--- /dev/null
+++ b/packages/components/modules/activity-log/DateFilterChip/index.tsx
@@ -0,0 +1,85 @@
+import { FC, useState } from 'react'
+
+import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
+
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { Box, Chip, Menu, Theme, useMediaQuery } from '@mui/material'
+import { DateTime } from 'luxon'
+
+import MobileDrawer from '../../__shared__/MobileDrawer'
+import DateFilterComponent from '../DateFilterComponent'
+import { DateFilterChipProps } from './types'
+
+const DateFilterChip: FC<DateFilterChipProps> = ({ fetchParameters, executeRefetch }) => {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
+
+  const handleDrawerOpen = () => setDrawerOpen(true)
+  const handleDrawerClose = () => setDrawerOpen(false)
+  const handleMenuClose = () => setAnchorEl(null)
+
+  const { createdFrom, createdTo } = fetchParameters
+  const hasDateSelected = createdFrom || createdTo
+
+  const labelRender = () => {
+    if (createdFrom && createdTo) {
+      return `${formatDate(createdFrom, { toFormat: DATE_FORMAT[3] })} - ${formatDate(createdTo, { toFormat: DATE_FORMAT[3] })}`
+    }
+    if (createdFrom) {
+      return `From ${formatDate(createdFrom, { toFormat: DATE_FORMAT[3] })}`
+    }
+    if (createdTo) {
+      return `Until ${formatDate(createdTo, { toFormat: DATE_FORMAT[3] })}`
+    }
+    return 'Period'
+  }
+
+  const handleOnClickOnChip = (event: React.MouseEvent<HTMLElement>) => {
+    if (isMobile) {
+      handleDrawerOpen()
+    } else {
+      setAnchorEl(event.currentTarget)
+    }
+  }
+
+  return (
+    <>
+      <Chip
+        label={
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <span>{labelRender()}</span>
+            <KeyboardArrowDownIcon color="action" />
+          </Box>
+        }
+        onClick={handleOnClickOnChip}
+        variant={hasDateSelected ? 'filled' : 'soft'}
+        color="default"
+      />
+
+      <MobileDrawer open={drawerOpen} onClose={handleDrawerClose} title="Period">
+        <DateFilterComponent
+          createdFrom={createdFrom ? DateTime.fromFormat(createdFrom, DATE_FORMAT[0]) : null}
+          createdTo={createdTo ? DateTime.fromFormat(createdTo, DATE_FORMAT[0]) : null}
+          executeRefetch={executeRefetch}
+          onApply={handleDrawerClose}
+          onClearFilter={handleDrawerClose}
+        />
+      </MobileDrawer>
+
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
+        <Box padding={2}>
+          <DateFilterComponent
+            createdFrom={createdFrom ? DateTime.fromFormat(createdFrom, DATE_FORMAT[0]) : null}
+            createdTo={createdTo ? DateTime.fromFormat(createdTo, DATE_FORMAT[0]) : null}
+            executeRefetch={executeRefetch}
+            onApply={handleMenuClose}
+            onClearFilter={handleMenuClose}
+          />
+        </Box>
+      </Menu>
+    </>
+  )
+}
+
+export default DateFilterChip
diff --git a/packages/components/modules/activity-log/DateFilterChip/types.ts b/packages/components/modules/activity-log/DateFilterChip/types.ts
new file mode 100644
index 00000000..c8f9dc6e
--- /dev/null
+++ b/packages/components/modules/activity-log/DateFilterChip/types.ts
@@ -0,0 +1,6 @@
+import { IFetchParameters } from '../DateFilterComponent/types'
+
+export interface DateFilterChipProps {
+  fetchParameters: IFetchParameters
+  executeRefetch: (params: Partial<IFetchParameters>) => void
+}
diff --git a/packages/components/modules/activity-log/DateFilterComponent/index.tsx b/packages/components/modules/activity-log/DateFilterComponent/index.tsx
new file mode 100644
index 00000000..e9c7566b
--- /dev/null
+++ b/packages/components/modules/activity-log/DateFilterComponent/index.tsx
@@ -0,0 +1,100 @@
+import React, { FC, useState } from 'react'
+
+import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
+
+import { Box, Button } from '@mui/material'
+import { DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'
+import { DatePicker } from '@mui/x-date-pickers/DatePicker'
+import { DateTime } from 'luxon'
+
+import { DateFilterComponentProps } from './types'
+
+const DateFilterComponent: FC<DateFilterComponentProps> = ({
+  createdFrom,
+  createdTo,
+  executeRefetch,
+  onApply,
+  onClearFilter,
+}) => {
+  const [tempCreatedFrom, setTempCreatedFrom] = useState<DateTime | null>(createdFrom ?? null)
+  const [tempCreatedTo, setTempCreatedTo] = useState<DateTime | null>(createdTo ?? null)
+
+  const [error, setError] = useState<DateValidationError | null>(null)
+
+  const errorMessage = React.useMemo(() => {
+    switch (error) {
+      case 'minDate':
+        return 'End date cannot be earlier than start date.'
+      case 'invalidDate':
+        return 'Your date is not valid'
+      default:
+        return ''
+    }
+  }, [error])
+
+  const handleApply = () => {
+    if (tempCreatedTo && tempCreatedFrom && tempCreatedTo < tempCreatedFrom) {
+      setError('minDate')
+      return
+    }
+
+    setError(null)
+    executeRefetch({
+      createdFrom: tempCreatedFrom
+        ? formatDate(tempCreatedFrom, { toFormat: DATE_FORMAT.api })
+        : null,
+      createdTo: tempCreatedTo ? formatDate(tempCreatedTo, { toFormat: DATE_FORMAT.api }) : null,
+    })
+    onApply?.()
+  }
+
+  const handleClear = () => {
+    if (createdFrom || createdTo) {
+      executeRefetch({
+        createdFrom: null,
+        createdTo: null,
+      })
+    }
+    setTempCreatedFrom(null)
+    setTempCreatedTo(null)
+    onClearFilter?.()
+  }
+
+  return (
+    <Box display="flex" gap={2} flexDirection="column">
+      <Box display="flex" gap={2} flexDirection="column">
+        <LocalizationProvider dateAdapter={AdapterLuxon}>
+          <DatePicker
+            label="Start date"
+            onChange={(newValue) => setTempCreatedFrom(newValue)}
+            disableFuture
+            value={tempCreatedFrom}
+          />
+          <DatePicker
+            label="End date"
+            value={tempCreatedTo}
+            onChange={(newValue) => setTempCreatedTo(newValue)}
+            onError={(newError) => setError(newError)}
+            disableFuture
+            slotProps={{
+              textField: {
+                helperText: errorMessage,
+              },
+            }}
+          />
+        </LocalizationProvider>
+      </Box>
+      <Box display="flex" gap={2} flexDirection="column" mt={4} mb={2}>
+        <Button onClick={handleApply} variant="contained" color="inherit">
+          Filter
+        </Button>
+        <Button onClick={handleClear} variant="outlined" color="inherit">
+          Clear Filter
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
+export default DateFilterComponent
diff --git a/packages/components/modules/activity-log/DateFilterComponent/types.ts b/packages/components/modules/activity-log/DateFilterComponent/types.ts
new file mode 100644
index 00000000..12005b1b
--- /dev/null
+++ b/packages/components/modules/activity-log/DateFilterComponent/types.ts
@@ -0,0 +1,17 @@
+import { DateTime } from 'luxon'
+
+export interface IFetchParameters {
+  createdFrom: string | null
+  createdTo: string | null
+  userName: string
+  count: number
+  cursor: string | null
+}
+
+export interface DateFilterComponentProps {
+  createdFrom: DateTime | null
+  createdTo: DateTime | null
+  executeRefetch: (params: Partial<IFetchParameters>) => void
+  onApply?: () => void
+  onClearFilter?: () => void
+}
diff --git a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts
index 3703a992..9521f7ef 100644
--- a/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts
+++ b/packages/components/modules/activity-log/common/graphql/queries/ActivityLogsFragment.ts
@@ -13,9 +13,20 @@ export const ActivityLogsFragmentQuery = graphql`
     count: { type: "Int", defaultValue: 10 }
     cursor: { type: "String" }
     userName: { type: "String", defaultValue: null }
+    createdFrom: { type: "Date", defaultValue: null }
+    createdTo: { type: "Date", defaultValue: null }
   ) {
-    activityLogs(first: $count, after: $cursor, userName: $userName)
-      @connection(key: "ActivityLogs_activityLogs", filters: ["userName"]) {
+    activityLogs(
+      first: $count
+      after: $cursor
+      userName: $userName
+      createdFrom: $createdFrom
+      createdTo: $createdTo
+    )
+      @connection(
+        key: "ActivityLogs_activityLogs"
+        filters: ["userName", "createdFrom", "createdTo"]
+      ) {
       edges {
         node {
           id
diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
index a25356b6..cb923fc7 100644
--- a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
+++ b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
@@ -8,6 +8,8 @@ import { Box, Typography } from '@mui/material'
 import { useForm } from 'react-hook-form'
 
 import { SearchNotFoundState } from '../../../__shared__/web'
+import DateFilterChip from '../DateFilterChip'
+import { IFetchParameters } from '../DateFilterComponent/types'
 import { useActivityLogs } from '../../common'
 import EventFilterChip from './EventFilterChip'
 import DefaultLogGroups from './LogGroups'
@@ -18,23 +20,38 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
   LogGroups = DefaultLogGroups,
   LogGroupsProps,
 }) => {
-  const [selectedFilters, setSelectedFilters] = useState<EventFilterOption[]>(['All'])
+  const [fetchParameters, setFetchParameters] = useState<IFetchParameters>({
+    createdFrom: null,
+    createdTo: null,
+    userName: '',
+    count: 10,
+    cursor: null,
+  })
+  const { logGroups, loadNext, hasNext, isLoadingNext, refetch } = useActivityLogs(queryRef)
   const [isPending, startTransition] = useTransition()
+  const [selectedFilters, setSelectedFilters] = useState<EventFilterOption[]>(['All'])
   const { control, reset, watch } = useForm({ defaultValues: { search: '' } })
   const searchValue = watch('search')
 
-  const { logGroups, loadNext, hasNext, isLoadingNext, refetch } = useActivityLogs(queryRef)
+  const executeRefetch = (updatedParameters: Partial<IFetchParameters>) => {
+    const newFetchParameters = { ...fetchParameters, ...updatedParameters }
+    setFetchParameters(newFetchParameters)
+    startTransition(() => {
+      refetch(newFetchParameters, { fetchPolicy: 'store-and-network' })
+    })
+  }
 
   const handleSearchClear = () => {
     startTransition(() => {
       reset()
-      refetch({ userName: '' })
+      executeRefetch({ userName: '' })
     })
   }
+
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value || ''
     startTransition(() => {
-      refetch({ userName: value, count: 10, cursor: null }, { fetchPolicy: 'store-and-network' })
+      executeRefetch({ userName: value })
     })
   }
 
@@ -54,7 +71,8 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
           onClear={handleSearchClear}
           isPending={isPending}
         />
-        <Box display="flex" mt={2} mb={2}>
+        <Box display="flex" mt={2} mb={2} flexDirection="row" gap={2}>
+          <DateFilterChip fetchParameters={fetchParameters} executeRefetch={executeRefetch} />
           <EventFilterChip
             options={['All', 'Comments', 'Reactions', 'Posts']}
             selectedOptions={selectedFilters}
@@ -62,6 +80,11 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
           />
         </Box>
         {!isPending && searchValue && emptyLogsList && <SearchNotFoundState />}
+        {!isPending &&
+          (fetchParameters.createdFrom != null || fetchParameters.createdTo != null) &&
+          emptyLogsList && (
+            <SearchNotFoundState message="No results found for the selected date range." />
+          )}
         <LogGroups
           logGroups={logGroups}
           loadNext={loadNext}
diff --git a/packages/utils/constants/date.ts b/packages/utils/constants/date.ts
index 0851565f..50f70dd9 100644
--- a/packages/utils/constants/date.ts
+++ b/packages/utils/constants/date.ts
@@ -2,6 +2,7 @@ export const DATE_FORMAT = {
   0: 'MM/dd/yy',
   1: 'MM/dd/yyyy',
   2: 'LLL d, yyyy',
+  3: 'dd MMM yyyy',
   api: 'yyyy-MM-dd',
 } as const
 

From fc0e0a42df67470061231ba47300c76ef5da372b Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Thu, 13 Feb 2025 14:50:52 -0300
Subject: [PATCH 2/6] refactoring

---
 .../modules/__shared__/MobileDrawer/index.tsx |  2 +-
 .../web/SearchNotFoundState/index.tsx         |  2 +-
 .../activity-log/DateFilterChip/index.tsx     | 54 +++++++-------
 .../DateFilterComponent/index.tsx             | 70 ++++++++++++-------
 .../web/ActivityLogComponent/index.tsx        |  4 +-
 5 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/packages/components/modules/__shared__/MobileDrawer/index.tsx b/packages/components/modules/__shared__/MobileDrawer/index.tsx
index b5c22e3f..fd6a28bc 100644
--- a/packages/components/modules/__shared__/MobileDrawer/index.tsx
+++ b/packages/components/modules/__shared__/MobileDrawer/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 
 import { Box, Divider, Drawer, Typography, styled } from '@mui/material'
 
-import { MobileDrawerProps } from '../types'
+import { MobileDrawerProps } from '../common/types'
 
 const Puller = styled('div')(({ theme }) => ({
   width: 64,
diff --git a/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx b/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
index 498397d1..9fcd8346 100644
--- a/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
+++ b/packages/components/modules/__shared__/web/SearchNotFoundState/index.tsx
@@ -2,7 +2,7 @@ import { SearchingImage } from '@baseapp-frontend/design-system/components/web/i
 
 import { Box, Typography } from '@mui/material'
 
-import { SearchNotFoundStateProps } from '../types'
+import { SearchNotFoundStateProps } from '../../common/types'
 
 const SearchNotFoundState = ({
   message = 'Check your spelling or try another search.',
diff --git a/packages/components/modules/activity-log/DateFilterChip/index.tsx b/packages/components/modules/activity-log/DateFilterChip/index.tsx
index 547c665d..0bd6e024 100644
--- a/packages/components/modules/activity-log/DateFilterChip/index.tsx
+++ b/packages/components/modules/activity-log/DateFilterChip/index.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 
 import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
 
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { KeyboardArrowDown } from '@mui/icons-material'
 import { Box, Chip, Menu, Theme, useMediaQuery } from '@mui/material'
 import { DateTime } from 'luxon'
 
@@ -22,16 +22,19 @@ const DateFilterChip: FC<DateFilterChipProps> = ({ fetchParameters, executeRefet
   const { createdFrom, createdTo } = fetchParameters
   const hasDateSelected = createdFrom || createdTo
 
+  const parseDate = (date: string | null): DateTime | null =>
+    date ? DateTime.fromFormat(date, DATE_FORMAT.api) : null
+
+  const formatLabelDate = (date: string | null): string | null =>
+    date ? formatDate(date, { toFormat: DATE_FORMAT[3] }) : null
+
   const labelRender = () => {
-    if (createdFrom && createdTo) {
-      return `${formatDate(createdFrom, { toFormat: DATE_FORMAT[3] })} - ${formatDate(createdTo, { toFormat: DATE_FORMAT[3] })}`
-    }
-    if (createdFrom) {
-      return `From ${formatDate(createdFrom, { toFormat: DATE_FORMAT[3] })}`
-    }
-    if (createdTo) {
-      return `Until ${formatDate(createdTo, { toFormat: DATE_FORMAT[3] })}`
-    }
+    const fromDate = formatLabelDate(createdFrom)
+    const toDate = formatLabelDate(createdTo)
+    if (createdFrom && createdTo) return `${fromDate} - ${toDate}`
+
+    if (createdFrom) return `From ${fromDate}`
+    if (createdTo) return `Until ${toDate}`
     return 'Period'
   }
 
@@ -43,40 +46,35 @@ const DateFilterChip: FC<DateFilterChipProps> = ({ fetchParameters, executeRefet
     }
   }
 
+  const renderDateFilterComponent = (onClose: () => void) => (
+    <DateFilterComponent
+      createdFrom={parseDate(createdFrom)}
+      createdTo={parseDate(createdTo)}
+      executeRefetch={executeRefetch}
+      onApply={onClose}
+      onClearFilter={onClose}
+    />
+  )
+
   return (
     <>
       <Chip
         label={
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <span>{labelRender()}</span>
-            <KeyboardArrowDownIcon color="action" />
+            <KeyboardArrowDown color="action" />
           </Box>
         }
         onClick={handleOnClickOnChip}
         variant={hasDateSelected ? 'filled' : 'soft'}
         color="default"
       />
-
       <MobileDrawer open={drawerOpen} onClose={handleDrawerClose} title="Period">
-        <DateFilterComponent
-          createdFrom={createdFrom ? DateTime.fromFormat(createdFrom, DATE_FORMAT[0]) : null}
-          createdTo={createdTo ? DateTime.fromFormat(createdTo, DATE_FORMAT[0]) : null}
-          executeRefetch={executeRefetch}
-          onApply={handleDrawerClose}
-          onClearFilter={handleDrawerClose}
-        />
+        {renderDateFilterComponent(handleDrawerClose)}
       </MobileDrawer>
 
       <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
-        <Box padding={2}>
-          <DateFilterComponent
-            createdFrom={createdFrom ? DateTime.fromFormat(createdFrom, DATE_FORMAT[0]) : null}
-            createdTo={createdTo ? DateTime.fromFormat(createdTo, DATE_FORMAT[0]) : null}
-            executeRefetch={executeRefetch}
-            onApply={handleMenuClose}
-            onClearFilter={handleMenuClose}
-          />
-        </Box>
+        <Box padding={2}>{renderDateFilterComponent(handleMenuClose)}</Box>
       </Menu>
     </>
   )
diff --git a/packages/components/modules/activity-log/DateFilterComponent/index.tsx b/packages/components/modules/activity-log/DateFilterComponent/index.tsx
index e9c7566b..6b2abda6 100644
--- a/packages/components/modules/activity-log/DateFilterComponent/index.tsx
+++ b/packages/components/modules/activity-log/DateFilterComponent/index.tsx
@@ -1,7 +1,5 @@
 import React, { FC, useState } from 'react'
 
-import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
-
 import { Box, Button } from '@mui/material'
 import { DateValidationError, LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'
@@ -41,10 +39,8 @@ const DateFilterComponent: FC<DateFilterComponentProps> = ({
 
     setError(null)
     executeRefetch({
-      createdFrom: tempCreatedFrom
-        ? formatDate(tempCreatedFrom, { toFormat: DATE_FORMAT.api })
-        : null,
-      createdTo: tempCreatedTo ? formatDate(tempCreatedTo, { toFormat: DATE_FORMAT.api }) : null,
+      createdFrom: tempCreatedFrom ? tempCreatedFrom.toISODate() : null,
+      createdTo: tempCreatedTo ? tempCreatedTo.toISODate() : null,
     })
     onApply?.()
   }
@@ -61,30 +57,50 @@ const DateFilterComponent: FC<DateFilterComponentProps> = ({
     onClearFilter?.()
   }
 
+  const disableStartDate = (date: DateTime) => (tempCreatedTo ? date > tempCreatedTo : false)
+
+  const disableEndDate = (date: DateTime) => (tempCreatedFrom ? date < tempCreatedFrom : false)
+
   return (
     <Box display="flex" gap={2} flexDirection="column">
-      <Box display="flex" gap={2} flexDirection="column">
-        <LocalizationProvider dateAdapter={AdapterLuxon}>
-          <DatePicker
-            label="Start date"
-            onChange={(newValue) => setTempCreatedFrom(newValue)}
-            disableFuture
-            value={tempCreatedFrom}
-          />
-          <DatePicker
-            label="End date"
-            value={tempCreatedTo}
-            onChange={(newValue) => setTempCreatedTo(newValue)}
-            onError={(newError) => setError(newError)}
-            disableFuture
-            slotProps={{
-              textField: {
-                helperText: errorMessage,
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <DatePicker
+          label="Start date"
+          onChange={(newValue) => setTempCreatedFrom(newValue)}
+          disableFuture
+          value={tempCreatedFrom}
+          shouldDisableDate={disableStartDate}
+          slotProps={{
+            day: (dayProps) => ({
+              sx: {
+                ...(disableStartDate(dayProps.day) && {
+                  backgroundColor: 'error.lighter',
+                }),
               },
-            }}
-          />
-        </LocalizationProvider>
-      </Box>
+            }),
+          }}
+        />
+        <DatePicker
+          label="End date"
+          value={tempCreatedTo}
+          onChange={(newValue) => setTempCreatedTo(newValue)}
+          onError={(newError) => setError(newError)}
+          disableFuture
+          shouldDisableDate={disableEndDate}
+          slotProps={{
+            textField: {
+              helperText: errorMessage,
+            },
+            day: (dayProps) => ({
+              sx: {
+                ...(disableEndDate(dayProps.day) && {
+                  backgroundColor: 'error.lighter',
+                }),
+              },
+            }),
+          }}
+        />
+      </LocalizationProvider>
       <Box display="flex" gap={2} flexDirection="column" mt={4} mb={2}>
         <Button onClick={handleApply} variant="contained" color="inherit">
           Filter
diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
index cb923fc7..90d3d813 100644
--- a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
+++ b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
@@ -8,8 +8,8 @@ import { Box, Typography } from '@mui/material'
 import { useForm } from 'react-hook-form'
 
 import { SearchNotFoundState } from '../../../__shared__/web'
-import DateFilterChip from '../DateFilterChip'
-import { IFetchParameters } from '../DateFilterComponent/types'
+import DateFilterChip from '../../DateFilterChip'
+import { IFetchParameters } from '../../DateFilterComponent/types'
 import { useActivityLogs } from '../../common'
 import EventFilterChip from './EventFilterChip'
 import DefaultLogGroups from './LogGroups'

From 5fd80eecec4cc6a5c2acaec42b292aa743a2ac8f Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Tue, 25 Feb 2025 10:40:07 -0300
Subject: [PATCH 3/6] use swapdrawer

---
 packages/components/CHANGELOG.md              |   6 +
 .../ActivityLogsFragment.graphql.ts           | 501 ++++++++++--------
 .../modules/__shared__/MobileDrawer/index.tsx |  52 --
 .../activity-log/DateFilterChip/index.tsx     |  40 +-
 packages/components/package.json              |   2 +-
 5 files changed, 298 insertions(+), 303 deletions(-)
 delete mode 100644 packages/components/modules/__shared__/MobileDrawer/index.tsx

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 86d64d9c..93bb9bb2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.12
+
+### Patch Changes
+
+- add filter by date to the module activity log. Filter as a modal on desktop and swap on mobile. Filtering can be don by start and/or end date
+
 ## 1.0.11
 
 ### Patch Changes
diff --git a/packages/components/__generated__/ActivityLogsFragment.graphql.ts b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
index a59e7256..a2f6832d 100644
--- a/packages/components/__generated__/ActivityLogsFragment.graphql.ts
+++ b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
@@ -1,255 +1,288 @@
 /**
- * @generated SignedSource<<f05424845c3864410d6ea954a0215236>>
+ * @generated SignedSource<<fe8028b7a20596b985585fdc3f7764f8>>
  * @lightSyntaxTransform
  * @nogrep
  */
 
 /* tslint:disable */
+
 /* eslint-disable */
 // @ts-nocheck
+import { ReaderFragment, RefetchableFragment } from 'relay-runtime'
+import { FragmentRefs } from 'relay-runtime'
 
-import { ReaderFragment, RefetchableFragment } from 'relay-runtime';
-import { FragmentRefs } from "relay-runtime";
 export type ActivityLogsFragment$data = {
-  readonly activityLogs: {
-    readonly edges: ReadonlyArray<{
-      readonly node: {
-        readonly createdAt: any;
-        readonly id: string;
-        readonly url: string | null | undefined;
-        readonly user: {
-          readonly avatar: {
-            readonly url: string;
-          } | null | undefined;
-          readonly email: string | null | undefined;
-          readonly fullName: string | null | undefined;
-          readonly id: string;
-        } | null | undefined;
-        readonly verb: string | null | undefined;
-      } | null | undefined;
-    } | null | undefined>;
-    readonly pageInfo: {
-      readonly endCursor: string | null | undefined;
-      readonly hasNextPage: boolean;
-    };
-  } | null | undefined;
-  readonly " $fragmentType": "ActivityLogsFragment";
-};
+  readonly activityLogs:
+    | {
+        readonly edges: ReadonlyArray<
+          | {
+              readonly node:
+                | {
+                    readonly createdAt: any
+                    readonly id: string
+                    readonly url: string | null | undefined
+                    readonly user:
+                      | {
+                          readonly avatar:
+                            | {
+                                readonly url: string
+                              }
+                            | null
+                            | undefined
+                          readonly email: string | null | undefined
+                          readonly fullName: string | null | undefined
+                          readonly id: string
+                        }
+                      | null
+                      | undefined
+                    readonly verb: string | null | undefined
+                  }
+                | null
+                | undefined
+            }
+          | null
+          | undefined
+        >
+        readonly pageInfo: {
+          readonly endCursor: string | null | undefined
+          readonly hasNextPage: boolean
+        }
+      }
+    | null
+    | undefined
+  readonly ' $fragmentType': 'ActivityLogsFragment'
+}
 export type ActivityLogsFragment$key = {
-  readonly " $data"?: ActivityLogsFragment$data;
-  readonly " $fragmentSpreads": FragmentRefs<"ActivityLogsFragment">;
-};
+  readonly ' $data'?: ActivityLogsFragment$data
+  readonly ' $fragmentSpreads': FragmentRefs<'ActivityLogsFragment'>
+}
 
-const node: ReaderFragment = (function(){
-var v0 = [
-  "activityLogs"
-],
-v1 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "id",
-  "storageKey": null
-},
-v2 = {
-  "alias": null,
-  "args": null,
-  "kind": "ScalarField",
-  "name": "url",
-  "storageKey": null
-};
-return {
-  "argumentDefinitions": [
-    {
-      "defaultValue": 10,
-      "kind": "LocalArgument",
-      "name": "count"
+const node: ReaderFragment = (function () {
+  var v0 = ['activityLogs'],
+    v1 = {
+      alias: null,
+      args: null,
+      kind: 'ScalarField',
+      name: 'id',
+      storageKey: null,
     },
-    {
-      "defaultValue": null,
-      "kind": "LocalArgument",
-      "name": "cursor"
-    },
-    {
-      "defaultValue": null,
-      "kind": "LocalArgument",
-      "name": "userName"
+    v2 = {
+      alias: null,
+      args: null,
+      kind: 'ScalarField',
+      name: 'url',
+      storageKey: null,
     }
-  ],
-  "kind": "Fragment",
-  "metadata": {
-    "connection": [
+  return {
+    argumentDefinitions: [
       {
-        "count": "count",
-        "cursor": "cursor",
-        "direction": "forward",
-        "path": (v0/*: any*/)
-      }
-    ],
-    "refetch": {
-      "connection": {
-        "forward": {
-          "count": "count",
-          "cursor": "cursor"
-        },
-        "backward": null,
-        "path": (v0/*: any*/)
+        defaultValue: 10,
+        kind: 'LocalArgument',
+        name: 'count',
       },
-      "fragmentPathInResult": [],
-      "operation": require('./ActivityLogsPaginationQuery.graphql')
-    }
-  },
-  "name": "ActivityLogsFragment",
-  "selections": [
-    {
-      "alias": "activityLogs",
-      "args": [
-        {
-          "kind": "Variable",
-          "name": "userName",
-          "variableName": "userName"
-        }
-      ],
-      "concreteType": "ActivityLogConnection",
-      "kind": "LinkedField",
-      "name": "__ActivityLogs_activityLogs_connection",
-      "plural": false,
-      "selections": [
+      {
+        defaultValue: null,
+        kind: 'LocalArgument',
+        name: 'createdFrom',
+      },
+      {
+        defaultValue: null,
+        kind: 'LocalArgument',
+        name: 'createdTo',
+      },
+      {
+        defaultValue: null,
+        kind: 'LocalArgument',
+        name: 'cursor',
+      },
+      {
+        defaultValue: null,
+        kind: 'LocalArgument',
+        name: 'userName',
+      },
+    ],
+    kind: 'Fragment',
+    metadata: {
+      connection: [
         {
-          "alias": null,
-          "args": null,
-          "concreteType": "ActivityLogEdge",
-          "kind": "LinkedField",
-          "name": "edges",
-          "plural": true,
-          "selections": [
-            {
-              "alias": null,
-              "args": null,
-              "concreteType": "ActivityLog",
-              "kind": "LinkedField",
-              "name": "node",
-              "plural": false,
-              "selections": [
-                (v1/*: any*/),
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "createdAt",
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "verb",
-                  "storageKey": null
-                },
-                (v2/*: any*/),
-                {
-                  "alias": null,
-                  "args": null,
-                  "concreteType": "User",
-                  "kind": "LinkedField",
-                  "name": "user",
-                  "plural": false,
-                  "selections": [
-                    (v1/*: any*/),
-                    {
-                      "alias": null,
-                      "args": null,
-                      "kind": "ScalarField",
-                      "name": "fullName",
-                      "storageKey": null
-                    },
-                    {
-                      "alias": null,
-                      "args": null,
-                      "kind": "ScalarField",
-                      "name": "email",
-                      "storageKey": null
-                    },
-                    {
-                      "alias": null,
-                      "args": [
-                        {
-                          "kind": "Literal",
-                          "name": "height",
-                          "value": 48
-                        },
-                        {
-                          "kind": "Literal",
-                          "name": "width",
-                          "value": 48
-                        }
-                      ],
-                      "concreteType": "File",
-                      "kind": "LinkedField",
-                      "name": "avatar",
-                      "plural": false,
-                      "selections": [
-                        (v2/*: any*/)
-                      ],
-                      "storageKey": "avatar(height:48,width:48)"
-                    }
-                  ],
-                  "storageKey": null
-                },
-                {
-                  "alias": null,
-                  "args": null,
-                  "kind": "ScalarField",
-                  "name": "__typename",
-                  "storageKey": null
-                }
-              ],
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "cursor",
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
+          count: 'count',
+          cursor: 'cursor',
+          direction: 'forward',
+          path: v0 /*: any*/,
         },
-        {
-          "alias": null,
-          "args": null,
-          "concreteType": "PageInfo",
-          "kind": "LinkedField",
-          "name": "pageInfo",
-          "plural": false,
-          "selections": [
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "endCursor",
-              "storageKey": null
-            },
-            {
-              "alias": null,
-              "args": null,
-              "kind": "ScalarField",
-              "name": "hasNextPage",
-              "storageKey": null
-            }
-          ],
-          "storageKey": null
-        }
       ],
-      "storageKey": null
-    }
-  ],
-  "type": "Query",
-  "abstractKey": null
-};
-})();
+      refetch: {
+        connection: {
+          forward: {
+            count: 'count',
+            cursor: 'cursor',
+          },
+          backward: null,
+          path: v0 /*: any*/,
+        },
+        fragmentPathInResult: [],
+        operation: require('./ActivityLogsPaginationQuery.graphql'),
+      },
+    },
+    name: 'ActivityLogsFragment',
+    selections: [
+      {
+        alias: 'activityLogs',
+        args: [
+          {
+            kind: 'Variable',
+            name: 'createdFrom',
+            variableName: 'createdFrom',
+          },
+          {
+            kind: 'Variable',
+            name: 'createdTo',
+            variableName: 'createdTo',
+          },
+          {
+            kind: 'Variable',
+            name: 'userName',
+            variableName: 'userName',
+          },
+        ],
+        concreteType: 'ActivityLogConnection',
+        kind: 'LinkedField',
+        name: '__ActivityLogs_activityLogs_connection',
+        plural: false,
+        selections: [
+          {
+            alias: null,
+            args: null,
+            concreteType: 'ActivityLogEdge',
+            kind: 'LinkedField',
+            name: 'edges',
+            plural: true,
+            selections: [
+              {
+                alias: null,
+                args: null,
+                concreteType: 'ActivityLog',
+                kind: 'LinkedField',
+                name: 'node',
+                plural: false,
+                selections: [
+                  v1 /*: any*/,
+                  {
+                    alias: null,
+                    args: null,
+                    kind: 'ScalarField',
+                    name: 'createdAt',
+                    storageKey: null,
+                  },
+                  {
+                    alias: null,
+                    args: null,
+                    kind: 'ScalarField',
+                    name: 'verb',
+                    storageKey: null,
+                  },
+                  v2 /*: any*/,
+                  {
+                    alias: null,
+                    args: null,
+                    concreteType: 'User',
+                    kind: 'LinkedField',
+                    name: 'user',
+                    plural: false,
+                    selections: [
+                      v1 /*: any*/,
+                      {
+                        alias: null,
+                        args: null,
+                        kind: 'ScalarField',
+                        name: 'fullName',
+                        storageKey: null,
+                      },
+                      {
+                        alias: null,
+                        args: null,
+                        kind: 'ScalarField',
+                        name: 'email',
+                        storageKey: null,
+                      },
+                      {
+                        alias: null,
+                        args: [
+                          {
+                            kind: 'Literal',
+                            name: 'height',
+                            value: 48,
+                          },
+                          {
+                            kind: 'Literal',
+                            name: 'width',
+                            value: 48,
+                          },
+                        ],
+                        concreteType: 'File',
+                        kind: 'LinkedField',
+                        name: 'avatar',
+                        plural: false,
+                        selections: [v2 /*: any*/],
+                        storageKey: 'avatar(height:48,width:48)',
+                      },
+                    ],
+                    storageKey: null,
+                  },
+                  {
+                    alias: null,
+                    args: null,
+                    kind: 'ScalarField',
+                    name: '__typename',
+                    storageKey: null,
+                  },
+                ],
+                storageKey: null,
+              },
+              {
+                alias: null,
+                args: null,
+                kind: 'ScalarField',
+                name: 'cursor',
+                storageKey: null,
+              },
+            ],
+            storageKey: null,
+          },
+          {
+            alias: null,
+            args: null,
+            concreteType: 'PageInfo',
+            kind: 'LinkedField',
+            name: 'pageInfo',
+            plural: false,
+            selections: [
+              {
+                alias: null,
+                args: null,
+                kind: 'ScalarField',
+                name: 'endCursor',
+                storageKey: null,
+              },
+              {
+                alias: null,
+                args: null,
+                kind: 'ScalarField',
+                name: 'hasNextPage',
+                storageKey: null,
+              },
+            ],
+            storageKey: null,
+          },
+        ],
+        storageKey: null,
+      },
+    ],
+    type: 'Query',
+    abstractKey: null,
+  }
+})()
 
-(node as any).hash = "89365a3b6109a48bbc293c75f9d7174a";
+;(node as any).hash = 'f5d29f31cbedd5432a4805c649a74929'
 
-export default node;
+export default node
diff --git a/packages/components/modules/__shared__/MobileDrawer/index.tsx b/packages/components/modules/__shared__/MobileDrawer/index.tsx
deleted file mode 100644
index fd6a28bc..00000000
--- a/packages/components/modules/__shared__/MobileDrawer/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { FC } from 'react'
-
-import { Box, Divider, Drawer, Typography, styled } from '@mui/material'
-
-import { MobileDrawerProps } from '../common/types'
-
-const Puller = styled('div')(({ theme }) => ({
-  width: 64,
-  height: 6,
-  backgroundColor: theme.palette.grey[500],
-  borderRadius: 3,
-  position: 'absolute',
-  top: 8,
-  left: 'calc(50% - 32px)',
-}))
-
-const MobileDrawer: FC<MobileDrawerProps> = ({
-  open,
-  onClose,
-  title = 'Drawer Title',
-  children,
-}) => (
-  <Drawer
-    anchor="bottom"
-    open={open}
-    onClose={onClose}
-    PaperProps={{
-      sx: {
-        borderTopLeftRadius: 8,
-        borderTopRightRadius: 8,
-      },
-    }}
-  >
-    <Box
-      sx={{
-        position: 'relative',
-        width: '100%',
-        padding: 2,
-        boxSizing: 'border-box',
-      }}
-    >
-      <Puller />
-      <Typography variant="subtitle1" m={4} align="center">
-        {title}
-      </Typography>
-      <Divider sx={{ marginBottom: 2 }} />
-      {children}
-    </Box>
-  </Drawer>
-)
-
-export default MobileDrawer
diff --git a/packages/components/modules/activity-log/DateFilterChip/index.tsx b/packages/components/modules/activity-log/DateFilterChip/index.tsx
index 0bd6e024..37249712 100644
--- a/packages/components/modules/activity-log/DateFilterChip/index.tsx
+++ b/packages/components/modules/activity-log/DateFilterChip/index.tsx
@@ -1,12 +1,12 @@
 import { FC, useState } from 'react'
 
+import { SwipeableDrawer } from '@baseapp-frontend/design-system/components/web/drawers'
 import { DATE_FORMAT, formatDate } from '@baseapp-frontend/utils'
 
 import { KeyboardArrowDown } from '@mui/icons-material'
-import { Box, Chip, Menu, Theme, useMediaQuery } from '@mui/material'
+import { Box, Chip, Divider, Menu, Theme, Typography, useMediaQuery } from '@mui/material'
 import { DateTime } from 'luxon'
 
-import MobileDrawer from '../../__shared__/MobileDrawer'
 import DateFilterComponent from '../DateFilterComponent'
 import { DateFilterChipProps } from './types'
 
@@ -47,13 +47,19 @@ const DateFilterChip: FC<DateFilterChipProps> = ({ fetchParameters, executeRefet
   }
 
   const renderDateFilterComponent = (onClose: () => void) => (
-    <DateFilterComponent
-      createdFrom={parseDate(createdFrom)}
-      createdTo={parseDate(createdTo)}
-      executeRefetch={executeRefetch}
-      onApply={onClose}
-      onClearFilter={onClose}
-    />
+    <>
+      <Typography variant="subtitle1" m={4} align="center">
+        Period
+      </Typography>
+      <Divider sx={{ marginBottom: 2 }} />
+      <DateFilterComponent
+        createdFrom={parseDate(createdFrom)}
+        createdTo={parseDate(createdTo)}
+        executeRefetch={executeRefetch}
+        onApply={onClose}
+        onClearFilter={onClose}
+      />
+    </>
   )
 
   return (
@@ -69,13 +75,15 @@ const DateFilterChip: FC<DateFilterChipProps> = ({ fetchParameters, executeRefet
         variant={hasDateSelected ? 'filled' : 'soft'}
         color="default"
       />
-      <MobileDrawer open={drawerOpen} onClose={handleDrawerClose} title="Period">
-        {renderDateFilterComponent(handleDrawerClose)}
-      </MobileDrawer>
-
-      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
-        <Box padding={2}>{renderDateFilterComponent(handleMenuClose)}</Box>
-      </Menu>
+      {isMobile ? (
+        <SwipeableDrawer globalHeight="auto" open={drawerOpen} onClose={handleDrawerClose}>
+          {renderDateFilterComponent(handleDrawerClose)}
+        </SwipeableDrawer>
+      ) : (
+        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
+          <Box padding={2}>{renderDateFilterComponent(handleMenuClose)}</Box>
+        </Menu>
+      )}
     </>
   )
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index c29cdc02..df298b45 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",

From 934f75dabf8ebfbd00bfffdcde73f4412311d517 Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Tue, 25 Feb 2025 14:46:39 -0300
Subject: [PATCH 4/6] update IFetchParameters

---
 .../modules/activity-log/DateFilterChip/types.ts       |  6 +++---
 .../modules/activity-log/DateFilterComponent/types.ts  | 10 ++--------
 .../components/modules/activity-log/common/types.ts    |  8 ++++++++
 .../activity-log/web/ActivityLogComponent/index.tsx    |  7 +++----
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/components/modules/activity-log/DateFilterChip/types.ts b/packages/components/modules/activity-log/DateFilterChip/types.ts
index c8f9dc6e..aca7ed58 100644
--- a/packages/components/modules/activity-log/DateFilterChip/types.ts
+++ b/packages/components/modules/activity-log/DateFilterChip/types.ts
@@ -1,6 +1,6 @@
-import { IFetchParameters } from '../DateFilterComponent/types'
+import { FetchParameters } from '../common/types'
 
 export interface DateFilterChipProps {
-  fetchParameters: IFetchParameters
-  executeRefetch: (params: Partial<IFetchParameters>) => void
+  fetchParameters: FetchParameters
+  executeRefetch: (params: Partial<FetchParameters>) => void
 }
diff --git a/packages/components/modules/activity-log/DateFilterComponent/types.ts b/packages/components/modules/activity-log/DateFilterComponent/types.ts
index 12005b1b..b4322ccf 100644
--- a/packages/components/modules/activity-log/DateFilterComponent/types.ts
+++ b/packages/components/modules/activity-log/DateFilterComponent/types.ts
@@ -1,17 +1,11 @@
 import { DateTime } from 'luxon'
 
-export interface IFetchParameters {
-  createdFrom: string | null
-  createdTo: string | null
-  userName: string
-  count: number
-  cursor: string | null
-}
+import { FetchParameters } from '../common/types'
 
 export interface DateFilterComponentProps {
   createdFrom: DateTime | null
   createdTo: DateTime | null
-  executeRefetch: (params: Partial<IFetchParameters>) => void
+  executeRefetch: (params: Partial<FetchParameters>) => void
   onApply?: () => void
   onClearFilter?: () => void
 }
diff --git a/packages/components/modules/activity-log/common/types.ts b/packages/components/modules/activity-log/common/types.ts
index 76c05001..c699f164 100644
--- a/packages/components/modules/activity-log/common/types.ts
+++ b/packages/components/modules/activity-log/common/types.ts
@@ -8,3 +8,11 @@ export interface LogGroup {
   lastActivityTimestamp: string
   logs: ActivityLogNode[]
 }
+
+export interface FetchParameters {
+  createdFrom: string | null
+  createdTo: string | null
+  userName: string
+  count: number
+  cursor: string | null
+}
diff --git a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
index 90d3d813..7af89b6a 100644
--- a/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
+++ b/packages/components/modules/activity-log/web/ActivityLogComponent/index.tsx
@@ -9,8 +9,7 @@ import { useForm } from 'react-hook-form'
 
 import { SearchNotFoundState } from '../../../__shared__/web'
 import DateFilterChip from '../../DateFilterChip'
-import { IFetchParameters } from '../../DateFilterComponent/types'
-import { useActivityLogs } from '../../common'
+import { FetchParameters, useActivityLogs } from '../../common'
 import EventFilterChip from './EventFilterChip'
 import DefaultLogGroups from './LogGroups'
 import { ActivityLogComponentProps, EventFilterOption } from './types'
@@ -20,7 +19,7 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
   LogGroups = DefaultLogGroups,
   LogGroupsProps,
 }) => {
-  const [fetchParameters, setFetchParameters] = useState<IFetchParameters>({
+  const [fetchParameters, setFetchParameters] = useState<FetchParameters>({
     createdFrom: null,
     createdTo: null,
     userName: '',
@@ -33,7 +32,7 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
   const { control, reset, watch } = useForm({ defaultValues: { search: '' } })
   const searchValue = watch('search')
 
-  const executeRefetch = (updatedParameters: Partial<IFetchParameters>) => {
+  const executeRefetch = (updatedParameters: Partial<FetchParameters>) => {
     const newFetchParameters = { ...fetchParameters, ...updatedParameters }
     setFetchParameters(newFetchParameters)
     startTransition(() => {

From 5520a9918b935e308a135a2ba1f98efe290e12f4 Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Tue, 25 Feb 2025 14:49:03 -0300
Subject: [PATCH 5/6] restore activitylogfragment__generated

---
 .../ActivityLogsFragment.graphql.ts           | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/components/__generated__/ActivityLogsFragment.graphql.ts b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
index a2f6832d..776c692d 100644
--- a/packages/components/__generated__/ActivityLogsFragment.graphql.ts
+++ b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fe8028b7a20596b985585fdc3f7764f8>>
+ * @generated SignedSource<<f05424845c3864410d6ea954a0215236>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -80,16 +80,6 @@ const node: ReaderFragment = (function () {
         kind: 'LocalArgument',
         name: 'count',
       },
-      {
-        defaultValue: null,
-        kind: 'LocalArgument',
-        name: 'createdFrom',
-      },
-      {
-        defaultValue: null,
-        kind: 'LocalArgument',
-        name: 'createdTo',
-      },
       {
         defaultValue: null,
         kind: 'LocalArgument',
@@ -129,16 +119,6 @@ const node: ReaderFragment = (function () {
       {
         alias: 'activityLogs',
         args: [
-          {
-            kind: 'Variable',
-            name: 'createdFrom',
-            variableName: 'createdFrom',
-          },
-          {
-            kind: 'Variable',
-            name: 'createdTo',
-            variableName: 'createdTo',
-          },
           {
             kind: 'Variable',
             name: 'userName',
@@ -283,6 +263,6 @@ const node: ReaderFragment = (function () {
   }
 })()
 
-;(node as any).hash = 'f5d29f31cbedd5432a4805c649a74929'
+;(node as any).hash = '89365a3b6109a48bbc293c75f9d7174a'
 
 export default node

From 4fa51ebc51cdaa40102ca7a47670bf5183bfdb3f Mon Sep 17 00:00:00 2001
From: Mathieu Bouhelier <mathieubouhelier@gmail.com>
Date: Tue, 25 Feb 2025 14:56:20 -0300
Subject: [PATCH 6/6] restore activitylogfragment__generated

---
 .../ActivityLogsFragment.graphql.ts           | 479 +++++++++---------
 1 file changed, 233 insertions(+), 246 deletions(-)

diff --git a/packages/components/__generated__/ActivityLogsFragment.graphql.ts b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
index 776c692d..a59e7256 100644
--- a/packages/components/__generated__/ActivityLogsFragment.graphql.ts
+++ b/packages/components/__generated__/ActivityLogsFragment.graphql.ts
@@ -5,264 +5,251 @@
  */
 
 /* tslint:disable */
-
 /* eslint-disable */
 // @ts-nocheck
-import { ReaderFragment, RefetchableFragment } from 'relay-runtime'
-import { FragmentRefs } from 'relay-runtime'
 
+import { ReaderFragment, RefetchableFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
 export type ActivityLogsFragment$data = {
-  readonly activityLogs:
-    | {
-        readonly edges: ReadonlyArray<
-          | {
-              readonly node:
-                | {
-                    readonly createdAt: any
-                    readonly id: string
-                    readonly url: string | null | undefined
-                    readonly user:
-                      | {
-                          readonly avatar:
-                            | {
-                                readonly url: string
-                              }
-                            | null
-                            | undefined
-                          readonly email: string | null | undefined
-                          readonly fullName: string | null | undefined
-                          readonly id: string
-                        }
-                      | null
-                      | undefined
-                    readonly verb: string | null | undefined
-                  }
-                | null
-                | undefined
-            }
-          | null
-          | undefined
-        >
-        readonly pageInfo: {
-          readonly endCursor: string | null | undefined
-          readonly hasNextPage: boolean
-        }
-      }
-    | null
-    | undefined
-  readonly ' $fragmentType': 'ActivityLogsFragment'
-}
+  readonly activityLogs: {
+    readonly edges: ReadonlyArray<{
+      readonly node: {
+        readonly createdAt: any;
+        readonly id: string;
+        readonly url: string | null | undefined;
+        readonly user: {
+          readonly avatar: {
+            readonly url: string;
+          } | null | undefined;
+          readonly email: string | null | undefined;
+          readonly fullName: string | null | undefined;
+          readonly id: string;
+        } | null | undefined;
+        readonly verb: string | null | undefined;
+      } | null | undefined;
+    } | null | undefined>;
+    readonly pageInfo: {
+      readonly endCursor: string | null | undefined;
+      readonly hasNextPage: boolean;
+    };
+  } | null | undefined;
+  readonly " $fragmentType": "ActivityLogsFragment";
+};
 export type ActivityLogsFragment$key = {
-  readonly ' $data'?: ActivityLogsFragment$data
-  readonly ' $fragmentSpreads': FragmentRefs<'ActivityLogsFragment'>
-}
+  readonly " $data"?: ActivityLogsFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"ActivityLogsFragment">;
+};
 
-const node: ReaderFragment = (function () {
-  var v0 = ['activityLogs'],
-    v1 = {
-      alias: null,
-      args: null,
-      kind: 'ScalarField',
-      name: 'id',
-      storageKey: null,
+const node: ReaderFragment = (function(){
+var v0 = [
+  "activityLogs"
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "url",
+  "storageKey": null
+};
+return {
+  "argumentDefinitions": [
+    {
+      "defaultValue": 10,
+      "kind": "LocalArgument",
+      "name": "count"
+    },
+    {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "cursor"
     },
-    v2 = {
-      alias: null,
-      args: null,
-      kind: 'ScalarField',
-      name: 'url',
-      storageKey: null,
+    {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "userName"
     }
-  return {
-    argumentDefinitions: [
-      {
-        defaultValue: 10,
-        kind: 'LocalArgument',
-        name: 'count',
-      },
+  ],
+  "kind": "Fragment",
+  "metadata": {
+    "connection": [
       {
-        defaultValue: null,
-        kind: 'LocalArgument',
-        name: 'cursor',
-      },
-      {
-        defaultValue: null,
-        kind: 'LocalArgument',
-        name: 'userName',
-      },
+        "count": "count",
+        "cursor": "cursor",
+        "direction": "forward",
+        "path": (v0/*: any*/)
+      }
     ],
-    kind: 'Fragment',
-    metadata: {
-      connection: [
-        {
-          count: 'count',
-          cursor: 'cursor',
-          direction: 'forward',
-          path: v0 /*: any*/,
+    "refetch": {
+      "connection": {
+        "forward": {
+          "count": "count",
+          "cursor": "cursor"
         },
+        "backward": null,
+        "path": (v0/*: any*/)
+      },
+      "fragmentPathInResult": [],
+      "operation": require('./ActivityLogsPaginationQuery.graphql')
+    }
+  },
+  "name": "ActivityLogsFragment",
+  "selections": [
+    {
+      "alias": "activityLogs",
+      "args": [
+        {
+          "kind": "Variable",
+          "name": "userName",
+          "variableName": "userName"
+        }
       ],
-      refetch: {
-        connection: {
-          forward: {
-            count: 'count',
-            cursor: 'cursor',
-          },
-          backward: null,
-          path: v0 /*: any*/,
+      "concreteType": "ActivityLogConnection",
+      "kind": "LinkedField",
+      "name": "__ActivityLogs_activityLogs_connection",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "ActivityLogEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "ActivityLog",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v1/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "createdAt",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "verb",
+                  "storageKey": null
+                },
+                (v2/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "concreteType": "User",
+                  "kind": "LinkedField",
+                  "name": "user",
+                  "plural": false,
+                  "selections": [
+                    (v1/*: any*/),
+                    {
+                      "alias": null,
+                      "args": null,
+                      "kind": "ScalarField",
+                      "name": "fullName",
+                      "storageKey": null
+                    },
+                    {
+                      "alias": null,
+                      "args": null,
+                      "kind": "ScalarField",
+                      "name": "email",
+                      "storageKey": null
+                    },
+                    {
+                      "alias": null,
+                      "args": [
+                        {
+                          "kind": "Literal",
+                          "name": "height",
+                          "value": 48
+                        },
+                        {
+                          "kind": "Literal",
+                          "name": "width",
+                          "value": 48
+                        }
+                      ],
+                      "concreteType": "File",
+                      "kind": "LinkedField",
+                      "name": "avatar",
+                      "plural": false,
+                      "selections": [
+                        (v2/*: any*/)
+                      ],
+                      "storageKey": "avatar(height:48,width:48)"
+                    }
+                  ],
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "__typename",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "cursor",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
         },
-        fragmentPathInResult: [],
-        operation: require('./ActivityLogsPaginationQuery.graphql'),
-      },
-    },
-    name: 'ActivityLogsFragment',
-    selections: [
-      {
-        alias: 'activityLogs',
-        args: [
-          {
-            kind: 'Variable',
-            name: 'userName',
-            variableName: 'userName',
-          },
-        ],
-        concreteType: 'ActivityLogConnection',
-        kind: 'LinkedField',
-        name: '__ActivityLogs_activityLogs_connection',
-        plural: false,
-        selections: [
-          {
-            alias: null,
-            args: null,
-            concreteType: 'ActivityLogEdge',
-            kind: 'LinkedField',
-            name: 'edges',
-            plural: true,
-            selections: [
-              {
-                alias: null,
-                args: null,
-                concreteType: 'ActivityLog',
-                kind: 'LinkedField',
-                name: 'node',
-                plural: false,
-                selections: [
-                  v1 /*: any*/,
-                  {
-                    alias: null,
-                    args: null,
-                    kind: 'ScalarField',
-                    name: 'createdAt',
-                    storageKey: null,
-                  },
-                  {
-                    alias: null,
-                    args: null,
-                    kind: 'ScalarField',
-                    name: 'verb',
-                    storageKey: null,
-                  },
-                  v2 /*: any*/,
-                  {
-                    alias: null,
-                    args: null,
-                    concreteType: 'User',
-                    kind: 'LinkedField',
-                    name: 'user',
-                    plural: false,
-                    selections: [
-                      v1 /*: any*/,
-                      {
-                        alias: null,
-                        args: null,
-                        kind: 'ScalarField',
-                        name: 'fullName',
-                        storageKey: null,
-                      },
-                      {
-                        alias: null,
-                        args: null,
-                        kind: 'ScalarField',
-                        name: 'email',
-                        storageKey: null,
-                      },
-                      {
-                        alias: null,
-                        args: [
-                          {
-                            kind: 'Literal',
-                            name: 'height',
-                            value: 48,
-                          },
-                          {
-                            kind: 'Literal',
-                            name: 'width',
-                            value: 48,
-                          },
-                        ],
-                        concreteType: 'File',
-                        kind: 'LinkedField',
-                        name: 'avatar',
-                        plural: false,
-                        selections: [v2 /*: any*/],
-                        storageKey: 'avatar(height:48,width:48)',
-                      },
-                    ],
-                    storageKey: null,
-                  },
-                  {
-                    alias: null,
-                    args: null,
-                    kind: 'ScalarField',
-                    name: '__typename',
-                    storageKey: null,
-                  },
-                ],
-                storageKey: null,
-              },
-              {
-                alias: null,
-                args: null,
-                kind: 'ScalarField',
-                name: 'cursor',
-                storageKey: null,
-              },
-            ],
-            storageKey: null,
-          },
-          {
-            alias: null,
-            args: null,
-            concreteType: 'PageInfo',
-            kind: 'LinkedField',
-            name: 'pageInfo',
-            plural: false,
-            selections: [
-              {
-                alias: null,
-                args: null,
-                kind: 'ScalarField',
-                name: 'endCursor',
-                storageKey: null,
-              },
-              {
-                alias: null,
-                args: null,
-                kind: 'ScalarField',
-                name: 'hasNextPage',
-                storageKey: null,
-              },
-            ],
-            storageKey: null,
-          },
-        ],
-        storageKey: null,
-      },
-    ],
-    type: 'Query',
-    abstractKey: null,
-  }
-})()
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "PageInfo",
+          "kind": "LinkedField",
+          "name": "pageInfo",
+          "plural": false,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "endCursor",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "hasNextPage",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "Query",
+  "abstractKey": null
+};
+})();
 
-;(node as any).hash = '89365a3b6109a48bbc293c75f9d7174a'
+(node as any).hash = "89365a3b6109a48bbc293c75f9d7174a";
 
-export default node
+export default node;