v1.3.0+6: list kasir + toggle grid, notifikasi admin, badge riwayat, fix muat lebih banyak

lib/main.dart

@@ -1,13 +1,16 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:supabase_flutter/supabase_flutter.dart';
 
 import 'config.dart';
+import 'models/sale.dart';
 import 'state/app_state.dart';
 import 'services/printer_service.dart';
 import 'screens/login_screen.dart';
 import 'screens/home_page.dart';
 import 'utils/colors.dart';
+import 'utils/format.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -25,12 +28,48 @@ class MyApp extends StatefulWidget {
 
 class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
   late final AppState _appState;
+  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
+      GlobalKey<ScaffoldMessengerState>();
 
   @override
   void initState() {
     super.initState();
     _appState = AppState();
     WidgetsBinding.instance.addObserver(this);
+    // Dengarkan stream notifikasi transaksi baru (dari HP lain / checkout).
+    _appState.newSaleNotifications.stream.listen(_showSaleNotification);
+  }
+
+  void _showSaleNotification(Sale sale) {
+    final messenger = _scaffoldKey.currentState;
+    if (messenger == null) return;
+    // Getar + bunyi notifikasi.
+    HapticFeedback.heavyImpact();
+    SystemSound.play(SystemSoundType.click);
+    // Banner notifikasi di atas layar.
+    messenger.showSnackBar(
+      SnackBar(
+        content: Row(
+          children: [
+            const Icon(Icons.check_circle, color: kSuccess, size: 20),
+            const SizedBox(width: 10),
+            Expanded(
+              child: Text(
+                'Transaksi baru: ${sale.items.fold<int>(0, (s, i) => s + i.qty)} item • ${formatRupiah(sale.total)}',
+                style: const TextStyle(color: kText, fontWeight: FontWeight.w600),
+              ),
+            ),
+          ],
+        ),
+        backgroundColor: kSurface,
+        behavior: SnackBarBehavior.floating,
+        duration: const Duration(seconds: 4),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(14),
+          side: const BorderSide(color: kSuccess, width: 1),
+        ),
+      ),
+    );
   }
 
   @override
@@ -54,6 +93,7 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
     return ChangeNotifierProvider.value(
       value: _appState,
       child: MaterialApp(
+        scaffoldMessengerKey: _scaffoldKey,
         title: 'Dutra Store',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(

lib/screens/home_page.dart

@@ -35,7 +35,7 @@ class _HomePageState extends State<HomePage> {
     return screens;
   }
 
-  List<BottomNavigationBarItem> _navItemsForRole(String? role) {
+  List<BottomNavigationBarItem> _navItemsForRole(String? role, AppState state) {
     final items = <BottomNavigationBarItem>[
       const BottomNavigationBarItem(
         icon: Icon(Icons.point_of_sale),
@@ -48,8 +48,12 @@ class _HomePageState extends State<HomePage> {
           icon: Icon(Icons.inventory_2),
           label: 'Produk',
         ),
-        const BottomNavigationBarItem(
+        BottomNavigationBarItem(
-          icon: Icon(Icons.receipt_long),
+          icon: Badge(
+            isLabelVisible: state.unseenSalesCount > 0,
+            label: Text('${state.unseenSalesCount}'),
+            child: const Icon(Icons.receipt_long),
+          ),
           label: 'Riwayat',
         ),
         const BottomNavigationBarItem(
@@ -76,7 +80,7 @@ class _HomePageState extends State<HomePage> {
   Widget build(BuildContext context) {
     final state = context.watch<AppState>();
     final screens = _screensForRole(state.userRole);
-    final navItems = _navItemsForRole(state.userRole);
+    final navItems = _navItemsForRole(state.userRole, state);
 
     final safeIndex = _index >= screens.length ? 0 : _index;
 
@@ -109,7 +113,14 @@ class _HomePageState extends State<HomePage> {
       bottomNavigationBar: navItems.length >= 2
           ? BottomNavigationBar(
               currentIndex: safeIndex,
-              onTap: (i) => setState(() => _index = i),
+              onTap: (i) {
+                setState(() => _index = i);
+                // Reset badge saat tab Riwayat dibuka.
+                final riwayatIdx = state.userRole == 'admin' ? 2 : 1;
+                if (i == riwayatIdx) {
+                  context.read<AppState>().markSalesSeen();
+                }
+              },
               items: navItems,
             )
           : null,

lib/screens/kasir_screen.dart

@@ -23,14 +23,26 @@ class KasirScreen extends StatefulWidget {
 class _KasirScreenState extends State<KasirScreen> {
   final TextEditingController _search = TextEditingController();
   Timer? _searchDebounce;
+  bool _isGrid = false; // default: list (foto lebih jelas)
+  String? _lastAddedId;
+  Timer? _lastAddedTimer;
 
   @override
   void dispose() {
     _searchDebounce?.cancel();
+    _lastAddedTimer?.cancel();
     _search.dispose();
     super.dispose();
   }
 
+  void _markAdded(String id) {
+    _lastAddedTimer?.cancel();
+    setState(() => _lastAddedId = id);
+    _lastAddedTimer = Timer(const Duration(milliseconds: 900), () {
+      if (mounted) setState(() => _lastAddedId = null);
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final state = context.watch<AppState>();
@@ -49,7 +61,10 @@ class _KasirScreenState extends State<KasirScreen> {
       children: [
         Padding(
           padding: const EdgeInsets.fromLTRB(12, 12, 12, 6),
-          child: TextField(
+          child: Row(
+            children: [
+              Expanded(
+                child: TextField(
             controller: _search,
              onChanged: (_) {
                 _searchDebounce?.cancel();
@@ -71,6 +86,61 @@ class _KasirScreenState extends State<KasirScreen> {
                     )
                   : null,
             ),
+                ),
+              ),
+              const SizedBox(width: 8),
+              Stack(
+                children: [
+                  IconButton(
+                    tooltip: 'Buka keranjang',
+                    style: IconButton.styleFrom(
+                      backgroundColor: kSurface,
+                      foregroundColor: kAccent,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(12),
+                        side: const BorderSide(color: kBorder),
+                      ),
+                    ),
+                    icon: const Icon(Icons.shopping_cart),
+                    onPressed: () => _openCartSheet(context, state),
+                  ),
+                  if (state.cart.isNotEmpty)
+                    Positioned(
+                      right: 0,
+                      top: 0,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 6, vertical: 2),
+                        decoration: BoxDecoration(
+                          color: kDanger,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Text(
+                          '${state.cart.fold(0, (s, c) => s + c.qty)}',
+                          style: const TextStyle(
+                              color: Colors.white,
+                              fontSize: 11,
+                              fontWeight: FontWeight.bold),
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+              const SizedBox(width: 8),
+              IconButton(
+                tooltip: _isGrid ? 'Tampilan list' : 'Tampilan grid',
+                style: IconButton.styleFrom(
+                  backgroundColor: kSurface,
+                  foregroundColor: kAccent,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(12),
+                    side: const BorderSide(color: kBorder),
+                  ),
+                ),
+                icon: Icon(_isGrid ? Icons.view_list : Icons.grid_view),
+                onPressed: () => setState(() => _isGrid = !_isGrid),
+              ),
+            ],
           ),
         ),
         Padding(
@@ -218,52 +288,54 @@ class _KasirScreenState extends State<KasirScreen> {
           ),
         ),
         Expanded(
-          child: products.isEmpty
+          child: _isGrid
-              ? Center(
+              ? GridView.builder(
-                  child: Column(
+                  padding: const EdgeInsets.fromLTRB(12, 4, 12, 12),
-                    mainAxisSize: MainAxisSize.min,
+                  gridDelegate:
-                    children: const [
+                      const SliverGridDelegateWithFixedCrossAxisCount(
-                      Icon(Icons.search_off, size: 48, color: kMuted),
+                    crossAxisCount: 2,
-                      SizedBox(height: 8),
+                    mainAxisSpacing: 10,
-                      Text('Produk tidak ditemukan',
+                    crossAxisSpacing: 10,
-                          style: TextStyle(color: kMuted)),
+                    mainAxisExtent: 168,
-                    ],
                   ),
-                )
+                  itemCount: products.length,
-              : RefreshIndicator(
+                  itemBuilder: (context, i) {
-                  onRefresh: () async {
+                    final p = products[i];
-                    context.read<AppState>().recordManualRefresh();
+                    // Hijau sesaat hanya untuk produk yang baru ditap,
-                    await context.read<AppState>().refresh();
+                    // BUKAN semua isi keranjang — tap selalu tambah qty.
-                  },
+                    final highlight = _lastAddedId == p.id;
-                  color: kAccent,
+                    return _KasirCard(
-                  child: GridView.builder(
+                      key: ValueKey(p.id),
-                    padding: const EdgeInsets.fromLTRB(12, 6, 12, 12),
+                      product: p,
-                    gridDelegate:
+                      price: isReseller ? p.priceReseller : p.price,
-                        const SliverGridDelegateWithFixedCrossAxisCount(
+                      inCart: highlight,
-                      crossAxisCount: 2,
-                      mainAxisSpacing: 12,
-                      crossAxisSpacing: 12,
-                      childAspectRatio: 1.1,
-                    ),
-                    itemCount: products.length,
-                    itemBuilder: (context, i) => _ProductCard(
-                      product: products[i],
-                      displayPrice:
-                          isReseller ? products[i].priceReseller : products[i].price,
-                      isReseller: isReseller,
                       onTap: () {
-                        HapticFeedback.lightImpact();
+                        state.addToCart(p);
-                        state.addToCart(products[i]);
+                        _markAdded(p.id);
                       },
-                    ),
+                    );
-                  ),
+                  },
+                )
+              : ListView.separated(
+                  padding: const EdgeInsets.fromLTRB(12, 4, 12, 12),
+                  itemCount: products.length,
+                  separatorBuilder: (_, __) => const SizedBox(height: 8),
+                  itemBuilder: (context, i) {
+                    final p = products[i];
+                    final highlight = _lastAddedId == p.id;
+                    return _KasirListTile(
+                      key: ValueKey(p.id),
+                      product: p,
+                      price: isReseller ? p.priceReseller : p.price,
+                      inCart: highlight,
+                      onTap: () {
+                        state.addToCart(p);
+                        _markAdded(p.id);
+                      },
+                    );
+                  },
                 ),
         ),
-        if (state.cart.isNotEmpty)
-          _CartBar(
-            onTap: () => _openCartSheet(context, state),
-            itemCount: state.cart.fold(0, (s, c) => s + c.qty),
-          ),
       ],
     );
   }
@@ -1139,7 +1211,7 @@ class _CartSheetContent extends StatelessWidget {
           padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
           child: Row(
             children: [
-              _KasirAvatar(product: line.product, radius: 18),
+              _KasirAvatar(product: line.product, size: 36, radius: 18),
               const SizedBox(width: 12),
               Expanded(
                 child: Column(
@@ -1437,6 +1509,245 @@ class _ReceiptRow extends StatelessWidget {
   }
 }
 
+// Avatar foto produk kasir (56px default) atau huruf inisial.
+class _KasirAvatar extends StatelessWidget {
+  final Product product;
+  final double size;
+  final double? radius;
+  const _KasirAvatar({required this.product, this.size = 56, this.radius});
+
+  @override
+  Widget build(BuildContext context) {
+    final url = productImageUrl(product.imagePath);
+    final r = radius ?? 12;
+    if (url != null) {
+      return ClipRRect(
+        borderRadius: BorderRadius.circular(r),
+        child: Image.network(
+          url,
+          width: size,
+          height: size,
+          fit: BoxFit.cover,
+          errorBuilder: (_, __, ___) =>
+              _KasirInitial(product: product, size: size, radius: r),
+        ),
+      );
+    }
+    return _KasirInitial(product: product, size: size, radius: r);
+  }
+}
+
+class _KasirInitial extends StatelessWidget {
+  final Product product;
+  final double size;
+  final double radius;
+  const _KasirInitial(
+      {required this.product, required this.size, this.radius = 12});
+
+  @override
+  Widget build(BuildContext context) {
+    final initial =
+        product.name.isNotEmpty ? product.name[0].toUpperCase() : '?';
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: productAccent(product.name).withValues(alpha: 0.16),
+        borderRadius: BorderRadius.circular(radius),
+      ),
+      alignment: Alignment.center,
+      child: Text(
+        initial,
+        style: TextStyle(
+          color: productAccent(product.name),
+          fontWeight: FontWeight.bold,
+          fontSize: size * 0.42,
+        ),
+      ),
+    );
+  }
+}
+
+// Kartu grid kasir.
+class _KasirCard extends StatelessWidget {
+  final Product product;
+  final double price;
+  final bool inCart;
+  final VoidCallback onTap;
+
+  const _KasirCard({
+    super.key,
+    required this.product,
+    required this.price,
+    required this.inCart,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.all(10),
+        decoration: BoxDecoration(
+          color: inCart ? kSuccess.withValues(alpha: 0.12) : kSurface,
+          borderRadius: BorderRadius.circular(kRadius),
+          border: Border.all(
+              color: inCart ? kSuccess : kBorder, width: inCart ? 1.5 : 1),
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                _KasirAvatar(product: product, size: 40),
+                const Spacer(),
+                Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                  decoration: BoxDecoration(
+                    color: product.stock > 0
+                        ? kSuccess.withValues(alpha: 0.15)
+                        : kDanger.withValues(alpha: 0.15),
+                    borderRadius: BorderRadius.circular(20),
+                  ),
+                  child: Text(
+                    'Stok ${product.stock}',
+                    style: TextStyle(
+                      fontSize: 11,
+                      fontWeight: FontWeight.w600,
+                      color: product.stock > 0 ? kSuccess : kDanger,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 8),
+            Text(
+              product.name,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                  color: kText, fontWeight: FontWeight.w600, fontSize: 13),
+            ),
+            const Spacer(),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+              decoration: BoxDecoration(
+                color: kAccent.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: Text(
+                formatRupiah(price),
+                style: const TextStyle(
+                    color: kAccent,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 13),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+// Baris list kasir: foto 56px + nama/harga/stok + tombol tambah.
+class _KasirListTile extends StatelessWidget {
+  final Product product;
+  final double price;
+  final bool inCart;
+  final VoidCallback onTap;
+
+  const _KasirListTile({
+    super.key,
+    required this.product,
+    required this.price,
+    required this.inCart,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.all(10),
+        decoration: BoxDecoration(
+          color: inCart ? kSuccess.withValues(alpha: 0.12) : kSurface,
+          borderRadius: BorderRadius.circular(14),
+          border: Border.all(
+              color: inCart ? kSuccess : kBorder, width: inCart ? 1.5 : 1),
+        ),
+        child: Row(
+          children: [
+            _KasirAvatar(product: product, size: 56),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    product.name,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                        color: kText,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 14),
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    formatRupiah(price),
+                    style: const TextStyle(
+                        color: kAccent,
+                        fontWeight: FontWeight.bold,
+                        fontSize: 14),
+                  ),
+                  const SizedBox(height: 4),
+                  Container(
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+                    decoration: BoxDecoration(
+                      color: product.stock > 0
+                          ? kSuccess.withValues(alpha: 0.15)
+                          : kDanger.withValues(alpha: 0.15),
+                      borderRadius: BorderRadius.circular(20),
+                    ),
+                    child: Text(
+                      'Stok ${product.stock}',
+                      style: TextStyle(
+                        fontSize: 11,
+                        fontWeight: FontWeight.w600,
+                        color: product.stock > 0 ? kSuccess : kDanger,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 8),
+            Container(
+              width: 40,
+              height: 40,
+              decoration: BoxDecoration(
+                color: inCart
+                    ? kSuccess.withValues(alpha: 0.2)
+                    : kAccent.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Icon(
+                inCart ? Icons.check : Icons.add,
+                color: inCart ? kSuccess : kAccent,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _ProductCard extends StatelessWidget {
   final Product product;
   final double displayPrice;
@@ -1479,7 +1790,7 @@ class _ProductCard extends StatelessWidget {
               children: [
                 Row(
                   children: [
-                    _KasirAvatar(product: product, radius: 18),
+                    _KasirAvatar(product: product, size: 36, radius: 18),
                     const Spacer(),
                     Container(
                       padding: const EdgeInsets.symmetric(
@@ -1556,33 +1867,6 @@ class _ProductCard extends StatelessWidget {
   }
 }
 
-/// Avatar produk di kasir: foto jika ada, fallback huruf pertama nama.
-class _KasirAvatar extends StatelessWidget {
-  final Product product;
-  final double radius;
-  const _KasirAvatar({required this.product, this.radius = 18});
-
-  @override
-  Widget build(BuildContext context) {
-    final url = productImageUrl(product.imagePath);
-    return CircleAvatar(
-      radius: radius,
-      backgroundColor: kAccent.withValues(alpha: 0.15),
-      backgroundImage: url != null ? NetworkImage(url) : null,
-      child: url == null
-          ? Text(
-              product.name.isNotEmpty
-                  ? product.name[0].toUpperCase()
-                  : '?',
-              style: TextStyle(
-                  color: kAccent,
-                  fontWeight: FontWeight.w700,
-                  fontSize: radius * 0.75),
-            )
-          : null,
-    );
-  }
-}
 
 class _QtyButton extends StatelessWidget {
   final IconData icon;

lib/screens/riwayat_screen.dart

@@ -395,7 +395,10 @@ class _RiwayatScreenState extends State<RiwayatScreen> {
                     },
                     color: kAccent,
                     child: ListView.separated(
-                      itemCount: displayedSales.length + (state.hasMoreSales ? 1 : 0),
+                      itemCount: displayedSales.length +
+                          (filteredSales.length > state.visibleSalesCount
+                              ? 1
+                              : 0),
                       separatorBuilder: (_, __) =>
                           const SizedBox(height: 10),
                       itemBuilder: (context, i) {

lib/state/app_state.dart

@@ -27,6 +27,22 @@ class CartLine {
 class AppState extends ChangeNotifier {
   final SupabaseClient _supabase = Supabase.instance.client;
 
+  // Stream notifikasi transaksi baru (dipakai UI untuk banner+suara+getar).
+  // Diisi setiap createSale sukses DAN setiap realtime INSERT dari HP lain.
+  final StreamController<Sale> newSaleNotifications =
+      StreamController<Sale>.broadcast();
+  final Set<String> _notifiedSaleIds = {};
+
+  // Jumlah transaksi baru yang belum dilihat admin (badge di tab Riwayat).
+  int unseenSalesCount = 0;
+
+  void markSalesSeen() {
+    if (unseenSalesCount != 0) {
+      unseenSalesCount = 0;
+      notifyListeners();
+    }
+  }
+
   // Client dengan service_role key untuk operasi admin (buat/edit/hapus akun kasir).
   // PERINGATAN: key ini bypass RLS — hanya untuk app POS di device terpercaya.
   final SupabaseClient _admin = SupabaseClient(supabaseUrl, supabaseServiceKey);
@@ -135,6 +151,43 @@ class AppState extends ChangeNotifier {
       if (elapsed < const Duration(seconds: 15)) return;
     }
     await refresh();
+    _checkNewSales();
+  }
+
+  bool _salesFirstLoad = true;
+
+  /// Deteksi transaksi baru dari polling/refresh dan kirim ke stream
+  /// notifikasi. Load pertama dilewati agar tidak spam saat start.
+  void _checkNewSales() {
+    // Hanya admin yang perlu notifikasi — kasir tidak (mereka yang
+    // transaksi, jadi sudah tahu).
+    if (userRole != 'admin') {
+      for (final s in sales) {
+        _notifiedSaleIds.add(s.id);
+      }
+      _salesFirstLoad = false;
+      return;
+    }
+    final now = DateTime.now();
+    bool newSeen = false;
+    for (final s in sales) {
+      if (!_notifiedSaleIds.contains(s.id)) {
+        _notifiedSaleIds.add(s.id);
+        // Lewati transaksi lama (>5 menit) agar tidak spam notif saat start.
+        // Lewati juga transaksi sendiri — admin tahu kalau dia yang jualan.
+        if (!_salesFirstLoad &&
+            s.userId != userId &&
+            now.difference(s.date).inMinutes.abs() <= 5) {
+          newSeen = true;
+          unseenSalesCount++;
+          if (!newSaleNotifications.isClosed) {
+            newSaleNotifications.add(s);
+          }
+        }
+      }
+    }
+    if (newSeen) notifyListeners();
+    _salesFirstLoad = false;
   }
 
   Future<void> refresh() async {
@@ -686,6 +739,11 @@ class AppState extends ChangeNotifier {
       cart.clear();
       _discount = 0;
       notifyListeners();
+
+      // Tandai ID transaksi lokal agar tidak di-notify lagi via polling
+      // (admin yang jualan sendiri tidak perlu notif transaksinya sendiri).
+      _notifiedSaleIds.add(sale.id);
+
       return sale;
     } catch (e) {
       await _offlineQueue.addToQueue({

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.2.0+5
+version: 1.3.0+6
 
 environment:
   sdk: ^3.9.2