feat: customer page
This commit is contained in:
efrilm
@@ -1,106 +1,39 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:line_icons/line_icons.dart';
|
||||
|
||||
import '../../../application/customer/customer_loader/customer_loader_bloc.dart';
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../../domain/customer/customer.dart';
|
||||
import '../../../injection.dart';
|
||||
import '../../components/appbar/appbar.dart';
|
||||
import '../../components/button/button.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 {
|
||||
class CustomerPage extends StatefulWidget implements AutoRouteWrapper {
|
||||
const CustomerPage({super.key});
|
||||
|
||||
@override
|
||||
State<CustomerPage> createState() => _CustomerPageState();
|
||||
|
||||
@override
|
||||
Widget wrappedRoute(BuildContext context) => BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<CustomerLoaderBloc>()
|
||||
..add(CustomerLoaderEvent.fetched(isRefresh: true)),
|
||||
child: this,
|
||||
);
|
||||
}
|
||||
|
||||
class _CustomerPageState extends State<CustomerPage>
|
||||
with TickerProviderStateMixin {
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
String _searchQuery = '';
|
||||
ScrollController _scrollController = ScrollController();
|
||||
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,
|
||||
),
|
||||
];
|
||||
|
||||
@override
|
||||
initState() {
|
||||
super.initState();
|
||||
@@ -112,94 +45,102 @@ class _CustomerPageState extends State<CustomerPage>
|
||||
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: CustomAppBar(title: 'Pelanggan'),
|
||||
actions: [ActionIconButton(onTap: () {}, icon: LineIcons.search)],
|
||||
),
|
||||
body: BlocBuilder<CustomerLoaderBloc, CustomerLoaderState>(
|
||||
builder: (context, state) {
|
||||
return NotificationListener<ScrollNotification>(
|
||||
onNotification: (notification) {
|
||||
if (notification is ScrollEndNotification &&
|
||||
_scrollController.position.extentAfter == 0) {
|
||||
context.read<CustomerLoaderBloc>().add(
|
||||
CustomerLoaderEvent.fetched(),
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
// 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,
|
||||
return true;
|
||||
},
|
||||
child: CustomScrollView(
|
||||
controller: _scrollController,
|
||||
slivers: [
|
||||
// SliverAppBar with gradient
|
||||
SliverAppBar(
|
||||
expandedHeight: 120.0,
|
||||
floating: false,
|
||||
pinned: true,
|
||||
backgroundColor: AppColor.primary,
|
||||
flexibleSpace: CustomAppBar(title: 'Pelanggan'),
|
||||
actions: [
|
||||
ActionIconButton(onTap: () {}, icon: LineIcons.search),
|
||||
],
|
||||
),
|
||||
|
||||
// Search and Filter Section
|
||||
SliverToBoxAdapter(
|
||||
child: Container(
|
||||
color: AppColor.white,
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
'${filteredCustomers.length} customers found',
|
||||
style: TextStyle(
|
||||
color: AppColor.textSecondary,
|
||||
fontSize: 14,
|
||||
// View toggle and sort
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 0,
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
_isGridView ? Icons.list : Icons.grid_view,
|
||||
color: AppColor.primary,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
_isGridView
|
||||
? Icons.list
|
||||
: Icons.grid_view,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isGridView = !_isGridView;
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isGridView = !_isGridView;
|
||||
});
|
||||
},
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Customer List
|
||||
_isGridView ? _buildCustomerGrid() : _buildCustomerList(),
|
||||
],
|
||||
// Customer List
|
||||
_isGridView
|
||||
? _buildCustomerGrid(state.customers)
|
||||
: _buildCustomerList(state.customers),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCustomerList() {
|
||||
Widget _buildCustomerList(List<Customer> customers) {
|
||||
return SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final customer = filteredCustomers[index];
|
||||
final customer = customers[index];
|
||||
return CustomerTile(customer: customer);
|
||||
}, childCount: filteredCustomers.length),
|
||||
}, childCount: customers.length),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCustomerGrid() {
|
||||
Widget _buildCustomerGrid(List<Customer> customers) {
|
||||
return SliverPadding(
|
||||
padding: EdgeInsets.all(16),
|
||||
sliver: SliverGrid(
|
||||
@@ -210,9 +151,9 @@ class _CustomerPageState extends State<CustomerPage>
|
||||
childAspectRatio: 0.8,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final customer = filteredCustomers[index];
|
||||
final customer = customers[index];
|
||||
return CustomerCard(customer: customer);
|
||||
}, childCount: filteredCustomers.length),
|
||||
}, childCount: customers.length),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user