import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:penyaluran_app/app/modules/petugas_desa/controllers/pengaduan_controller.dart'; import 'package:penyaluran_app/app/theme/app_theme.dart'; import 'package:penyaluran_app/app/utils/format_helper.dart'; class PengaduanView extends GetView { const PengaduanView({super.key}); @override Widget build(BuildContext context) { return RefreshIndicator( onRefresh: controller.refreshData, child: SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), child: Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Ringkasan pengaduan _buildPengaduanSummary(context), const SizedBox(height: 24), // Filter dan pencarian _buildFilterSearch(context), // Informasi terakhir update _buildLastUpdateInfo(context), const SizedBox(height: 20), // Daftar pengaduan _buildPengaduanList(context), ], ), ), ), ); } // Tambahkan widget untuk menampilkan waktu terakhir update Widget _buildLastUpdateInfo(BuildContext context) { final lastUpdate = DateTime .now(); // Gunakan waktu saat ini atau dari controller jika tersedia final formattedDate = FormatHelper.formatDateTimeWithHour(lastUpdate); return Padding( padding: const EdgeInsets.only(top: 8.0), child: Row( children: [ Icon(Icons.update, size: 16, color: Colors.grey[600]), const SizedBox(width: 4), Text( 'Data terupdate: $formattedDate', style: TextStyle( fontSize: 12, color: Colors.grey[600], fontStyle: FontStyle.italic, ), ), ], ), ); } Widget _buildPengaduanSummary(BuildContext context) { return Obx(() { return Column( children: [ Container( width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( gradient: AppTheme.primaryGradient, borderRadius: BorderRadius.circular(12), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Ringkasan Pengaduan', 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.pending_actions, title: 'Diproses', value: controller.jumlahDiproses.toString(), color: Colors.orange, ), ), Expanded( child: _buildSummaryItem( context, icon: Icons.engineering, title: 'Tindakan', value: controller.jumlahTindakan.toString(), color: Colors.blue, ), ), Expanded( child: _buildSummaryItem( context, icon: Icons.check_circle, title: 'Selesai', value: controller.jumlahSelesai.toString(), color: Colors.green, ), ), ], ), ], ), ), ], ); }); } 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 _buildFilterSearch(BuildContext context) { return Row( children: [ Expanded( child: TextField( controller: controller.searchController, decoration: InputDecoration( hintText: 'Cari pengaduan...', prefixIcon: const Icon(Icons.search), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none, ), filled: true, fillColor: Colors.grey.shade100, contentPadding: const EdgeInsets.symmetric(vertical: 0), ), onChanged: (value) { // Implementasi pencarian controller.refreshData(); }, ), ), const SizedBox(width: 12), Container( decoration: BoxDecoration( color: Colors.grey.shade100, borderRadius: BorderRadius.circular(12), ), child: PopupMenuButton( icon: const Icon(Icons.filter_list), tooltip: 'Filter', onSelected: (index) { controller.changeCategory(index); }, itemBuilder: (context) => [ const PopupMenuItem( value: 0, child: Text('Semua'), ), const PopupMenuItem( value: 1, child: Text('Diproses'), ), const PopupMenuItem( value: 2, child: Text('Tindakan'), ), const PopupMenuItem( value: 3, child: Text('Selesai'), ), const PopupMenuItem( value: 4, child: Text('Semua Kecuali Selesai'), ), ], ), ), ], ); } Widget _buildPengaduanList(BuildContext context) { return Obx(() { if (controller.isLoading.value) { return const Center( child: Padding( padding: EdgeInsets.all(20.0), child: CircularProgressIndicator(), ), ); } final filteredPengaduan = controller.getFilteredPengaduan(); if (filteredPengaduan.isEmpty) { return Center( child: Padding( padding: const EdgeInsets.all(20.0), child: Column( children: [ Icon( Icons.inbox_outlined, size: 80, color: Colors.grey.shade400, ), const SizedBox(height: 16), Text( 'Belum ada pengaduan', style: Theme.of(context).textTheme.titleMedium?.copyWith( color: Colors.grey.shade600, ), ), ], ), ), ); } return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Daftar Pengaduan', style: Theme.of(context).textTheme.titleLarge?.copyWith( fontWeight: FontWeight.bold, ), ), Text( '${FormatHelper.formatNumber(filteredPengaduan.length)} item', style: Theme.of(context).textTheme.bodyMedium?.copyWith( color: Colors.grey, ), ), ], ), const SizedBox(height: 12), ...filteredPengaduan .map((item) => _buildPengaduanItem(context, item)), ], ); }); } Widget _buildPengaduanItem(BuildContext context, dynamic item) { Color statusColor; IconData statusIcon; switch (item.status?.toUpperCase()) { case 'MENUNGGU': statusColor = AppTheme.warningColor; statusIcon = Icons.pending; break; case 'TINDAKAN': statusColor = AppTheme.infoColor; statusIcon = Icons.sync; break; case 'SELESAI': statusColor = AppTheme.successColor; statusIcon = Icons.check_circle; break; default: statusColor = Colors.grey; statusIcon = Icons.help_outline; } // Format tanggal menggunakan DateTimeHelper String formattedDate = ''; if (item.tanggalPengaduan != null) { formattedDate = FormatHelper.formatDateTime(item.tanggalPengaduan); } return Card( margin: const EdgeInsets.only(bottom: 16), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), side: BorderSide( color: statusColor.withOpacity(0.3), width: 1, ), ), elevation: 3, child: InkWell( onTap: () { Get.toNamed('/detail-pengaduan', arguments: {'id': item.id}); }, borderRadius: BorderRadius.circular(12), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ // Header dengan warna sesuai status Container( width: double.infinity, padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), decoration: BoxDecoration( color: statusColor.withOpacity(0.1), borderRadius: const BorderRadius.only( topLeft: Radius.circular(12), topRight: Radius.circular(12), ), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: Row( children: [ Icon( Icons.report_problem, color: statusColor, ), const SizedBox(width: 8), Flexible( child: Text( item.warga?['nama'] ?? item.judul ?? '', style: TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: statusColor, ), overflow: TextOverflow.ellipsis, ), ), ], ), ), Container( padding: const EdgeInsets.symmetric( horizontal: 12, vertical: 6, ), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(20), border: Border.all( color: statusColor, width: 1.0, ), boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.05), blurRadius: 3, offset: const Offset(0, 1), ), ], ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon( statusIcon, size: 14, color: statusColor, ), const SizedBox(width: 4), Text( item.status ?? '', style: TextStyle( color: statusColor, fontWeight: FontWeight.bold, fontSize: 12, ), ), ], ), ), ], ), ), Padding( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // Deskripsi masalah if (item.deskripsi != null && item.deskripsi!.isNotEmpty) Container( width: double.infinity, padding: const EdgeInsets.all(12), margin: const EdgeInsets.only(bottom: 16), decoration: BoxDecoration( color: Colors.grey.shade50, borderRadius: BorderRadius.circular(10), border: Border.all( color: Colors.grey.shade200, width: 1.0, ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Deskripsi Masalah:', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.grey.shade800, ), ), const SizedBox(height: 6), Text( item.deskripsi ?? '', style: TextStyle( color: Colors.grey.shade700, ), ), ], ), ), // Informasi penyaluran bantuan jika ada if (item.penerimaPenyaluran != null) Container( width: double.infinity, padding: const EdgeInsets.all(12), margin: const EdgeInsets.only(bottom: 16), decoration: BoxDecoration( color: Colors.blue.shade50, borderRadius: BorderRadius.circular(10), border: Border.all( color: Colors.blue.shade200, width: 1.0, ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Penyaluran: ${item.namaPenyaluran ?? "Tidak tersedia"}', style: const TextStyle( fontWeight: FontWeight.w500, ), ), const SizedBox(height: 6), Row( children: [ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Bantuan', style: TextStyle( fontSize: 12, color: Colors.grey.shade600, ), ), Text( item.stokBantuan?['nama'] ?? '-', style: TextStyle( fontWeight: FontWeight.w500, color: Colors.grey.shade800, ), ), ], ), ), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Jumlah', style: TextStyle( fontSize: 12, color: Colors.grey.shade600, ), ), Text( item.stokBantuan?['is_uang'] == true ? FormatHelper.formatRupiah( item.jumlahBantuan is num ? item.jumlahBantuan : double.tryParse(item .jumlahBantuan .toString()) ?? 0) : '${item.jumlahBantuan} ${item.stokBantuan?['satuan'] ?? ''}', style: TextStyle( fontWeight: FontWeight.w500, color: Colors.grey.shade800, ), ), ], ), ), ], ), ], ), ), // Informasi pelapor dan tanggal Row( children: [ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Pelapor', style: TextStyle( fontSize: 12, color: Colors.grey.shade600, ), ), Text( item.warga?['nama_lengkap'] ?? '-', style: TextStyle( fontWeight: FontWeight.w500, color: Colors.grey.shade800, ), ), ], ), ), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'NIK', style: TextStyle( fontSize: 12, color: Colors.grey.shade600, ), ), Text( item.warga?['nik'] ?? '-', style: TextStyle( fontWeight: FontWeight.w500, color: Colors.grey.shade800, ), ), ], ), ), ], ), const SizedBox(height: 12), // Informasi tanggal Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( color: Colors.grey.shade100, borderRadius: BorderRadius.circular(4), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon( Icons.calendar_today, size: 12, color: Colors.grey.shade700, ), const SizedBox(width: 4), Text( formattedDate, style: TextStyle( fontSize: 12, color: Colors.grey.shade800, ), ), ], ), ), const SizedBox(height: 12), // Tombol detail Row( mainAxisAlignment: MainAxisAlignment.end, children: [ ElevatedButton.icon( onPressed: () { Get.toNamed('/detail-pengaduan', arguments: {'id': item.id}); }, icon: const Icon(Icons.info_outline, size: 18), label: const Text('Lihat Detail'), style: ElevatedButton.styleFrom( backgroundColor: statusColor, foregroundColor: Colors.white, padding: const EdgeInsets.symmetric( horizontal: 16, vertical: 8), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), ), ], ), ], ), ), ], ), ), ); } Widget _buildItemDetail( BuildContext context, { required IconData icon, required String label, required String value, }) { return Row( children: [ Icon( icon, size: 16, color: Colors.grey, ), const SizedBox(width: 4), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( label, style: Theme.of(context).textTheme.bodySmall?.copyWith( color: Colors.grey, ), ), Text( value, style: Theme.of(context).textTheme.bodyMedium, overflow: TextOverflow.ellipsis, ), ], ), ), ], ); } List _buildActionButtons(BuildContext context, dynamic item) { return [ TextButton.icon( onPressed: () { // Navigasi ke halaman detail pengaduan Get.toNamed('/detail-pengaduan', arguments: {'id': item.id}); }, icon: const Icon(Icons.info_outline, size: 18), label: const Text('Detail'), style: TextButton.styleFrom( foregroundColor: Colors.grey, padding: const EdgeInsets.symmetric(horizontal: 8), ), ), ]; } }