brammie15/kooltab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add more detailed history and group per day

Browse Source
This commit is contained in:
brammie15
2026-08-07 05:07:41 +02:00
parent 1dd7e69aa8
commit 799c1c4045
23 changed files with 2506 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/views/history_screen_view.dart
+193 -90
View File
@@ -1,8 +1,11 @@
import 'package:flutter/material.dart';
import 'package:kooltab2/views/widgets/closed_tab_card.dart';
import 'package:kooltab2/views/widgets/open_tab_history_card.dart';
import 'package:provider/provider.dart';
import '../app/router.dart';
import '../models/bar_tab.dart';
import '../models/closed_tab.dart';
import '../utils/navigation.dart';
import '../viewmodels/history_view_model.dart';
import '../l10n/app_localizations.dart';
@@ -134,33 +137,15 @@ class _HistoryScreenViewState extends State<HistoryScreenView> with RouteAware {
),
),
Expanded(
child: viewModel.closedTabs.isEmpty
child:
viewModel.openTabs.isEmpty && viewModel.closedTabs.isEmpty
? _EmptyState()
: ListView.separated(
controller: _scrollController,
padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
itemCount:
viewModel.closedTabs.length +
(viewModel.hasMore || viewModel.isLoadingMore
? 1
: 0),
separatorBuilder: (_, _) => const SizedBox(height: 10),
itemBuilder: (context, index) {
if (index == viewModel.closedTabs.length) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 24),
child: Center(
child: CircularProgressIndicator(
strokeWidth: 2.5,
),
),
);
}
final closedTab = viewModel.closedTabs[index];
return ClosedTabCard(closedTab: closedTab);
},
: _HistoryList(
openTabs: viewModel.openTabs,
closedTabs: viewModel.closedTabs,
hasMore: viewModel.hasMore,
isLoadingMore: viewModel.isLoadingMore,
scrollController: _scrollController,
),
),
],
@@ -171,6 +156,85 @@ class _HistoryScreenViewState extends State<HistoryScreenView> with RouteAware {
}
}
class _HistoryList extends StatelessWidget {
final List<BarTab> openTabs;
final List<ClosedTab> closedTabs;
final bool hasMore;
final bool isLoadingMore;
final ScrollController scrollController;
const _HistoryList({
required this.openTabs,
required this.closedTabs,
required this.hasMore,
required this.isLoadingMore,
required this.scrollController,
});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final openSectionCount = openTabs.isEmpty ? 0 : openTabs.length + 1;
final closedSectionCount = closedTabs.isEmpty ? 0 : closedTabs.length + 1;
final loadingCount = hasMore || isLoadingMore ? 1 : 0;
return ListView.separated(
controller: scrollController,
padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
itemCount: openSectionCount + closedSectionCount + loadingCount,
separatorBuilder: (_, _) => const SizedBox(height: 10),
itemBuilder: (context, index) {
if (openTabs.isNotEmpty) {
if (index == 0) {
return _HistorySectionHeader(title: l10n.openTabs);
}
if (index <= openTabs.length) {
return OpenTabHistoryCard(tab: openTabs[index - 1]);
}
}
final closedIndex = index - openSectionCount;
if (closedTabs.isNotEmpty) {
if (closedIndex == 0) {
return _HistorySectionHeader(title: l10n.closedTabs);
}
if (closedIndex <= closedTabs.length) {
return ClosedTabCard(closedTab: closedTabs[closedIndex - 1]);
}
}
return const Padding(
padding: EdgeInsets.symmetric(vertical: 24),
child: Center(child: CircularProgressIndicator(strokeWidth: 2.5)),
);
},
);
}
}
class _HistorySectionHeader extends StatelessWidget {
final String title;
const _HistorySectionHeader({required this.title});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 8, bottom: 2),
child: Text(
title.toUpperCase(),
style: Theme.of(context).textTheme.bodySmall?.copyWith(
fontWeight: FontWeight.w700,
letterSpacing: 0.7,
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.5),
),
),
);
}
}
class _CustomerDropdown extends StatelessWidget {
static const _allSentinel = r'$__all__$';
@@ -194,95 +258,134 @@ class _CustomerDropdown extends StatelessWidget {
onSelected: (value) {
onSelected(value == _allSentinel ? null : value);
},
offset: const Offset(0, 44),
tooltip: l10n.customer,
padding: EdgeInsets.zero,
offset: const Offset(0, 8),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
color: Theme.of(context).cardTheme.color ?? scheme.surface,
itemBuilder: (context) => [
PopupMenuItem<String>(
value: _allSentinel,
child: Row(
children: [
Icon(
isFiltered ? Icons.people_outline : Icons.people_rounded,
size: 18,
color: isFiltered ? null : scheme.primary,
),
const SizedBox(width: 10),
Text(
l10n.allCustomers,
style: TextStyle(
fontWeight: isFiltered ? FontWeight.w400 : FontWeight.w700,
color: isFiltered ? null : scheme.primary,
),
),
],
height: 50,
child: _CustomerMenuRow(
icon: Icons.people_outline_rounded,
label: l10n.allCustomers,
selected: !isFiltered,
),
),
if (customerNames.isNotEmpty) const PopupMenuDivider(height: 1),
...customerNames.map(
(name) => PopupMenuItem<String>(
value: name,
child: Row(
children: [
Icon(
name == selectedCustomer
? Icons.person_rounded
: Icons.person_outline_rounded,
size: 18,
),
const SizedBox(width: 10),
Expanded(child: Text(name, overflow: TextOverflow.ellipsis)),
],
height: 50,
child: _CustomerMenuRow(
icon: name == selectedCustomer
? Icons.person_rounded
: Icons.person_outline_rounded,
label: name,
selected: name == selectedCustomer,
),
),
),
],
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
border: Border.all(color: scheme.onSurface.withValues(alpha: 0.12)),
color: isFiltered ? scheme.primary.withValues(alpha: 0.08) : null,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.person_rounded,
size: 18,
child: ConstrainedBox(
constraints: const BoxConstraints(minWidth: 144, maxWidth: 220),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
? scheme.primary.withValues(alpha: 0.35)
: scheme.onSurface.withValues(alpha: 0.12),
),
const SizedBox(width: 6),
Flexible(
child: Text(
selectedCustomer ?? l10n.customer,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 13,
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
color: isFiltered ? scheme.primary.withValues(alpha: 0.08) : null,
),
child: Row(
children: [
Icon(
isFiltered
? Icons.filter_alt_rounded
: Icons.people_outline_rounded,
size: 18,
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
),
const SizedBox(width: 8),
Expanded(
child: Text(
selectedCustomer ?? l10n.allCustomers,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 13,
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.65),
),
),
),
),
const SizedBox(width: 4),
Icon(
Icons.arrow_drop_down_rounded,
size: 18,
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
),
],
const SizedBox(width: 4),
Icon(
Icons.keyboard_arrow_down_rounded,
size: 18,
color: isFiltered
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
),
],
),
),
),
);
}
}
class _CustomerMenuRow extends StatelessWidget {
final IconData icon;
final String label;
final bool selected;
const _CustomerMenuRow({
required this.icon,
required this.label,
required this.selected,
});
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
return Row(
children: [
Icon(
icon,
size: 18,
color: selected
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.65),
),
const SizedBox(width: 10),
Expanded(
child: Text(
label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
color: selected ? scheme.primary : scheme.onSurface,
),
),
),
if (selected) ...[
const SizedBox(width: 10),
Icon(Icons.check_rounded, size: 18, color: scheme.primary),
],
],
);
}
}
class _EmptyState extends StatelessWidget {
@override
Widget build(BuildContext context) {
lib/views/widgets/closed_tab_card.dart
+215 -47
View File
@@ -5,6 +5,7 @@ import 'package:kooltab2/models/closed_tab_item.dart';
import 'package:kooltab2/models/payment_method.dart';
import '../../l10n/app_localizations.dart';
import '../../utils/history_grouping.dart';
class ClosedTabCard extends StatefulWidget {
final ClosedTab closedTab;
@@ -31,6 +32,10 @@ class _ClosedTabCardState extends State<ClosedTabCard> {
final l10n = AppLocalizations.of(context);
final locale = Localizations.localeOf(context).toLanguageTag();
final dateFormat = DateFormat.yMMMd(locale).add_jm();
final dayGroups = groupClosedTabItemsByDay(
closedTab.items,
fallbackDate: closedTab.closedAt,
);
final scheme = Theme.of(context).colorScheme;
return Container(
@@ -40,17 +45,16 @@ class _ClosedTabCardState extends State<ClosedTabCard> {
border: Border.all(color: scheme.onSurface.withValues(alpha: 0.06)),
),
clipBehavior: Clip.antiAlias,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => setState(() => _expanded = !_expanded),
enableFeedback: true,
splashFactory: NoSplash.splashFactory,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: () => setState(() => _expanded = !_expanded),
enableFeedback: true,
splashFactory: NoSplash.splashFactory,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 14,
@@ -137,27 +141,163 @@ class _ClosedTabCardState extends State<ClosedTabCard> {
],
),
),
AnimatedCrossFade(
duration: const Duration(milliseconds: 150),
crossFadeState: _expanded
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
child: Column(
),
),
AnimatedCrossFade(
duration: const Duration(milliseconds: 150),
crossFadeState: _expanded
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
child: Column(
children: [
const Divider(height: 1),
const SizedBox(height: 8),
for (var index = 0; index < dayGroups.length; index++)
_ClosedTabDayDropdown(
key: ValueKey(
'${dayGroups[index].items.first.closedTabId}-'
'${dayGroups[index].day.toIso8601String()}',
),
group: dayGroups[index],
fallbackDate: closedTab.closedAt,
initiallyExpanded: index == 0,
),
],
),
),
secondChild: const SizedBox(width: double.infinity),
),
],
),
);
}
}
class _ClosedTabDayDropdown extends StatefulWidget {
final ClosedTabItemDayGroup group;
final DateTime fallbackDate;
final bool initiallyExpanded;
const _ClosedTabDayDropdown({
super.key,
required this.group,
required this.fallbackDate,
required this.initiallyExpanded,
});
@override
State<_ClosedTabDayDropdown> createState() => _ClosedTabDayDropdownState();
}
class _ClosedTabDayDropdownState extends State<_ClosedTabDayDropdown> {
late bool _expanded = widget.initiallyExpanded;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final locale = Localizations.localeOf(context).toLanguageTag();
final dayFormat = DateFormat.yMMMMd(locale);
final scheme = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.only(top: 8),
child: AnimatedContainer(
duration: const Duration(milliseconds: 160),
decoration: BoxDecoration(
color: _expanded
? scheme.primary.withValues(alpha: 0.08)
: scheme.onSurface.withValues(alpha: 0.035),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: _expanded
? scheme.primary.withValues(alpha: 0.28)
: scheme.onSurface.withValues(alpha: 0.08),
),
),
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: () => setState(() => _expanded = !_expanded),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 10,
),
child: Row(
children: [
const Divider(height: 1),
const SizedBox(height: 8),
...closedTab.items.map(
(item) => _ClosedTabItemRow(item: item),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: scheme.primary.withValues(alpha: 0.14),
borderRadius: BorderRadius.circular(9),
),
child: Icon(
Icons.calendar_today_rounded,
size: 16,
color: scheme.primary,
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
dayFormat.format(widget.group.day),
style: const TextStyle(
fontWeight: FontWeight.w700,
),
),
Text(
l10n.tabItemCount(widget.group.itemCount),
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
Icon(
_expanded
? Icons.keyboard_arrow_up_rounded
: Icons.keyboard_arrow_down_rounded,
color: _expanded
? scheme.primary
: scheme.onSurface.withValues(alpha: 0.5),
),
],
),
),
secondChild: const SizedBox(width: double.infinity),
),
],
),
),
AnimatedSize(
duration: const Duration(milliseconds: 160),
curve: Curves.easeOut,
child: _expanded
? Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 8),
child: Column(
children: [
Divider(
height: 1,
color: scheme.primary.withValues(alpha: 0.18),
),
for (final item in widget.group.items)
_ClosedTabItemRow(
item: item,
purchasedAt:
item.purchasedAt ?? widget.fallbackDate,
),
],
),
)
: const SizedBox.shrink(),
),
],
),
),
);
@@ -166,12 +306,15 @@ class _ClosedTabCardState extends State<ClosedTabCard> {
class _ClosedTabItemRow extends StatelessWidget {
final ClosedTabItem item;
final DateTime purchasedAt;
const _ClosedTabItemRow({required this.item});
const _ClosedTabItemRow({required this.item, required this.purchasedAt});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final locale = Localizations.localeOf(context).toLanguageTag();
final timeFormat = DateFormat.jm(locale);
final unitPrice = NumberFormat.simpleCurrency(
locale: locale,
).format(item.unitPriceInCents / 100);
@@ -185,32 +328,57 @@ class _ClosedTabItemRow extends StatelessWidget {
child: Row(
children: [
Expanded(
child: Text(
item.productName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w600,
color: scheme.onSurface,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.productName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w600,
color: item.isRemoved
? scheme.onSurface.withValues(alpha: 0.5)
: scheme.onSurface,
decoration: item.isRemoved
? TextDecoration.lineThrough
: null,
),
),
Text(
timeFormat.format(purchasedAt),
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
Text(
'${item.quantity} × $unitPrice',
style: Theme.of(context).textTheme.bodySmall,
),
const SizedBox(width: 12),
SizedBox(
width: 64,
child: Text(
lineTotal,
textAlign: TextAlign.end,
if (item.isRemoved)
Text(
l10n.removed,
style: TextStyle(
color: scheme.error,
fontSize: 12,
fontWeight: FontWeight.w700,
color: scheme.onSurface,
),
)
else ...[
Text(
'${item.quantity} × $unitPrice',
style: Theme.of(context).textTheme.bodySmall,
),
const SizedBox(width: 12),
SizedBox(
width: 64,
child: Text(
lineTotal,
textAlign: TextAlign.end,
style: TextStyle(
fontWeight: FontWeight.w700,
color: scheme.onSurface,
),
),
),
),
],
],
),
);
lib/views/widgets/open_tab_history_card.dart
+256
View File
@@ -0,0 +1,256 @@
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../../l10n/app_localizations.dart';
import '../../models/bar_tab.dart';
import '../../models/tab_item_purchase.dart';
class OpenTabHistoryCard extends StatefulWidget {
final BarTab tab;
const OpenTabHistoryCard({super.key, required this.tab});
@override
State<OpenTabHistoryCard> createState() => _OpenTabHistoryCardState();
}
class _OpenTabHistoryCardState extends State<OpenTabHistoryCard> {
bool _expanded = false;
List<_OpenPurchase> _purchases(BarTab tab) {
final purchases = <_OpenPurchase>[];
for (final item in tab.items) {
final records = item.purchases.isEmpty
? List<TabItemPurchase>.generate(
item.quantity,
(index) => TabItemPurchase(
id: '${item.id}-$index',
tabItemId: item.id,
purchasedAt: tab.openedAt,
),
)
: item.purchases;
purchases.addAll(
records.map(
(purchase) => _OpenPurchase(
productName: item.productName,
unitPriceInCents: item.unitPriceInCents,
purchasedAt: purchase.purchasedAt,
isRemoved: purchase.isRemoved,
),
),
);
}
purchases.sort((a, b) {
final byTime = b.purchasedAt.compareTo(a.purchasedAt);
if (byTime != 0) return byTime;
return b.productName.compareTo(a.productName);
});
return purchases;
}
@override
Widget build(BuildContext context) {
final tab = widget.tab;
final l10n = AppLocalizations.of(context);
final locale = Localizations.localeOf(context).toLanguageTag();
final dateFormat = DateFormat.yMMMd(locale).add_jm();
final scheme = Theme.of(context).colorScheme;
return Container(
decoration: BoxDecoration(
color: scheme.primary.withValues(alpha: 0.06),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: scheme.primary.withValues(alpha: 0.2)),
),
clipBehavior: Clip.antiAlias,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => setState(() => _expanded = !_expanded),
enableFeedback: true,
splashFactory: NoSplash.splashFactory,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 14,
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(
tab.customerName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w800,
color: scheme.onSurface,
),
),
),
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 3,
),
decoration: BoxDecoration(
color: scheme.primary.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(999),
),
child: Text(
l10n.openTabs,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
color: scheme.primary,
),
),
),
],
),
const SizedBox(height: 2),
Text(
'${dateFormat.format(tab.openedAt)} · ${l10n.tabItemCount(tab.itemCount)}',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
const SizedBox(width: 8),
Text(
tab.formattedTotal,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w800,
color: scheme.onSurface,
),
),
const SizedBox(width: 4),
Icon(
_expanded
? Icons.expand_less_rounded
: Icons.expand_more_rounded,
color: scheme.onSurface.withValues(alpha: 0.5),
),
],
),
),
AnimatedCrossFade(
duration: const Duration(milliseconds: 150),
crossFadeState: _expanded
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
child: Column(
children: [
const Divider(height: 1),
const SizedBox(height: 8),
..._purchases(
tab,
).map((purchase) => _OpenPurchaseRow(purchase: purchase)),
],
),
),
secondChild: const SizedBox(width: double.infinity),
),
],
),
),
),
);
}
}
class _OpenPurchase {
final String productName;
final int unitPriceInCents;
final DateTime purchasedAt;
final bool isRemoved;
const _OpenPurchase({
required this.productName,
required this.unitPriceInCents,
required this.purchasedAt,
required this.isRemoved,
});
}
class _OpenPurchaseRow extends StatelessWidget {
final _OpenPurchase purchase;
const _OpenPurchaseRow({required this.purchase});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final locale = Localizations.localeOf(context).toLanguageTag();
final dateFormat = DateFormat.yMMMd(locale).add_jm();
final unitPrice = NumberFormat.simpleCurrency(
locale: locale,
).format(purchase.unitPriceInCents / 100);
final scheme = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
purchase.productName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w600,
color: purchase.isRemoved
? scheme.onSurface.withValues(alpha: 0.5)
: scheme.onSurface,
decoration: purchase.isRemoved
? TextDecoration.lineThrough
: null,
),
),
Text(
dateFormat.format(purchase.purchasedAt),
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
if (purchase.isRemoved)
Text(
l10n.removed,
style: TextStyle(
color: scheme.error,
fontSize: 12,
fontWeight: FontWeight.w700,
),
)
else
Text(
'1 × $unitPrice',
style: Theme.of(context).textTheme.bodySmall,
),
],
),
);
}
}