nearle_daily/nearle_pos
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

second commit

Browse Source
This commit is contained in:
Anbarasu22004
2026-07-29 11:41:53 +05:30
parent fcccf22bac
commit d72522e737
211 changed files with 19260 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
lib/presentation/pos/widgets/app_sidebar.dart Normal file
View File

@@ -0,0 +1,485 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../app/providers.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_layout.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/utils/formatters.dart';
import '../../../domain/entities/sync_event.dart';
import '../../auth/providers/auth_controller.dart';
import '../../sync/widgets/sign_out_dialog.dart';
import '../providers/cart_controller.dart';
import '../../sync/providers/sync_controller.dart';
import '../providers/navigation_provider.dart';
/// Left navigation rail.
///
/// Renders in three widths: full labels on desktop, icons only on tablet
/// landscape, and off-canvas below that. The same widget serves all three so
/// the active state and badges never drift apart.
class AppSidebar extends ConsumerWidget {
const AppSidebar({
super.key,
required this.mode,
this.onDestinationTap,
});
final SidebarMode mode;
/// Lets the drawer close itself after a tap.
final VoidCallback? onDestinationTap;
@override
Widget build(BuildContext context, WidgetRef ref) {
// The drawer presentation uses the expanded layout at full width.
final expanded = mode != SidebarMode.rail;
final width = mode == SidebarMode.rail
? PosLayout.railWidth
: PosLayout.expandedWidth;
return AnimatedContainer(
duration: AppMotion.normal,
curve: AppMotion.emphasized,
width: width,
decoration: const BoxDecoration(
color: AppColors.surface,
border: Border(right: BorderSide(color: AppColors.border)),
),
child: SafeArea(
right: false,
child: Column(
children: [
_Brand(expanded: expanded),
const Divider(height: 1),
_Profile(expanded: expanded),
const Divider(height: 1),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: AppSpacing.md),
child: Column(
children: [
for (final section in NavSection.values)
_Section(
section: section,
expanded: expanded,
onDestinationTap: onDestinationTap,
),
],
),
),
),
const Divider(height: 1),
_LogoutTile(expanded: expanded),
],
),
),
);
}
}
class _Brand extends StatelessWidget {
const _Brand({required this.expanded});
final bool expanded;
@override
Widget build(BuildContext context) {
return Container(
height: AppSizes.headerHeight,
padding: EdgeInsets.symmetric(
horizontal: expanded ? AppSpacing.xl : AppSpacing.md,
),
alignment: expanded ? Alignment.centerLeft : Alignment.center,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
gradient: AppColors.primaryGradient,
borderRadius: BorderRadius.circular(10),
),
alignment: Alignment.center,
child: const Text(
'N',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w800,
),
),
),
if (expanded) ...[
const SizedBox(width: AppSpacing.md),
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Nearle',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
color: AppColors.textPrimary,
height: 1.1,
),
),
Text(
'POS',
style: AppTypography.sectionLabel()
.copyWith(color: AppColors.primary),
),
],
),
),
],
],
),
);
}
}
class _Profile extends ConsumerWidget {
const _Profile({required this.expanded});
final bool expanded;
@override
Widget build(BuildContext context, WidgetRef ref) {
final user = ref.watch(currentUserProvider);
final name = user?.name ?? ref.watch(cashierSessionProvider).name;
final role = user?.role.label ?? ref.watch(cashierSessionProvider).role;
return Padding(
padding: EdgeInsets.symmetric(
horizontal: expanded ? AppSpacing.lg : AppSpacing.sm,
vertical: AppSpacing.md,
),
child: Row(
mainAxisAlignment:
expanded ? MainAxisAlignment.start : MainAxisAlignment.center,
children: [
Container(
width: 38,
height: 38,
decoration: BoxDecoration(
color: AppColors.primarySurface,
borderRadius: AppRadius.brSm,
border: Border.all(color: AppColors.primaryBorder),
),
alignment: Alignment.center,
child: Text(
Formatters.initials(name),
style: const TextStyle(
color: AppColors.primary,
fontSize: 13,
fontWeight: FontWeight.w700,
),
),
),
if (expanded) ...[
const SizedBox(width: AppSpacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.textPrimary,
height: 1.2,
),
),
Text(
role,
style: const TextStyle(
fontSize: 11.5,
color: AppColors.textTertiary,
height: 1.3,
),
),
],
),
),
],
],
),
);
}
}
class _Section extends ConsumerWidget {
const _Section({
required this.section,
required this.expanded,
this.onDestinationTap,
});
final NavSection section;
final bool expanded;
final VoidCallback? onDestinationTap;
@override
Widget build(BuildContext context, WidgetRef ref) {
final active = ref.watch(activeModuleProvider);
final cartCount = ref.watch(cartItemCountProvider);
final ready = ref.watch(catalogueReadyProvider);
final outstanding = ref
.watch(syncEventsProvider)
.where((e) => e.status != SyncStatus.synced)
.length;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (expanded)
Padding(
padding: const EdgeInsets.fromLTRB(
AppSpacing.xl,
AppSpacing.lg,
AppSpacing.xl,
AppSpacing.sm,
),
child: Text(section.label.toUpperCase(),
style: AppTypography.sectionLabel()),
)
else
const Padding(
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.xl,
vertical: AppSpacing.md,
),
child: Divider(height: 1),
),
for (final module in section.modules)
_NavTile(
module: module,
expanded: expanded,
selected: active == module,
badge: switch (module) {
PosModule.pos => cartCount > 0 ? cartCount : null,
PosModule.productImport => ready ? null : 1,
PosModule.events => outstanding > 0 ? outstanding : null,
_ => null,
},
badgeColor: switch (module) {
PosModule.productImport => AppColors.danger,
PosModule.events => AppColors.warning,
_ => AppColors.primary,
},
onTap: () {
ref.read(activeModuleProvider.notifier).state = module;
onDestinationTap?.call();
},
),
],
);
}
}
class _NavTile extends StatefulWidget {
const _NavTile({
required this.module,
required this.expanded,
required this.selected,
required this.onTap,
this.badge,
this.badgeColor,
});
final PosModule module;
final bool expanded;
final bool selected;
final VoidCallback onTap;
final int? badge;
final Color? badgeColor;
@override
State<_NavTile> createState() => _NavTileState();
}
class _NavTileState extends State<_NavTile> {
bool _hovered = false;
@override
Widget build(BuildContext context) {
final selected = widget.selected;
final fg = selected
? AppColors.primary
: (_hovered ? AppColors.textPrimary : AppColors.textSecondary);
final tile = AnimatedContainer(
duration: AppMotion.fast,
height: AppSizes.navItemHeight,
padding: EdgeInsets.symmetric(
horizontal: widget.expanded ? AppSpacing.md : 0,
),
decoration: BoxDecoration(
color: selected
? AppColors.primarySurface
: (_hovered ? AppColors.surfaceAlt : Colors.transparent),
borderRadius: AppRadius.brSm,
),
child: Row(
mainAxisAlignment: widget.expanded
? MainAxisAlignment.start
: MainAxisAlignment.center,
children: [
Stack(
clipBehavior: Clip.none,
children: [
Icon(widget.module.icon, size: 20, color: fg),
// In rail mode the label is gone, so the badge rides the icon.
if (widget.badge != null && !widget.expanded)
Positioned(
top: -5,
right: -8,
child: _Badge(
value: widget.badge!,
color: widget.badgeColor ?? AppColors.primary,
),
),
],
),
if (widget.expanded) ...[
const SizedBox(width: AppSpacing.md),
Expanded(
child: Text(
widget.module.label,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
color: fg,
),
),
),
if (widget.badge != null)
_Badge(
value: widget.badge!,
color: widget.badgeColor ?? AppColors.primary,
),
],
],
),
);
return MouseRegion(
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() => _hovered = false),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: widget.expanded ? AppSpacing.md : AppSpacing.lg,
vertical: 2,
),
child: Stack(
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: widget.onTap,
borderRadius: AppRadius.brSm,
child: widget.expanded
? tile
: Tooltip(message: widget.module.title, child: tile),
),
),
// Accent bar marking the active destination.
if (selected)
Positioned(
left: 0,
top: 10,
bottom: 10,
child: Container(
width: 3,
decoration: const BoxDecoration(
color: AppColors.primary,
borderRadius: AppRadius.brPill,
),
),
),
],
),
),
);
}
}
class _Badge extends StatelessWidget {
const _Badge({required this.value, required this.color});
final int value;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints(minWidth: 19),
height: 19,
padding: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(color: color, borderRadius: AppRadius.brPill),
alignment: Alignment.center,
child: Text(
value > 99 ? '99+' : '$value',
style: const TextStyle(
color: Colors.white,
fontSize: 10.5,
fontWeight: FontWeight.w700,
),
),
);
}
}
class _LogoutTile extends ConsumerWidget {
const _LogoutTile({required this.expanded});
final bool expanded;
@override
Widget build(BuildContext context, WidgetRef ref) {
return Padding(
padding: const EdgeInsets.all(AppSpacing.md),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => showSignOutDialog(context, ref),
borderRadius: AppRadius.brSm,
child: Container(
height: AppSizes.navItemHeight,
padding: EdgeInsets.symmetric(
horizontal: expanded ? AppSpacing.md : 0,
),
alignment: expanded ? Alignment.centerLeft : Alignment.center,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.logout_rounded,
size: 19, color: AppColors.danger),
if (expanded) ...[
const SizedBox(width: AppSpacing.md),
const Text(
'Logout',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.danger,
),
),
],
],
),
),
),
),
);
}
}

368
lib/presentation/pos/widgets/billing_panel.dart Normal file
View File

@@ -0,0 +1,368 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/constants/app_constants.dart';
import '../../../core/router/app_router.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/utils/extensions.dart';
import '../../../core/utils/formatters.dart';
import '../../../core/widgets/empty_state.dart';
import '../../../core/widgets/primary_button.dart';
import '../../../domain/entities/cart.dart';
import '../providers/cart_controller.dart';
import 'cart_line_tile.dart';
import 'discount_sheet.dart';
/// Always-visible bill on the right of the dashboard.
class BillingPanel extends ConsumerWidget {
const BillingPanel({super.key, this.inSheet = false});
final bool inSheet;
@override
Widget build(BuildContext context, WidgetRef ref) {
final cart = ref.watch(cartControllerProvider);
final controller = ref.read(cartControllerProvider.notifier);
return Container(
color: AppColors.surface,
child: Column(children: [
_Header(cart: cart, inSheet: inSheet),
const Divider(height: 1),
Expanded(
child: cart.isEmpty
? const EmptyState(
title: 'Cart is empty',
message: 'Scan a barcode or tap a product to begin.',
emoji: '🛒',
compact: true,
)
: ListView.separated(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
vertical: AppSpacing.md,
),
itemCount: cart.lines.length,
separatorBuilder: (_, __) =>
const SizedBox(height: AppSpacing.sm),
itemBuilder: (_, i) {
// Newest line first mirrors what the cashier just scanned.
final line = cart.lines[cart.lines.length - 1 - i];
return CartLineTile(
key: ValueKey(line.product.id),
line: line,
onIncrement: () => controller.increment(line.product.id),
onDecrement: () => controller.decrement(line.product.id),
onRemove: () => controller.removeLine(line.product.id),
onDiscount: () =>
showLineDiscountSheet(context, ref, line),
);
},
),
),
if (cart.isNotEmpty) _Summary(cart: cart),
_Actions(cart: cart),
]),
);
}
}
class _Header extends ConsumerWidget {
const _Header({required this.cart, required this.inSheet});
final Cart cart;
final bool inSheet;
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = ref.read(cartControllerProvider.notifier);
return Padding(
padding: const EdgeInsets.fromLTRB(
AppSpacing.xl,
AppSpacing.lg,
AppSpacing.md,
AppSpacing.lg,
),
child: Row(children: [
Text('Cart', style: context.text.headlineSmall),
const SizedBox(width: AppSpacing.sm),
if (cart.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: AppColors.primarySurface,
borderRadius: AppRadius.brPill,
),
child: Text(
'${cart.lineCount}',
style: const TextStyle(
color: AppColors.primary,
fontWeight: FontWeight.w800,
fontSize: 13,
),
),
),
const Spacer(),
if (controller.canUndo)
IconButton(
tooltip: 'Undo (F8)',
onPressed: controller.undo,
icon: const Icon(Icons.undo_rounded, size: 19),
color: AppColors.textSecondary,
),
if (cart.isNotEmpty) ...[
TextButton.icon(
onPressed: () async {
await controller.park();
ref.invalidate(parkedBillsProvider);
if (context.mounted) context.showSnack('Bill parked');
},
icon: const Icon(Icons.pause_circle_outline_rounded, size: 17),
label: const Text('Park'),
style: TextButton.styleFrom(foregroundColor: AppColors.warning),
),
TextButton(
onPressed: controller.clear,
style: TextButton.styleFrom(foregroundColor: AppColors.danger),
child: const Text('Clear'),
),
],
if (inSheet)
IconButton(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.close_rounded),
),
]),
);
}
}
class _Summary extends ConsumerWidget {
const _Summary({required this.cart});
final Cart cart;
@override
Widget build(BuildContext context, WidgetRef ref) {
final controller = ref.read(cartControllerProvider.notifier);
return Container(
padding: const EdgeInsets.fromLTRB(
AppSpacing.xl,
AppSpacing.lg,
AppSpacing.xl,
AppSpacing.md,
),
decoration: const BoxDecoration(
border: Border(top: BorderSide(color: AppColors.divider)),
),
child: Column(children: [
if (cart.pointsEarned > 0)
Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom: AppSpacing.md),
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm + 2,
),
decoration: BoxDecoration(
color: AppColors.successSurface,
borderRadius: AppRadius.brSm,
),
child: Row(children: [
const Icon(Icons.stars_rounded,
size: 16, color: AppColors.success),
const SizedBox(width: AppSpacing.sm),
Text(
'This sale earns +${cart.pointsEarned} pts',
style: const TextStyle(
color: AppColors.success,
fontWeight: FontWeight.w700,
fontSize: 13,
),
),
]),
),
_Row(label: 'Subtotal', value: Formatters.money(cart.subtotal)),
if (cart.membershipDiscountAmount > 0)
_Row(
label: '${cart.customer!.tier.label} discount',
value: '-${Formatters.money(cart.membershipDiscountAmount)}',
valueColor: AppColors.success,
),
_Row(
label: 'GST',
value: Formatters.money(cart.taxAmount),
hint: cart.taxBreakdown.keys.isEmpty
? null
: cart.taxBreakdown.keys
.map((r) => '${(r * 100).toStringAsFixed(0)}%')
.join(', '),
),
InkWell(
onTap: () => showBillDiscountSheet(context, ref),
borderRadius: AppRadius.brXs,
child: _Row(
label: 'Discount',
value: cart.manualBillDiscountAmount > 0
? '-${Formatters.money(cart.manualBillDiscountAmount)}'
: '-${Formatters.money(0)}',
valueColor: cart.manualBillDiscountAmount > 0
? AppColors.success
: null,
trailingIcon: Icons.edit_outlined,
),
),
if (cart.maxRedeemablePoints > 0 || cart.pointsRedeemed > 0)
InkWell(
onTap: () => cart.pointsRedeemed > 0
? controller.clearRedemption()
: controller.redeemAllPoints(),
borderRadius: AppRadius.brXs,
child: _Row(
label: cart.pointsRedeemed > 0
? 'Points redeemed (${cart.pointsRedeemed})'
: 'Redeem ${cart.maxRedeemablePoints} points',
value: cart.pointsRedeemed > 0
? '-${Formatters.money(cart.loyaltyRedemptionValue)}'
: 'Apply',
valueColor: AppColors.primary,
trailingIcon: cart.pointsRedeemed > 0
? Icons.close_rounded
: Icons.add_rounded,
),
),
if (cart.roundOff != 0)
_Row(
label: 'Round Off',
value: '${cart.roundOff >= 0 ? '+' : ''}'
'${Formatters.money(cart.roundOff)}',
),
const Padding(
padding: EdgeInsets.symmetric(vertical: AppSpacing.md),
child: Divider(height: 1),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Total', style: context.text.titleLarge),
Text(
Formatters.money(cart.grandTotal),
style: AppTypography.money(26, color: AppColors.primary),
),
],
),
if (cart.totalSavings > 0)
Padding(
padding: const EdgeInsets.only(top: AppSpacing.xs),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'You saved ${Formatters.money(cart.totalSavings)}',
style: const TextStyle(
color: AppColors.success,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
),
]),
);
}
}
class _Row extends StatelessWidget {
const _Row({
required this.label,
required this.value,
this.valueColor,
this.hint,
this.trailingIcon,
});
final String label;
final String value;
final Color? valueColor;
final String? hint;
final IconData? trailingIcon;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: AppSpacing.xs + 2),
child: Row(children: [
Text(label,
style: const TextStyle(
fontSize: 14,
color: AppColors.textSecondary,
)),
if (hint != null) ...[
const SizedBox(width: AppSpacing.xs),
Text('($hint)',
style: const TextStyle(
fontSize: 11.5,
color: AppColors.textTertiary,
)),
],
const Spacer(),
Text(
value,
style: AppTypography.money(
14.5,
weight: FontWeight.w600,
color: valueColor ?? AppColors.textPrimary,
),
),
if (trailingIcon != null) ...[
const SizedBox(width: AppSpacing.xs),
Icon(trailingIcon, size: 14, color: AppColors.textTertiary),
],
]),
);
}
}
class _Actions extends ConsumerWidget {
const _Actions({required this.cart});
final Cart cart;
@override
Widget build(BuildContext context, WidgetRef ref) {
final enabled = cart.isNotEmpty;
return Container(
padding: const EdgeInsets.fromLTRB(
AppSpacing.xl,
AppSpacing.sm,
AppSpacing.xl,
AppSpacing.xl,
),
child: PrimaryButton(
label: 'CHARGE',
large: true,
onPressed: enabled ? () => context.push(AppRoutes.payment) : null,
trailing: enabled
? Text(
Formatters.money(cart.grandTotal),
style: AppTypography.money(21, color: Colors.white),
)
: null,
),
);
}
}

83
lib/presentation/pos/widgets/cart_fab.dart Normal file
View File

@@ -0,0 +1,83 @@
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/utils/formatters.dart';
import '../providers/cart_controller.dart';
/// Floating bill summary shown when the billing panel is collapsed into a
/// sheet. Gives the cashier the running total without opening anything.
class CartFab extends ConsumerWidget {
const CartFab({super.key, required this.onTap});
final VoidCallback onTap;
@override
Widget build(BuildContext context, WidgetRef ref) {
final cart = ref.watch(cartControllerProvider);
if (cart.isEmpty) return const SizedBox.shrink();
return Padding(
padding: const EdgeInsets.all(AppSpacing.lg),
child: Material(
color: AppColors.primary,
borderRadius: AppRadius.brLg,
elevation: 0,
child: InkWell(
onTap: onTap,
borderRadius: AppRadius.brLg,
child: Container(
height: AppSizes.buttonHeightLarge,
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl),
decoration: BoxDecoration(
borderRadius: AppRadius.brLg,
boxShadow: AppColors.shadowLg,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.22),
borderRadius: AppRadius.brXs,
),
alignment: Alignment.center,
child: Text(
'${cart.lineCount}',
style: const TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w700,
),
),
),
const SizedBox(width: AppSpacing.md),
const Text(
'View bill',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: AppSpacing.xl),
Text(
Formatters.money(cart.grandTotal),
style: AppTypography.money(19, color: Colors.white),
),
const SizedBox(width: AppSpacing.sm),
const Icon(Icons.keyboard_arrow_up_rounded,
color: Colors.white, size: 20),
],
),
),
),
),
).animate().fadeIn(duration: 180.ms).slideY(begin: 0.3, end: 0);
}
}

241
lib/presentation/pos/widgets/cart_line_tile.dart Normal file
View File

@@ -0,0 +1,241 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/utils/formatters.dart';
import '../../../domain/entities/cart.dart';
/// One row of the bill, with inline quantity stepper.
class CartLineTile extends StatelessWidget {
const CartLineTile({
super.key,
required this.line,
required this.onIncrement,
required this.onDecrement,
required this.onRemove,
this.onDiscount,
});
final CartLine line;
final VoidCallback onIncrement;
final VoidCallback onDecrement;
final VoidCallback onRemove;
final VoidCallback? onDiscount;
@override
Widget build(BuildContext context) {
final p = line.product;
return Dismissible(
key: ValueKey('dismiss_${p.id}'),
direction: DismissDirection.endToStart,
onDismissed: (_) => onRemove(),
background: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: AppSpacing.xl),
decoration: BoxDecoration(
color: AppColors.dangerSurface,
borderRadius: AppRadius.brMd,
),
child: const Icon(Icons.delete_outline_rounded,
color: AppColors.danger),
),
child: Container(
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: AppColors.surfaceAlt,
borderRadius: AppRadius.brMd,
border: Border.all(
color: line.exceedsStock ? AppColors.danger : AppColors.border,
),
),
child: Column(children: [
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Container(
width: 42,
height: 42,
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: AppRadius.brSm,
border: Border.all(color: AppColors.border),
),
alignment: Alignment.center,
child: Text(p.emoji, style: const TextStyle(fontSize: 21)),
),
const SizedBox(width: AppSpacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
p.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14.5,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 2),
Row(children: [
Text(
Formatters.money(p.price),
style: AppTypography.money(13.5,
weight: FontWeight.w600,
color: AppColors.textSecondary),
),
Text(' / ${p.unit.symbol}',
style: const TextStyle(
fontSize: 11.5,
color: AppColors.textTertiary,
)),
if (line.discount.isActive) ...[
const SizedBox(width: AppSpacing.sm),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: AppColors.successSurface,
borderRadius: BorderRadius.circular(4),
),
child: Text(
line.discount.label,
style: const TextStyle(
fontSize: 10,
color: AppColors.success,
fontWeight: FontWeight.w700,
),
),
),
],
]),
],
),
),
IconButton(
onPressed: onRemove,
icon: const Icon(Icons.close_rounded, size: 18),
color: AppColors.textTertiary,
constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
padding: EdgeInsets.zero,
tooltip: 'Remove',
),
]),
const SizedBox(height: AppSpacing.sm),
Row(children: [
_Stepper(
quantity: line.quantity,
unit: p.unit.symbol,
onIncrement: onIncrement,
onDecrement: onDecrement,
),
if (onDiscount != null) ...[
const SizedBox(width: AppSpacing.sm),
IconButton(
onPressed: onDiscount,
icon: const Icon(Icons.local_offer_outlined, size: 17),
color: AppColors.textSecondary,
constraints: const BoxConstraints(minWidth: 34, minHeight: 34),
padding: EdgeInsets.zero,
tooltip: 'Line discount',
),
],
const Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
if (line.discountAmount > 0)
Text(
Formatters.money(line.grossAmount),
style: const TextStyle(
fontSize: 11.5,
color: AppColors.textTertiary,
decoration: TextDecoration.lineThrough,
),
),
Text(
Formatters.money(line.payable),
style: AppTypography.money(16),
),
],
),
]),
if (line.exceedsStock)
Padding(
padding: const EdgeInsets.only(top: AppSpacing.sm),
child: Row(children: [
const Icon(Icons.error_outline_rounded,
size: 14, color: AppColors.danger),
const SizedBox(width: AppSpacing.xs),
Text(
'Only ${p.stock.toStringAsFixed(0)} ${p.unit.symbol} '
'available',
style: const TextStyle(
fontSize: 11.5,
color: AppColors.danger,
fontWeight: FontWeight.w600,
),
),
]),
),
]),
),
);
}
}
class _Stepper extends StatelessWidget {
const _Stepper({
required this.quantity,
required this.unit,
required this.onIncrement,
required this.onDecrement,
});
final double quantity;
final String unit;
final VoidCallback onIncrement;
final VoidCallback onDecrement;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: AppRadius.brSm,
border: Border.all(color: AppColors.border),
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
_btn(Icons.remove_rounded, onDecrement),
Container(
constraints: const BoxConstraints(minWidth: 42),
alignment: Alignment.center,
child: Text(
quantity % 1 == 0
? quantity.toStringAsFixed(0)
: quantity.toStringAsFixed(2),
style: AppTypography.money(15.5),
),
),
_btn(Icons.add_rounded, onIncrement),
]),
);
}
Widget _btn(IconData icon, VoidCallback onTap) => Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: AppRadius.brSm,
child: SizedBox(
width: 34,
height: 34,
child: Icon(icon, size: 17, color: AppColors.primary),
),
),
);
}

117
lib/presentation/pos/widgets/category_chips.dart Normal file
View File

@@ -0,0 +1,117 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../domain/entities/product.dart';
import '../providers/catalog_providers.dart';
class CategoryChips extends ConsumerWidget {
const CategoryChips({super.key, this.horizontalPadding = AppSpacing.xxl});
/// Matched to the surrounding content gutter by the dashboard layout.
final double horizontalPadding;
@override
Widget build(BuildContext context, WidgetRef ref) {
final selected = ref.watch(selectedCategoryProvider);
final counts = ref.watch(categoryCountsProvider).value ?? const {};
return SizedBox(
height: 52,
child: ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
children: [
_Chip(
label: 'All',
selected: selected == null,
onTap: () =>
ref.read(selectedCategoryProvider.notifier).state = null,
),
for (final category in ProductCategory.values)
_Chip(
label: category.label,
emoji: category.emoji,
count: counts[category],
selected: selected == category,
onTap: () => ref.read(selectedCategoryProvider.notifier).state =
selected == category ? null : category,
),
],
),
);
}
}
class _Chip extends StatelessWidget {
const _Chip({
required this.label,
required this.selected,
required this.onTap,
this.emoji,
this.count,
});
final String label;
final bool selected;
final VoidCallback onTap;
final String? emoji;
final int? count;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: AppSpacing.md),
child: Material(
color: selected ? AppColors.primary : AppColors.surface,
borderRadius: AppRadius.brPill,
child: InkWell(
onTap: onTap,
borderRadius: AppRadius.brPill,
child: AnimatedContainer(
duration: AppMotion.fast,
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.xl,
vertical: AppSpacing.md,
),
decoration: BoxDecoration(
borderRadius: AppRadius.brPill,
border: Border.all(
color: selected ? AppColors.primary : AppColors.border,
),
boxShadow: selected ? AppColors.shadowSm : null,
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
if (emoji != null) ...[
Text(emoji!, style: const TextStyle(fontSize: 15)),
const SizedBox(width: AppSpacing.sm),
],
Text(
label,
style: TextStyle(
color: selected ? Colors.white : AppColors.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14.5,
),
),
if (count != null) ...[
const SizedBox(width: AppSpacing.sm),
Text(
'$count',
style: TextStyle(
color: selected
? Colors.white.withValues(alpha: 0.75)
: AppColors.textTertiary,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
],
]),
),
),
),
);
}
}

99
lib/presentation/pos/widgets/customer_bar.dart Normal file
View File

@@ -0,0 +1,99 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/router/app_router.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/utils/extensions.dart';
import '../../../core/utils/formatters.dart';
import '../../../core/widgets/status_pill.dart';
import '../providers/cart_controller.dart';
/// Strip above the product grid showing who the sale belongs to.
class CustomerBar extends ConsumerWidget {
const CustomerBar({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final customer = ref.watch(
cartControllerProvider.select((cart) => cart.customer),
);
return Container(
height: AppSizes.customerBarHeight,
color: AppColors.surface,
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xxl),
child: Row(children: [
CircleAvatar(
radius: 20,
backgroundColor: customer == null
? AppColors.border
: AppColors.primarySurface,
child: customer == null
? const Icon(Icons.directions_walk_rounded,
size: 20, color: AppColors.textSecondary)
: Text(
Formatters.initials(customer.name),
style: const TextStyle(
color: AppColors.primary,
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
),
const SizedBox(width: AppSpacing.md),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(mainAxisSize: MainAxisSize.min, children: [
Flexible(
child: Text(
customer?.name ?? 'Walk-in Customer',
style: context.text.titleMedium,
overflow: TextOverflow.ellipsis,
),
),
if (customer != null) ...[
const SizedBox(width: AppSpacing.sm),
StatusPill.tier(customer.tier, dense: true),
],
]),
if (customer != null)
Text(
'${Formatters.mobile(customer.mobile)} · '
'${customer.loyaltyPoints} pts',
style: context.text.bodySmall,
)
else
Text('No loyalty tracking for this sale',
style: context.text.bodySmall),
],
),
),
const Spacer(),
if (customer != null)
TextButton.icon(
onPressed: () =>
ref.read(cartControllerProvider.notifier).attachCustomer(null),
icon: const Icon(Icons.person_off_outlined, size: 17),
label: const Text('Detach'),
style: TextButton.styleFrom(
foregroundColor: AppColors.textSecondary),
),
const SizedBox(width: AppSpacing.sm),
OutlinedButton.icon(
onPressed: () => context.push(AppRoutes.existingCustomer),
icon: const Icon(Icons.sync_alt_rounded, size: 17),
label: Text(customer == null ? 'Add Customer' : 'Change'),
style: OutlinedButton.styleFrom(
minimumSize: const Size(0, 44),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
),
),
]),
);
}
}

213
lib/presentation/pos/widgets/discount_sheet.dart Normal file
View File

@@ -0,0 +1,213 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/utils/formatters.dart';
import '../../../core/widgets/primary_button.dart';
import '../../../domain/entities/cart.dart';
import '../providers/cart_controller.dart';
Future<void> showLineDiscountSheet(
BuildContext context,
WidgetRef ref,
CartLine line,
) {
return _show(
context: context,
title: line.product.name,
subtitle: 'Line value ${Formatters.money(line.grossAmount)}',
current: line.discount,
onApply: (d) => ref
.read(cartControllerProvider.notifier)
.applyLineDiscount(line.product.id, d),
);
}
Future<void> showBillDiscountSheet(BuildContext context, WidgetRef ref) {
final cart = ref.read(cartControllerProvider);
return _show(
context: context,
title: 'Bill discount',
subtitle: 'Subtotal ${Formatters.money(cart.subtotal)}',
current: cart.billDiscount,
onApply: (d) =>
ref.read(cartControllerProvider.notifier).applyBillDiscount(d),
);
}
Future<void> _show({
required BuildContext context,
required String title,
required String subtitle,
required Discount current,
required ValueChanged<Discount> onApply,
}) {
return showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (_) => _DiscountSheet(
title: title,
subtitle: subtitle,
current: current,
onApply: onApply,
),
);
}
class _DiscountSheet extends StatefulWidget {
const _DiscountSheet({
required this.title,
required this.subtitle,
required this.current,
required this.onApply,
});
final String title;
final String subtitle;
final Discount current;
final ValueChanged<Discount> onApply;
@override
State<_DiscountSheet> createState() => _DiscountSheetState();
}
class _DiscountSheetState extends State<_DiscountSheet> {
late DiscountType _type =
widget.current.type == DiscountType.none
? DiscountType.percentage
: widget.current.type;
late final TextEditingController _value = TextEditingController(
text: widget.current.isActive
? widget.current.value.toStringAsFixed(0)
: '',
);
@override
void dispose() {
_value.dispose();
super.dispose();
}
void _apply() {
final v = double.tryParse(_value.text.trim()) ?? 0;
widget.onApply(
v <= 0 ? Discount.none : Discount(type: _type, value: v),
);
Navigator.of(context).pop();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.viewInsetsOf(context).bottom,
),
child: Container(
padding: const EdgeInsets.all(AppSpacing.xxl),
decoration: const BoxDecoration(
color: AppColors.surface,
borderRadius:
BorderRadius.vertical(top: Radius.circular(AppRadius.xxl)),
),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColors.border,
borderRadius: AppRadius.brPill,
),
),
const SizedBox(height: AppSpacing.xl),
Text(widget.title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700)),
const SizedBox(height: 2),
Text(widget.subtitle,
style: const TextStyle(
fontSize: 13,
color: AppColors.textSecondary,
)),
const SizedBox(height: AppSpacing.xxl),
SegmentedButton<DiscountType>(
segments: const [
ButtonSegment(
value: DiscountType.percentage,
label: Text('Percentage'),
icon: Icon(Icons.percent_rounded, size: 17),
),
ButtonSegment(
value: DiscountType.flat,
label: Text('Flat amount'),
icon: Icon(Icons.currency_rupee_rounded, size: 17),
),
],
selected: {_type},
onSelectionChanged: (s) => setState(() => _type = s.first),
),
const SizedBox(height: AppSpacing.xl),
TextField(
controller: _value,
autofocus: true,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}')),
],
style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w700),
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '0',
prefixText: _type == DiscountType.flat ? '₹ ' : null,
suffixText: _type == DiscountType.percentage ? '%' : null,
),
onSubmitted: (_) => _apply(),
),
const SizedBox(height: AppSpacing.lg),
Wrap(
spacing: AppSpacing.sm,
children: (_type == DiscountType.percentage
? const [5, 10, 15, 20, 25]
: const [10, 20, 50, 100, 200])
.map((v) => ActionChip(
label: Text(_type == DiscountType.percentage
? '$v%'
: '₹$v'),
onPressed: () =>
setState(() => _value.text = v.toString()),
))
.toList(),
),
const SizedBox(height: AppSpacing.xxl),
Row(children: [
Expanded(
child: PrimaryButton(
label: 'Remove',
tone: ButtonTone.neutral,
onPressed: () {
widget.onApply(Discount.none);
Navigator.of(context).pop();
},
),
),
const SizedBox(width: AppSpacing.md),
Expanded(
flex: 2,
child: PrimaryButton(
label: 'Apply discount',
icon: Icons.check_rounded,
onPressed: _apply,
),
),
]),
]),
),
);
}
}

324
lib/presentation/pos/widgets/page_header.dart Normal file
View File

@@ -0,0 +1,324 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../app/providers.dart';
import '../../../core/router/app_router.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_layout.dart';
import '../../../core/utils/formatters.dart';
import '../providers/cart_controller.dart';
import '../providers/navigation_provider.dart';
/// White page header: breadcrumb, title, and the terminal's quick actions.
///
/// Replaces the old purple app bar now that branding lives in the sidebar.
class PageHeader extends ConsumerWidget {
const PageHeader({
super.key,
required this.layout,
this.onMenuTap,
});
final PosLayout layout;
final VoidCallback? onMenuTap;
@override
Widget build(BuildContext context, WidgetRef ref) {
final module = ref.watch(activeModuleProvider);
final now = ref.watch(clockProvider).value ?? DateTime.now();
final compact = layout.sidebarIsDrawer;
return Container(
constraints: const BoxConstraints(minHeight: AppSizes.headerHeight),
padding: EdgeInsets.symmetric(
horizontal: layout.contentPadding,
vertical: AppSpacing.md,
),
decoration: const BoxDecoration(
color: AppColors.surface,
border: Border(bottom: BorderSide(color: AppColors.border)),
),
child: Row(
children: [
if (compact) ...[
IconButton(
onPressed: onMenuTap,
icon: const Icon(Icons.menu_rounded),
tooltip: 'Menu',
color: AppColors.textPrimary,
),
const SizedBox(width: AppSpacing.xs),
],
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
module.title,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 19,
fontWeight: FontWeight.w600,
letterSpacing: -0.4,
color: AppColors.textPrimary,
height: 1.2,
),
),
if (!compact) _Breadcrumb(module: module),
],
),
),
const Spacer(),
if (!compact) ...[
const _LivePill(),
const SizedBox(width: AppSpacing.lg),
Text(
Formatters.time(now),
style: const TextStyle(
fontSize: 13.5,
fontWeight: FontWeight.w500,
color: AppColors.textSecondary,
fontFeatures: [FontFeature.tabularFigures()],
),
),
const SizedBox(width: AppSpacing.lg),
Container(width: 1, height: 26, color: AppColors.border),
const SizedBox(width: AppSpacing.lg),
],
_ParkedBillsButton(compact: compact),
const SizedBox(width: AppSpacing.sm),
_NewSaleButton(compact: compact),
],
),
);
}
}
class _Breadcrumb extends StatelessWidget {
const _Breadcrumb({required this.module});
final PosModule module;
@override
Widget build(BuildContext context) {
const style = TextStyle(fontSize: 12, color: AppColors.textTertiary);
return Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text('Home', style: style),
const Padding(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.xs + 2),
child: Icon(Icons.chevron_right_rounded,
size: 13, color: AppColors.textTertiary),
),
Text(module.section.label, style: style),
const Padding(
padding: EdgeInsets.symmetric(horizontal: AppSpacing.xs + 2),
child: Icon(Icons.chevron_right_rounded,
size: 13, color: AppColors.textTertiary),
),
Text(
module.label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
);
}
}
class _LivePill extends StatefulWidget {
const _LivePill();
@override
State<_LivePill> createState() => _LivePillState();
}
class _LivePillState extends State<_LivePill>
with SingleTickerProviderStateMixin {
late final AnimationController _c = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1400),
)..repeat(reverse: true);
@override
void dispose() {
_c.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.xs + 2,
),
decoration: BoxDecoration(
color: AppColors.successSurface,
borderRadius: AppRadius.brPill,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
FadeTransition(
opacity: _c,
child: Container(
width: 7,
height: 7,
decoration: const BoxDecoration(
color: AppColors.success,
shape: BoxShape.circle,
),
),
),
const SizedBox(width: AppSpacing.xs + 2),
const Text(
'LIVE',
style: TextStyle(
color: AppColors.success,
fontSize: 10.5,
fontWeight: FontWeight.w700,
letterSpacing: 0.8,
),
),
],
),
);
}
}
class _ParkedBillsButton extends ConsumerWidget {
const _ParkedBillsButton({required this.compact});
final bool compact;
@override
Widget build(BuildContext context, WidgetRef ref) {
final parked = ref.watch(parkedBillsProvider).value ?? const [];
if (compact) {
return IconButton(
tooltip: 'Parked bills',
onPressed: () => _openParked(context, ref),
icon: Badge(
isLabelVisible: parked.isNotEmpty,
label: Text('${parked.length}'),
backgroundColor: AppColors.warning,
child: const Icon(Icons.pause_circle_outline_rounded),
),
);
}
return OutlinedButton.icon(
onPressed: () => _openParked(context, ref),
icon: const Icon(Icons.pause_circle_outline_rounded, size: 17),
label: Text(
parked.isEmpty ? 'Parked' : 'Parked (${parked.length})',
),
style: OutlinedButton.styleFrom(
minimumSize: const Size(0, 42),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
foregroundColor: AppColors.textSecondary,
),
);
}
void _openParked(BuildContext context, WidgetRef ref) {
final parked = ref.read(parkedBillsProvider).value ?? const [];
if (parked.isEmpty) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(const SnackBar(content: Text('No parked bills.')));
return;
}
showDialog<void>(
context: context,
builder: (_) => AlertDialog(
title: const Text('Parked bills'),
content: SizedBox(
width: 380,
child: ListView.separated(
shrinkWrap: true,
itemCount: parked.length,
separatorBuilder: (_, __) => const Divider(height: 1),
itemBuilder: (_, i) {
final bill = parked[i];
return ListTile(
leading: const Icon(Icons.receipt_long_rounded,
color: AppColors.primary),
title: Text(bill.displayLabel),
subtitle: Text(
'${bill.cart.lineCount} items · '
'${Formatters.money(bill.cart.grandTotal)} · '
'${Formatters.time(bill.parkedAt)}',
),
onTap: () async {
await ref
.read(cartControllerProvider.notifier)
.resume(bill);
ref.invalidate(parkedBillsProvider);
if (context.mounted) Navigator.of(context).pop();
},
);
},
),
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Close'),
),
],
),
);
}
}
class _NewSaleButton extends ConsumerWidget {
const _NewSaleButton({required this.compact});
final bool compact;
@override
Widget build(BuildContext context, WidgetRef ref) {
void start() {
ref.read(cartControllerProvider.notifier).reset();
context.go(AppRoutes.welcome);
}
if (compact) {
return IconButton.filled(
tooltip: 'New sale',
onPressed: start,
icon: const Icon(Icons.add_rounded),
style: IconButton.styleFrom(backgroundColor: AppColors.primary),
);
}
return FilledButton.icon(
onPressed: start,
icon: const Icon(Icons.add_rounded, size: 18),
label: const Text('New Sale'),
style: FilledButton.styleFrom(
backgroundColor: AppColors.primary,
minimumSize: const Size(0, 42),
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
shape: const RoundedRectangleBorder(borderRadius: AppRadius.brSm),
),
);
}
}

217
lib/presentation/pos/widgets/product_card.dart Normal file
View File

@@ -0,0 +1,217 @@
import 'package:flutter/material.dart';
import '../../../core/constants/app_constants.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/theme/app_typography.dart';
import '../../../core/utils/formatters.dart';
import '../../../domain/entities/product.dart';
/// Tapping anywhere on the card bills the item — no confirm step.
class ProductCard extends StatefulWidget {
const ProductCard({
super.key,
required this.product,
required this.onTap,
this.inCartQuantity = 0,
});
final Product product;
final VoidCallback onTap;
final double inCartQuantity;
@override
State<ProductCard> createState() => _ProductCardState();
}
class _ProductCardState extends State<ProductCard> {
bool _hovered = false;
bool _pressed = false;
@override
Widget build(BuildContext context) {
final p = widget.product;
final disabled = p.isOutOfStock;
final inCart = widget.inCartQuantity > 0;
return MouseRegion(
cursor: disabled ? SystemMouseCursors.forbidden : SystemMouseCursors.click,
onEnter: (_) => setState(() => _hovered = true),
onExit: (_) => setState(() => _hovered = false),
child: GestureDetector(
onTapDown: (_) => setState(() => _pressed = true),
onTapUp: (_) => setState(() => _pressed = false),
onTapCancel: () => setState(() => _pressed = false),
onTap: disabled ? null : widget.onTap,
child: AnimatedScale(
scale: _pressed ? 0.96 : 1,
duration: AppMotion.instant,
child: AnimatedContainer(
duration: AppMotion.fast,
decoration: BoxDecoration(
color: disabled ? AppColors.surfaceAlt : AppColors.surface,
borderRadius: AppRadius.brLg,
border: Border.all(
color: inCart
? AppColors.primary
: (_hovered ? AppColors.primaryBorder : AppColors.border),
width: inCart ? 1.8 : 1,
),
boxShadow: _hovered && !disabled
? AppColors.shadowMd
: AppColors.shadowSm,
),
child: Stack(children: [
Padding(
padding: const EdgeInsets.all(AppSpacing.md),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Opacity(
opacity: disabled ? 0.4 : 1,
child: Text(p.emoji,
style: const TextStyle(fontSize: 40)),
),
const SizedBox(height: AppSpacing.sm),
Text(
p.name,
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
height: 1.25,
color: disabled
? AppColors.textTertiary
: AppColors.textPrimary,
),
),
const SizedBox(height: AppSpacing.xs + 2),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
Formatters.money(p.price),
style: AppTypography.money(17,
color: disabled
? AppColors.textTertiary
: AppColors.primary),
),
if (p.hasDiscount) ...[
const SizedBox(width: AppSpacing.xs + 2),
Padding(
padding: const EdgeInsets.only(bottom: 1.5),
child: Text(
Formatters.money(p.mrp!),
style: const TextStyle(
fontSize: 11.5,
color: AppColors.textTertiary,
decoration: TextDecoration.lineThrough,
),
),
),
],
],
),
const SizedBox(height: AppSpacing.xs),
Text(
disabled
? 'Out of stock'
: '${p.stock.toStringAsFixed(0)} in stock',
style: TextStyle(
fontSize: 11.5,
fontWeight: FontWeight.w500,
color: disabled
? AppColors.danger
: (p.isLowStock
? AppColors.warning
: AppColors.textTertiary),
),
),
],
),
),
if (p.hasDiscount && !disabled)
Positioned(
top: AppSpacing.sm,
left: AppSpacing.sm,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: AppColors.success,
borderRadius: BorderRadius.circular(5),
),
child: Text(
'${p.discountPercent.toStringAsFixed(0)}%',
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w800,
),
),
),
),
if (p.isLowStock && !disabled)
const Positioned(
top: AppSpacing.sm,
right: AppSpacing.sm,
child: Icon(Icons.warning_amber_rounded,
size: 15, color: AppColors.warning),
),
// Quantity badge once the item is on the bill.
if (inCart)
Positioned(
top: AppSpacing.sm,
right: AppSpacing.sm,
child: Container(
constraints: const BoxConstraints(minWidth: 24),
height: 24,
padding: const EdgeInsets.symmetric(horizontal: 6),
decoration: const BoxDecoration(
color: AppColors.primary,
shape: BoxShape.rectangle,
borderRadius: AppRadius.brPill,
),
alignment: Alignment.center,
child: Text(
widget.inCartQuantity % 1 == 0
? widget.inCartQuantity.toStringAsFixed(0)
: widget.inCartQuantity.toStringAsFixed(2),
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800,
),
),
),
),
// Hover-only add affordance keeps the resting card clean.
if (_hovered && !disabled && !inCart)
Positioned(
bottom: AppSpacing.sm,
right: AppSpacing.sm,
child: Container(
width: 28,
height: 28,
decoration: const BoxDecoration(
color: AppColors.primary,
shape: BoxShape.circle,
),
child: const Icon(Icons.add_rounded,
size: 18, color: Colors.white),
),
),
]),
),
),
),
);
}
}

82
lib/presentation/pos/widgets/product_grid.dart Normal file
View File

@@ -0,0 +1,82 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/empty_state.dart';
import '../providers/cart_controller.dart';
import '../providers/catalog_providers.dart';
import 'product_card.dart';
/// Responsive grid that fills the available width with cards of a stable
/// minimum size, rather than a fixed column count.
class ProductGrid extends ConsumerWidget {
const ProductGrid({
super.key,
this.horizontalPadding = AppSpacing.xxl,
this.tileExtent = 186,
this.bottomPadding = AppSpacing.xxl,
});
/// Content gutter, supplied by the dashboard layout.
final double horizontalPadding;
/// Maximum card width; the grid fits as many columns as will fit.
final double tileExtent;
/// Extra space so the floating bill button never covers the last row.
final double bottomPadding;
@override
Widget build(BuildContext context, WidgetRef ref) {
final products = ref.watch(visibleProductsProvider);
final cart = ref.watch(cartControllerProvider);
return products.when(
loading: () => const Center(
child: CircularProgressIndicator(color: AppColors.primary),
),
error: (e, _) => EmptyState(
title: 'Could not load products',
message: '$e',
emoji: '⚠️',
),
data: (items) {
if (items.isEmpty) {
return const EmptyState(
title: 'No products match',
message: 'Try a different search term or category.',
emoji: '🔎',
);
}
return GridView.builder(
padding: EdgeInsets.fromLTRB(
horizontalPadding,
0,
horizontalPadding,
bottomPadding,
),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: tileExtent,
mainAxisSpacing: AppSpacing.md,
crossAxisSpacing: AppSpacing.md,
childAspectRatio: AppSizes.productCardAspect,
),
itemCount: items.length,
itemBuilder: (context, i) {
final product = items[i];
return ProductCard(
key: ValueKey(product.id),
product: product,
inCartQuantity: cart.lineFor(product.id)?.quantity ?? 0,
onTap: () => ref
.read(cartControllerProvider.notifier)
.addProduct(product),
);
},
);
},
);
}
}

121
lib/presentation/pos/widgets/scan_toast.dart Normal file
View File

@@ -0,0 +1,121 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../providers/cart_controller.dart';
/// Brief floating confirmation after a scan.
///
/// Deliberately not a dialog: the cashier must never have to dismiss anything
/// between items.
class ScanToast extends ConsumerStatefulWidget {
const ScanToast({super.key});
@override
ConsumerState<ScanToast> createState() => _ScanToastState();
}
class _ScanToastState extends ConsumerState<ScanToast> {
Timer? _timer;
ScanFeedback? _visible;
void _show(ScanFeedback feedback) {
_timer?.cancel();
setState(() => _visible = feedback);
_timer = Timer(
const Duration(milliseconds: 1600),
() {
if (mounted) setState(() => _visible = null);
},
);
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
ref.listen<ScanFeedback?>(scanFeedbackProvider, (prev, next) {
if (next != null) _show(next);
});
final feedback = _visible;
if (feedback == null) return const SizedBox.shrink();
final success = feedback.isSuccess;
final color = success ? AppColors.success : AppColors.danger;
final product = feedback.product;
final message = feedback.message ??
switch (feedback.outcome) {
ScanOutcome.added => 'Added to bill',
ScanOutcome.incremented => 'Quantity updated',
ScanOutcome.notFound => 'Product not found',
ScanOutcome.outOfStock => 'Out of stock',
};
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.xxl),
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.xl,
vertical: AppSpacing.md,
),
decoration: BoxDecoration(
color: AppColors.textPrimary,
borderRadius: AppRadius.brPill,
boxShadow: AppColors.shadowLg,
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Container(
width: 26,
height: 26,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
child: Icon(
success ? Icons.check_rounded : Icons.priority_high_rounded,
size: 17,
color: Colors.white,
),
),
const SizedBox(width: AppSpacing.md),
if (product != null) ...[
Text(product.emoji, style: const TextStyle(fontSize: 17)),
const SizedBox(width: AppSpacing.sm),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 220),
child: Text(
product.name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 14.5,
),
),
),
const SizedBox(width: AppSpacing.sm),
Container(width: 1, height: 16, color: Colors.white24),
const SizedBox(width: AppSpacing.sm),
],
Text(
message,
style: TextStyle(
color: Colors.white.withValues(alpha: 0.85),
fontSize: 13.5,
),
),
]),
)
.animate(key: ValueKey(feedback.stamp))
.fadeIn(duration: 140.ms)
.slideY(begin: 0.4, end: 0, curve: Curves.easeOutBack)
.then(delay: 1200.ms)
.fadeOut(duration: 250.ms);
}
}

103
lib/presentation/pos/widgets/search_field.dart Normal file
View File

@@ -0,0 +1,103 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/utils/validators.dart';
import '../providers/cart_controller.dart';
import '../providers/catalog_providers.dart';
/// Doubles as the barcode input.
///
/// If the submitted text looks like a barcode we bill it immediately and clear
/// the field; otherwise it stays as a live search term.
class PosSearchField extends ConsumerStatefulWidget {
const PosSearchField({super.key, this.focusNode});
final FocusNode? focusNode;
@override
ConsumerState<PosSearchField> createState() => _PosSearchFieldState();
}
class _PosSearchFieldState extends ConsumerState<PosSearchField> {
final _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _submit(String value) {
final text = value.trim();
if (text.isEmpty) return;
if (Validators.isLikelyBarcode(text)) {
ref.read(cartControllerProvider.notifier).scanBarcode(text);
_controller.clear();
ref.read(searchQueryProvider.notifier).state = '';
}
}
@override
Widget build(BuildContext context) {
final query = ref.watch(searchQueryProvider);
return TextField(
controller: _controller,
focusNode: widget.focusNode,
autofocus: true,
textInputAction: TextInputAction.search,
style: const TextStyle(fontSize: 16),
onChanged: (v) => ref.read(searchQueryProvider.notifier).state = v,
onSubmitted: _submit,
decoration: InputDecoration(
hintText: 'Search product, scan barcode or enter SKU…',
prefixIcon: const Padding(
padding: EdgeInsets.only(left: AppSpacing.md, right: AppSpacing.sm),
child: Icon(Icons.search_rounded, color: AppColors.textTertiary),
),
prefixIconConstraints: const BoxConstraints(minWidth: 0),
contentPadding: const EdgeInsets.symmetric(
horizontal: AppSpacing.lg,
vertical: AppSpacing.lg + 2,
),
suffixIcon: Row(mainAxisSize: MainAxisSize.min, children: [
if (query.isNotEmpty)
IconButton(
tooltip: 'Clear',
icon: const Icon(Icons.close_rounded, size: 20),
color: AppColors.textTertiary,
onPressed: () {
_controller.clear();
ref.read(searchQueryProvider.notifier).state = '';
},
),
Container(
margin: const EdgeInsets.only(right: AppSpacing.sm),
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.sm,
),
decoration: BoxDecoration(
color: AppColors.primarySurface,
borderRadius: AppRadius.brSm,
),
child: const Row(mainAxisSize: MainAxisSize.min, children: [
Icon(Icons.qr_code_scanner_rounded,
size: 18, color: AppColors.primary),
SizedBox(width: AppSpacing.xs + 2),
Text('Scanner ready',
style: TextStyle(
color: AppColors.primary,
fontSize: 12,
fontWeight: FontWeight.w600,
)),
]),
),
]),
),
);
}
}