Adjust filters section in activity log

assets/js/common/ComposedFilter/ComposedFilter.jsx

@@ -32,12 +32,14 @@ const renderFilter = (key, { type, ...filterProps }, value, onChange) => {
  * @param {Object} props.value - Key/value pairs of selected filters, where key is the filter key
  * @param {Function} props.onChange - Function to call when the composed value changes. If autoApply is true, this function is called on every filter change
  * @param {Boolean} props.autoApply - If true, onChange is called on every filter change; otherwise, an apply button is shown
+ * @param {ReactNode} props.children - Additional elements to display after the filters
  */
 function ComposedFilter({
   filters = [],
   onChange,
   value: initialValue = {},
   autoApply,
+  children,
 }) {
   const [value, setValue] = useState(initialValue);
   const [isChanged, setIsChanged] = useState(false);
@@ -56,13 +58,14 @@ function ComposedFilter({
   }, [JSON.stringify(initialValue)]);
 
   return (
-    <>
+    <div className="grid grid-flow-col gap-4">
       {filters
         .map(({ key, ...rest }) => [key, rest, value[key], onFilterChange(key)])
         .map((args) => renderFilter(...args))}
       {!autoApply && (
-        <div className="flex flex-row w-64 space-x-2">
+        <div className="grid grid-rows-subgrid gap-4 row-span-2">
           <Button
+            className="col-span-1"
             disabled={!isChanged}
             onClick={() => {
               setIsChanged(false);
@@ -72,6 +75,7 @@ function ComposedFilter({
             Apply
           </Button>
           <Button
+            className="col-span-1"
             type="primary-white"
             onClick={() => {
               setValue({});
@@ -81,9 +85,10 @@ function ComposedFilter({
           >
             Reset
           </Button>
+          {children}
         </div>
       )}
-    </>
+    </div>
   );
 }
 

assets/js/common/DateFilter/DateFilter.jsx

@@ -110,13 +110,15 @@ function DateTimeInput({ value, onChange }) {
  * @param {string} props.value - The selected id of the selected option. It accepted either a string or an array with the id as the first element.
  * @param {boolean} props.prefilled - Whether to include pre-configured options in the options list. Default is true.
  * @param {function} props.onChange - The callback function to be called when the value of the date filter changes. It will provide a couple with the selected id and the actual date.
+ * @param {string} props.className - CSS classes to be applied to the component.
  */
 function DateFilter({
   options = [],
   title,
   value,
   prefilled = true,
   onChange,
+  className,
 }) {
   const ref = useRef();
   const [open, setOpen] = useState(false);
@@ -132,8 +134,8 @@ function DateFilter({
   const text = renderOptionItem(selectedOption, `Filter ${title}...`);
 
   return (
-    <div className="flex-1 w-64 top-16" ref={ref}>
-      <div className="mt-1 relative">
+    <div className={className} ref={ref}>
+      <div className="relative">
         {selectedOption && (
           <button
             type="button"

assets/js/common/Filter/Filter.jsx

@@ -18,8 +18,9 @@ const getLabel = (value, placeholder) =>
  * @param {string} props.title Title of the filter. It will be displayed in the button when the filter is empty
  * @param {string|string[]} props.value Selected options. Default is an empty array
  * @param {function} props.onChange Function to call when the selected options change
+ * @param {string} props.className Additional classes to apply to the filter
  */
-function Filter({ options, title, value = [], onChange }) {
+function Filter({ options, title, value = [], onChange, className }) {
   const ref = useRef();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -42,8 +43,8 @@ function Filter({ options, title, value = [], onChange }) {
   useOnClickOutside(ref, () => setOpen(false));
 
   return (
-    <div className="flex-1 w-64 top-16" ref={ref}>
-      <div className="mt-1 relative">
+    <div className={classNames('top-16', className)} ref={ref}>
+      <div className="relative">
         {parsedValue.length !== 0 && (
           <button
             type="button"

assets/js/common/Table/Table.jsx

@@ -164,7 +164,11 @@ function Table({
         'px-4 sm:px-8': usePadding,
       })}
     >
-      <div className="flex items-center px-4 space-x-4 pb-4">
+      <div
+        className={classNames('flex-row px-4 space-x-4', {
+          'pb-4': hasFilters,
+        })}
+      >
         <TableFilters
           config={config}
           data={data}

assets/js/pages/ActivityLogPage/ActivityLogPage.jsx

@@ -146,24 +146,28 @@ function ActivityLogPage() {
         allowedActivities,
         map(([key, value]) => [key, value.label])
       )(abilities),
+      className: 'col-span-2',
     },
     {
       key: 'actor',
       type: 'select',
       title: 'User',
       options: users,
+      className: 'col-span-2',
     },
     {
       key: 'to_date',
       title: 'newer than',
       type: 'date',
       prefilled: true,
+      className: 'col-span-2',
     },
     {
       key: 'from_date',
       title: 'older than',
       type: 'date',
       prefilled: true,
+      className: 'col-span-2',
     },
   ];
 
@@ -198,8 +202,7 @@ function ActivityLogPage() {
     <>
       <PageHeader className="font-bold">Activity Log</PageHeader>
       <div className="bg-white rounded-lg shadow">
-        <div style={{ padding: '1rem' }} />
-        <div className="flex items-center px-4 space-x-2 pb-4">
+        <div className="p-4">
           <ComposedFilter
             filters={filters}
             autoApply={false}
@@ -210,15 +213,16 @@ function ActivityLogPage() {
               applyItemsPerPage(itemsPerPage),
               setSearchParams
             )}
-          />
-          <Button
-            type="primary-white"
-            className="!w-28"
-            onClick={fetchActivityLog}
           >
-            <EOS_REFRESH className="inline-block fill-jungle-green-500" />{' '}
-            Refresh
-          </Button>
+            <Button
+              className="col-span-2"
+              type="primary-white"
+              onClick={fetchActivityLog}
+            >
+              <EOS_REFRESH className="inline-block fill-jungle-green-500" />{' '}
+              Refresh
+            </Button>
+          </ComposedFilter>
         </div>
         <MainView
           request={activityLogRequest}