Add filter to include/exclude tags

[Added]
- Introduced a tag filter feature allowing users to specify whether tags should be included or excluded in time entry filters. This supports 'contains' and 'not_contains' modes.

resources/js/Components/Common/Reporting/ReportingFilterBar.vue

@@ -14,6 +14,7 @@ import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
 import { useTagsQuery } from '@/utils/useTagsQuery';
 import { useTagsStore } from '@/utils/useTags';
+import type { TagFilter } from '@/types/reporting';
 
 type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
 
@@ -22,6 +23,7 @@ const selectedProjects = defineModel<string[]>('selectedProjects', { required: t
 const selectedTasks = defineModel<string[]>('selectedTasks', { required: true });
 const selectedClients = defineModel<string[]>('selectedClients', { required: true });
 const selectedTags = defineModel<string[]>('selectedTags', { required: true });
+const tagFilter = defineModel<TagFilter>('tagFilter', { required: true });
 const billable = defineModel<'true' | 'false' | null>('billable', { required: true });
 const roundingEnabled = defineModel<boolean>('roundingEnabled', { required: true });
 const roundingType = defineModel<TimeEntryRoundingType>('roundingType', { required: true });
@@ -93,6 +95,44 @@ async function createTag(name: string) {
                             title="Tags"
                             :icon="TagIcon" />
                     </template>
+                    <template #content-before-list>
+                        <div class="mt-2 border-b border-card-background-separator pb-2">
+                            <div
+                                class="mb-1.5 px-2 text-xs font-medium text-text-tertiary uppercase">
+                                Match
+                            </div>
+                            <div class="space-y-1">
+                                <button
+                                    type="button"
+                                    class="w-full rounded-md px-2 py-1.5 text-left text-sm font-medium"
+                                    :class="
+                                        tagFilter === 'contains'
+                                            ? 'bg-card-background-active text-text-primary'
+                                            : 'text-text-secondary hover:bg-card-background-active'
+                                    "
+                                    @click="
+                                        tagFilter = 'contains';
+                                        emit('submit');
+                                    ">
+                                    Contains
+                                </button>
+                                <button
+                                    type="button"
+                                    class="w-full rounded-md px-2 py-1.5 text-left text-sm font-medium"
+                                    :class="
+                                        tagFilter === 'not_contains'
+                                            ? 'bg-card-background-active text-text-primary'
+                                            : 'text-text-secondary hover:bg-card-background-active'
+                                    "
+                                    @click="
+                                        tagFilter = 'not_contains';
+                                        emit('submit');
+                                    ">
+                                    Does Not Contain
+                                </button>
+                            </div>
+                        </div>
+                    </template>
                 </TagDropdown>
 
                 <Select v-model="billable" @update:model-value="emit('submit')">

resources/js/Components/Common/Reporting/ReportingOverview.vue

@@ -49,6 +49,7 @@ import type { ExportFormat } from '@/types/reporting';
 import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import { useAggregatedTimeEntriesQuery } from '@/utils/useAggregatedTimeEntriesQuery';
+import type { TagFilter } from '@/types/reporting';
 
 type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
 
@@ -67,6 +68,7 @@ const selectedProjects = ref<string[]>([]);
 const selectedMembers = ref<string[]>([]);
 const selectedTasks = ref<string[]>([]);
 const selectedClients = ref<string[]>([]);
+const tagFilter = ref<TagFilter>('contains');
 
 const billable = ref<'true' | 'false' | null>(null);
 const roundingEnabled = ref<boolean>(false);
@@ -122,6 +124,7 @@ const filterParams = computed<AggregatedTimeEntriesQueryParams>(() => {
         task_ids: selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
         client_ids: selectedClients.value.length > 0 ? selectedClients.value : undefined,
         tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+        tag_filter: selectedTags.value.length > 0 ? tagFilter.value : undefined,
         billable: billable.value !== null ? billable.value : undefined,
         member_id: getCurrentRole() === 'employee' ? getCurrentMembershipId() : undefined,
         rounding_type: roundingEnabled.value ? roundingType.value : undefined,
@@ -366,6 +369,7 @@ const tableData = computed(() => {
         v-model:selected-tasks="selectedTasks"
         v-model:selected-clients="selectedClients"
         v-model:selected-tags="selectedTags"
+        v-model:tag-filter="tagFilter"
         v-model:billable="billable"
         v-model:rounding-enabled="roundingEnabled"
         v-model:rounding-type="roundingType"