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,22 +2,20 @@ 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(
+    return Scaffold(
-      data: Theme.of(context).copyWith(
-        textTheme: textTheme,
-      ),
-      child: Scaffold(
       key: scaffoldKey,
       drawer: Drawer(
         child: ListView(
@@ -25,12 +23,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
           children: [
             DrawerHeader(
               decoration: const BoxDecoration(
-                  gradient: LinearGradient(
+                gradient: AppTheme.primaryGradient,
-                    begin: Alignment.topLeft,
-                    end: Alignment.bottomRight,
-                    colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
-                    transform: GradientRotation(96.93 * 3.14159 / 180),
-                  ),
               ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -41,7 +34,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
                     child: Icon(
                       Icons.person,
                       size: 40,
-                        color: Color(0xFF2E5077),
+                      color: AppTheme.primaryColor,
                     ),
                   ),
                   const SizedBox(height: 10),
@@ -117,13 +110,16 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
               return Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                    // add drawer button
                   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
@@ -207,7 +203,6 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
           ),
         ],
       ),
-      ),
     );
   }
 
@@ -261,12 +256,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
       width: double.infinity,
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
-        gradient: const LinearGradient(
+        gradient: AppTheme.primaryGradient,
-          begin: Alignment.topLeft,
-          end: Alignment.bottomRight,
-          colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
-          transform: GradientRotation(96.93 * 3.14159 / 180),
-        ),
         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,67 +295,44 @@ 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) {
-    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),
-        ),
-        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,
-              fontWeight: FontWeight.bold,
-              color: Colors.white,
-            ),
-          ),
-          const SizedBox(height: 4),
-          Text(
-            subtitle,
-            style: textTheme.bodySmall?.copyWith(
-              fontSize: 12,
-              color: Colors.white,
           ),
         ),
       ],
-      ),
     );
   }
 
   Widget _buildProgressSection(TextTheme textTheme) {
-    return Column(
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        gradient: AppTheme.primaryGradient,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
@@ -373,6 +340,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             style: textTheme.titleMedium?.copyWith(
               fontSize: 16,
               fontWeight: FontWeight.bold,
+              color: Colors.white,
             ),
           ),
           const SizedBox(height: 10),
@@ -381,8 +349,8 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             child: LinearProgressIndicator(
               value: 0.7,
               minHeight: 10,
-            backgroundColor: Colors.grey[300],
+              backgroundColor: Colors.white.withOpacity(0.3),
-            valueColor: const AlwaysStoppedAnimation<Color>(Color(0xFF2E5077)),
+              valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
             ),
           ),
           const SizedBox(height: 10),
@@ -391,7 +359,7 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             style: textTheme.bodyMedium?.copyWith(
               fontSize: 14,
               fontWeight: FontWeight.bold,
-            color: const Color(0xFF2E5077),
+              color: Colors.white,
             ),
           ),
           const SizedBox(height: 10),
@@ -403,10 +371,11 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             'Total : 100 Penerima, Telah Disalurkan : 70 Penerima, Belum Disalurkan : 30',
             style: textTheme.bodySmall?.copyWith(
               fontSize: 12,
-            color: Colors.grey[600],
+              color: Colors.white.withOpacity(0.8),
             ),
           ),
         ],
+      ),
     );
   }
 
@@ -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,21 +473,12 @@ class PetugasDesaDashboardView extends GetView<DashboardController> {
             ),
             TextButton(
               onPressed: () {},
-              child: Row(
+              child: Text(
-                children: [
-                  Text(
                 'Lihat Semua',
                 style: textTheme.bodyMedium?.copyWith(
-                      color: const Color(0xFF2E5077),
+                  color: AppTheme.primaryColor,
                 ),
               ),
-                  Icon(
-                    Icons.chevron_right,
-                    size: 16,
-                    color: const Color(0xFF2E5077),
-                  ),
-                ],
-              ),
             ),
           ],
         ),
@@ -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,
+          style: textTheme.bodyMedium?.copyWith(
+            color: Colors.white,
           ),
-        trailing: IconButton(
-          icon: const Icon(
-            Icons.chevron_right,
-            color: Colors.grey,
         ),
+        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,54 +598,34 @@ 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: 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,
           ),
         ),
-            ),
+        trailing: NavigationButton(
-            IconButton(
+          label: 'Detail',
-              icon: const Icon(
+          icon: Icons.arrow_forward_ios,
-                Icons.chevron_right,
-                color: Colors.grey,
-              ),
           onPressed: () {},
         ),
-          ],
-        ),
       ),
     );
   }

lib/app/theme/app_theme.dart

@@ -0,0 +1,190 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  // Warna utama aplikasi
+  static const Color primaryColor = Color(0xFF2E5077);
+  static const Color secondaryColor = Color(0xFF5882B1);
+  static const Color accentColor = Color(0xFF4A6D8C);
+
+  // Warna untuk status
+  static const Color verifiedColor = Color(0xFFACF1C8);
+  static const Color processedColor = Color(0xFFF1C8AC);
+  static const Color rejectedColor = Color(0xFFF1ACAC);
+  static const Color scheduledColor = Color(0xFF2E5077);
+  static const Color completedColor = Color(0xFF6750A4);
+
+  static const Color successColor = Colors.green;
+  static const Color warningColor = Colors.orange;
+  static const Color errorColor = Colors.red;
+  static const Color infoColor = Colors.blue;
+
+  // Gradient utama aplikasi
+  static const LinearGradient primaryGradient = LinearGradient(
+    begin: Alignment.topLeft,
+    end: Alignment.bottomRight,
+    colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
+    transform: GradientRotation(96.93 * 3.14159 / 180),
+  );
+
+  // Tema terang
+  static ThemeData lightTheme = ThemeData(
+    useMaterial3: true,
+    fontFamily: 'DMSans',
+
+    // Skema warna
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: primaryColor,
+      primary: primaryColor,
+      secondary: secondaryColor,
+    ),
+
+    // AppBar
+    appBarTheme: const AppBarTheme(
+      backgroundColor: Colors.white,
+      foregroundColor: primaryColor,
+      elevation: 0,
+      centerTitle: true,
+      iconTheme: IconThemeData(color: primaryColor),
+    ),
+
+    // Tombol
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: primaryColor,
+        foregroundColor: Colors.white,
+        padding: const EdgeInsets.symmetric(vertical: 15),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
+
+    outlinedButtonTheme: OutlinedButtonThemeData(
+      style: OutlinedButton.styleFrom(
+        foregroundColor: primaryColor,
+        side: const BorderSide(color: primaryColor),
+        padding: const EdgeInsets.symmetric(vertical: 15),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
+
+    // Input
+    inputDecorationTheme: InputDecorationTheme(
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(10),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(10),
+        borderSide: const BorderSide(color: primaryColor, width: 2),
+      ),
+      prefixIconColor: primaryColor,
+      floatingLabelStyle: const TextStyle(color: primaryColor),
+    ),
+
+    // Card
+    cardTheme: CardTheme(
+      elevation: 2,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+    ),
+
+    // Drawer
+    drawerTheme: const DrawerThemeData(
+      backgroundColor: Colors.white,
+    ),
+
+    // Bottom Navigation Bar
+    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+      backgroundColor: Colors.white,
+      selectedItemColor: primaryColor,
+      unselectedItemColor: Colors.grey,
+      type: BottomNavigationBarType.fixed,
+      elevation: 8,
+    ),
+  );
+
+  // Tema gelap (jika diperlukan)
+  static ThemeData darkTheme = ThemeData(
+    useMaterial3: true,
+    fontFamily: 'DMSans',
+    brightness: Brightness.dark,
+
+    // Skema warna
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: primaryColor,
+      primary: primaryColor,
+      secondary: secondaryColor,
+      brightness: Brightness.dark,
+    ),
+
+    // AppBar
+    appBarTheme: const AppBarTheme(
+      backgroundColor: Color(0xFF1E1E1E),
+      foregroundColor: Colors.white,
+      elevation: 0,
+      centerTitle: true,
+      iconTheme: IconThemeData(color: Colors.white),
+    ),
+
+    // Tombol
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: primaryColor,
+        foregroundColor: Colors.white,
+        padding: const EdgeInsets.symmetric(vertical: 15),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
+
+    outlinedButtonTheme: OutlinedButtonThemeData(
+      style: OutlinedButton.styleFrom(
+        foregroundColor: Colors.white,
+        side: const BorderSide(color: Colors.white),
+        padding: const EdgeInsets.symmetric(vertical: 15),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
+
+    // Input
+    inputDecorationTheme: InputDecorationTheme(
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(10),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(10),
+        borderSide: const BorderSide(color: secondaryColor, width: 2),
+      ),
+      prefixIconColor: secondaryColor,
+      floatingLabelStyle: const TextStyle(color: secondaryColor),
+    ),
+
+    // Card
+    cardTheme: CardTheme(
+      elevation: 2,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+    ),
+
+    // Drawer
+    drawerTheme: const DrawerThemeData(
+      backgroundColor: Color(0xFF1E1E1E),
+    ),
+
+    // Bottom Navigation Bar
+    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+      backgroundColor: Color(0xFF1E1E1E),
+      selectedItemColor: secondaryColor,
+      unselectedItemColor: Colors.grey,
+      type: BottomNavigationBarType.fixed,
+      elevation: 8,
+    ),
+  );
+}

lib/app/widgets/navigation_button.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:penyaluran_app/app/theme/app_theme.dart';
+
+class NavigationButton extends StatelessWidget {
+  final String label;
+  final IconData? icon;
+  final Widget? iconWidget;
+  final VoidCallback onPressed;
+
+  const NavigationButton({
+    Key? key,
+    required this.label,
+    this.icon,
+    this.iconWidget,
+    required this.onPressed,
+  })  : assert(icon != null || iconWidget != null,
+            'Either icon or iconWidget must be provided'),
+        super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+
+    return ConstrainedBox(
+      constraints: BoxConstraints(minWidth: 70), // Set a minimum width
+      child: GestureDetector(
+        onTap: onPressed,
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
+          decoration: BoxDecoration(
+            color: AppTheme.primaryColor,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Row(
+            mainAxisSize:
+                MainAxisSize.min, // Important for preventing layout issues
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                label,
+                style: textTheme.bodySmall?.copyWith(
+                  fontSize: 10,
+                  fontWeight: FontWeight.w500,
+                  color: Color(0xFFAFF8FF),
+                ),
+              ),
+              const SizedBox(width: 4),
+              if (icon != null)
+                Icon(
+                  icon,
+                  size: 12,
+                  color: Color(0xFFAFF8FF),
+                )
+              else if (iconWidget != null)
+                SizedBox(
+                  width: 12,
+                  height: 12,
+                  child: iconWidget,
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// Data class for navigation button
+class NavigationButtonData {
+  final String label;
+  final IconData? icon;
+  final Widget? iconWidget;
+
+  NavigationButtonData({
+    required this.label,
+    this.icon,
+    this.iconWidget,
+  }) : assert(icon != null || iconWidget != null,
+            'Either icon or iconWidget must be provided');
+}

lib/app/widgets/statistic_card.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import '../theme/app_theme.dart';
+
+class StatisticCard extends StatelessWidget {
+  final String title;
+  final String count;
+  final String subtitle;
+  final double height;
+
+  const StatisticCard({
+    Key? key,
+    required this.title,
+    required this.count,
+    required this.subtitle,
+    required this.height,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+
+    return Container(
+      width: double.infinity,
+      height: height,
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        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
+            ),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            count,
+            style: textTheme.headlineSmall?.copyWith(
+              fontSize: 24,
+              fontWeight: FontWeight.bold,
+              color: Colors.white,
+            ),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            subtitle,
+            style: textTheme.bodySmall?.copyWith(
+              fontSize: 12,
+              color: Colors.white,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/widgets/status_pill.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:penyaluran_app/app/theme/app_theme.dart';
+
+class StatusPill extends StatelessWidget {
+  final String status;
+  final Color? backgroundColor;
+  final TextStyle? textStyle;
+
+  const StatusPill({
+    super.key,
+    required this.status,
+    this.backgroundColor,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 2),
+      decoration: BoxDecoration(
+        color: backgroundColor ?? AppTheme.verifiedColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Text(
+        status,
+        style: textStyle ??
+            textTheme.bodySmall?.copyWith(
+              fontSize: 10,
+            ),
+      ),
+    );
+  }
+}

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:penyaluran_app/app/routes/app_pages.dart';
 import 'package:penyaluran_app/app/services/supabase_service.dart';
+import 'package:penyaluran_app/app/theme/app_theme.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -24,10 +25,9 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return GetMaterialApp(
       title: 'Penyaluran App',
-      theme: ThemeData(
+      theme: AppTheme.lightTheme,
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
+      darkTheme: AppTheme.darkTheme,
-        useMaterial3: true,
+      themeMode: ThemeMode.light, // Default ke tema terang
-      ),
       debugShowCheckedModeBanner: false,
       initialRoute: AppPages.initial,
       getPages: AppPages.routes,

pubspec.yaml

@@ -89,12 +89,12 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
+  fonts:
-  #   - family: Schyler
+    - family: DMSans
-  #     fonts:
+      fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
+        - asset: assets/font/DMSans-VariableFont_opsz,wght.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
+        - asset: assets/font/DMSans-Italic-VariableFont_opsz,wght.ttf
-  #         style: italic
+          style: italic
   #   - family: Trajan Pro
   #     fonts:
   #       - asset: fonts/TrajanPro.ttf