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),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,89 +1,390 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../domain/customer/customer.dart';
|
||||
import '../../../components/spacer/spacer.dart';
|
||||
import '../customer_page.dart';
|
||||
|
||||
class CustomerCard extends StatelessWidget {
|
||||
final Customer customer;
|
||||
const CustomerCard({super.key, required this.customer});
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
|
||||
const CustomerCard({
|
||||
super.key,
|
||||
required this.customer,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: Offset(0, 4),
|
||||
color: Colors.black.withOpacity(0.06),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 6),
|
||||
spreadRadius: -4,
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: customer.isActive
|
||||
? AppColor.primary.withOpacity(0.1)
|
||||
: Colors.grey.withOpacity(0.08),
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: InkWell(
|
||||
onTap: () {},
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundColor: _getMembershipColor(customer.membershipLevel),
|
||||
radius: 30,
|
||||
child: Text(
|
||||
customer.name[0].toUpperCase(),
|
||||
style: AppStyle.xxl.copyWith(
|
||||
color: AppColor.white,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
onLongPress: onLongPress,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// Avatar with status indicator
|
||||
Stack(
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
_getAvatarColor(customer.name),
|
||||
_getAvatarColor(customer.name).withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getAvatarColor(
|
||||
customer.name,
|
||||
).withOpacity(0.3),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: CircleAvatar(
|
||||
backgroundColor: Colors.transparent,
|
||||
radius: 32,
|
||||
child: Text(
|
||||
customer.name.isNotEmpty
|
||||
? customer.name[0].toUpperCase()
|
||||
: '?',
|
||||
style: AppStyle.xxl.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Status indicator
|
||||
Positioned(
|
||||
bottom: 2,
|
||||
right: 2,
|
||||
child: Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: AppColor.white, width: 3),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Default badge
|
||||
if (customer.isDefault)
|
||||
Positioned(
|
||||
top: -2,
|
||||
left: -8,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.primary.withOpacity(0.3),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
'⭐',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SpaceHeight(16),
|
||||
|
||||
// Customer Name
|
||||
Text(
|
||||
customer.name.isNotEmpty ? customer.name : 'Unknown Customer',
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
|
||||
const SpaceHeight(8),
|
||||
|
||||
// Contact Info
|
||||
if (customer.email.isNotEmpty || customer.phone.isNotEmpty) ...[
|
||||
Column(
|
||||
children: [
|
||||
if (customer.email.isNotEmpty)
|
||||
_buildContactInfo(Icons.email_outlined, customer.email),
|
||||
if (customer.email.isNotEmpty &&
|
||||
customer.phone.isNotEmpty)
|
||||
const SpaceHeight(4),
|
||||
if (customer.phone.isNotEmpty)
|
||||
_buildContactInfo(Icons.phone_outlined, customer.phone),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(12),
|
||||
],
|
||||
|
||||
// Status Badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success.withOpacity(0.1)
|
||||
: AppColor.error.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
color: customer.isActive
|
||||
? AppColor.success.withOpacity(0.3)
|
||||
: AppColor.error.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(6),
|
||||
Text(
|
||||
customer.isActive ? 'Active' : 'Inactive',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
SpaceHeight(12),
|
||||
Text(
|
||||
customer.name,
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: _getMembershipColor(
|
||||
customer.membershipLevel,
|
||||
).withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
customer.membershipLevel,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: _getMembershipColor(customer.membershipLevel),
|
||||
fontWeight: FontWeight.bold,
|
||||
|
||||
// Additional info if available
|
||||
if (customer.address.isNotEmpty) ...[
|
||||
const SpaceHeight(8),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.location_on_outlined,
|
||||
size: 14,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
const SpaceWidth(4),
|
||||
Flexible(
|
||||
child: Text(
|
||||
customer.address,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
|
||||
// Metadata info
|
||||
if (customer.metadata.isNotEmpty && _hasRelevantMetadata()) ...[
|
||||
const SpaceHeight(8),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.star_outline,
|
||||
size: 12,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
const SpaceWidth(4),
|
||||
Text(
|
||||
_getMetadataInfo(),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
// Join date
|
||||
if (customer.createdAt.isNotEmpty) ...[
|
||||
const SpaceHeight(8),
|
||||
Text(
|
||||
'Joined ${_formatDate(customer.createdAt)}',
|
||||
style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getMembershipColor(String level) {
|
||||
switch (level) {
|
||||
case 'Platinum':
|
||||
return Color(0xFF9C27B0);
|
||||
case 'Gold':
|
||||
return Color(0xFFFF9800);
|
||||
case 'Silver':
|
||||
return Color(0xFF607D8B);
|
||||
case 'Bronze':
|
||||
return Color(0xFF795548);
|
||||
default:
|
||||
return AppColor.primary;
|
||||
Widget _buildContactInfo(IconData icon, String text) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 14, color: AppColor.textSecondary),
|
||||
const SpaceWidth(6),
|
||||
Flexible(
|
||||
child: Text(
|
||||
text,
|
||||
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Color _getAvatarColor(String name) {
|
||||
final colors = [
|
||||
AppColor.primary,
|
||||
const Color(0xFF9C27B0), // Purple
|
||||
const Color(0xFFFF9800), // Orange
|
||||
const Color(0xFF607D8B), // Blue Grey
|
||||
const Color(0xFF795548), // Brown
|
||||
const Color(0xFF4CAF50), // Green
|
||||
const Color(0xFF2196F3), // Blue
|
||||
const Color(0xFFE91E63), // Pink
|
||||
const Color(0xFF00BCD4), // Cyan
|
||||
const Color(0xFFFF5722), // Deep Orange
|
||||
];
|
||||
|
||||
if (name.isEmpty) return AppColor.primary;
|
||||
final index = name.hashCode.abs() % colors.length;
|
||||
return colors[index];
|
||||
}
|
||||
|
||||
String _formatDate(String dateStr) {
|
||||
try {
|
||||
final date = DateTime.parse(dateStr);
|
||||
final now = DateTime.now();
|
||||
final difference = now.difference(date).inDays;
|
||||
|
||||
if (difference == 0) {
|
||||
return 'today';
|
||||
} else if (difference == 1) {
|
||||
return 'yesterday';
|
||||
} else if (difference < 30) {
|
||||
return '${difference}d ago';
|
||||
} else if (difference < 365) {
|
||||
final months = (difference / 30).floor();
|
||||
return '${months}mo ago';
|
||||
} else {
|
||||
final years = (difference / 365).floor();
|
||||
return '${years}y ago';
|
||||
}
|
||||
} catch (e) {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
bool _hasRelevantMetadata() {
|
||||
return customer.metadata.containsKey('notes') ||
|
||||
customer.metadata.containsKey('tags') ||
|
||||
customer.metadata.containsKey('source') ||
|
||||
customer.metadata.containsKey('preferences') ||
|
||||
customer.metadata.containsKey('vip') ||
|
||||
customer.metadata.containsKey('tier');
|
||||
}
|
||||
|
||||
String _getMetadataInfo() {
|
||||
if (customer.metadata.containsKey('vip') &&
|
||||
customer.metadata['vip'] == true) {
|
||||
return 'VIP';
|
||||
}
|
||||
if (customer.metadata.containsKey('tier')) {
|
||||
return customer.metadata['tier'].toString();
|
||||
}
|
||||
if (customer.metadata.containsKey('tags')) {
|
||||
final tags = customer.metadata['tags'];
|
||||
if (tags is List && tags.isNotEmpty) {
|
||||
return tags.first.toString();
|
||||
}
|
||||
}
|
||||
if (customer.metadata.containsKey('source')) {
|
||||
return customer.metadata['source'].toString();
|
||||
}
|
||||
return 'Special';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,127 +1,378 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../domain/customer/customer.dart';
|
||||
import '../../../components/spacer/spacer.dart';
|
||||
import '../customer_page.dart';
|
||||
|
||||
class CustomerTile extends StatelessWidget {
|
||||
final Customer customer;
|
||||
const CustomerTile({super.key, required this.customer});
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onEdit;
|
||||
final VoidCallback? onDelete;
|
||||
|
||||
const CustomerTile({
|
||||
super.key,
|
||||
required this.customer,
|
||||
this.onTap,
|
||||
this.onEdit,
|
||||
this.onDelete,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: AppValue.margin, vertical: 6),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: Offset(0, 2),
|
||||
color: Colors.black.withOpacity(0.06),
|
||||
blurRadius: 16,
|
||||
offset: const Offset(0, 4),
|
||||
spreadRadius: -2,
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: customer.isActive
|
||||
? AppColor.primary.withOpacity(0.15)
|
||||
: Colors.grey.withOpacity(0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: ListTile(
|
||||
contentPadding: EdgeInsets.all(16),
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: _getMembershipColor(customer.membershipLevel),
|
||||
child: Text(
|
||||
customer.name[0].toUpperCase(),
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header Row
|
||||
Row(
|
||||
children: [
|
||||
// Avatar
|
||||
Stack(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 26,
|
||||
backgroundColor: _getAvatarColor(customer.name),
|
||||
child: Text(
|
||||
customer.name.isNotEmpty
|
||||
? customer.name[0].toUpperCase()
|
||||
: '?',
|
||||
style: AppStyle.lg.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Status indicator
|
||||
Positioned(
|
||||
bottom: 2,
|
||||
right: 2,
|
||||
child: Container(
|
||||
width: 16,
|
||||
height: 16,
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: AppColor.white,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceWidth(16),
|
||||
|
||||
// Customer Info
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Name with badges
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
customer.name.isNotEmpty
|
||||
? customer.name
|
||||
: 'Unknown Customer',
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (customer.isDefault)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
'DEFAULT',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
|
||||
// Contact info
|
||||
if (customer.email.isNotEmpty) ...[
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.email_outlined,
|
||||
size: 16,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
const SpaceWidth(6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
customer.email,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
],
|
||||
|
||||
if (customer.phone.isNotEmpty)
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.phone_outlined,
|
||||
size: 16,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
const SpaceWidth(6),
|
||||
Text(
|
||||
customer.phone,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Address section
|
||||
if (customer.address.isNotEmpty) ...[
|
||||
const SpaceHeight(16),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.background,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.location_on_outlined,
|
||||
size: 18,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
const SpaceWidth(8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
customer.address,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
// Footer with status and dates
|
||||
const SpaceHeight(16),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Status badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success.withOpacity(0.1)
|
||||
: AppColor.error.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(6),
|
||||
Text(
|
||||
customer.isActive ? 'Active' : 'Inactive',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Created date
|
||||
if (customer.createdAt.isNotEmpty)
|
||||
Text(
|
||||
'Joined ${_formatDate(customer.createdAt)}',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Metadata section (if has any relevant data)
|
||||
if (customer.metadata.isNotEmpty && _hasRelevantMetadata()) ...[
|
||||
const SpaceHeight(12),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.primary.withOpacity(0.05),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: AppColor.primary.withOpacity(0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.info_outline,
|
||||
size: 16,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
const SpaceWidth(8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_getMetadataInfo(),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
customer.name,
|
||||
style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
|
||||
),
|
||||
subtitle: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SpaceHeight(4),
|
||||
Text(customer.email),
|
||||
SpaceHeight(2),
|
||||
Text(customer.phone),
|
||||
SpaceHeight(4),
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: _getMembershipColor(
|
||||
customer.membershipLevel,
|
||||
).withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
customer.membershipLevel,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: _getMembershipColor(customer.membershipLevel),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
SpaceWidth(8),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: customer.isActive
|
||||
? AppColor.success.withOpacity(0.1)
|
||||
: AppColor.error.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
customer.isActive ? 'Active' : 'Inactive',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: customer.isActive
|
||||
? AppColor.success
|
||||
: AppColor.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
trailing: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'Rp ${customer.totalPurchases.toStringAsFixed(0)}',
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${customer.totalOrders} orders',
|
||||
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Color _getMembershipColor(String level) {
|
||||
switch (level) {
|
||||
case 'Platinum':
|
||||
return Color(0xFF9C27B0);
|
||||
case 'Gold':
|
||||
return Color(0xFFFF9800);
|
||||
case 'Silver':
|
||||
return Color(0xFF607D8B);
|
||||
case 'Bronze':
|
||||
return Color(0xFF795548);
|
||||
default:
|
||||
return AppColor.primary;
|
||||
Color _getAvatarColor(String name) {
|
||||
final colors = [
|
||||
AppColor.primary,
|
||||
const Color(0xFF9C27B0),
|
||||
const Color(0xFFFF9800),
|
||||
const Color(0xFF607D8B),
|
||||
const Color(0xFF795548),
|
||||
const Color(0xFF4CAF50),
|
||||
const Color(0xFF2196F3),
|
||||
const Color(0xFFE91E63),
|
||||
];
|
||||
|
||||
final index = name.hashCode.abs() % colors.length;
|
||||
return colors[index];
|
||||
}
|
||||
|
||||
String _formatDate(String dateStr) {
|
||||
try {
|
||||
final date = DateTime.parse(dateStr);
|
||||
final now = DateTime.now();
|
||||
final difference = now.difference(date).inDays;
|
||||
|
||||
if (difference == 0) {
|
||||
return 'today';
|
||||
} else if (difference == 1) {
|
||||
return 'yesterday';
|
||||
} else if (difference < 30) {
|
||||
return '${difference}d ago';
|
||||
} else if (difference < 365) {
|
||||
final months = (difference / 30).floor();
|
||||
return '${months}mo ago';
|
||||
} else {
|
||||
final years = (difference / 365).floor();
|
||||
return '${years}y ago';
|
||||
}
|
||||
} catch (e) {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
bool _hasRelevantMetadata() {
|
||||
return customer.metadata.containsKey('notes') ||
|
||||
customer.metadata.containsKey('tags') ||
|
||||
customer.metadata.containsKey('source') ||
|
||||
customer.metadata.containsKey('preferences');
|
||||
}
|
||||
|
||||
String _getMetadataInfo() {
|
||||
final info = <String>[];
|
||||
|
||||
if (customer.metadata.containsKey('notes')) {
|
||||
info.add('Has notes');
|
||||
}
|
||||
if (customer.metadata.containsKey('tags')) {
|
||||
final tags = customer.metadata['tags'];
|
||||
if (tags is List && tags.isNotEmpty) {
|
||||
info.add('${tags.length} tags');
|
||||
}
|
||||
}
|
||||
if (customer.metadata.containsKey('source')) {
|
||||
info.add('Source: ${customer.metadata['source']}');
|
||||
}
|
||||
|
||||
return info.join(' • ');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user