feat(activity): add types, users, and date range filters to activity history

src/components/specific/projects/project-history-activity/ProjectHistoryActivity.css

@@ -7,13 +7,16 @@
       font-size: 18px;
     }
   }
-  .input-search {
-    border: 1px solid transparent;
-    border-radius: 3px;
-    &.focus {
-      background-color: var(--color-silver-light);
-      box-shadow: none;
-      border: 1px solid #efefef;
+  .actions {
+    gap: 6px;
+    .input-search {
+      border: 1px solid transparent;
+      border-radius: 3px;
+      &.focus {
+        background-color: var(--color-silver-light);
+        box-shadow: none;
+        border: 1px solid #efefef;
+      }
     }
   }
   .day-group {

src/components/specific/projects/project-history-activity/ProjectHistoryActivity.vue

@@ -4,14 +4,21 @@
       <h3>{{ $t("ProjectOverview.activity.title") }}</h3>
     </div>
 
-    <BIMDataSearch
-      class="input-search"
-      width="95%"
-      :placeholder="$t('t.search')"
-      v-model="searchText"
-      clear
-      color="primary"
-    />
+    <div class="actions flex">
+      <BIMDataSearch
+        class="input-search"
+        width="95%"
+        :placeholder="$t('t.search')"
+        v-model="searchText"
+        clear
+        color="primary"
+      />
+      <ActivityFilters
+        v-model="filters"
+        :availableUsers="availableUsers"
+        :availableActions="availableActions"
+      />
+    </div>
 
     <template v-if="hasDisplayedLogs">
       <div v-for="(logs, day) in displayedGroupedLogs" :key="day" class="day-group">
@@ -40,13 +47,15 @@ import { useTimeAgo } from "../../../../composables/time.js";
 import ProjectService from "../../../../services/ProjectService.js";
 
 import ActivityItem from "./activity-item/ActivityItem.vue";
+import ActivityFilters from "./activity-filters/ActivityFilters.vue";
 
 export default {
   props: {
     project: Object,
   },
   components: {
     ActivityItem,
+    ActivityFilters,
   },
   emits: ["go-folder"],
 
@@ -119,24 +128,58 @@ export default {
 
     const displayedGroupedLogs = computed(() => {
       const search = searchText.value.trim().toLowerCase();
+      const f = filters.value;
 
       return sortedLogs.value
-        .filter((log) => !search || log._search.includes(search))
+        .filter((log) => {
+          if (search && !log._search.includes(search)) return false;
+
+          // Types
+          if (f.types.length && !f.types.includes(log.action)) return false;
+
+          // Users
+          if (f.users.length && !f.users.includes(log.user_email)) return false;
+
+          // Date
+          if (f.dateFrom && log.dateObj < f.dateFrom) return false;
+          if (f.dateTo) {
+            const endOfDay = new Date(f.dateTo);
+            endOfDay.setHours(23, 59, 59, 999);
+            if (log.dateObj > endOfDay) return false;
+          }
+
+          return true;
+        })
         .reduce((groups, log) => {
           const day = formatDay(log.dateObj);
-
           groups[day] ??= [];
           groups[day].push(log);
-
           return groups;
         }, {});
     });
+
     const hasDisplayedLogs = computed(() => Object.keys(displayedGroupedLogs.value).length > 0);
 
+    const filters = ref({
+      types: [],
+      users: [],
+      dateFrom: null,
+      dateTo: null,
+    });
+
+    const availableUsers = computed(() => [
+      ...new Set(logs.value.map((l) => l.user_email).filter(Boolean)),
+    ]);
+
+    const availableActions = computed(() => new Set(logs.value.map((l) => l.action)));
+
     return {
       displayedGroupedLogs,
       hasDisplayedLogs,
       searchText,
+      filters,
+      availableUsers,
+      availableActions,
       formatTimeAgo,
     };
   },

src/components/specific/projects/project-history-activity/activity-filters/ActivityFilters.css

@@ -0,0 +1,87 @@
+.activity-filters {
+  position: relative;
+
+  /* Filters button */
+  .activity-filters__btn {
+    gap: 6px;
+    .activity-filters__btn--active {
+      border-color: var(--color-primary);
+      background-color: rgba(47, 55, 74, .05);
+      color: var(--color-primary);
+    }
+    .activity-filters__badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 18px;
+      height: 18px;
+      padding: 0 4px;
+      border-radius: 9px;
+      background: var(--color-primary);
+      color: white;
+      font-size: 10px;
+      font-weight: 600;
+    }
+  }
+
+  /* Panel */
+  .activity-filters__panel {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 3px;
+    z-index: 100;
+    width: 320px;
+    background: var(--color-white);
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    .activity-filters__panel-header {
+      padding: 12px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-primary);
+      border-bottom: 1px solid var(--color-silver-light, #f0f0f0);
+    }
+
+    /* Sections */
+    .activity-filters__section {
+      padding: 12px;
+      .activity-filters__title {
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        margin-bottom: 3px;
+      }
+      .activity-filters__row {
+        padding: 2px 0;
+        font-size: 12px;
+        cursor: pointer;
+        user-select: none;
+
+        &.is-disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
+      }
+    }
+    .activity-filters__date-range {
+      :deep() .not-empty {
+        label {
+          display: none
+        }
+      }
+    }
+
+    /* Footer */
+    .activity-filters__footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: var(--spacing-unit);
+      padding: 12px 16px;
+      border-top: 1px solid var(--color-silver-light, #f0f0f0);
+      background: var(--color-white);
+    }
+  }
+}