Simple Managment webapp [LLM]

webapp/src/app/features/messages/message-list/message-list.component.html

@@ -36,11 +36,21 @@
           {{ getChannelDisplayName(channel) }}
         </nz-tag>
       }
+      @for (sender of senderFilter; track sender) {
+        <nz-tag nzMode="closeable" (nzOnClose)="removeSenderFilter(sender)">
+          {{ sender }}
+        </nz-tag>
+      }
       @if (priorityFilter.length > 0) {
         <nz-tag nzMode="closeable" (nzOnClose)="clearPriorityFilter()">
           {{ getPriorityLabel(+priorityFilter[0]) }}
         </nz-tag>
       }
+      @if (dateRange) {
+        <nz-tag nzMode="closeable" (nzOnClose)="clearDateRange()">
+          {{ getDateRangeDisplay() }}
+        </nz-tag>
+      }
       <a class="clear-all" (click)="clearAllFilters()">Clear all</a>
     </div>
   }
@@ -64,14 +74,35 @@
             [nzFilterMultiple]="true"
             (nzFilterChange)="onChannelFilterChange($event)"
           >Channel</th>
-          <th nzWidth="15%">Sender</th>
+          <th
+            nzWidth="15%"
+            [nzFilters]="senderFilters()"
+            [nzFilterMultiple]="true"
+            (nzFilterChange)="onSenderFilterChange($event)"
+          >Sender</th>
           <th
             nzWidth="10%"
             [nzFilters]="priorityFilters"
             [nzFilterMultiple]="false"
             (nzFilterChange)="onPriorityFilterChange($event)"
           >Priority</th>
-          <th nzWidth="20%">Time</th>
+          <th nzWidth="20%" nzCustomFilter>
+            Time
+            <nz-filter-trigger [(nzVisible)]="dateFilterVisible" [nzActive]="!!dateRange" [nzDropdownMenu]="dateMenu">
+              <span nz-icon nzType="filter" nzTheme="fill"></span>
+            </nz-filter-trigger>
+            <nz-dropdown-menu #dateMenu="nzDropdownMenu">
+              <div class="date-filter-dropdown" (click)="$event.stopPropagation()">
+                <nz-range-picker
+                  [ngModel]="dateRange"
+                  (ngModelChange)="onDateRangeChange($event)"
+                  [nzAllowClear]="true"
+                  nzFormat="yyyy-MM-dd"
+                  [nzInline]="true"
+                ></nz-range-picker>
+              </div>
+            </nz-dropdown-menu>
+          </th>
         </tr>
       </thead>
       <tbody>