reports page

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

@@ -4,6 +4,10 @@ import 'package:badges/badges.dart' as badges;
 
 import 'package:pshared/models/payment/status.dart';
 
+import 'package:pweb/utils/payment/status_view.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
 
 class OperationStatusBadge extends StatelessWidget {
   final OperationStatus status;
@@ -11,15 +15,8 @@ class OperationStatusBadge extends StatelessWidget {
   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;
-    }
+    final l10n = AppLocalizations.of(context)!;
+    return operationStatusView(l10n, status).color;
   }
 
   Color _textColor(Color background) {
@@ -52,4 +49,4 @@ class OperationStatusBadge extends StatelessWidget {
       ),
     );
   }
-}
+}

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

@@ -1,70 +1,80 @@
 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<OperationStatus> selectedStatuses;
   final VoidCallback onPickRange;
-  final VoidCallback onApply;
   final ValueChanged<OperationStatus> onToggleStatus;
+  final VoidCallback onClear;
 
   const OperationFilters({
     super.key,
     required this.selectedRange,
     required this.selectedStatuses,
     required this.onPickRange,
-    required this.onApply,
     required this.onToggleStatus,
+    required this.onClear,
   });
 
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
+    final theme = Theme.of(context);
+    final hasActive = selectedRange != null || selectedStatuses.isNotEmpty;
+    final periodLabel = selectedRange == null
+        ? l10n.selectPeriod
+        : '${dateToLocalFormat(context, selectedRange!.start)} – ${dateToLocalFormat(context, selectedRange!.end)}';
 
     return Card(
-      margin: const EdgeInsets.all(16),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(12),
       ),
-      elevation: 2,
+      elevation: 0,
       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,
-                      ),
-                    ),
+            Row(
+              children: [
+                Text(
+                  l10n.filters,
+                  style: theme.textTheme.titleSmall?.copyWith(
+                    fontWeight: FontWeight.w600,
                   ),
-                  Icon(Icons.keyboard_arrow_down, color: Colors.grey),
-                ],
+                ),
+                const Spacer(),
+                if (hasActive)
+                  TextButton.icon(
+                    onPressed: onClear,
+                    icon: const Icon(Icons.close, size: 16),
+                    label: Text(l10n.reset),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 10),
+            OutlinedButton.icon(
+              onPressed: onPickRange,
+              icon: const Icon(Icons.date_range_outlined, size: 18),
+              label: Text(
+                periodLabel,
+                overflow: TextOverflow.ellipsis,
+              ),
+              style: OutlinedButton.styleFrom(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(10),
+                ),
               ),
             ),
-            const SizedBox(height: 16),
+            const SizedBox(height: 12),
             Wrap(
-              spacing: 12,
+              spacing: 10,
               runSpacing: 8,
               children: const [
                 OperationStatus.success,
@@ -73,51 +83,28 @@ class OperationFilters extends StatelessWidget {
               ].map((status) {
                 final label = status.localized(context);
                 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(label),
-                        style: TextStyle(
-                          color: isSelected ? Colors.white : Colors.black87,
-                          fontSize: 14,
-                        ),
-                      ),
-                    ),
+                return FilterChip(
+                  label: Text(l10n.status(label)),
+                  selected: isSelected,
+                  onSelected: (_) => onToggleStatus(status),
+                  selectedColor: theme.colorScheme.primaryContainer,
+                  checkmarkColor: theme.colorScheme.onPrimaryContainer,
+                  labelStyle: theme.textTheme.bodySmall?.copyWith(
+                    color: isSelected
+                        ? theme.colorScheme.onPrimaryContainer
+                        : theme.colorScheme.onSurface,
+                  ),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  side: BorderSide(
+                    color: isSelected
+                        ? theme.colorScheme.primaryContainer
+                        : theme.dividerColor.withAlpha(60),
                   ),
                 );
               }).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

@@ -1,17 +1,13 @@
 import 'package:flutter/material.dart';
 
-import 'package:provider/provider.dart';
-
 import 'package:pshared/models/payment/operation.dart';
 import 'package:pshared/models/payment/status.dart';
-import 'package:pshared/provider/organizations.dart';
-import 'package:pshared/service/payment/documents.dart';
 import 'package:pshared/utils/currency.dart';
 
-import 'package:pweb/generated/i18n/app_localizations.dart';
 import 'package:pweb/pages/report/table/badge.dart';
-import 'package:pweb/utils/download.dart';
-import 'package:pweb/utils/error/snackbar.dart';
+import 'package:pweb/utils/report/download_act.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
 
 
 class OperationRow {
@@ -29,7 +25,7 @@ class OperationRow {
 
     final documentCell = canDownload
         ? TextButton.icon(
-            onPressed: () => _downloadAct(context, op),
+            onPressed: () => downloadPaymentAct(context, op.paymentRef ?? ''),
             icon: const Icon(Icons.download),
             label: Text(loc.downloadAct),
           )
@@ -47,28 +43,4 @@ class OperationRow {
       DataCell(Text(op.comment)),
     ]);
   }
-
-  static Future<void> _downloadAct(BuildContext context, OperationItem op) async {
-    final organizations = context.read<OrganizationsProvider>();
-    if (!organizations.isOrganizationSet) {
-      return;
-    }
-    final paymentRef = (op.paymentRef ?? '').trim();
-    if (paymentRef.isEmpty) {
-      return;
-    }
-
-    final loc = AppLocalizations.of(context)!;
-    await executeActionWithNotification(
-      context: context,
-      action: () async {
-        final file = await PaymentDocumentsService.getAct(
-          organizations.current.id,
-          paymentRef,
-        );
-        await downloadFile(file);
-      },
-      errorMessage: loc.downloadActError,
-    );
-  }
 }