Made changes to use the props data as prop instead of getting it thro…

…ugh usePage
amitavroy · Jan 3, 2025 · f240291 · f240291
1 parent 28f8499
commit f240291
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 84 deletions.
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
@@ -12,11 +12,12 @@
 class HomeController extends Controller
 {
     public function __invoke(
-        HomePageData $homePageData,
-        CustomerService $customerService,
-        ProductService $productService,
+        HomePageData     $homePageData,
+        CustomerService  $customerService,
+        ProductService   $productService,
         ChartDataService $chartDataService,
-    ): Response|ResponseFactory {
+    ): Response|ResponseFactory
+    {
         $data = $homePageData->handle();
 
         return inertia('Home/Index', [
@@ -25,7 +26,6 @@ public function __invoke(
             'customer_count' => $data['customer_count'],
             'top_customers' => $customerService->getTopCustomers(),
             'top_products' => $productService->getTopProducts(),
-            'random_number' => random_int(1, 100),
             'recent_customer_count' => $chartDataService->getRecentCustomerCount(),
             'recent_order_count' => $chartDataService->getRecentOrderCount(),
         ]);

diff --git a/resources/js/Components/Charts/NewCustomers.vue b/resources/js/Components/Charts/NewCustomers.vue
@@ -2,13 +2,13 @@
 const { recentCustomerCount } = defineProps({
   recentCustomerCount: {
     type: Object,
-    required: true,
-  },
+    required: true
+  }
 })
 
 const total = Object.values(recentCustomerCount).reduce(
   (acc, curr) => acc + curr,
-  0,
+  0
 )
 
 const signupsChartColors = {
@@ -19,8 +19,8 @@ const signupsChartColors = {
     '#E5E7EB',
     '#E5E7EB',
     '#E5E7EB',
-    '#E5E7EB',
-  ],
+    '#E5E7EB'
+  ]
 }
 
 const options = {
@@ -31,77 +31,77 @@ const options = {
     foreColor: '#4B5563',
     fontFamily: 'Inter, sans-serif',
     toolbar: {
-      show: false,
-    },
+      show: false
+    }
   },
   theme: {
     monochrome: {
       enabled: true,
-      color: '#1A56DB',
-    },
+      color: '#1A56DB'
+    }
   },
   plotOptions: {
     bar: {
       columnWidth: '25%',
       borderRadius: 3,
       colors: {
         backgroundBarColors: signupsChartColors.backgroundBarColors,
-        backgroundBarRadius: 3,
-      },
+        backgroundBarRadius: 3
+      }
     },
     dataLabels: {
-      hideOverflowingLabels: false,
-    },
+      hideOverflowingLabels: false
+    }
   },
   xaxis: {
     floating: false,
     labels: {
-      show: false,
+      show: false
     },
     axisBorder: {
-      show: false,
+      show: false
     },
     axisTicks: {
-      show: false,
-    },
+      show: false
+    }
   },
   tooltip: {
     shared: true,
     intersect: false,
     style: {
       fontSize: '14px',
-      fontFamily: 'Inter, sans-serif',
-    },
+      fontFamily: 'Inter, sans-serif'
+    }
   },
   states: {
     hover: {
       filter: {
         type: 'darken',
-        value: 0.8,
-      },
-    },
+        value: 0.8
+      }
+    }
   },
   fill: {
-    opacity: 1,
+    opacity: 1
   },
   yaxis: {
-    show: false,
+    show: false
   },
   grid: {
-    show: false,
+    show: false
   },
   dataLabels: {
-    enabled: false,
+    enabled: false
   },
   legend: {
-    show: false,
-  },
+    show: false
+  }
 }
 const series = [
   {
     name: 'Users',
-    data: Object.values(recentCustomerCount),
-  },
+    data: Object.values(recentCustomerCount)
+  }
 ]
 </script>
 
@@ -113,7 +113,7 @@ const series = [
       <h3 class="text-base font-normal text-gray-500">New customers</h3>
       <span
         class="text-2xl font-bold leading-none text-gray-900 sm:text-3xl dark:text-white"
-        >{{ total }}</span
+      >{{ total }}</span
       >
       <p
         class="flex items-center text-base font-normal text-gray-500 dark:text-gray-400"

diff --git a/resources/js/Components/Charts/NewOrders.vue b/resources/js/Components/Charts/NewOrders.vue
@@ -2,12 +2,12 @@
 const { recentOrderData } = defineProps({
   recentOrderData: {
     type: Object,
-    required: true,
+    required: true
   },
   recentOrderCount: {
-    type: String,
-    required: true,
-  },
+    type: Number,
+    required: true
+  }
 })
 
 const options = {
@@ -18,70 +18,70 @@ const options = {
     fontFamily: 'Inter, sans-serif',
     foreColor: '#4B5563',
     toolbar: {
-      show: false,
-    },
+      show: false
+    }
   },
   plotOptions: {
     bar: {
       columnWidth: '90%',
-      borderRadius: 3,
-    },
+      borderRadius: 3
+    }
   },
   tooltip: {
     shared: false,
     intersect: false,
     style: {
       fontSize: '14px',
-      fontFamily: 'Inter, sans-serif',
-    },
+      fontFamily: 'Inter, sans-serif'
+    }
   },
   states: {
     hover: {
       filter: {
         type: 'darken',
-        value: 1,
-      },
-    },
+        value: 1
+      }
+    }
   },
   stroke: {
     show: true,
     width: 5,
-    colors: ['transparent'],
+    colors: ['transparent']
   },
   grid: {
-    show: false,
+    show: false
   },
   dataLabels: {
-    enabled: false,
+    enabled: false
   },
   legend: {
-    show: false,
+    show: false
   },
   xaxis: {
     floating: false,
     labels: {
-      show: false,
+      show: false
     },
     axisBorder: {
-      show: false,
+      show: false
     },
     axisTicks: {
-      show: false,
-    },
+      show: false
+    }
   },
   yaxis: {
-    show: false,
+    show: false
   },
   fill: {
-    opacity: 1,
-  },
+    opacity: 1
+  }
 }
 const series = [
   {
     name: 'Quantity',
     color: '#1A56DB',
-    data: recentOrderData,
-  },
+    data: recentOrderData
+  }
 ]
 </script>
 
@@ -93,7 +93,7 @@ const series = [
       <h3 class="text-base font-normal text-gray-500">New orders</h3>
       <span
         class="text-2xl font-bold leading-none text-gray-900 sm:text-3xl dark:text-white"
-        >{{ recentOrderCount }}</span
+      >{{ recentOrderCount }}</span
       >
       <p
         class="flex items-center text-base font-normal text-gray-500 dark:text-gray-400"

diff --git a/resources/js/Components/StatsCard.vue b/resources/js/Components/StatsCard.vue
@@ -4,24 +4,24 @@ import Icon from './Icon.vue'
 const { title } = defineProps({
   title: {
     type: String,
-    required: true,
+    required: true
   },
   stats: {
-    type: String,
-    required: true,
+    type: Number,
+    required: true
   },
   number: {
     type: String,
-    required: true,
+    required: true
   },
   message: {
     type: String,
-    required: true,
+    required: true
   },
   icon: {
     type: String,
-    default: null,
-  },
+    default: null
+  }
 })
 </script>
 
@@ -36,7 +36,7 @@ const { title } = defineProps({
         </h3>
         <span
           class="text-2xl font-bold leading-none text-gray-900 sm:text-3xl dark:text-white"
-          >{{ stats }}</span
+        >{{ stats }}</span
         >
         <p
           class="flex items-center text-base font-normal text-gray-500 dark:text-gray-400"