tech/sendico
2
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Frontend first draft

Browse Source
This commit is contained in:
Arseni
2025-11-13 15:06:15 +03:00
parent e47f343afb
commit ddb54ddfdc
504 changed files with 25498 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/pweb/lib/pages/report/charts/distribution.dart Normal file
View File

@@ -0,0 +1,103 @@
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:pshared/models/payment/operation.dart';
import 'package:pweb/generated/i18n/app_localizations.dart';
class PayoutDistributionChart extends StatelessWidget {
final List<OperationItem> operations;
const PayoutDistributionChart({super.key, required this.operations});
@override
Widget build(BuildContext context) {
// 1) Aggregate sums
final sums = <String, double>{};
for (var op in operations) {
final name = op.name ?? AppLocalizations.of(context)!.unknown;
sums[name] = (sums[name] ?? 0) + op.amount;
}
if (sums.isEmpty) {
return Center(child: Text(AppLocalizations.of(context)!.noPayouts));
}
// 2) Build chart data
final data = sums.entries
.map((e) => _ChartData(e.key, e.value))
.toList();
// 3) Build a simple horizontal legend
final palette = [
Theme.of(context).colorScheme.primary,
Theme.of(context).colorScheme.secondary,
Theme.of(context).colorScheme.tertiary ?? Colors.grey,
Theme.of(context).colorScheme.primaryContainer,
Theme.of(context).colorScheme.secondaryContainer,
];
final legendItems = List<Widget>.generate(data.length, (i) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.circle, size: 10, color: palette[i % palette.length]),
const SizedBox(width: 4),
Text(data[i].label, style: Theme.of(context).textTheme.bodySmall),
if (i < data.length - 1) const SizedBox(width: 12),
],
);
});
return Card(
margin: const EdgeInsets.all(16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
// Pie takes 2/3 of the width
Expanded(
flex: 2,
child: SfCircularChart(
legend: Legend(isVisible: false),
tooltipBehavior: TooltipBehavior(enable: true),
series: <PieSeries<_ChartData, String>>[
PieSeries<_ChartData, String>(
dataSource: data,
xValueMapper: (d, _) => d.label,
yValueMapper: (d, _) => d.value,
dataLabelMapper: (d, _) =>
'${(d.value / sums.values.fold(0, (a, b) => a + b) * 100).toStringAsFixed(1)}%',
dataLabelSettings: const DataLabelSettings(
isVisible: true,
labelPosition: ChartDataLabelPosition.inside,
),
radius: '100%',
)
],
),
),
const SizedBox(width: 16),
// Legend takes 1/3
Expanded(
flex: 1,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(spacing: 4.0, mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: legendItems),
),
),
],
),
),
);
}
}
class _ChartData {
final String label;
final double value;
_ChartData(this.label, this.value);
}

91
frontend/pweb/lib/pages/report/charts/status.dart Normal file
View File

@@ -0,0 +1,91 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:pshared/models/payment/status.dart';
import 'package:pshared/models/payment/operation.dart';
class StatusChart extends StatelessWidget {
final List<OperationItem> operations;
const StatusChart({super.key, required this.operations});
@override
Widget build(BuildContext context) {
// 1) Compute counts
final counts = <OperationStatus, int>{};
for (var op in operations) {
counts[op.status] = (counts[op.status] ?? 0) + 1;
}
final items = counts.entries
.map((e) => _ChartData(e.key, e.value.toDouble()))
.toList();
final maxCount = items.map((e) => e.count.toInt()).fold<int>(0, max);
final theme = Theme.of(context);
final barColor = theme.colorScheme.secondary;
final caption = theme.textTheme.labelMedium;
return SizedBox(
height: 200,
child: Card(
margin: const EdgeInsets.all(16),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: SfCartesianChart(
// ─── Axes ─────────────────────────────────────────
primaryXAxis: CategoryAxis(
labelStyle: caption,
majorGridLines: const MajorGridLines(width: 0),
),
primaryYAxis: NumericAxis(
minimum: 0,
maximum: (maxCount + 1).toDouble(),
interval: 1,
labelStyle: caption,
majorGridLines: MajorGridLines(
color: theme.dividerColor.withAlpha(76),
width: 1,
dashArray: <double>[4, 2],
),
),
// ─── Enable tooltips ───────────────────────────────
legend: Legend(isVisible: false),
tooltipBehavior: TooltipBehavior(
enable: true,
header: '', // omit series name in header
format: 'point.x : point.y', // e.g. "Init : 2"
),
// ─── Bar series with tooltip enabled ───────────────
series: <ColumnSeries<_ChartData, String>>[
ColumnSeries<_ChartData, String>(
dataSource: items,
xValueMapper: (d, _) => d.status.localized(context),
yValueMapper: (d, _) => d.count,
color: barColor,
width: 0.6,
borderRadius: const BorderRadius.all(Radius.circular(4)),
enableTooltip: true, // <— turn on for this series
),
],
),
),
),
);
}
}
class _ChartData {
final OperationStatus status;
final double count;
_ChartData(this.status, this.count);
}

170
frontend/pweb/lib/pages/report/page.dart Normal file
View File

@@ -0,0 +1,170 @@
// operation_history_page.dart
import 'package:flutter/material.dart';
import 'package:pshared/models/payment/operation.dart';
import 'package:pshared/models/payment/status.dart';
import 'package:pweb/pages/report/charts/distribution.dart';
import 'package:pweb/pages/report/charts/status.dart';
import 'package:pweb/pages/report/table/filters.dart';
import 'package:pweb/pages/report/table/widget.dart';
class OperationHistoryPage extends StatefulWidget {
const OperationHistoryPage({super.key});
@override
State<OperationHistoryPage> createState() => _OperationHistoryPageState();
}
class _OperationHistoryPageState extends State<OperationHistoryPage> {
// Mock data
final List<OperationItem> _allOps = [
OperationItem(
status: OperationStatus.error,
fileName: 'cards_payout_sample_june.csv',
amount: 10,
currency: 'EUR',
toAmount: 10,
toCurrency: 'EUR',
payId: '860163800',
cardNumber: null,
name: 'John Snow',
date: DateTime(2025, 7, 14, 19, 59, 2),
comment: 'EUR visa',
),
OperationItem(
status: OperationStatus.processing,
fileName: 'cards_payout_sample_june.csv',
amount: 10,
currency: 'EUR',
toAmount: 10,
toCurrency: 'EUR',
payId: '860163700',
cardNumber: null,
name: 'Baltasar Gelt',
date: DateTime(2025, 7, 14, 19, 59, 2),
comment: 'EUR master',
),
OperationItem(
status: OperationStatus.error,
fileName: 'cards_payout_sample_june.csv',
amount: 10,
currency: 'EUR',
toAmount: 10,
toCurrency: 'EUR',
payId: '40000000****0077',
cardNumber: '40000000****0077',
name: 'John Snow',
date: DateTime(2025, 7, 14, 19, 23, 22),
comment: 'EUR visa',
),
OperationItem(
status: OperationStatus.success,
fileName: null,
amount: 10,
currency: 'EUR',
toAmount: 10,
toCurrency: 'EUR',
payId: '54133300****0019',
cardNumber: '54133300****0019',
name: 'Baltasar Gelt',
date: DateTime(2025, 7, 14, 19, 23, 21),
comment: 'EUR master',
),
OperationItem(
status: OperationStatus.success,
fileName: null,
amount: 130,
currency: 'EUR',
toAmount: 130,
toCurrency: 'EUR',
payId: '54134300****0019',
cardNumber: '54153300****0019',
name: 'Ivan Brokov',
date: DateTime(2025, 7, 15, 19, 23, 21),
comment: 'EUR master 2',
),
];
DateTimeRange? _range;
final Set<String> _statuses = {};
late List<OperationItem> _filtered;
@override
void initState() {
super.initState();
_filtered = List.from(_allOps);
}
void _applyFilter() {
setState(() {
_filtered = _allOps.where((op) {
final okStatus = _statuses.isEmpty || _statuses.contains(op.status.localized(context));
final okRange = _range == null ||
(op.date.isAfter(_range!.start.subtract(const Duration(seconds: 1))) &&
op.date.isBefore(_range!.end.add(const Duration(seconds: 1))));
return okStatus && okRange;
}).toList();
});
}
Future<void> _pickRange() async {
final now = DateTime.now();
final initial = _range ??
DateTimeRange(
start: now.subtract(const Duration(days: 30)),
end: now,
);
final picked = await showDateRangePicker(
context: context,
firstDate: DateTime(2000),
lastDate: now.add(const Duration(days: 1)),
initialDateRange: initial,
);
if (picked != null) {
setState(() => _range = picked);
}
}
void _toggleStatus(String status) {
setState(() {
if (_statuses.contains(status)) _statuses.remove(status);
else _statuses.add(status);
});
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
spacing: 16,
children: [
SizedBox(
height: 200, // same height for both
child: Row(
spacing: 16,
children: [
Expanded(child: StatusChart(operations: _allOps)),
Expanded(child: PayoutDistributionChart(operations: _allOps)),
],
),
),
OperationFilters(
selectedRange: _range,
selectedStatuses: _statuses,
onPickRange: _pickRange,
onToggleStatus: _toggleStatus,
onApply: _applyFilter,
),
OperationsTable(
operations: _filtered,
showFileNameColumn:
_allOps.any((op) => op.fileName != null),
),
],
),
);
}
}

55
frontend/pweb/lib/pages/report/table/badge.dart Normal file
View File

@@ -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
),
),
);
}
}

125
frontend/pweb/lib/pages/report/table/filters.dart Normal file
View File

@@ -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),
),
),
],
),
),
);
}
}

23
frontend/pweb/lib/pages/report/table/row.dart Normal file
View File

@@ -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)),
]);
}
}

63
frontend/pweb/lib/pages/report/table/widget.dart Normal file
View File

@@ -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,
);
},
),
),
),
);
}
}