fix: dashboard

app/Http/Controllers/DashboardController.php

@@ -2,6 +2,9 @@
 
 namespace App\Http\Controllers;
 
+use App\Services\ProductService;
+use App\Services\PurchaseService;
+use App\Services\SaleService;
 use Illuminate\Http\Request;
 
 class DashboardController extends Controller
@@ -14,6 +17,14 @@ class DashboardController extends Controller
      */
     public function __invoke(Request $request)
     {
-        return inertia("Dashboards/Index");
+        return inertia("Dashboards/Index", [
+            "productCounts" => [
+                SaleService::saleAmount(),
+                PurchaseService::purchaseAmount(),
+                ProductService::productAmount(),
+                ProductService::stockProductAmount(),
+            ],
+            "productFavorites" => SaleService::bestSelling(),
+        ]);
     }
 }

app/Services/ProductService.php

@@ -3,6 +3,7 @@
 namespace App\Services;
 
 use App\Models\Product;
+use Illuminate\Support\Facades\DB;
 
 class ProductService
 {
@@ -12,4 +13,14 @@ class ProductService
             $product->stockProducts()->exists() ||
             $product->purchaseDetails()->exists();
     }
+
+    public static function productAmount()
+    {
+        return QueryService::queryAmount("products", "Produk");
+    }
+
+    public static function stockProductAmount()
+    {
+        return QueryService::queryAmount("stock_products", "Stok Produk");
+    }
 }

app/Services/PurchaseService.php

@@ -3,6 +3,7 @@
 namespace App\Services;
 
 use App\Models\Purchase;
+use Illuminate\Support\Facades\DB;
 
 class PurchaseService
 {
@@ -12,4 +13,9 @@ class PurchaseService
             return $purchaseDetail->price * $purchaseDetail->qty;
         });
     }
+
+    public static function purchaseAmount()
+    {
+        return QueryService::queryAmount("purchases", "Pembelian");
+    }
 }

app/Services/QueryService.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Support\Facades\DB;
+
+class QueryService
+{
+    public static function queryAmount(string $table, string $title)
+    {
+        return DB::table($table)
+            ->selectRaw(
+                "COUNT(*) as amount,
+                (SELECT COUNT(*) FROM products WHERE DATE(updated_at) = CURDATE()) as amountToday"
+            )
+            ->get()
+            ->transform(
+                fn($sale) => [
+                    "title" => $title,
+                    "amount" => $sale->amount,
+                    "amountToday" => $sale->amountToday,
+                ]
+            )
+            ->first();
+    }
+}

app/Services/SaleService.php

@@ -2,9 +2,8 @@
 
 namespace App\Services;
 
-use App\Models\Ppn;
 use App\Models\Sale;
-use App\Services\HelperService;
+use Illuminate\Support\Facades\DB;
 
 class SaleService
 {
@@ -14,4 +13,35 @@ class SaleService
             return $saleDetail->price * $saleDetail->qty;
         });
     }
+
+    public static function saleAmount()
+    {
+        return QueryService::queryAmount("sales", "Penjualan");
+    }
+
+    public static function bestSelling()
+    {
+        return DB::table("sale_details")
+            ->selectRaw(
+                "product_number, products.name as title, SUM(qty) as qty, products.profit"
+            )
+            ->join(
+                "products",
+                "products.number",
+                "=",
+                "sale_details.product_number"
+            )
+            ->groupByRaw("product_number")
+            ->orderByRaw("qty DESC")
+            ->limit(5)
+            ->get();
+    }
+
+    public static function saleStatistic()
+    {
+        return DB::table("sales")
+            ->selectRaw("COUNT(*) as amount")
+            ->groupByRaw("MONTH(sales.created_at)")
+            ->get();
+    }
 }

config/database.php

@@ -56,7 +56,7 @@ return [
             'collation' => 'utf8mb4_unicode_ci',
             'prefix' => '',
             'prefix_indexes' => true,
-            'strict' => true,
+            'strict' => false,
             'engine' => null,
             'options' => extension_loaded('pdo_mysql') ? array_filter([
                 PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),

resources/js/pages/Dashboards/Components/CardCount.vue

@@ -0,0 +1,35 @@
+<script setup>
+defineProps({
+  products: {
+    required: true,
+    type: Array,
+  },
+})
+</script>
+
+<template>
+  <div v-for="product in products" class="col-12 lg:col-6 xl:col-3">
+    <div class="card mb-0">
+      <div class="flex justify-content-between mb-3">
+        <div>
+          <span class="block text-500 font-medium mb-3">{{
+            product.title
+          }}</span>
+          <div class="text-900 font-medium text-xl">
+            {{ product.amount }}
+          </div>
+        </div>
+        <div
+          class="flex align-items-center justify-content-center bg-blue-100 border-round"
+          style="width: 2.5rem; height: 2.5rem"
+        >
+          <i class="pi pi-th-large text-blue-500 text-xl"></i>
+        </div>
+      </div>
+      <span class="text-green-500 font-medium"
+        >{{ product.amountToday }} {{ product.title.toLowerCase() }}
+      </span>
+      <span class="text-500"> hari ini</span>
+    </div>
+  </div>
+</template>

resources/js/pages/Dashboards/Components/CardProductFavorite.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  products: {
+    required: true,
+    type: Array,
+  },
+})
+</script>
+
+<template>
+  <div class="card">
+    <div class="flex justify-content-between align-items-center">
+      <h5>Produk Terlaris</h5>
+    </div>
+
+    <ul class="list-none p-0 m-0">
+      <li
+        v-for="product in products"
+        class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
+      >
+        <span class="text-900 font-medium mr-2 mb-1 md:mb-0">{{
+          product.title
+        }}</span>
+
+        <div class="mt-2 md:mt-0 flex flex-column align-items-end">
+          <div class="mt-1 text-600 text-xs">Profit</div>
+
+          <div
+            class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
+            style="height: 8px"
+          >
+            <div
+              class="bg-orange-500 h-full"
+              :style="{ width: `${product.profit}% ` }"
+            ></div>
+          </div>
+
+          <span class="text-orange-500 ml-3 font-medium"
+            >%{{ product.profit }}</span
+          >
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

resources/js/pages/Dashboards/Index.vue

@@ -1,8 +1,29 @@
 <script setup>
+import CardCount from './Components/CardCount.vue'
+import CardProductFavorite from './Components/CardProductFavorite.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
 
-const lineData = {
-  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+const props = defineProps([
+  'productCounts',
+  'productFavorites',
+  'saleStatistic',
+])
+
+const purchaseAndSale = {
+  labels: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ],
   datasets: [
     {
       label: 'Pembelian',
@@ -24,7 +45,20 @@ const lineData = {
 }
 
 const barData = {
-  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+  labels: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ],
   datasets: [
     {
       label: 'Bulan lalu',
@@ -52,6 +86,8 @@ const barData = {
 }
 
 const lineOptions = null
+
+const productCounts = props.productCounts
 </script>
 
 <template>
@@ -59,83 +95,7 @@ const lineOptions = null
     <div class="grid">
       <div class="col-12">
         <div class="grid">
-          <div class="col-12 lg:col-6 xl:col-3">
-            <div class="card mb-0">
-              <div class="flex justify-content-between mb-3">
-                <div>
-                  <span class="block text-500 font-medium mb-3">Produk</span>
-                  <div class="text-900 font-medium text-xl">152</div>
-                </div>
-                <div
-                  class="flex align-items-center justify-content-center bg-blue-100 border-round"
-                  style="width: 2.5rem; height: 2.5rem"
-                >
-                  <i class="pi pi-th-large text-blue-500 text-xl"></i>
-                </div>
-              </div>
-              <span class="text-green-500 font-medium">24 produk </span>
-              <span class="text-500">hari ini</span>
-            </div>
-          </div>
-
-          <div class="col-12 lg:col-6 xl:col-3">
-            <div class="card mb-0">
-              <div class="flex justify-content-between mb-3">
-                <div>
-                  <span class="block text-500 font-medium mb-3">Pembelian</span>
-                  <div class="text-900 font-medium text-xl">284</div>
-                </div>
-                <div
-                  class="flex align-items-center justify-content-center bg-yellow-100 border-round"
-                  style="width: 2.5rem; height: 2.5rem"
-                >
-                  <i class="pi pi-shopping-cart text-yellow-500 text-xl"></i>
-                </div>
-              </div>
-              <span class="text-green-500 font-medium">28 pembelian </span>
-              <span class="text-500">hari ini</span>
-            </div>
-          </div>
-
-          <div class="col-12 lg:col-6 xl:col-3">
-            <div class="card mb-0">
-              <div class="flex justify-content-between mb-3">
-                <div>
-                  <span class="block text-500 font-medium mb-3">Penjualan</span>
-                  <div class="text-900 font-medium text-xl">284</div>
-                </div>
-                <div
-                  class="flex align-items-center justify-content-center bg-purple-100 border-round"
-                  style="width: 2.5rem; height: 2.5rem"
-                >
-                  <i class="pi pi-shopping-cart text-purple-500 text-xl"></i>
-                </div>
-              </div>
-              <span class="text-green-500 font-medium">8 penjualan </span>
-              <span class="text-500">hari ini</span>
-            </div>
-          </div>
-
-          <div class="col-12 lg:col-6 xl:col-3">
-            <div class="card mb-0">
-              <div class="flex justify-content-between mb-3">
-                <div>
-                  <span class="block text-500 font-medium mb-3"
-                    >Stok Barang</span
-                  >
-                  <div class="text-900 font-medium text-xl">2848</div>
-                </div>
-                <div
-                  class="flex align-items-center justify-content-center bg-orange-100 border-round"
-                  style="width: 2.5rem; height: 2.5rem"
-                >
-                  <i class="pi pi-box text-orange-500 text-xl"></i>
-                </div>
-              </div>
-              <span class="text-green-500 font-medium">0 barang baru </span>
-              <span class="text-500">hari ini</span>
-            </div>
-          </div>
+          <CardCount :products="productCounts" />
         </div>
       </div>
 
@@ -144,148 +104,17 @@ const lineOptions = null
           <div class="col-12">
             <div class="card">
               <h5>Pembelian dan Penjualan</h5>
-              <Chart type="line" :data="lineData" :options="lineOptions" />
+
+              <Chart
+                type="line"
+                :data="purchaseAndSale"
+                :options="lineOptions"
+              />
             </div>
           </div>
 
           <div class="col-12">
-            <div class="card">
-              <div class="flex justify-content-between align-items-center mb-5">
-                <h5>Produk Terlaris</h5>
-              </div>
-              <ul class="list-none p-0 m-0">
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Space T-Shirt</span
-                    >
-                    <div class="mt-1 text-600">Clothing</div>
-                  </div>
-                  <div class="mt-2 md:mt-0 flex align-items-center">
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div
-                        class="bg-orange-500 h-full"
-                        style="width: 50%"
-                      ></div>
-                    </div>
-                    <span class="text-orange-500 ml-3 font-medium">%50</span>
-                  </div>
-                </li>
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Portal Sticker</span
-                    >
-                    <div class="mt-1 text-600">Accessories</div>
-                  </div>
-                  <div
-                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
-                  >
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div class="bg-cyan-500 h-full" style="width: 16%"></div>
-                    </div>
-                    <span class="text-cyan-500 ml-3 font-medium">%16</span>
-                  </div>
-                </li>
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Supernova Sticker</span
-                    >
-                    <div class="mt-1 text-600">Accessories</div>
-                  </div>
-                  <div
-                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
-                  >
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div class="bg-pink-500 h-full" style="width: 67%"></div>
-                    </div>
-                    <span class="text-pink-500 ml-3 font-medium">%67</span>
-                  </div>
-                </li>
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Wonders Notebook</span
-                    >
-                    <div class="mt-1 text-600">Office</div>
-                  </div>
-                  <div
-                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
-                  >
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div class="bg-green-500 h-full" style="width: 35%"></div>
-                    </div>
-                    <span class="text-green-500 ml-3 font-medium">%35</span>
-                  </div>
-                </li>
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Mat Black Case</span
-                    >
-                    <div class="mt-1 text-600">Accessories</div>
-                  </div>
-                  <div
-                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
-                  >
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div
-                        class="bg-purple-500 h-full"
-                        style="width: 75%"
-                      ></div>
-                    </div>
-                    <span class="text-purple-500 ml-3 font-medium">%75</span>
-                  </div>
-                </li>
-                <li
-                  class="flex flex-column md:flex-row md:align-items-center md:justify-content-between mb-4"
-                >
-                  <div>
-                    <span class="text-900 font-medium mr-2 mb-1 md:mb-0"
-                      >Robots T-Shirt</span
-                    >
-                    <div class="mt-1 text-600">Clothing</div>
-                  </div>
-                  <div
-                    class="mt-2 md:mt-0 ml-0 md:ml-8 flex align-items-center"
-                  >
-                    <div
-                      class="surface-300 border-round overflow-hidden w-10rem lg:w-6rem"
-                      style="height: 8px"
-                    >
-                      <div class="bg-teal-500 h-full" style="width: 40%"></div>
-                    </div>
-                    <span class="text-teal-500 ml-3 font-medium">%40</span>
-                  </div>
-                </li>
-              </ul>
-            </div>
+            <CardProductFavorite :products="productFavorites" />
           </div>
         </div>
       </div>
@@ -295,6 +124,7 @@ const lineOptions = null
           <div class="col-12">
             <div class="card">
               <h5>Pembelian</h5>
+
               <Chart type="bar" :data="barData" :options="lineOptions" />
             </div>
           </div>
@@ -302,6 +132,7 @@ const lineOptions = null
           <div class="col-12">
             <div class="card">
               <h5>Pendapatan</h5>
+
               <Chart type="bar" :data="barData" :options="lineOptions" />
             </div>
           </div>