Travel-Spends/ts-tat
Travel-Spends/ts-tat
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard UI Changes

Browse Source
This commit is contained in:
Surendiran 2025-05-28 17:14:43 +05:30
parent 9cab4b02a3
commit dc4a1530a6
1 changed files with 99 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
lib/Screens/dashboard/status_dashboard.dart
View File

@ -98,6 +98,41 @@ class StatusDashboardState extends State<StatusDashboard> {
}
}
Color getStatusColor(String status) {
if (status == "Domestic") return Colors.white;
if (status == "International") return Colors.white;
if (status == "Partially Approved") return Colors.yellow.shade100;
if (status == "Pending Approval") return Colors.greenAccent.shade100;
if (status == "Approved") return Colors.green.shade100;
if (status == "Completed") return Colors.green.shade500;
if (status == "Rejected") return Colors.red.shade100;
if (status == "Cancelled") return Colors.red.shade200;
return Colors.grey.shade100;
}
IconData getStatusIcon(String title) {
switch (title) {
case "Domestic":
return Icons.directions_bus_filled_outlined;
case "International":
return Icons.airplanemode_active;
case "Partially Approved":
return Icons.pending;
case "Approved":
return Icons.check_circle_outline;
case "Completed":
return Icons.done_all;
case "Rejected":
return Icons.cancel_outlined;
case "Cancelled":
return Icons.cancel_schedule_send_outlined;
default:
return Icons.info_outline;
}
}
@override
Widget build(BuildContext context) {
final typeBasedCount = List<Map<String, dynamic>>.from(
@ -111,9 +146,12 @@ class StatusDashboardState extends State<StatusDashboard> {
print("statusBasedCount - => $statusBasedCount");
// 👇 Local function to create the card widget
Widget buildInfoCard(String title, int count, double width) {
print('title $title');
final color = getStatusColor(title);
final icon = getStatusIcon(title);
return Card(
elevation: 3,
color: Colors.white,
color: color,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Container(
width: width,
@ -121,10 +159,15 @@ class StatusDashboardState extends State<StatusDashboard> {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 32, color: (title == 'Domestic' || title == 'International') ? Colors.green : Colors.black54), // 👈 Add Icon here
const SizedBox(height: 8),
Text(
title,
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: (title == 'Domestic' || title == 'International') ? 16 : 14,
),
),
const SizedBox(height: 8),
Text(
@ -132,7 +175,7 @@ class StatusDashboardState extends State<StatusDashboard> {
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.blue,
// color: Colors.blue,
),
),
],
@ -154,54 +197,63 @@ class StatusDashboardState extends State<StatusDashboard> {
body: Padding(
padding: isDesktop
? EdgeInsets.symmetric(
horizontal: MediaQuery.of(context).size.width * 0.1,
vertical: 0,
horizontal: MediaQuery.of(context).size.width *
0.1, // 30% of screen width as horizontal padding
vertical: 10, // 5% of screen height as vertical padding
)
: const EdgeInsets.all(0),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 10,
runSpacing: 10,
children: typeBasedCount.map((item) {
double cardWidth = isDesktop
? (MediaQuery.of(context).size.width * 0.75 - 10) / 2 // 80% width padding adjusted
: MediaQuery.of(context).size.width - 24; // full width with padding
: EdgeInsets.all(0),
child:Container(
// padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: isDesktop ? Colors.white : const Color(0xFFFCFCFC),
borderRadius: BorderRadius.circular(12), // 👈 Set your desired radius
),
// color: isDesktop ? Colors.white : Color(0xFFFCFCFC),
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Wrap(
spacing: 10,
runSpacing: 10,
children: typeBasedCount.map((item) {
double cardWidth = isDesktop
? (MediaQuery.of(context).size.width * 0.75 - 10) / 2 // 80% width padding adjusted
: MediaQuery.of(context).size.width - 24; // full width with padding
return SizedBox(
width: cardWidth,
child: buildInfoCard(item['value'], item['count'], cardWidth),
);
}).toList(),
),
const SizedBox(height: 20),
Wrap(
spacing: 10,
runSpacing: 10,
children: statusBasedCount.map((item) {
double cardWidth = isDesktop
? (MediaQuery.of(context).size.width * 0.90 - 50) / 6 // desktop layout: 6 cards per row
: MediaQuery.of(context).size.width - 24; // mobile: full width
return SizedBox(
width: cardWidth,
child: buildInfoCard(item['value'], item['count'], cardWidth),
);
}).toList(),
),
const SizedBox(height: 20),
Wrap(
spacing: 10,
runSpacing: 10,
children: statusBasedCount.map((item) {
double cardWidth = isDesktop
? (MediaQuery.of(context).size.width * 0.90 - 50) / 6 // desktop layout: 6 cards per row
: MediaQuery.of(context).size.width - 24; // mobile: full width
return SizedBox(
width: cardWidth,
child: buildInfoCard(item['value'], item['count'], cardWidth),
);
}).toList(),
),
return SizedBox(
width: cardWidth,
child: buildInfoCard(item['value'], item['count'], cardWidth),
);
}).toList(),
),
],
),
),
),
],
),
],
),
),
),
],
),
)
),
);
});