Admin UI: Overview of all identities

.github/CODEOWNERS

@@ -1 +1 @@
-* @tnotheis @jkoenig134
+* @tnotheis @jkoenig134

AdminUi/apps/admin_ui/lib/core/widgets/filters/date_filter.dart

@@ -0,0 +1,96 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+import '/core/constants.dart';
+import 'to_filter_operator_dropdown_menu_item.dart';
+
+class DateFilter extends StatefulWidget {
+  final void Function(FilterOperator operator, DateTime? selectedDate) onFilterSelected;
+  final String label;
+
+  const DateFilter({required this.onFilterSelected, required this.label, super.key});
+
+  @override
+  State<DateFilter> createState() => _DateFilterState();
+}
+
+class _DateFilterState extends State<DateFilter> {
+  FilterOperator _operator = FilterOperator.equal;
+  DateTime? _selectedDate;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          '${widget.label}:',
+          style: const TextStyle(fontWeight: FontWeight.bold),
+        ),
+        Gaps.h8,
+        Row(
+          children: [
+            DropdownButton<FilterOperator>(
+              value: _operator,
+              onChanged: (selectedOperator) {
+                if (selectedOperator == null) return;
+                setState(() => _operator = selectedOperator);
+                widget.onFilterSelected(selectedOperator, _selectedDate);
+              },
+              items: FilterOperator.values.toDropdownMenuItems(),
+            ),
+            Gaps.w8,
+            InkWell(
+              onTap: _selectNewDate,
+              child: Container(
+                padding: const EdgeInsets.all(12),
+                decoration: BoxDecoration(
+                  border: Border.all(color: Colors.grey),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(
+                      _selectedDate != null ? DateFormat('yyyy-MM-dd').format(_selectedDate!) : 'Select date',
+                      style: const TextStyle(fontSize: 14),
+                    ),
+                    Gaps.w8,
+                    const Icon(Icons.calendar_today),
+                    if (_selectedDate != null) ...[
+                      Gaps.w8,
+                      GestureDetector(
+                        onTap: _clearDate,
+                        child: const Icon(Icons.clear, size: 20),
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  void _clearDate() {
+    setState(() => _selectedDate = null);
+    widget.onFilterSelected(_operator, null);
+  }
+
+  Future<void> _selectNewDate() async {
+    final picked = await showDatePicker(
+      context: context,
+      initialDate: _selectedDate ?? DateTime.now(),
+      firstDate: DateTime(2000),
+      lastDate: DateTime.now().add(const Duration(days: 1)),
+    );
+
+    if (picked == null) return;
+
+    setState(() => _selectedDate = picked);
+    widget.onFilterSelected(_operator, picked);
+  }
+}

AdminUi/apps/admin_ui/lib/core/widgets/filters/filters.dart

@@ -0,0 +1,4 @@
+export 'date_filter.dart';
+export 'input_filter.dart';
+export 'multi_select.dart';
+export 'number_filter.dart';

AdminUi/apps/admin_ui/lib/core/widgets/filters/input_filter.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import '/core/core.dart';
+
+class InputField extends StatelessWidget {
+  final void Function(String enteredText) onEnteredText;
+  final String label;
+
+  const InputField({required this.onEnteredText, required this.label, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          '$label:',
+          style: const TextStyle(fontWeight: FontWeight.bold),
+        ),
+        Gaps.h8,
+        SizedBox(
+          width: 180,
+          child: TextField(
+            onChanged: onEnteredText,
+            decoration: const InputDecoration(border: OutlineInputBorder()),
+          ),
+        ),
+      ],
+    );
+  }
+}

AdminUi/apps/admin_ui/lib/core/widgets/filters/multi_select.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:multi_dropdown/multiselect_dropdown.dart';
+
+import '/core/core.dart';
+
+class MultiSelectFilter extends StatelessWidget {
+  final String label;
+  final String searchLabel;
+  final MultiSelectController<String> controller;
+  final void Function(List<ValueItem<String>> selectedOptions) onOptionSelected;
+
+  const MultiSelectFilter({
+    required this.label,
+    required this.searchLabel,
+    required this.controller,
+    required this.onOptionSelected,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          '$label:',
+          style: const TextStyle(fontWeight: FontWeight.bold),
+        ),
+        Gaps.h8,
+        SizedBox(
+          width: 250,
+          child: MultiSelectDropDown(
+            hint: '',
+            searchLabel: searchLabel,
+            searchEnabled: true,
+            controller: controller,
+            options: controller.options,
+            fieldBackgroundColor: Theme.of(context).colorScheme.background,
+            searchBackgroundColor: Theme.of(context).colorScheme.background,
+            dropdownBackgroundColor: Theme.of(context).colorScheme.background,
+            selectedOptionBackgroundColor: Theme.of(context).colorScheme.background,
+            selectedOptionTextColor: Theme.of(context).colorScheme.onBackground,
+            optionsBackgroundColor: Theme.of(context).colorScheme.background,
+            optionTextStyle: TextStyle(color: Theme.of(context).colorScheme.onBackground),
+            onOptionSelected: onOptionSelected,
+          ),
+        ),
+      ],
+    );
+  }
+}

AdminUi/apps/admin_ui/lib/core/widgets/filters/number_filter.dart

@@ -0,0 +1,66 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '/core/constants.dart';
+import 'to_filter_operator_dropdown_menu_item.dart';
+
+class NumberFilter extends StatefulWidget {
+  final void Function(FilterOperator operator, String enteredValue) onNumberSelected;
+  final String label;
+
+  const NumberFilter({
+    required this.onNumberSelected,
+    required this.label,
+    super.key,
+  });
+
+  @override
+  State<NumberFilter> createState() => _NumberFilterState();
+}
+
+class _NumberFilterState extends State<NumberFilter> {
+  late FilterOperator _operator = FilterOperator.equal;
+  late String _value = '';
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          '${widget.label}:',
+          style: const TextStyle(fontWeight: FontWeight.bold),
+        ),
+        Gaps.h8,
+        Row(
+          children: [
+            DropdownButton<FilterOperator>(
+              value: _operator,
+              onChanged: (selectedOperator) {
+                if (selectedOperator == null) return;
+                setState(() => _operator = selectedOperator);
+                widget.onNumberSelected(selectedOperator, _value);
+              },
+              items: FilterOperator.values.toDropdownMenuItems(),
+            ),
+            Gaps.w16,
+            SizedBox(
+              width: 120,
+              child: TextField(
+                onChanged: (enteredValue) {
+                  _value = enteredValue;
+                  widget.onNumberSelected(_operator, enteredValue);
+                },
+                decoration: const InputDecoration(border: OutlineInputBorder()),
+                style: const TextStyle(fontSize: 12),
+                inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
+                keyboardType: TextInputType.number,
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

AdminUi/apps/admin_ui/lib/core/widgets/filters/to_filter_operator_dropdown_menu_item.dart

@@ -0,0 +1,11 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
+import 'package:flutter/material.dart';
+
+extension ToFilterOperatorDropdownMenuItem on List<FilterOperator> {
+  List<DropdownMenuItem<FilterOperator>> toDropdownMenuItems() => map(
+        (operator) => DropdownMenuItem<FilterOperator>(
+          value: operator,
+          child: Text(operator.userFriendlyOperator),
+        ),
+      ).toList();
+}

AdminUi/apps/admin_ui/lib/core/widgets/widgets.dart

@@ -1 +1,2 @@
 export 'app_title.dart';
+export 'filters/filters.dart';

AdminUi/apps/admin_ui/lib/home/home.dart

@@ -1,13 +1,6 @@
 import 'package:flutter/material.dart';
 
-class Identities extends StatelessWidget {
-  const Identities({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const Placeholder();
-  }
-}
+export 'identities_overview/identities_overview.dart';
 
 class Tiers extends StatelessWidget {
   const Tiers({super.key});

AdminUi/apps/admin_ui/lib/home/identities_overview/identities_data_table_source.dart

@@ -0,0 +1,91 @@
+import 'package:admin_api_sdk/admin_api_sdk.dart';
+import 'package:data_table_2/data_table_2.dart';
+import 'package:flutter/material.dart';
+import 'package:get_it/get_it.dart';
+import 'package:intl/intl.dart';
+import 'package:logger/logger.dart';
+
+class IdentityDataTableSource extends AsyncDataTableSource {
+  Pagination? _pagination;
+  var _sortingSettings = (sortColumnIndex: 0, sortAscending: true);
+
+  IdentityOverviewFilter? _filter;
+
+  set filter(IdentityOverviewFilter? newFilter) {
+    if (_filter != newFilter) {
+      _filter = newFilter;
+      notifyListeners();
+    }
+  }
+
+  void sort({required int sortColumnIndex, required bool sortColumnAscending}) {
+    _sortingSettings = (sortColumnIndex: sortColumnIndex, sortAscending: sortColumnAscending);
+    notifyListeners();
+  }
+
+  @override
+  bool get isRowCountApproximate => false;
+
+  @override
+  int get rowCount => _pagination?.totalRecords ?? 0;
+
+  @override
+  int get selectedRowCount => 0;
+
+  @override
+  Future<AsyncRowsResponse> getRows(int startIndex, int count) async {
+    final pageNumber = startIndex ~/ count;
+    final orderBy = _getODataOrderBy();
+
+    try {
+      final response = await GetIt.I.get<AdminApiClient>().identities.getIdentities(
+            pageNumber: pageNumber,
+            pageSize: count,
+            filter: _filter,
+            orderBy: orderBy,
+          );
+      _pagination = response.pagination;
+
+      final rows = response.data.indexed
+          .map(
+            (identity) => DataRow.byIndex(
+              index: pageNumber * count + identity.$1,
+              cells: [
+                DataCell(Text(identity.$2.address)),
+                DataCell(Text(identity.$2.tier.name)),
+                DataCell(Text(identity.$2.createdWithClient)),
+                DataCell(Text(identity.$2.numberOfDevices.toString())),
+                DataCell(Text(DateFormat('yyyy-MM-dd').format(identity.$2.createdAt))),
+                DataCell(Text(identity.$2.lastLoginAt != null ? DateFormat('yyyy-MM-dd').format(identity.$2.lastLoginAt!) : '')),
+                DataCell(Text(identity.$2.datawalletVersion?.toString() ?? '')),
+                DataCell(Text(identity.$2.identityVersion.toString())),
+              ],
+            ),
+          )
+          .toList();
+
+      return AsyncRowsResponse(response.pagination.totalRecords, rows);
+    } catch (e) {
+      GetIt.I.get<Logger>().e('Failed to load data: $e');
+
+      throw Exception('Failed to load data: $e');
+    }
+  }
+
+  String _getODataOrderBy() {
+    final columnName = _getFieldNameByIndex(_sortingSettings.sortColumnIndex);
+    final sortingDirection = _sortingSettings.sortAscending ? 'asc' : 'desc';
+    return '$columnName $sortingDirection';
+  }
+
+  String _getFieldNameByIndex(int index) => switch (index) {
+        0 => 'address',
+        2 => 'createdWithClient',
+        3 => 'numberOfDevices',
+        4 => 'createdAt',
+        5 => 'lastLoginAt',
+        6 => 'datawalletVersion',
+        7 => 'identityVersion',
+        _ => throw Exception('Invalid column index')
+      };
+}