Tambahkan ringkasan dan status penerima di tampilan daftar penerima

- Buat widget _buildPenerimaSummary untuk menampilkan statistik penerima bantuan
- Tambahkan ringkasan total, tersalurkan, dan menunggu penerima
- Gunakan desain kartu dengan gradient dan ikon statistik
- Perbarui tampilan daftar penerima dengan scrollview dan ringkasan
- Tambahkan status badge untuk setiap penerima bantuan
This commit is contained in:
Khafidh Fuadi
2025-03-09 09:14:41 +07:00
parent 2dc531af41
commit 9b23adb5aa
3 changed files with 120 additions and 10 deletions

View File

@ -37,18 +37,128 @@ class DaftarPenerimaView extends GetView<PenerimaController> {
);
}
return ListView.builder(
return SingleChildScrollView(
child: Column(
children: [
_buildPenerimaSummary(context),
const SizedBox(height: 16),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.all(16),
itemCount: controller.daftarPenerima.length,
itemBuilder: (context, index) {
final penerima = controller.daftarPenerima[index];
return _buildPenerimaCard(context, penerima);
},
),
],
),
);
}),
);
}
// Ringkasan daftar penerima
Widget _buildPenerimaSummary(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: AppTheme.primaryGradient,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Ringkasan Penerima Bantuan',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: _buildSummaryItem(
context,
icon: Icons.people_alt_outlined,
title: 'Total',
value: '${controller.daftarPenerima.length}',
color: Colors.blue,
),
),
Expanded(
child: _buildSummaryItem(
context,
icon: Icons.check_circle_outline,
title: 'Tersalurkan',
value:
'${controller.daftarPenerima.where((p) => p['status'] == 'Selesai').length}',
color: Colors.green,
),
),
Expanded(
child: _buildSummaryItem(
context,
icon: Icons.pending_outlined,
title: 'Menunggu',
value:
'${controller.daftarPenerima.where((p) => p['status'] != 'Selesai').length}',
color: Colors.orange,
),
),
],
),
],
),
);
}
Widget _buildSummaryItem(
BuildContext context, {
required IconData icon,
required String title,
required String value,
required Color color,
}) {
return Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: Icon(
icon,
color: Colors.white,
size: 24,
),
),
const SizedBox(height: 8),
Text(
value,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 4),
Text(
title,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.white,
),
textAlign: TextAlign.center,
),
],
);
}
Widget _buildPenerimaCard(
BuildContext context, Map<String, dynamic> penerima) {
return Card(
@ -152,6 +262,9 @@ class DaftarPenerimaView extends GetView<PenerimaController> {
color: Colors.grey[600],
),
),
const SizedBox(height: 4),
_buildStatusBadge(penerima['status']),
// const SizedBox(height: 8),
// Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,

View File

@ -4,7 +4,6 @@ import 'package:penyaluran_app/app/modules/petugas_desa/components/greeting_head
import 'package:penyaluran_app/app/modules/petugas_desa/components/progress_section.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/components/schedule_card.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/controllers/petugas_desa_controller.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/controllers/penerima_controller.dart';
import 'package:penyaluran_app/app/theme/app_theme.dart';
import 'package:penyaluran_app/app/widgets/statistic_card.dart';

View File

@ -1,8 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/controllers/petugas_desa_controller.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/controllers/penerima_controller.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/views/daftar_penerima_view.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/views/dashboard_view.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/views/penyaluran_view.dart';
import 'package:penyaluran_app/app/modules/petugas_desa/views/notifikasi_view.dart';