feat: customer page

2025-08-15 16:31:29 +07:00
parent c9e5c8d178
commit 8c2afc4880
8 changed files with 643 additions and 75 deletions
@@ -0,0 +1,235 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:line_icons/line_icons.dart';
+import 'dart:math' as math;
+
+import '../../../common/theme/theme.dart';
+import '../../components/button/button.dart';
+import 'widgets/appbar.dart';
+import 'widgets/customer_card.dart';
+import 'widgets/customer_tile.dart';
+
+// Customer Model
+class Customer {
+  final String id;
+  final String name;
+  final String email;
+  final String phone;
+  final String address;
+  final double totalPurchases;
+  final int totalOrders;
+  final DateTime lastVisit;
+  final String membershipLevel;
+  final bool isActive;
+
+  Customer({
+    required this.id,
+    required this.name,
+    required this.email,
+    required this.phone,
+    required this.address,
+    required this.totalPurchases,
+    required this.totalOrders,
+    required this.lastVisit,
+    required this.membershipLevel,
+    required this.isActive,
+  });
+}
+
+@RoutePage()
+class CustomerPage extends StatefulWidget {
+  const CustomerPage({super.key});
+
+  @override
+  State<CustomerPage> createState() => _CustomerPageState();
+}
+
+class _CustomerPageState extends State<CustomerPage>
+    with TickerProviderStateMixin {
+  final TextEditingController _searchController = TextEditingController();
+  String _searchQuery = '';
+  bool _isGridView = false;
+
+  // Sample customer data
+  final List<Customer> _customers = [
+    Customer(
+      id: '001',
+      name: 'Ahmad Wijaya',
+      email: 'ahmad@email.com',
+      phone: '+62 812-3456-7890',
+      address: 'Jl. Raya No. 123, Jakarta',
+      totalPurchases: 2500000,
+      totalOrders: 15,
+      lastVisit: DateTime.now().subtract(Duration(days: 2)),
+      membershipLevel: 'Gold',
+      isActive: true,
+    ),
+    Customer(
+      id: '002',
+      name: 'Siti Nurhaliza',
+      email: 'siti@email.com',
+      phone: '+62 813-4567-8901',
+      address: 'Jl. Merdeka No. 45, Bandung',
+      totalPurchases: 1800000,
+      totalOrders: 12,
+      lastVisit: DateTime.now().subtract(Duration(days: 5)),
+      membershipLevel: 'Silver',
+      isActive: true,
+    ),
+    Customer(
+      id: '003',
+      name: 'Budi Santoso',
+      email: 'budi@email.com',
+      phone: '+62 814-5678-9012',
+      address: 'Jl. Sudirman No. 67, Surabaya',
+      totalPurchases: 3200000,
+      totalOrders: 20,
+      lastVisit: DateTime.now().subtract(Duration(days: 1)),
+      membershipLevel: 'Platinum',
+      isActive: true,
+    ),
+    Customer(
+      id: '004',
+      name: 'Maya Sari',
+      email: 'maya@email.com',
+      phone: '+62 815-6789-0123',
+      address: 'Jl. Diponegoro No. 89, Yogyakarta',
+      totalPurchases: 950000,
+      totalOrders: 8,
+      lastVisit: DateTime.now().subtract(Duration(days: 30)),
+      membershipLevel: 'Bronze',
+      isActive: false,
+    ),
+  ];
+
+  // Animation
+  late AnimationController _rotationController;
+  late Animation<double> _rotationAnimation;
+
+  @override
+  initState() {
+    super.initState();
+    _rotationController = AnimationController(
+      duration: const Duration(seconds: 3),
+      vsync: this,
+    )..repeat();
+    _rotationAnimation = Tween<double>(
+      begin: 0,
+      end: 2 * math.pi,
+    ).animate(_rotationController);
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _rotationController.dispose();
+    super.dispose();
+  }
+
+  List<Customer> get filteredCustomers {
+    var filtered = _customers.where((customer) {
+      final matchesSearch =
+          customer.name.toLowerCase().contains(_searchQuery.toLowerCase()) ||
+          customer.email.toLowerCase().contains(_searchQuery.toLowerCase()) ||
+          customer.phone.contains(_searchQuery);
+
+      return matchesSearch;
+    }).toList();
+
+    return filtered;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColor.background,
+      body: CustomScrollView(
+        slivers: [
+          // SliverAppBar with gradient
+          SliverAppBar(
+            expandedHeight: 120.0,
+            floating: false,
+            pinned: true,
+            backgroundColor: AppColor.primary,
+            flexibleSpace: CustomerAppbar(
+              rotationAnimation: _rotationAnimation,
+            ),
+            actions: [ActionIconButton(onTap: () {}, icon: LineIcons.search)],
+          ),
+
+          // Search and Filter Section
+          SliverToBoxAdapter(
+            child: Container(
+              color: AppColor.white,
+              child: Column(
+                children: [
+                  // View toggle and sort
+                  Padding(
+                    padding: EdgeInsets.only(left: 16, right: 16, bottom: 0),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          '${filteredCustomers.length} customers found',
+                          style: TextStyle(
+                            color: AppColor.textSecondary,
+                            fontSize: 14,
+                          ),
+                        ),
+                        Row(
+                          children: [
+                            IconButton(
+                              icon: Icon(
+                                _isGridView ? Icons.list : Icons.grid_view,
+                                color: AppColor.primary,
+                              ),
+                              onPressed: () {
+                                setState(() {
+                                  _isGridView = !_isGridView;
+                                });
+                              },
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Customer List
+          _isGridView ? _buildCustomerGrid() : _buildCustomerList(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCustomerList() {
+    return SliverList(
+      delegate: SliverChildBuilderDelegate((context, index) {
+        final customer = filteredCustomers[index];
+        return CustomerTile(customer: customer);
+      }, childCount: filteredCustomers.length),
+    );
+  }
+
+  Widget _buildCustomerGrid() {
+    return SliverPadding(
+      padding: EdgeInsets.all(16),
+      sliver: SliverGrid(
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 2,
+          crossAxisSpacing: 16,
+          mainAxisSpacing: 16,
+          childAspectRatio: 0.8,
+        ),
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final customer = filteredCustomers[index];
+          return CustomerCard(customer: customer);
+        }, childCount: filteredCustomers.length),
+      ),
+    );
+  }
+}