given these 3 dart pages

// lib/main.dart
import 'package:flutter/material.dart';
//import 'package:supabase_flutter/supabase_flutter.dart';
import 'supabase_config.dart';
import 'pages/auth_page.dart';
import 'pages/sign_up_page.dart';
import 'pages/shopping_list_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeSupabase();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkTheme = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopping List',
      theme: _isDarkTheme ? ThemeData.dark() : ThemeData.light(),
      initialRoute: '/auth',
      routes: {
        '/auth': (context) => AuthPage(),
        '/sign-up': (context) => SignUpPage(),
        // Pass the theme toggler to `ShoppingListPage`
        '/home': (context) => ShoppingListPage(
              toggleTheme: _toggleTheme,
              isDarkTheme: _isDarkTheme,
            ),
      },
    );
  }

  void _toggleTheme() {
    setState(() {
      _isDarkTheme = !_isDarkTheme;
    });
  }
}

// lib/pages/shopping_list_page.dart
import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import '../item.dart';

class ShoppingListPage extends StatefulWidget {
  final Function toggleTheme;
  final bool isDarkTheme;

  const ShoppingListPage({super.key, required this.toggleTheme, required this.isDarkTheme});

  @override
  State<ShoppingListPage> createState() => _ShoppingListPageState();
}

class _ShoppingListPageState extends State<ShoppingListPage> {
  List<Item> _filteredItems = List.from(items);
  String _searchQuery = "";
  String _selectedGroup = 'Family'; // Default group
  final TextEditingController _searchController = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  Color? _highlightColor;

  // Controllers for adding new items
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _quantityController = TextEditingController();
  final TextEditingController _unitController = TextEditingController();
  final TextEditingController _userInitialController = TextEditingController();

  final FocusNode _nameFocusNode = FocusNode();
  bool _isDuplicateName = false;

  @override
  void initState() {
    super.initState();
    _checkAuthStatus();
    _sortItems();
  }

  @override
  void dispose() {
    _searchController.dispose();
    _nameController.dispose();
    _quantityController.dispose();
    _unitController.dispose();
    _userInitialController.dispose();
    _nameFocusNode.dispose();
    super.dispose();
  }

  void _checkAuthStatus() async {
    final user = Supabase.instance.client.auth.currentUser;
    if (user == null) {
      Navigator.of(context).pushReplacementNamed('/auth');
    }
  }

  void _filterItems(String query) {
    setState(() {
      _searchQuery = query;
      _sortItems();
    });
  }

  void _clearSearch() {
    _searchController.clear();
    setState(() {
      _searchQuery = "";
      _sortItems();
    });
  }

  void _toggleItemPicked(Item item) {
    setState(() {
      item.picked = !item.picked;
      _filteredItems.remove(item);
      _filteredItems.insert(0, item);

      _highlightColor = widget.isDarkTheme ? Colors.tealAccent[700] : Colors.lightBlue[100];

      _scrollController.animateTo(
        0.0,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    });

    Future.delayed(Duration(milliseconds: 800)).then((_) {
      setState(() {
        _highlightColor = null; // Clear highlight
        _clearSearch();
        _sortItems();
      });
    });
  }

  void _sortItems() {
    _filteredItems = items.where((item) => item.group == _selectedGroup).toList();
    if (_searchQuery.isNotEmpty) {
      _filteredItems = _filteredItems
          .where((item) => item.name.toLowerCase().contains(_searchQuery.toLowerCase()))
          .toList();
    }

    _filteredItems.sort((a, b) {
      if (a.picked && !b.picked) return -1;
      if (!a.picked && b.picked) return 1;
      return a.name.compareTo(b.name);
    });
  }

  void _addItem() {
    _showDialogToAddItem();
  }

  void _confirmDeleteItem(Item item) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Confirm Delete'),
          content: Text('Are you sure you want to delete ${item.name}?'),
          actions: [
            TextButton(
              child: const Text('Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text('Delete'),
              onPressed: () {
                setState(() {
                  items.remove(item);
                  _sortItems();
                });
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("${item.name} deleted")),
                );
              },
            ),
          ],
        );
      },
    );
  }

  void _showDialogToAddItem() {
    final textColor = widget.isDarkTheme ? Colors.white : Colors.black;

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (context, setState) {
            bool isFormValid() {
              return _nameController.text.isNotEmpty &&
                  !_isDuplicateName &&
                  _quantityController.text.isNotEmpty &&
                  _unitController.text.isNotEmpty &&
                  _userInitialController.text.isNotEmpty;
            }

            return AlertDialog(
              title: const Text('Add New Item'),
              content: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'Group: ',
                            style: TextStyle(
                              fontSize: 16.0,
                              color: textColor,
                            ),
                          ),
                          TextSpan(
                            text: _selectedGroup,
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0,
                              color: textColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 8.0),
                    TextField(
                      controller: _nameController,
                      focusNode: _nameFocusNode,
                      decoration: InputDecoration(
                        labelText: 'Name',
                        errorText: _isDuplicateName
                            ? 'Item already exists in this group'
                            : null,
                      ),
                      onChanged: (text) {
                        setState(() {
                          _isDuplicateName =
                              _itemExistsForGroup(text.trim(), _selectedGroup);
                        });
                      },
                      onTap: () {
                        setState(() {
                          _isDuplicateName = false;
                        });
                      },
                    ),
                    TextField(
                      controller: _quantityController,
                      decoration: const InputDecoration(labelText: 'Quantity'),
                      keyboardType: TextInputType.number,
                    ),
                    TextField(
                      controller: _unitController,
                      decoration: const InputDecoration(labelText: 'Unit'),
                    ),
                    TextField(
                      controller: _userInitialController,
                      decoration: const InputDecoration(labelText: 'User Initial'),
                    ),
                    SizedBox(height: 20.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            _clearTextControllers();
                            Navigator.of(context).pop();
                          },
                        ),
                        TextButton(
                          onPressed: isFormValid()
                              ? () {
                                  setState(() {
                                    items.add(Item(
                                      name: _nameController.text.trim(),
                                      quantity: double.tryParse(
                                              _quantityController.text.trim()) ??
                                          0.0,
                                      unit: _unitController.text.trim(),
                                      userInitial: _userInitialController.text
                                          .trim()
                                          .toUpperCase(),
                                      group: _selectedGroup,
                                    ));
                                    _sortItems();
                                    _clearTextControllers();
                                  });
                                  Navigator.of(context).pop();
                                }
                              : null,
                          child: const Text('Add'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  bool _itemExistsForGroup(String name, String group) {
    return items.any((item) =>
        item.name.toLowerCase() == name.toLowerCase() && item.group == group);
  }

  void _clearTextControllers() {
    _nameController.clear();
    _quantityController.clear();
    _unitController.clear();
    _userInitialController.clear();
    _isDuplicateName = false;
  }

  void _scrollToTop() {
    _scrollController.animateTo(
      0.0,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  void _scrollToBottom() {
    _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final rowColorsDefault = widget.isDarkTheme
        ? [Colors.grey[900]!, Colors.grey[850]!]
        : [Colors.blue[50]!, Colors.blue[100]!];

    final pickedRowColors = widget.isDarkTheme
        ? [Colors.teal[800]!.withOpacity(0.5), Colors.teal[700]!.withOpacity(0.5)]
        : [Colors.green[100]!, Colors.green[50]!];

    final groups = _getGroups();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Shopping List'),
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ),
      ),
      drawer: SizedBox(
        width: MediaQuery.of(context).size.width * 0.75,
        child: Drawer(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Menu',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              Expanded(
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: <Widget>[
                    ListTile(
                      leading: const Icon(Icons.home),
                      title: const Text('Home'),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                    ListTile(
                      leading: const Icon(Icons.account_circle),
                      title: const Text('Profile'),
                      onTap: () {
                        Navigator.pop(context);
                      },
                    ),
                    ListTile(
                      leading: Icon(widget.isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round),
                      title: Text('Toggle Theme'),
                      onTap: () {
                        Navigator.pop(context);
                        widget.toggleTheme();
                      },
                    ),
                  ],
                ),
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text('Settings'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: Icon(Icons.logout),
                title: Text('Logout'),
                onTap: () async {
                  await Supabase.instance.client.auth.signOut();
                  Navigator.of(context).pushReplacementNamed('/auth');
                },
              ),
            ],
          ),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.3,
                  child: DropdownButton<String>(
                    isExpanded: true,
                    value: _selectedGroup,
                    icon: const Icon(Icons.arrow_downward),
                    onChanged: (String? newValue) {
                      setState(() {
                        _selectedGroup = newValue ?? _selectedGroup;
                        _sortItems();
                      });
                    },
                    items: groups.map<DropdownMenuItem<String>>((String group) {
                      return DropdownMenuItem<String>(
                        value: group,
                        child: Text(group),
                      );
                    }).toList(),
                  ),
                ),
                SizedBox(width: 10.0),
                Tooltip(
                  message: 'Manage Groups',
                  child: IconButton(
                    icon: const Icon(Icons.group),
                    onPressed: () {
                      // Implement group management functionality
                    },
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.375,
                  child: TextField(
                    controller: _searchController,
                    onChanged: _filterItems,
                    decoration: InputDecoration(
                      labelText: 'Search',
                      border: OutlineInputBorder(),
                      isDense: true,
                      contentPadding: EdgeInsets.all(8.0),
                      suffixIcon: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Icon(Icons.search),
                          IconButton(
                            icon: const Icon(Icons.cancel),
                            onPressed: _clearSearch,
                          ),
                        ],
                      ),
                    ),
                    keyboardType: TextInputType.text,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: _filteredItems.length,
              itemBuilder: (context, index) {
                final item = _filteredItems[index];
                final isPicked = item.picked;
                final backgroundColor = index == 0 && _highlightColor != null
                    ? _highlightColor
                    : (isPicked
                        ? pickedRowColors[index % pickedRowColors.length]
                        : rowColorsDefault[index % rowColorsDefault.length]);

                return Dismissible(
                  key: UniqueKey(),
                  confirmDismiss: (direction) async {
                    bool? result = await showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          title: const Text('Confirm Delete'),
                          content:
                              Text('Are you sure you want to delete ${item.name}?'),
                          actions: [
                            TextButton(
                              child: const Text('Cancel'),
                              onPressed: () {
                                Navigator.of(context).pop(false);
                              },
                            ),
                            TextButton(
                              child: const Text('Delete'),
                              onPressed: () {
                                Navigator.of(context).pop(true);
                              },
                            ),
                          ],
                        );
                      },
                    );
                    return result ?? false;
                  },
                  onDismissed: (direction) {
                    setState(() {
                      items.remove(item);
                      _sortItems();
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text("${item.name} deleted")),
                    );
                  },
                  background: Container(color: Colors.red),
                  child: Container(
                    color: backgroundColor,
                    child: ListTile(
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 12.0, vertical: 0.0),
                      dense: true,
                      title: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            item.name,
                            style: TextStyle(
                              color: widget.isDarkTheme
                                  ? Colors.white
                                  : Colors.black,
                            ),
                          ),
                          Text(
                            formatQuantity(item.quantity, item.unit),
                            style: TextStyle(
                              color: widget.isDarkTheme
                                  ? Colors.white
                                  : Colors.black,
                            ),
                          ),
                        ],
                      ),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: Icon(Icons.edit, color: Colors.grey),
                            onPressed: () {
                              // Implement edit functionality
                            },
                          ),
                          CircleAvatar(
                            backgroundColor: Colors.blue,
                            child: Text(
                              item.userInitial,
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                          Transform.scale(
                            scale: 1.15,
                            child: Checkbox(
                              shape: CircleBorder(),
                              value: item.picked,
                              onChanged: (bool? newValue) {
                                _toggleItemPicked(item);
                              },
                            ),
                          ),
                        ],
                      ),
                      onTap: () {
                        _toggleItemPicked(item);
                      },
                    ),
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 16.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 20.0),
              SizedBox(
                width: 48,
                height: 48,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.zero,
                  ),
                  onPressed: _scrollToBottom,
                  child: const Icon(Icons.arrow_downward),
                ),
              ),
              SizedBox(width: 8.0),
              SizedBox(
                width: 48,
                height: 48,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.zero,
                  ),
                  onPressed: _scrollToTop,
                  child: const Icon(Icons.arrow_upward),
                ),
              ),
              Spacer(),
              ElevatedButton.icon(
                onPressed: _addItem,
                icon: const Icon(Icons.add),
                label: const Text('Add Item'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.lightBlueAccent,
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  textStyle: TextStyle(fontSize: 18),
                  elevation: 3,
                ),
              ),
              SizedBox(width: 20.0),
            ],
          ),
          SizedBox(height: 16.0),
        ],
      ),
    );
  }

  List<String> _getGroups() {
    return items.map((item) => item.group).toSet().toList();
  }

  String formatQuantity(double quantity, String unit) {
    if (quantity == quantity.toInt()) {
      return '${quantity.toInt()} $unit';
    } else {
      return '$quantity $unit';
    }
  }
}

// lib/item.dart

class Item {
  final String name;
  final double quantity; // Use double to handle both whole numbers and decimals
  final String unit;
  final String userInitial;
  final String group;
  bool picked;

  Item({
    required this.name,
    required this.quantity,
    required this.unit,
    required this.userInitial,
    required this.group,
    this.picked = false,
  });
}

final List<Item> items = [
  Item(name: 'Apples', quantity: 5, unit: 'kg', userInitial: 'A', group: 'Family'), // Whole number
  Item(name: 'Bananas', quantity: 12, unit: 'pcs', userInitial: 'B', group: 'Timos Party'),
  Item(name: 'Bread', quantity: 2, unit: 'loaves', userInitial: 'C', group: 'Family'),
  Item(name: 'Carrots', quantity: 3.5, unit: 'kg', userInitial: 'D', group: 'Family'), // Decimal
  Item(name: 'Detergent', quantity: 1, unit: 'bottle', userInitial: 'E', group: 'Family'),
  Item(name: 'Eggs', quantity: 30, unit: 'pcs', userInitial: 'F', group: 'Timos Party'),
  Item(name: 'Flour', quantity: 2.25, unit: 'kg', userInitial: 'G', group: 'Family'), // Decimal
  Item(name: 'Grapes', quantity: 1.5, unit: 'bag', userInitial: 'H', group: 'Timos Party'), // Decimal
  Item(name: 'Honey', quantity: 1, unit: 'jar', userInitial: 'I', group: 'Family'),
  Item(name: 'Ice Cream', quantity: 2, unit: 'liters', userInitial: 'J', group: 'Timos Party'),
  Item(name: 'Juice', quantity: 4, unit: 'liters', userInitial: 'K', group: 'Family'),
  Item(name: 'Kale', quantity: 1, unit: 'bag', userInitial: 'L', group: 'Family'),
  Item(name: 'Lemons', quantity: 10, unit: 'pcs', userInitial: 'M', group: 'Family'),
  Item(name: 'Milk', quantity: 3, unit: 'liters', userInitial: 'N', group: 'Family'),
  Item(name: 'Nuts', quantity: 200, unit: 'g', userInitial: 'O', group: 'Timos Party'),
  Item(name: 'Oranges', quantity: 7, unit: 'pcs', userInitial: 'P', group: 'Family'),
  Item(name: 'Pasta', quantity: 1, unit: 'kg', userInitial: 'Q', group: 'Family'),
  Item(name: 'Quinoa', quantity: 0.75, unit: 'bag', userInitial: 'R', group: 'Family'), // Decimal
  Item(name: 'Rice', quantity: 5, unit: 'kg', userInitial: 'S', group: 'Family'),
  Item(name: 'Strawberries', quantity: 2, unit: 'boxes', userInitial: 'T', group: 'Timos Party'),
  Item(name: 'Tomatoes', quantity: 1, unit: 'kg', userInitial: 'U', group: 'Family'),
  Item(name: 'Umbrellas', quantity: 3, unit: 'pcs', userInitial: 'V', group: 'Timos Party'),
  Item(name: 'Vinegar', quantity: 1, unit: 'bottle', userInitial: 'W', group: 'Family'),
  Item(name: 'Watermelon', quantity: 1, unit: 'pcs', userInitial: 'X', group: 'Timos Party'),
  Item(name: 'Watermelon', quantity: 1, unit: 'pcs', userInitial: 'X', group: 'Family'),
];

// Note: Ensure all entries have non-null values.

add a create new list option in the drawer menu
add the create new list function
the new list will have a list name and a list uuid