Frontend first draft

frontend/pweb/lib/pages/report/table/badge.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:badges/badges.dart' as badges;
+
+import 'package:pshared/models/payment/status.dart';
+
+
+class OperationStatusBadge extends StatelessWidget {
+  final OperationStatus status;
+
+  const OperationStatusBadge({super.key, required this.status});
+
+  Color _badgeColor(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    switch (status) {
+      case OperationStatus.processing:
+        return scheme.primary;
+      case OperationStatus.success:
+        return scheme.secondary;
+      case OperationStatus.error:
+        return scheme.error;
+    }
+  }
+
+  Color _textColor(Color background) {
+    // computeLuminance returns 0 for black, 1 for white
+    return background.computeLuminance() > 0.5 ? Colors.black : Colors.white;
+  }  
+
+  @override
+  Widget build(BuildContext context) {
+    final label = status.localized(context);
+    final bg = _badgeColor(context);
+    final fg = _textColor(bg);
+
+    return badges.Badge(
+      badgeStyle: badges.BadgeStyle(
+        shape: badges.BadgeShape.square,
+        badgeColor: bg,
+        borderRadius: BorderRadius.circular(12),      // fully rounded
+        padding: const EdgeInsets.symmetric(
+          horizontal: 6, vertical: 2                     // tighter padding
+        ),
+      ),
+      badgeContent: Text(
+        label.toUpperCase(),                           // or keep sentence case
+        style: TextStyle(
+          color: fg,
+          fontSize: 11,                                 // smaller text
+          fontWeight: FontWeight.w500,                  // medium weight
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/report/table/filters.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+import 'package:badges/badges.dart' as badges; // Make sure to add badges package in pubspec.yaml
+import 'package:pshared/models/payment/status.dart';
+import 'package:pshared/utils/localization.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+class OperationFilters extends StatelessWidget {
+  final DateTimeRange? selectedRange;
+  final Set<String> selectedStatuses;
+  final VoidCallback onPickRange;
+  final VoidCallback onApply;
+  final ValueChanged<String> onToggleStatus;
+
+  const OperationFilters({
+    super.key,
+    required this.selectedRange,
+    required this.selectedStatuses,
+    required this.onPickRange,
+    required this.onApply,
+    required this.onToggleStatus,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Card(
+      margin: const EdgeInsets.all(16),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      elevation: 2,
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              l10n.filters,
+              style: Theme.of(context).textTheme.bodyLarge,
+            ),
+            const SizedBox(height: 12),
+            GestureDetector(
+              onTap: onPickRange,
+              child: Row(
+                children: [
+                  Icon(Icons.date_range_outlined, color: Theme.of(context).primaryColor),
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: Text(
+                      selectedRange == null
+                          ? l10n.selectPeriod
+                          : '${dateToLocalFormat(context, selectedRange!.start)} – ${dateToLocalFormat(context, selectedRange!.end)}',
+                      style: TextStyle(
+                        color: selectedRange == null
+                            ? Colors.grey
+                            : Colors.black87,
+                      ),
+                    ),
+                  ),
+                  Icon(Icons.keyboard_arrow_down, color: Colors.grey),
+                ],
+              ),
+            ),
+            const SizedBox(height: 16),
+            Wrap(
+              spacing: 12,
+              runSpacing: 8,
+              children: [
+                OperationStatus.success.localized(context), 
+                OperationStatus.processing.localized(context), 
+                OperationStatus.error.localized(context),
+              ].map((status) {
+                final isSelected = selectedStatuses.contains(status);
+                return GestureDetector(
+                  onTap: () => onToggleStatus(status),
+                  child: badges.Badge(
+                    badgeAnimation: badges.BadgeAnimation.fade(),
+                    badgeStyle: badges.BadgeStyle(
+                      shape: badges.BadgeShape.square,
+                      badgeColor: isSelected
+                          ? Theme.of(context).primaryColor
+                          : Colors.grey.shade300,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    badgeContent: Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 8,
+                        vertical: 4,
+                      ),
+                      child: Text(
+                        l10n.status(status),
+                        style: TextStyle(
+                          color: isSelected ? Colors.white : Colors.black87,
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                );
+              }).toList(),
+            ),
+            const SizedBox(height: 24),
+            Align(
+              alignment: Alignment.centerRight,
+              child: ElevatedButton(
+                onPressed: onApply,
+                style: ElevatedButton.styleFrom(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 24,
+                    vertical: 12,
+                  ),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                ),
+                child: Text(l10n.apply),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/report/table/row.dart

@@ -0,0 +1,23 @@
+// operation_row.dart
+import 'package:flutter/material.dart';
+import 'package:pshared/models/payment/operation.dart';
+import 'package:pweb/pages/report/table/badge.dart';
+
+class OperationRow {
+  static DataRow build(OperationItem op, BuildContext context) {
+    return DataRow(cells: [
+      DataCell(OperationStatusBadge(status: op.status)),
+      DataCell(Text(op.fileName ?? '')),
+      DataCell(Text('${op.amount.toStringAsFixed(2)} ${op.currency}')),
+      DataCell(Text('${op.toAmount.toStringAsFixed(2)} ${op.toCurrency}')),
+      DataCell(Text(op.payId)),
+      DataCell(Text(op.cardNumber ?? '-')),
+      DataCell(Text(op.name)),
+      DataCell(Text(
+        '${TimeOfDay.fromDateTime(op.date).format(context)}\n'
+        '${op.date.toLocal().toIso8601String().split("T").first}',
+      )),
+      DataCell(Text(op.comment)),
+    ]);
+  }
+}

frontend/pweb/lib/pages/report/table/widget.dart

@@ -0,0 +1,63 @@
+// operations_table.dart
+import 'package:flutter/material.dart';
+import 'package:pshared/models/payment/operation.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+import 'package:pweb/pages/report/table/row.dart';
+
+class OperationsTable extends StatelessWidget {
+  final List<OperationItem> operations;
+  final bool showFileNameColumn;
+
+  const OperationsTable({
+    super.key,
+    required this.operations,
+    required this.showFileNameColumn,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = AppLocalizations.of(context)!;
+
+    return Expanded(
+      child: SingleChildScrollView(
+        child: DataTable(
+          columnSpacing: 24,
+          headingTextStyle: const TextStyle(
+            fontWeight: FontWeight.bold,
+          ),
+          columns: [
+            DataColumn(label: Text(l10n.statusColumn)),
+            DataColumn(label: Text(l10n.fileNameColumn)),
+            DataColumn(label: Text(l10n.amountColumn)),
+            DataColumn(label: Text(l10n.toAmountColumn)),
+            DataColumn(label: Text(l10n.payIdColumn)),
+            DataColumn(label: Text(l10n.cardNumberColumn)),
+            DataColumn(label: Text(l10n.nameColumn)),
+            DataColumn(label: Text(l10n.dateColumn)),
+            DataColumn(label: Text(l10n.commentColumn)),
+          ],
+          rows: List.generate(
+            operations.length,
+            (index) {
+              final op = operations[index];
+              // Alternate row colors
+              final color = WidgetStateProperty.resolveWith<Color?>((states) {
+                return index.isEven
+                  ? Theme.of(context).colorScheme.surfaceContainerHighest
+                  : null;
+              });
+
+              // Use the DataRow built by OperationRow and extract its cells
+              final row = OperationRow.build(op, context);
+              return DataRow.byIndex(
+                index: index,
+                color: color,
+                cells: row.cells,
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}