Perbarui tema dan styling dashboard dengan komponen kustom

- Tambahkan tema aplikasi di AppTheme
- Ganti font default dengan DM Sans dari aset
- Buat komponen kustom seperti StatisticCard, NavigationButton, dan StatusPill
- Perbarui desain drawer, bottom navigation, dan elemen dashboard
- Gunakan gradient dan warna tema yang konsisten
- Sederhanakan struktur kode dan styling

lib/app/modules/dashboard/controllers/dashboard_controller.dart

@@ -10,6 +10,9 @@ class DashboardController extends GetxController {
   final RxBool isLoading = false.obs;
   final Rx<Map<String, dynamic>?> roleData = Rx<Map<String, dynamic>?>(null);
 
+  // Indeks kategori yang dipilih untuk filter
+  final RxInt selectedCategoryIndex = 0.obs;
+
   UserModel? get user => _authController.user;
   String get role => user?.role ?? 'WARGA';
 

lib/app/modules/dashboard/views/petugas_desa_dashboard_view.dart

@@ -2,212 +2,207 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:penyaluran_app/app/modules/dashboard/controllers/dashboard_controller.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:penyaluran_app/app/theme/app_theme.dart';
+import 'package:penyaluran_app/app/widgets/navigation_button.dart';
+import 'package:penyaluran_app/app/widgets/statistic_card.dart';
+import 'package:penyaluran_app/app/widgets/status_pill.dart';
 
 class PetugasDesaDashboardView extends GetView<DashboardController> {
   const PetugasDesaDashboardView({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final TextTheme textTheme =
-        GoogleFonts.dmSansTextTheme(Theme.of(context).textTheme);
     final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
+    final textTheme = Theme.of(context).textTheme;
 
-    return Theme(
-      data: Theme.of(context).copyWith(
-        textTheme: textTheme,
-      ),
-      child: Scaffold(
-        key: scaffoldKey,
-        drawer: Drawer(
-          child: ListView(
-            padding: EdgeInsets.zero,
-            children: [
-              DrawerHeader(
-                decoration: const BoxDecoration(
-                  gradient: LinearGradient(
-                    begin: Alignment.topLeft,
-                    end: Alignment.bottomRight,
-                    colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
-                    transform: GradientRotation(96.93 * 3.14159 / 180),
+    return Scaffold(
+      key: scaffoldKey,
+      drawer: Drawer(
+        child: ListView(
+          padding: EdgeInsets.zero,
+          children: [
+            DrawerHeader(
+              decoration: const BoxDecoration(
+                gradient: AppTheme.primaryGradient,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const CircleAvatar(
+                    radius: 30,
+                    backgroundColor: Colors.white,
+                    child: Icon(
+                      Icons.person,
+                      size: 40,
+                      color: AppTheme.primaryColor,
+                    ),
                   ),
-                ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    const CircleAvatar(
-                      radius: 30,
-                      backgroundColor: Colors.white,
-                      child: Icon(
-                        Icons.person,
-                        size: 40,
-                        color: Color(0xFF2E5077),
-                      ),
+                  const SizedBox(height: 10),
+                  Text(
+                    'Petugas Desa',
+                    style: textTheme.titleLarge?.copyWith(
+                      color: Colors.white,
+                      fontSize: 18,
                     ),
-                    const SizedBox(height: 10),
-                    Text(
-                      'Petugas Desa',
-                      style: textTheme.titleLarge?.copyWith(
-                        color: Colors.white,
-                        fontSize: 18,
-                      ),
+                  ),
+                  Text(
+                    controller.user?.email ?? 'email@example.com',
+                    style: textTheme.bodyMedium?.copyWith(
+                      color: Colors.white70,
+                      fontSize: 14,
                     ),
-                    Text(
-                      controller.user?.email ?? 'email@example.com',
-                      style: textTheme.bodyMedium?.copyWith(
-                        color: Colors.white70,
-                        fontSize: 14,
-                      ),
-                    ),
-                  ],
-                ),
+                  ),
+                ],
               ),
-              ListTile(
-                leading: SvgPicture.asset(
-                  'assets/icons/home-icon.svg',
-                  width: 24,
-                  height: 24,
-                ),
-                title: const Text('Beranda'),
-                onTap: () {
-                  Get.back();
-                },
-              ),
-              ListTile(
-                leading: const Icon(Icons.calendar_today),
-                title: const Text('Jadwal'),
-                onTap: () {
-                  Get.back();
-                },
-              ),
-              ListTile(
-                leading: const Icon(Icons.notifications),
-                title: const Text('Notifikasi'),
-                onTap: () {
-                  Get.back();
-                },
-              ),
-              ListTile(
-                leading: const Icon(Icons.inventory),
-                title: const Text('Inventaris'),
-                onTap: () {
-                  Get.back();
-                },
-              ),
-              const Divider(),
-              ListTile(
-                leading: const Icon(Icons.logout),
-                title: const Text('Logout'),
-                onTap: controller.logout,
-              ),
-            ],
-          ),
-        ),
-        body: SafeArea(
-          child: SingleChildScrollView(
-            child: Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: Obx(() {
-                if (controller.isLoading.value) {
-                  return const Center(
-                    child: CircularProgressIndicator(),
-                  );
-                }
-
-                return Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    // add drawer button
-                    IconButton(
-                      onPressed: () => scaffoldKey.currentState?.openDrawer(),
-                      icon: const Icon(Icons.menu),
-                    ),
-                    // Header dengan greeting
-                    _buildGreetingHeader(textTheme),
-                    const SizedBox(height: 20),
-
-                    // Jadwal penyaluran hari ini
-                    _buildScheduleCard(
-                      textTheme,
-                      title: 'Jadwal Penyaluran Hari ini',
-                      location: 'Kantor Kepala Desa (Beras)',
-                      dateTime: '15 April 2023, 13:00 - 14:00',
-                      isToday: true,
-                    ),
-                    const SizedBox(height: 20),
-
-                    // Jadwal penyaluran mendatang
-                    _buildScheduleCard(
-                      textTheme,
-                      title: 'Jadwal Penyaluran Mendatang',
-                      location: 'Balai Desa A (Sembako)',
-                      dateTime: '17 April 2023, 13:00 - 14:00',
-                      isToday: false,
-                    ),
-                    const SizedBox(height: 20),
-
-                    // Statistik penyaluran
-                    _buildStatisticsRow(textTheme),
-                    const SizedBox(height: 20),
-
-                    // Progress penyaluran
-                    _buildProgressSection(textTheme),
-                    const SizedBox(height: 20),
-
-                    // Daftar penerima
-                    _buildRecipientsList(textTheme),
-
-                    // Daftar Donasi
-                    _buildDonationList(textTheme),
-                    // Daftar Donatur
-                    _buildDonorsList(textTheme),
-                  ],
-                );
-              }),
             ),
-          ),
-        ),
-        bottomNavigationBar: BottomNavigationBar(
-          currentIndex: 0,
-          type: BottomNavigationBarType.fixed,
-          selectedLabelStyle: textTheme.bodySmall,
-          unselectedLabelStyle: textTheme.bodySmall,
-          items: [
-            BottomNavigationBarItem(
-              icon: SvgPicture.asset(
+            ListTile(
+              leading: SvgPicture.asset(
                 'assets/icons/home-icon.svg',
                 width: 24,
                 height: 24,
               ),
-              label: 'Beranda',
+              title: const Text('Beranda'),
+              onTap: () {
+                Get.back();
+              },
             ),
-            BottomNavigationBarItem(
-              icon: SvgPicture.asset(
-                'assets/icons/jadwal-icon.svg',
-                width: 24,
-                height: 24,
-              ),
-              label: 'Jadwal',
+            ListTile(
+              leading: const Icon(Icons.calendar_today),
+              title: const Text('Jadwal'),
+              onTap: () {
+                Get.back();
+              },
             ),
-            BottomNavigationBarItem(
-              icon: SvgPicture.asset(
-                'assets/icons/notif-icon.svg',
-                width: 24,
-                height: 24,
-              ),
-              label: 'Notifikasi',
+            ListTile(
+              leading: const Icon(Icons.notifications),
+              title: const Text('Notifikasi'),
+              onTap: () {
+                Get.back();
+              },
             ),
-            BottomNavigationBarItem(
-              icon: SvgPicture.asset(
-                'assets/icons/inventory-icon.svg',
-                width: 24,
-                height: 24,
-              ),
-              label: 'Inventaris',
+            ListTile(
+              leading: const Icon(Icons.inventory),
+              title: const Text('Inventaris'),
+              onTap: () {
+                Get.back();
+              },
+            ),
+            const Divider(),
+            ListTile(
+              leading: const Icon(Icons.logout),
+              title: const Text('Logout'),
+              onTap: controller.logout,
             ),
           ],
         ),
       ),
+      body: SafeArea(
+        child: SingleChildScrollView(
+          child: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Obx(() {
+              if (controller.isLoading.value) {
+                return const Center(
+                  child: CircularProgressIndicator(),
+                );
+              }
+
+              return Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  IconButton(
+                    onPressed: () => scaffoldKey.currentState?.openDrawer(),
+                    icon: const Icon(Icons.menu),
+                  ),
+
+                  const SizedBox(height: 10),
+
+                  // Header dengan greeting
+                  _buildGreetingHeader(textTheme),
+
+                  const SizedBox(height: 20),
+
+                  // Jadwal penyaluran hari ini
+                  _buildScheduleCard(
+                    textTheme,
+                    title: 'Jadwal Penyaluran Hari ini',
+                    location: 'Kantor Kepala Desa (Beras)',
+                    dateTime: '15 April 2023, 13:00 - 14:00',
+                    isToday: true,
+                  ),
+                  const SizedBox(height: 20),
+
+                  // Jadwal penyaluran mendatang
+                  _buildScheduleCard(
+                    textTheme,
+                    title: 'Jadwal Penyaluran Mendatang',
+                    location: 'Balai Desa A (Sembako)',
+                    dateTime: '17 April 2023, 13:00 - 14:00',
+                    isToday: false,
+                  ),
+                  const SizedBox(height: 20),
+
+                  // Statistik penyaluran
+                  _buildStatisticsRow(textTheme),
+                  const SizedBox(height: 20),
+
+                  // Progress penyaluran
+                  _buildProgressSection(textTheme),
+                  const SizedBox(height: 20),
+
+                  // Daftar penerima
+                  _buildRecipientsList(textTheme),
+
+                  // Daftar Donasi
+                  _buildDonationList(textTheme),
+                  // Daftar Donatur
+                  _buildDonorsList(textTheme),
+                ],
+              );
+            }),
+          ),
+        ),
+      ),
+      bottomNavigationBar: BottomNavigationBar(
+        currentIndex: 0,
+        type: BottomNavigationBarType.fixed,
+        selectedLabelStyle: textTheme.bodySmall,
+        unselectedLabelStyle: textTheme.bodySmall,
+        items: [
+          BottomNavigationBarItem(
+            icon: SvgPicture.asset(
+              'assets/icons/home-icon.svg',
+              width: 24,
+              height: 24,
+            ),
+            label: 'Beranda',
+          ),
+          BottomNavigationBarItem(
+            icon: SvgPicture.asset(
+              'assets/icons/jadwal-icon.svg',
+              width: 24,
+              height: 24,
+            ),
+            label: 'Jadwal',
+          ),
+          BottomNavigationBarItem(
+            icon: SvgPicture.asset(
+              'assets/icons/notif-icon.svg',
+              width: 24,
+              height: 24,
+            ),
+            label: 'Notifikasi',
+          ),
+          BottomNavigationBarItem(
+            icon: SvgPicture.asset(
+              'assets/icons/inventory-icon.svg',
+              width: 24,
+              height: 24,
+            ),
+            label: 'Inventaris',
+          ),
+        ],
+      ),
     );
   }
 
@@ -261,12 +256,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
       width: double.infinity,
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
-        gradient: const LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
-          transform: GradientRotation(96.93 * 3.14159 / 180),
-        ),
+        gradient: AppTheme.primaryGradient,
         borderRadius: BorderRadius.circular(12),
       ),
       child: Column(
@@ -288,7 +278,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
               color: Colors.white,
             ),
           ),
-          const SizedBox(height: 4),
+          const SizedBox(height: 8),
           Text(
             dateTime,
             style: textTheme.bodyMedium?.copyWith(
@@ -305,58 +295,83 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
     return Row(
       children: [
         Expanded(
-          child: _buildStatCard('Penitipan', '3', 'Konfirmasi', textTheme),
+          child: StatisticCard(
+            title: 'Penitipan',
+            count: '3',
+            subtitle: 'Perlu Konfirmasi',
+            height: 120,
+          ),
         ),
         const SizedBox(width: 10),
         Expanded(
-          child: _buildStatCard('Penjadwalan', '1', 'Pengajuan', textTheme),
+          child: StatisticCard(
+            title: 'Penjadwalan',
+            count: '1',
+            subtitle: 'Perlu Konfirmasi',
+            height: 120,
+          ),
         ),
         const SizedBox(width: 10),
         Expanded(
-          child: _buildStatCard('Pengaduan', '1', 'Pengaduan', textTheme),
+          child: StatisticCard(
+            title: 'Pengaduan',
+            count: '1',
+            subtitle: 'Perlu Tindakan',
+            height: 120,
+          ),
         ),
       ],
     );
   }
 
-  Widget _buildStatCard(
-      String title, String count, String subtitle, TextTheme textTheme) {
+  Widget _buildProgressSection(TextTheme textTheme) {
     return Container(
       width: double.infinity,
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
-        gradient: const LinearGradient(
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
-          transform: GradientRotation(96.93 * 3.14159 / 180),
-        ),
+        gradient: AppTheme.primaryGradient,
         borderRadius: BorderRadius.circular(12),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
-            title,
-            style: textTheme.bodyMedium?.copyWith(
-              fontSize: 14,
-              color: Colors.white.withAlpha(204), // 0.8 * 255 ≈ 204
-            ),
-          ),
-          Text(
-            count,
-            style: textTheme.headlineSmall?.copyWith(
-              fontSize: 24,
+            'Progress Penyaluran',
+            style: textTheme.titleMedium?.copyWith(
+              fontSize: 16,
               fontWeight: FontWeight.bold,
               color: Colors.white,
             ),
           ),
-          const SizedBox(height: 4),
+          const SizedBox(height: 10),
+          ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: LinearProgressIndicator(
+              value: 0.7,
+              minHeight: 10,
+              backgroundColor: Colors.white.withOpacity(0.3),
+              valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+            ),
+          ),
+          const SizedBox(height: 10),
           Text(
-            subtitle,
+            '70% Selesai',
+            style: textTheme.bodyMedium?.copyWith(
+              fontSize: 14,
+              fontWeight: FontWeight.bold,
+              color: Colors.white,
+            ),
+          ),
+          const SizedBox(height: 10),
+          _buildProgressDetailRow('Telah Menerima', 70, textTheme),
+          _buildProgressDetailRow('Dijedwalkan', 20, textTheme),
+          _buildProgressDetailRow('Belum Dijadwalkan', 10, textTheme),
+          const SizedBox(height: 5),
+          Text(
+            'Total : 100 Penerima, Telah Disalurkan : 70 Penerima, Belum Disalurkan : 30',
             style: textTheme.bodySmall?.copyWith(
               fontSize: 12,
-              color: Colors.white,
+              color: Colors.white.withOpacity(0.8),
             ),
           ),
         ],
@@ -364,52 +379,6 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
     );
   }
 
-  Widget _buildProgressSection(TextTheme textTheme) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          'Progress Penyaluran',
-          style: textTheme.titleMedium?.copyWith(
-            fontSize: 16,
-            fontWeight: FontWeight.bold,
-          ),
-        ),
-        const SizedBox(height: 10),
-        ClipRRect(
-          borderRadius: BorderRadius.circular(8),
-          child: LinearProgressIndicator(
-            value: 0.7,
-            minHeight: 10,
-            backgroundColor: Colors.grey[300],
-            valueColor: const AlwaysStoppedAnimation<Color>(Color(0xFF2E5077)),
-          ),
-        ),
-        const SizedBox(height: 10),
-        Text(
-          '70% Selesai',
-          style: textTheme.bodyMedium?.copyWith(
-            fontSize: 14,
-            fontWeight: FontWeight.bold,
-            color: const Color(0xFF2E5077),
-          ),
-        ),
-        const SizedBox(height: 10),
-        _buildProgressDetailRow('Telah Menerima', 70, textTheme),
-        _buildProgressDetailRow('Dijedwalkan', 20, textTheme),
-        _buildProgressDetailRow('Belum Dijadwalkan', 10, textTheme),
-        const SizedBox(height: 5),
-        Text(
-          'Total : 100 Penerima, Telah Disalurkan : 70 Penerima, Belum Disalurkan : 30',
-          style: textTheme.bodySmall?.copyWith(
-            fontSize: 12,
-            color: Colors.grey[600],
-          ),
-        ),
-      ],
-    );
-  }
-
   Widget _buildProgressDetailRow(String label, int value, TextTheme textTheme) {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 2),
@@ -442,7 +411,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
                       0.7 *
                       (value / 100),
                   decoration: BoxDecoration(
-                    color: const Color(0xFF2E5077),
+                    color: AppTheme.primaryColor,
                     borderRadius: BorderRadius.circular(4),
                   ),
                 ),
@@ -504,20 +473,11 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             ),
             TextButton(
               onPressed: () {},
-              child: Row(
-                children: [
-                  Text(
-                    'Lihat Semua',
-                    style: textTheme.bodyMedium?.copyWith(
-                      color: const Color(0xFF2E5077),
-                    ),
-                  ),
-                  Icon(
-                    Icons.chevron_right,
-                    size: 16,
-                    color: const Color(0xFF2E5077),
-                  ),
-                ],
+              child: Text(
+                'Lihat Semua',
+                style: textTheme.bodyMedium?.copyWith(
+                  color: AppTheme.primaryColor,
+                ),
               ),
             ),
           ],
@@ -535,33 +495,26 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
       width: double.infinity,
       margin: const EdgeInsets.only(bottom: 10),
       decoration: BoxDecoration(
-        color: Colors.white,
+        gradient: AppTheme.primaryGradient,
         borderRadius: BorderRadius.circular(12),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.grey.withAlpha(26), // 0.1 * 255 ≈ 26
-            spreadRadius: 1,
-            blurRadius: 3,
-            offset: const Offset(0, 1),
-          ),
-        ],
       ),
       child: ListTile(
         title: Text(
           name,
           style: textTheme.titleMedium?.copyWith(
             fontWeight: FontWeight.bold,
+            color: Colors.white,
           ),
         ),
         subtitle: Text(
           id,
-          style: textTheme.bodyMedium,
-        ),
-        trailing: IconButton(
-          icon: const Icon(
-            Icons.chevron_right,
-            color: Colors.grey,
+          style: textTheme.bodyMedium?.copyWith(
+            color: Colors.white,
           ),
+        ),
+        trailing: NavigationButton(
+          label: 'Detail',
+          icon: Icons.arrow_forward_ios,
           onPressed: () {},
         ),
       ),
@@ -615,13 +568,13 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
                   Text(
                     'Lihat Semua',
                     style: textTheme.bodyMedium?.copyWith(
-                      color: const Color(0xFF2E5077),
+                      color: AppTheme.primaryColor,
                     ),
                   ),
                   Icon(
                     Icons.chevron_right,
                     size: 16,
-                    color: const Color(0xFF2E5077),
+                    color: AppTheme.primaryColor,
                   ),
                 ],
               ),
@@ -645,53 +598,33 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
       width: double.infinity,
       margin: const EdgeInsets.only(bottom: 10),
       decoration: BoxDecoration(
-        color: Colors.white,
+        gradient: AppTheme.primaryGradient,
         borderRadius: BorderRadius.circular(12),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.grey.withAlpha(26), // 0.1 * 255 ≈ 26
-            spreadRadius: 1,
-            blurRadius: 3,
-            offset: const Offset(0, 1),
-          ),
-        ],
       ),
       child: ListTile(
-        title: Text(
-          title,
-          style: textTheme.titleMedium?.copyWith(
-            fontWeight: FontWeight.bold,
-          ),
+        title: Row(
+          children: [
+            Text(
+              title,
+              style: textTheme.titleMedium?.copyWith(
+                fontWeight: FontWeight.bold,
+                color: Colors.white,
+              ),
+            ),
+            const SizedBox(width: 8),
+            StatusPill(status: status, backgroundColor: AppTheme.verifiedColor),
+          ],
         ),
         subtitle: Text(
           subtitle,
-          style: textTheme.bodyMedium,
+          style: textTheme.bodyMedium?.copyWith(
+            color: Colors.white,
+          ),
         ),
-        trailing: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-              decoration: BoxDecoration(
-                color: Colors.green.withAlpha(26), // 0.1 * 255 ≈ 26
-                borderRadius: BorderRadius.circular(12),
-              ),
-              child: Text(
-                status,
-                style: textTheme.bodySmall?.copyWith(
-                  color: Colors.green,
-                  fontSize: 12,
-                ),
-              ),
-            ),
-            IconButton(
-              icon: const Icon(
-                Icons.chevron_right,
-                color: Colors.grey,
-              ),
-              onPressed: () {},
-            ),
-          ],
+        trailing: NavigationButton(
+          label: 'Detail',
+          icon: Icons.arrow_forward_ios,
+          onPressed: () {},
         ),
       ),
     );