From d7c06c38a67fa6441ae963fe4f835ba4de3fa09b Mon Sep 17 00:00:00 2001
From: kusowl <kushal.saha@outlook.com>
Date: Mon, 2 Feb 2026 17:22:01 +0530
Subject: [PATCH] feature(deals by category pie chart): - add a pie chart that
 shows deals by category - change UI to make it more clear

---
 app/Http/Controllers/StatsController.php      | 11 ++++
 .../DealsCountByCategoryCollection.php        | 16 +++++
 .../DealsCountByCategoryResource.php          | 17 +++++
 .../admin/active-users-chart.blade.php        | 63 ++++++++++++-------
 .../admin/category-wise-deals-pie.blade.php   | 52 +++++++--------
 resources/views/components/layout.blade.php   |  2 +
 routes/api/stats/stats.php                    |  1 +
 7 files changed, 115 insertions(+), 47 deletions(-)
 create mode 100644 app/Http/Resources/DealsCountByCategoryCollection.php
 create mode 100644 app/Http/Resources/DealsCountByCategoryResource.php

diff --git a/app/Http/Controllers/StatsController.php b/app/Http/Controllers/StatsController.php
index ac9625d..f748276 100644
--- a/app/Http/Controllers/StatsController.php
+++ b/app/Http/Controllers/StatsController.php
@@ -4,6 +4,8 @@
 
 use App\Enums\UserTypes;
 use App\Http\Resources\ActiveUsersStatsCollection;
+use App\Http\Resources\DealsCountByCategoryCollection;
+use App\Models\DealCategory;
 use App\Queries\PageVisitStatsQuery;
 use Illuminate\Http\Request;
 
@@ -22,4 +24,13 @@ public function getActiveUsers(Request $request, PageVisitStatsQuery $baseQuery)
             'activeBrokers' => new ActiveUsersStatsCollection($activeBrokers),
         ]);
     }
+
+    public function getDealsByCategory()
+    {
+        return new DealsCountByCategoryCollection(
+            DealCategory::select(['id', 'name'])
+                ->withCount('deals')
+                ->get()
+        );
+    }
 }
diff --git a/app/Http/Resources/DealsCountByCategoryCollection.php b/app/Http/Resources/DealsCountByCategoryCollection.php
new file mode 100644
index 0000000..c612a3f
--- /dev/null
+++ b/app/Http/Resources/DealsCountByCategoryCollection.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class DealsCountByCategoryCollection extends ResourceCollection
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'data' => $this->collection,
+        ];
+    }
+}
diff --git a/app/Http/Resources/DealsCountByCategoryResource.php b/app/Http/Resources/DealsCountByCategoryResource.php
new file mode 100644
index 0000000..a7ad8d0
--- /dev/null
+++ b/app/Http/Resources/DealsCountByCategoryResource.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DealsCountByCategoryResource extends JsonResource
+{
+    public function toArray(Request $request): array
+    {
+        return [
+            'name' => $this->name,
+            'dealsCount' => $this->deals_count,
+        ];
+    }
+}
diff --git a/resources/views/components/dashboard/admin/active-users-chart.blade.php b/resources/views/components/dashboard/admin/active-users-chart.blade.php
index d33b817..f6ef83a 100644
--- a/resources/views/components/dashboard/admin/active-users-chart.blade.php
+++ b/resources/views/components/dashboard/admin/active-users-chart.blade.php
@@ -1,35 +1,56 @@
 <div id="active-users-chart-parent" class="col-span-2">
-    <x-dashboard.card data-is-loading="false" class="h-75">
-        <x-ui.toggle-button-group class="mb-4">
-            <x-ui.toggle-button :active="request('sortBy') == null">
-                <button onclick="switchGraph(this, 30)" class="graphBtn flex items-center px-2  space-x-2">
-                    <p class="font-bold text-xs  sm:text-sm md:text-md">30 Days</p>
-                </button>
-            </x-ui.toggle-button>
+    <x-dashboard.card  class="h-75">
+        <div class="flex justify-between items-baseline">
+            <h3 class="text-md font-bold mb-4">User Activity</h3>
+            <x-ui.toggle-button-group class="mb-4">
+                <x-ui.toggle-button :active="request('sortBy') == null">
+                    <button onclick="switchGraph(this, 30)" class="graphBtn flex items-center px-2  space-x-2">
+                        <p class="font-bold text-xs  sm:text-sm md:text-md">30 Days</p>
+                    </button>
+                </x-ui.toggle-button>
 
-            <x-ui.toggle-button>
-                <button onclick="switchGraph(this, 7)" class="graphBtn flex items-center px-2 space-x-2">
-                    <p class="font-bold text-xs sm:text-sm md:text-md">7 Days</p>
-                </button>
-            </x-ui.toggle-button>
+                <x-ui.toggle-button>
+                    <button onclick="switchGraph(this, 7)" class="graphBtn flex items-center px-2 space-x-2">
+                        <p class="font-bold text-xs sm:text-sm md:text-md">7 Days</p>
+                    </button>
+                </x-ui.toggle-button>
 
-            <x-ui.toggle-button>
-                <button class="flex items-center pt-0.5 px-4 space-x-2">
-                    <x-heroicon-o-calendar-date-range class="w-4"/>
-                </button>
-            </x-ui.toggle-button>
-        </x-ui.toggle-button-group>
+                <x-ui.toggle-button>
+                    <button id="dateRange" class="flex items-center pt-0.5 px-4 space-x-2">
+                        <x-heroicon-o-calendar-date-range class="w-4"/>
+                    </button>
+                </x-ui.toggle-button>
+            </x-ui.toggle-button-group>
+        </div>
 
-        <div class="h-50">
+        <div data-is-loading="false" class="h-50">
             <canvas id="active-users-chart"></canvas>
         </div>
     </x-dashboard.card>
 </div>
 @push('scripts')
-    <script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 
+    <script>
         window.addEventListener('DOMContentLoaded', () => {
-            // BY default load 30 days data
+
+            flatpickr("#dateRange", {
+                mode: "range",
+                dateFormat: "Y-m-d",
+                onClose: function (selectedDates) {
+                    if (selectedDates.length === 2) {
+                        const start = selectedDates[0].toISOString().split('T')[0];
+                        const end = selectedDates[1].toISOString().split('T')[0];
+
+                        activeBtn(document.getElementById('dateRange'));
+
+                        generateActiveUsersChart(start, end);
+                    }
+                }
+            });
+
+
+            // By default load 30 days data
             const end = new Date();
             const start = new Date();
             start.setDate(end.getDate() - 30);
diff --git a/resources/views/components/dashboard/admin/category-wise-deals-pie.blade.php b/resources/views/components/dashboard/admin/category-wise-deals-pie.blade.php
index 4da7d78..30565dd 100644
--- a/resources/views/components/dashboard/admin/category-wise-deals-pie.blade.php
+++ b/resources/views/components/dashboard/admin/category-wise-deals-pie.blade.php
@@ -1,37 +1,32 @@
-<x-dashboard.card class="col-span-1 h-75">
-    <canvas id="category-wise-deals-pie-chart"></canvas>
-</x-dashboard.card>
+<div id="deals-pie-chart-parent" class="col-span-1">
+    <x-dashboard.card class="col-span-1 h-75">
+        <h3 class="text-md font-bold mb-4">Deals by category</h3>
+        <div data-is-loading="false" class="h-55">
+            <canvas id="category-wise-deals-pie-chart"></canvas>
+        </div>
+    </x-dashboard.card>
+</div>
 @push('scripts')
     <script async>
         window.addEventListener('DOMContentLoaded', async () => {
             const dealsPieChart = document.getElementById('category-wise-deals-pie-chart');
+            const dealsPieChartParent = document.getElementById('deals-pie-chart-parent');
+
+            if (!dealsPieChart || !dealsPieChartParent) {
+                console.error('canvas not defined');
+                return;
+            }
+            toggleShimmer(false, dealsPieChartParent);
             try {
-                // const response = await axios.get('/api/stats/customer/active/30');
-                // const apiData = response.data.data;
+                const {data: apiData} = await axios.get('/api/stats/deals-by-category');
 
-
-                // Fill the data from api response
-                // const chartData = labels.map((date) => {
-                //     let found = apiData.find(item => item.date === date);
-                //     return found ? found.userCount : 0;
-                // })
+                const categories = apiData?.data.map((item) => item?.name);
+                const dealsCounts = apiData?.data.map((item) => item?.dealsCount);
 
                 const data = {
-                    labels: [
-                        'Real Estate',
-                        'Food',
-                        'Sell & Deal',
-                        'Palaces'
-                    ],
+                    labels: categories,
                     datasets: [{
-                        label: 'My First Dataset',
-                        data: [30, 20, 15, 5],
-                        backgroundColor: [
-                            'rgb(255, 99, 132)',
-                            'rgb(54, 162, 235)',
-                            'rgb(255, 205, 86)',
-                            'rgb(99,102,255)',
-                        ],
+                        data: dealsCounts,
                         hoverOffset: 4
                     }]
                 };
@@ -42,10 +37,15 @@
                     options: {
                         maintainAspectRatio: false,
                         responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                            }
+                        }
                     }
                 };
                 const chart = new Chart(dealsPieChart, config);
-                // toggleShimmer(false, activeChartParent);
+                toggleShimmer(true, dealsPieChartParent);
             } catch (e) {
                 console.log(e)
             }
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index 3e5eed1..ad58404 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -19,6 +19,8 @@
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet"/>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+
     <!-- Styles / Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 
diff --git a/routes/api/stats/stats.php b/routes/api/stats/stats.php
index 4d1e73f..d99dd09 100644
--- a/routes/api/stats/stats.php
+++ b/routes/api/stats/stats.php
@@ -4,4 +4,5 @@
 
 Route::prefix('/stats')->group(function () {
     Route::get('/active-users', [StatsController::class, 'getActiveUsers']);
+    Route::get('/deals-by-category', [StatsController::class, 'getDealsByCategory'])->name('stats.deals-by-category');
 });