Replace CircularProgressIndicator with skeleton loaders in dashboard; reintroduce project dropdown list with search functionality

lib/view/dashboard/dashboard_screen.dart

@@ -12,6 +12,7 @@ import 'package:on_field_work/helpers/widgets/dashbaord/expense_by_status_widget
 import 'package:on_field_work/helpers/widgets/dashbaord/monthly_expense_dashboard_chart.dart';
 import 'package:on_field_work/view/layouts/layout.dart';
 import 'package:on_field_work/helpers/utils/permission_constants.dart';
+import 'package:on_field_work/helpers/widgets/my_custom_skeleton.dart ';
 
 class DashboardScreen extends StatefulWidget {
   const DashboardScreen({super.key});
@@ -190,7 +191,9 @@ class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
       final selectedId = projectController.selectedProjectId.value;
 
       if (isLoading) {
-        return const Center(child: CircularProgressIndicator());
+        // Use skeleton instead of CircularProgressIndicator
+        return SkeletonLoaders.dashboardCardsSkeleton(
+            maxWidth: MediaQuery.of(context).size.width);
       }
 
       return Column(
@@ -247,61 +250,6 @@ class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
     });
   }
 
-  Widget _projectDropdownList(projects, selectedId) {
-    return Container(
-      margin: const EdgeInsets.only(top: 10),
-      padding: const EdgeInsets.all(12),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(5),
-        border: Border.all(color: Colors.black12.withOpacity(.2)),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black12.withOpacity(.07),
-            blurRadius: 10,
-            offset: const Offset(0, 3),
-          ),
-        ],
-      ),
-      constraints:
-          BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.33),
-      child: Column(
-        children: [
-          TextField(
-            decoration: InputDecoration(
-              hintText: "Search project...",
-              isDense: true,
-              prefixIcon: const Icon(Icons.search),
-              border:
-                  OutlineInputBorder(borderRadius: BorderRadius.circular(5)),
-            ),
-          ),
-          const SizedBox(height: 10),
-          Expanded(
-            child: ListView.builder(
-              itemCount: projects.length,
-              itemBuilder: (_, index) {
-                final project = projects[index];
-                return RadioListTile<String>(
-                  dense: true,
-                  value: project.id,
-                  groupValue: selectedId,
-                  onChanged: (v) {
-                    if (v != null) {
-                      projectController.updateSelectedProject(v);
-                      projectController.isProjectSelectionExpanded.value =
-                          false;
-                    }
-                  },
-                  title: Text(project.name),
-                );
-              },
-            ),
-          ),
-        ],
-      ),
-    );
-  }
 //---------------------------------------------------------------------------
   // DASHBOARD MODULE CARDS (UPDATED FOR MINIMAL PADDING / SLL SIZE)
   //---------------------------------------------------------------------------
@@ -309,7 +257,9 @@ class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
   Widget _dashboardCards() {
     return Obx(() {
       if (menuController.isLoading.value) {
-        return const Center(child: CircularProgressIndicator());
+        // Show skeleton instead of CircularProgressIndicator
+        return SkeletonLoaders.dashboardCardsSkeleton(
+            maxWidth: MediaQuery.of(context).size.width);
       }
 
       final projectSelected = projectController.selectedProject != null;
@@ -440,6 +390,62 @@ class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
     });
   }
 
+  Widget _projectDropdownList(projects, selectedId) {
+    return Container(
+      margin: const EdgeInsets.only(top: 10),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(5),
+        border: Border.all(color: Colors.black12.withOpacity(.2)),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black12.withOpacity(.07),
+            blurRadius: 10,
+            offset: const Offset(0, 3),
+          ),
+        ],
+      ),
+      constraints:
+          BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.33),
+      child: Column(
+        children: [
+          TextField(
+            decoration: InputDecoration(
+              hintText: "Search project...",
+              isDense: true,
+              prefixIcon: const Icon(Icons.search),
+              border:
+                  OutlineInputBorder(borderRadius: BorderRadius.circular(5)),
+            ),
+          ),
+          const SizedBox(height: 10),
+          Expanded(
+            child: ListView.builder(
+              itemCount: projects.length,
+              itemBuilder: (_, index) {
+                final project = projects[index];
+                return RadioListTile<String>(
+                  dense: true,
+                  value: project.id,
+                  groupValue: selectedId,
+                  onChanged: (v) {
+                    if (v != null) {
+                      projectController.updateSelectedProject(v);
+                      projectController.isProjectSelectionExpanded.value =
+                          false;
+                    }
+                  },
+                  title: Text(project.name),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
   //---------------------------------------------------------------------------
   // MAIN UI
   //---------------------------------------------------------------------------