second commit

lib/presentation/pos/providers/cart_controller.dart

@@ -0,0 +1,307 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:uuid/uuid.dart';
+
+import '../../../app/providers.dart';
+import '../../../core/constants/app_constants.dart';
+import '../../../core/services/sound_service.dart';
+import '../../../domain/entities/cart.dart';
+import '../../../domain/entities/customer.dart';
+import '../../../domain/entities/product.dart';
+import '../../../domain/entities/transaction.dart';
+import '../../../domain/repositories/product_repository.dart';
+import '../../../domain/repositories/transaction_repository.dart';
+
+/// Transient feedback for the scan toast — never a blocking dialog.
+enum ScanOutcome { added, incremented, notFound, outOfStock }
+
+class ScanFeedback {
+  const ScanFeedback({
+    required this.outcome,
+    required this.stamp,
+    this.product,
+    this.message,
+  });
+
+  final ScanOutcome outcome;
+  final DateTime stamp;
+  final Product? product;
+  final String? message;
+
+  bool get isSuccess =>
+      outcome == ScanOutcome.added || outcome == ScanOutcome.incremented;
+}
+
+/// Owns the live bill.
+///
+/// All mutations funnel through here so that scanner input, product taps and
+/// keyboard shortcuts share one code path and one set of guarantees.
+class CartController extends StateNotifier<Cart> {
+  CartController({
+    required ProductRepository products,
+    required TransactionRepository transactions,
+    required SoundService sound,
+    required this.onFeedback,
+  })  : _products = products,
+        _transactions = transactions,
+        _sound = sound,
+        super(Cart.empty);
+
+  final ProductRepository _products;
+  final TransactionRepository _transactions;
+  final SoundService _sound;
+  final void Function(ScanFeedback) onFeedback;
+
+  static const _uuid = Uuid();
+
+  /// Snapshots for undo — capped so memory can't grow unbounded on a terminal
+  /// that runs for days.
+  final List<Cart> _undoStack = [];
+  static const int _maxUndo = 25;
+
+  bool get canUndo => _undoStack.isNotEmpty;
+
+  void _push() {
+    _undoStack.add(state);
+    if (_undoStack.length > _maxUndo) _undoStack.removeAt(0);
+  }
+
+  void undo() {
+    if (_undoStack.isEmpty) return;
+    state = _undoStack.removeLast();
+  }
+
+  // ------------------------------------------------------------ Line items
+  /// Adds a product, merging into the existing line when already present.
+  void addProduct(Product product, {double quantity = 1}) {
+    if (product.isOutOfStock) {
+      _sound.scanError();
+      onFeedback(ScanFeedback(
+        outcome: ScanOutcome.outOfStock,
+        stamp: DateTime.now(),
+        product: product,
+        message: '${product.name} is out of stock',
+      ));
+      return;
+    }
+
+    _push();
+
+    final existing = state.lineFor(product.id);
+    final requested = (existing?.quantity ?? 0) + quantity;
+
+    if (requested > product.stock) {
+      _undoStack.removeLast();
+      _sound.scanError();
+      onFeedback(ScanFeedback(
+        outcome: ScanOutcome.outOfStock,
+        stamp: DateTime.now(),
+        product: product,
+        message: 'Only ${product.stock.toStringAsFixed(0)} '
+            '${product.unit.symbol} left',
+      ));
+      return;
+    }
+
+    if (existing == null) {
+      state = state.copyWith(lines: [
+        ...state.lines,
+        CartLine(
+          product: product,
+          quantity: quantity,
+          addedAt: DateTime.now(),
+        ),
+      ]);
+    } else {
+      state = state.copyWith(
+        lines: _replace(existing.copyWith(quantity: requested)),
+      );
+    }
+
+    _clampRedemption();
+    _sound.scanSuccess();
+    onFeedback(ScanFeedback(
+      outcome: existing == null ? ScanOutcome.added : ScanOutcome.incremented,
+      stamp: DateTime.now(),
+      product: product,
+    ));
+  }
+
+  /// Scanner entry point. Resolves the barcode and adds it with no dialogs.
+  Future<void> scanBarcode(String code) async {
+    final product = await _products.findByBarcode(code);
+
+    if (product == null) {
+      _sound.scanError();
+      onFeedback(ScanFeedback(
+        outcome: ScanOutcome.notFound,
+        stamp: DateTime.now(),
+        message: 'No product for barcode $code',
+      ));
+      return;
+    }
+
+    addProduct(product);
+  }
+
+  void setQuantity(String productId, double quantity) {
+    final line = state.lineFor(productId);
+    if (line == null) return;
+
+    if (quantity <= 0) {
+      removeLine(productId);
+      return;
+    }
+
+    final capped = quantity
+        .clamp(0, AppConstants.maxCartQuantityPerLine.toDouble())
+        .toDouble();
+
+    if (capped > line.product.stock) {
+      _sound.scanError();
+      onFeedback(ScanFeedback(
+        outcome: ScanOutcome.outOfStock,
+        stamp: DateTime.now(),
+        product: line.product,
+        message: 'Only ${line.product.stock.toStringAsFixed(0)} in stock',
+      ));
+      return;
+    }
+
+    _push();
+    state = state.copyWith(lines: _replace(line.copyWith(quantity: capped)));
+    _clampRedemption();
+  }
+
+  void increment(String productId, {double by = 1}) {
+    final line = state.lineFor(productId);
+    if (line == null) return;
+    setQuantity(productId, line.quantity + by);
+  }
+
+  void decrement(String productId, {double by = 1}) {
+    final line = state.lineFor(productId);
+    if (line == null) return;
+    setQuantity(productId, line.quantity - by);
+  }
+
+  void removeLine(String productId) {
+    if (!state.contains(productId)) return;
+    _push();
+    state = state.copyWith(
+      lines: state.lines.where((l) => l.product.id != productId).toList(),
+    );
+    _clampRedemption();
+  }
+
+  void applyLineDiscount(String productId, Discount discount) {
+    final line = state.lineFor(productId);
+    if (line == null) return;
+    _push();
+    state = state.copyWith(lines: _replace(line.copyWith(discount: discount)));
+    _clampRedemption();
+  }
+
+  // ------------------------------------------------------------ Bill level
+  void applyBillDiscount(Discount discount) {
+    _push();
+    state = state.copyWith(billDiscount: discount);
+    _clampRedemption();
+  }
+
+  void clearBillDiscount() => applyBillDiscount(Discount.none);
+
+  void attachCustomer(Customer? customer) {
+    _push();
+    state = customer == null
+        ? state.copyWith(clearCustomer: true, pointsRedeemed: 0)
+        : state.copyWith(customer: customer);
+    _clampRedemption();
+  }
+
+  void redeemPoints(int points) {
+    final max = state.maxRedeemablePoints;
+    _push();
+    state = state.copyWith(pointsRedeemed: points.clamp(0, max));
+  }
+
+  void redeemAllPoints() => redeemPoints(state.maxRedeemablePoints);
+
+  void clearRedemption() => redeemPoints(0);
+
+  void setNote(String? note) => state = state.copyWith(note: note);
+
+  /// Keeps redemption legal after the bill shrinks below the redeemed value.
+  void _clampRedemption() {
+    if (state.pointsRedeemed == 0) return;
+    final max = state.maxRedeemablePoints;
+    if (state.pointsRedeemed > max) {
+      state = state.copyWith(pointsRedeemed: max);
+    }
+  }
+
+  // --------------------------------------------------------------- Session
+  void clear() {
+    _push();
+    state = Cart.empty;
+  }
+
+  /// Starts a brand new sale, dropping undo history and the customer.
+  void reset() {
+    _undoStack.clear();
+    state = Cart.empty;
+  }
+
+  /// Keeps the customer attached for a follow-up bill.
+  void resetKeepingCustomer() {
+    _undoStack.clear();
+    state = Cart(customer: state.customer);
+  }
+
+  // ---------------------------------------------------------- Parked bills
+  Future<void> park({String? label}) async {
+    if (state.isEmpty) return;
+    await _transactions.park(ParkedBill(
+      id: _uuid.v4(),
+      cart: state,
+      parkedAt: DateTime.now(),
+      label: label,
+    ));
+    reset();
+  }
+
+  Future<void> resume(ParkedBill bill) async {
+    await _transactions.removeParked(bill.id);
+    _undoStack.clear();
+    state = bill.cart;
+  }
+
+  List<CartLine> _replace(CartLine updated) => [
+        for (final l in state.lines)
+          if (l.product.id == updated.product.id) updated else l,
+      ];
+}
+
+// ----------------------------------------------------------------- Providers
+final scanFeedbackProvider = StateProvider<ScanFeedback?>((ref) => null);
+
+final cartControllerProvider =
+    StateNotifierProvider<CartController, Cart>((ref) {
+  return CartController(
+    products: ref.watch(productRepositoryProvider),
+    transactions: ref.watch(transactionRepositoryProvider),
+    sound: ref.watch(soundServiceProvider),
+    onFeedback: (feedback) =>
+        ref.read(scanFeedbackProvider.notifier).state = feedback,
+  );
+});
+
+/// Convenience selectors — each rebuilds only the widget that needs it.
+final cartTotalProvider =
+    Provider<double>((ref) => ref.watch(cartControllerProvider).grandTotal);
+
+final cartItemCountProvider =
+    Provider<int>((ref) => ref.watch(cartControllerProvider).lineCount);
+
+final parkedBillsProvider = FutureProvider<List<ParkedBill>>(
+  (ref) => ref.watch(transactionRepositoryProvider).parkedBills(),
+);

lib/presentation/pos/providers/catalog_providers.dart

@@ -0,0 +1,44 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../app/providers.dart';
+import '../../../domain/entities/product.dart';
+
+/// `null` means the "All" chip is selected.
+final selectedCategoryProvider =
+    StateProvider<ProductCategory?>((ref) => null);
+
+final searchQueryProvider = StateProvider<String>((ref) => '');
+
+final allProductsProvider = FutureProvider<List<Product>>(
+  (ref) => ref.watch(productRepositoryProvider).getAll(),
+);
+
+/// The grid's data source: category filter and search applied together.
+final visibleProductsProvider = FutureProvider<List<Product>>((ref) async {
+  final repo = ref.watch(productRepositoryProvider);
+  final query = ref.watch(searchQueryProvider);
+  final category = ref.watch(selectedCategoryProvider);
+
+  final base = query.trim().isEmpty
+      ? await repo.getAll()
+      : await repo.search(query);
+
+  if (category == null) return base;
+  return base.where((p) => p.category == category).toList();
+});
+
+/// Counts per category for the chip badges.
+final categoryCountsProvider =
+    FutureProvider<Map<ProductCategory, int>>((ref) async {
+  final products = await ref.watch(allProductsProvider.future);
+  final map = <ProductCategory, int>{};
+  for (final p in products) {
+    map[p.category] = (map[p.category] ?? 0) + 1;
+  }
+  return map;
+});
+
+final lowStockProductsProvider = FutureProvider<List<Product>>((ref) async {
+  final products = await ref.watch(allProductsProvider.future);
+  return products.where((p) => p.isLowStock || p.isOutOfStock).toList();
+});

lib/presentation/pos/providers/navigation_provider.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+/// The modules a cashier needs. Deliberately excludes analytics — this
+/// terminal is for billing, not back-office reporting.
+enum PosModule {
+  pos('Point of Sale', 'POS', Icons.point_of_sale_rounded, NavSection.billing),
+  customers('Customers', 'Customers', Icons.people_alt_rounded,
+      NavSection.billing),
+
+  productImport('Product Import', 'Product Import',
+      Icons.cloud_download_rounded, NavSection.catalogue),
+  promos('Promotions', 'Promo', Icons.sell_rounded, NavSection.catalogue),
+
+  events('Events', 'Events', Icons.sync_rounded, NavSection.session),
+  settings('Settings', 'Settings', Icons.settings_rounded, NavSection.session);
+
+  const PosModule(this.title, this.label, this.icon, this.section);
+
+  /// Long form, shown in the page header.
+  final String title;
+
+  /// Short form, shown in the sidebar.
+  final String label;
+
+  final IconData icon;
+  final NavSection section;
+}
+
+/// Groups the navigation into labelled blocks.
+enum NavSection {
+  billing('Billing'),
+  catalogue('Catalogue'),
+  session('Session');
+
+  const NavSection(this.label);
+
+  final String label;
+
+  List<PosModule> get modules =>
+      PosModule.values.where((m) => m.section == this).toList();
+}
+
+final activeModuleProvider = StateProvider<PosModule>((ref) => PosModule.pos);

lib/presentation/pos/screens/pos_dashboard_screen.dart

@@ -0,0 +1,171 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../../core/services/barcode_service.dart';
+import '../../../core/theme/app_colors.dart';
+import '../../../core/theme/app_dimens.dart';
+import '../../../core/theme/app_layout.dart';
+import '../../modules/screens/customers_view.dart';
+import '../../modules/screens/events_view.dart';
+import '../../modules/screens/product_import_view.dart';
+import '../../modules/screens/promos_view.dart';
+import '../../modules/screens/settings_view.dart';
+import '../../sync/providers/sync_controller.dart';
+import '../providers/cart_controller.dart';
+import '../providers/navigation_provider.dart';
+import '../widgets/app_sidebar.dart';
+import '../widgets/billing_panel.dart';
+import '../widgets/cart_fab.dart';
+import '../widgets/page_header.dart';
+import 'pos_view.dart';
+
+/// Application shell.
+///
+/// Owns the sidebar, page header and the body for whichever module is active.
+/// Keeping one shell means navigation never rebuilds the chrome, and the
+/// scanner stays live across modules.
+///
+/// Layout collapses in a fixed order as width shrinks:
+///
+/// * `>= 1300`   sidebar with labels, docked bill
+/// * `1120–1300` sidebar as an icon rail, docked bill
+/// * `920–1120`  icon rail, bill becomes a bottom sheet
+/// * `< 920`     sidebar goes off-canvas behind a menu button
+class PosDashboardScreen extends ConsumerStatefulWidget {
+  const PosDashboardScreen({super.key});
+
+  @override
+  ConsumerState<PosDashboardScreen> createState() => _PosDashboardScreenState();
+}
+
+class _PosDashboardScreenState extends ConsumerState<PosDashboardScreen> {
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+  final FocusNode _searchFocus = FocusNode();
+  late final BarcodeService _barcode;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // The scanner behaves like a keyboard, so listen globally rather than
+    // depending on any one field holding focus. A scan from another module
+    // jumps back to billing, which is what a cashier expects.
+    _barcode = BarcodeService(
+      onScan: (code) {
+        // Without an imported catalogue there is nothing to resolve against.
+        if (!ref.read(catalogueReadyProvider)) return;
+        ref.read(activeModuleProvider.notifier).state = PosModule.pos;
+        ref.read(cartControllerProvider.notifier).scanBarcode(code);
+      },
+    )..attach();
+  }
+
+  @override
+  void dispose() {
+    _barcode.dispose();
+    _searchFocus.dispose();
+    super.dispose();
+  }
+
+  void _openBillingSheet() {
+    showModalBottomSheet<void>(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (_) => FractionallySizedBox(
+        heightFactor: 0.92,
+        child: ClipRRect(
+          borderRadius: const BorderRadius.vertical(
+            top: Radius.circular(AppRadius.xxl),
+          ),
+          child: const BillingPanel(inSheet: true),
+        ),
+      ),
+    );
+  }
+
+  Widget _body(PosModule module, PosLayout layout) => switch (module) {
+        PosModule.pos => PosView(layout: layout, searchFocus: _searchFocus),
+        PosModule.customers => const CustomersView(),
+        PosModule.productImport => const ProductImportView(),
+        PosModule.promos => const PromosView(),
+        PosModule.events => const EventsView(),
+        PosModule.settings => const SettingsView(),
+      };
+
+  @override
+  Widget build(BuildContext context) {
+    final layout = PosLayout.of(context);
+    final module = ref.watch(activeModuleProvider);
+    final ready = ref.watch(catalogueReadyProvider);
+    final isPos = module == PosModule.pos && ready;
+
+    // Only the terminal itself needs the bill docked beside it.
+    final showDockedBill = isPos && !layout.billingIsSheet;
+    final showCartFab = isPos && layout.billingIsSheet;
+
+    return Scaffold(
+      key: _scaffoldKey,
+      backgroundColor: AppColors.background,
+      drawer: layout.sidebarIsDrawer
+          ? Drawer(
+              width: PosLayout.expandedWidth,
+              backgroundColor: AppColors.surface,
+              child: AppSidebar(
+                mode: SidebarMode.expanded,
+                onDestinationTap: () => Navigator.of(context).maybePop(),
+              ),
+            )
+          : null,
+      floatingActionButton:
+          showCartFab ? CartFab(onTap: _openBillingSheet) : null,
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+      body: CallbackShortcuts(
+        bindings: {
+          const SingleActivator(LogicalKeyboardKey.f2):
+              _searchFocus.requestFocus,
+          const SingleActivator(LogicalKeyboardKey.f8): () =>
+              ref.read(cartControllerProvider.notifier).undo(),
+          const SingleActivator(LogicalKeyboardKey.escape):
+              _searchFocus.unfocus,
+        },
+        child: Focus(
+          autofocus: true,
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              if (!layout.sidebarIsDrawer) AppSidebar(mode: layout.sidebar),
+              Expanded(
+                child: Column(
+                  children: [
+                    PageHeader(
+                      layout: layout,
+                      onMenuTap: () => _scaffoldKey.currentState?.openDrawer(),
+                    ),
+                    Expanded(
+                      child: AnimatedSwitcher(
+                        duration: AppMotion.fast,
+                        child: KeyedSubtree(
+                          key: ValueKey(module),
+                          child: _body(module, layout),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              if (showDockedBill) ...[
+                const VerticalDivider(width: 1),
+                SizedBox(
+                  width: layout.billingWidth,
+                  child: const BillingPanel(),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pos/screens/pos_view.dart

@@ -0,0 +1,197 @@
+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/theme/app_layout.dart';
+import '../../../core/widgets/primary_button.dart';
+import '../../sync/providers/sync_controller.dart';
+import '../providers/navigation_provider.dart';
+import '../widgets/category_chips.dart';
+import '../widgets/customer_bar.dart';
+import '../widgets/product_grid.dart';
+import '../widgets/scan_toast.dart';
+import '../widgets/search_field.dart';
+
+/// Catalogue half of the terminal.
+///
+/// Gated on the catalogue import: with no products loaded there is nothing to
+/// sell, so the cashier is sent to the import step instead of a broken grid.
+class PosView extends ConsumerWidget {
+  const PosView({super.key, required this.layout, required this.searchFocus});
+
+  final PosLayout layout;
+  final FocusNode searchFocus;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    if (!ref.watch(catalogueReadyProvider)) {
+      return const _CatalogueRequired();
+    }
+
+    final pad = layout.contentPadding;
+
+    // Keep the last grid row clear of the floating bill button.
+    final bottomInset = layout.billingIsSheet
+        ? AppSizes.buttonHeightLarge + AppSpacing.xxxl
+        : AppSpacing.xxl;
+
+    return Stack(
+      children: [
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            const CustomerBar(),
+            const Divider(height: 1),
+            Padding(
+              padding:
+                  EdgeInsets.fromLTRB(pad, AppSpacing.lg, pad, AppSpacing.md),
+              child: PosSearchField(focusNode: searchFocus),
+            ),
+            CategoryChips(horizontalPadding: pad),
+            const SizedBox(height: AppSpacing.md),
+            Expanded(
+              child: ProductGrid(
+                horizontalPadding: pad,
+                tileExtent: layout.gridTileExtent,
+                bottomPadding: bottomInset,
+              ),
+            ),
+          ],
+        ),
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: bottomInset,
+          child: const Align(
+            alignment: Alignment.bottomCenter,
+            child: ScanToast(),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Shown until the catalogue has been pulled onto this terminal.
+class _CatalogueRequired extends ConsumerWidget {
+  const _CatalogueRequired();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final state = ref.watch(catalogueImportProvider);
+    final running = state is ImportRunning;
+
+    return Center(
+      child: SingleChildScrollView(
+        padding: const EdgeInsets.all(AppSpacing.xxl),
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 460),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                width: 96,
+                height: 96,
+                decoration: const BoxDecoration(
+                  color: AppColors.primarySurface,
+                  shape: BoxShape.circle,
+                ),
+                child: const Icon(Icons.cloud_download_outlined,
+                    size: 42, color: AppColors.primary),
+              ),
+              const SizedBox(height: AppSpacing.xxl),
+              Text(
+                'Import products to start billing',
+                textAlign: TextAlign.center,
+                style: Theme.of(context).textTheme.headlineSmall,
+              ),
+              const SizedBox(height: AppSpacing.sm),
+              const Text(
+                'This terminal has no catalogue yet. Pull the current products '
+                'once at the start of your shift — after that everything runs '
+                'offline.',
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  fontSize: 14,
+                  color: AppColors.textSecondary,
+                  height: 1.6,
+                ),
+              ),
+              const SizedBox(height: AppSpacing.xxl),
+
+              if (running) ...[
+                Text(
+                  state.stage,
+                  style: const TextStyle(
+                    fontSize: 13,
+                    color: AppColors.textSecondary,
+                  ),
+                ),
+                const SizedBox(height: AppSpacing.sm),
+                ClipRRect(
+                  borderRadius: AppRadius.brPill,
+                  child: LinearProgressIndicator(
+                    value: state.progress,
+                    minHeight: 8,
+                    backgroundColor: AppColors.divider,
+                    valueColor: const AlwaysStoppedAnimation<Color>(
+                        AppColors.primary),
+                  ),
+                ),
+                const SizedBox(height: AppSpacing.lg),
+              ],
+
+              if (state is ImportFailed) ...[
+                Container(
+                  padding: const EdgeInsets.all(AppSpacing.md),
+                  margin: const EdgeInsets.only(bottom: AppSpacing.lg),
+                  decoration: BoxDecoration(
+                    color: AppColors.dangerSurface,
+                    borderRadius: AppRadius.brSm,
+                  ),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const Icon(Icons.wifi_off_rounded,
+                          color: AppColors.danger, size: 18),
+                      const SizedBox(width: AppSpacing.sm),
+                      Expanded(
+                        child: Text(
+                          state.message,
+                          style: const TextStyle(
+                            color: AppColors.danger,
+                            fontSize: 13,
+                            height: 1.45,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+
+              PrimaryButton(
+                label: 'Import catalogue now',
+                icon: Icons.cloud_download_rounded,
+                large: true,
+                busy: running,
+                onPressed: running
+                    ? null
+                    : () => ref.read(catalogueImportProvider.notifier).run(),
+              ),
+              const SizedBox(height: AppSpacing.md),
+              TextButton.icon(
+                onPressed: () => ref
+                    .read(activeModuleProvider.notifier)
+                    .state = PosModule.productImport,
+                icon: const Icon(Icons.open_in_new_rounded, size: 16),
+                label: const Text('Open Product Import'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pos/widgets/app_sidebar.dart

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

lib/presentation/pos/widgets/billing_panel.dart

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

lib/presentation/pos/widgets/cart_fab.dart

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

lib/presentation/pos/widgets/cart_line_tile.dart

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

lib/presentation/pos/widgets/category_chips.dart

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

lib/presentation/pos/widgets/customer_bar.dart

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

lib/presentation/pos/widgets/discount_sheet.dart

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

lib/presentation/pos/widgets/page_header.dart

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

lib/presentation/pos/widgets/product_card.dart

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

lib/presentation/pos/widgets/product_grid.dart

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

lib/presentation/pos/widgets/scan_toast.dart

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

lib/presentation/pos/widgets/search_field.dart

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