fix: dashboard

app/Http/Controllers/DashboardController.php

@@ -3,7 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Services\DashboardService;
-use App\Services\QueryService;
 use Illuminate\Http\Request;
 
 class DashboardController extends Controller
@@ -16,12 +15,14 @@ class DashboardController extends Controller
      */
     public function __invoke(Request $request)
     {
-        // dd(QueryService::statisticDualYear("purchase_details", "purchases"));
+        // DashboardService::dump();
 
         return inertia("Dashboards/Index", [
             "productAmount" => DashboardService::productAmount(),
-            "productFavorites" => DashboardService::productFavorites(),
-            "salePurchaseStatistic" => DashboardService::salePurchaseStatistic(),
+            "productBestSelling" => DashboardService::productBestSelling(),
+            "salePurchaseAmountStatistic" => DashboardService::salePurchaseAmountStatistic(),
+            "salePriceStatistic" => DashboardService::salePriceStatistic(),
+            "purchasePriceStatistic" => DashboardService::purchasePriceStatistic(),
         ]);
     }
 }

app/Services/DashboardService.php

@@ -6,12 +6,11 @@ use Illuminate\Support\Facades\DB;
 
 class DashboardService
 {
-    public static function productFavorites()
+    public static function productBestSelling()
     {
-        return DB::table("sale_details")
+        $query = DB::table("sale_details")
             ->selectRaw(
-                "sale_details.product_number,
-                 products.name AS title,
+                "products.name AS title,
                  SUM(sale_details.qty) AS qty,
                  products.profit"
             )
@@ -25,23 +24,78 @@ class DashboardService
             ->orderByRaw("qty DESC")
             ->limit(5)
             ->get();
+
+        return [
+            "title" => __("words.best_product"),
+            "data" => $query,
+        ];
     }
 
     public static function productAmount()
     {
         return [
-            QueryService::amount("sales", __("words.sale")),
-            QueryService::amount("purchases", __("words.purchase")),
-            QueryService::amount("products", __("words.product")),
-            QueryService::amount("stock_products", __("words.stock_product")),
+            "data" => [
+                QueryService::amount(
+                    "sales",
+                    __("words.sale"),
+                    __("words.today")
+                ),
+                QueryService::amount(
+                    "purchases",
+                    __("words.purchase"),
+                    __("words.today")
+                ),
+                QueryService::amount(
+                    "products",
+                    __("words.product"),
+                    __("words.today")
+                ),
+                QueryService::amount(
+                    "stock_products",
+                    __("words.stock_product"),
+                    __("words.today")
+                ),
+            ],
+        ];
+    }
+
+    public static function salePurchaseAmountStatistic()
+    {
+        return [
+            "title" => __("words.sale_and_purchase"),
+            "data" => [
+                __("words.sale") => QueryService::amountStatistic("sales"),
+                __("words.purchase") => QueryService::amountStatistic(
+                    "purchases"
+                ),
+            ],
         ];
     }
 
-    public static function salePurchaseStatistic()
+    public static function salePriceStatistic()
     {
         return [
-            __("words.sale") => QueryService::statistic("sales"),
-            __("words.purchase") => QueryService::statistic("purchases"),
+            "title" => __("words.sale"),
+            "data" => QueryService::priceStatistic("sale_details"),
         ];
     }
+
+    public static function purchasePriceStatistic()
+    {
+        return [
+            "title" => __("words.purchase"),
+            "data" => QueryService::priceStatistic("purchase_details"),
+        ];
+    }
+
+    public static function dump()
+    {
+        return dd(
+            self::productAmount(),
+            self::productBestSelling(),
+            self::salePurchaseAmountStatistic(),
+            self::salePriceStatistic(),
+            self::purchasePriceStatistic()
+        );
+    }
 }

app/Services/QueryService.php

@@ -2,71 +2,69 @@
 
 namespace App\Services;
 
+use Carbon\Carbon;
 use Illuminate\Support\Facades\DB;
 
 class QueryService
 {
-    public static function amount(string $table, string $title)
-    {
+    public static function amount(
+        string $table,
+        string $title,
+        string $description
+    ) {
         return DB::table($table)
             ->selectRaw(
-                "COUNT(*) AS amount,
-                 (SELECT COUNT(*) FROM products WHERE DATE(updated_at) = CURDATE()) AS amountToday"
+                "COUNT(*) AS amount, (
+                 SELECT
+                    COUNT(*)
+                 FROM
+                    products
+                 WHERE
+                    DATE(updated_at) = CURDATE()) AS amountToday"
             )
             ->get()
             ->transform(
-                fn($sale) => [
+                fn($table) => [
                     "title" => $title,
-                    "amount" => $sale->amount,
-                    "amountToday" => $sale->amountToday,
+                    "amount" => $table->amount,
+                    "amountToday" => $table->amountToday,
+                    "amountTodayDescription" => $description,
                 ]
             )
             ->first();
     }
 
-    public static function statistic(string $table)
+    public static function amountStatistic(string $table)
     {
         return DB::table($table)
             ->selectRaw(
                 "COUNT(*) AS amount,
                  DATE_FORMAT(created_at, '%b') AS month"
             )
-            ->groupByRaw("MONTH(created_at)")
+            ->groupByRaw("month")
+            ->orderByRaw("created_at")
             ->get()
             ->pluck("amount", "month");
     }
 
-    public static function statisticDualYear(string $table, string $tableJoin)
+    public static function priceStatistic(string $table)
     {
         return DB::table($table)
             ->selectRaw(
-                "DATE_FORMAT($table.created_at, '%Y') AS year,
-                 DATE_FORMAT($table.created_at, '%b') AS month,
-                 IF(
-                 $tableJoin.ppn,
-                 $table.price + $table.price * ((
-                 SELECT
-                    ppn
-                 FROM
-                    ppns) / 100),
-                 $table.price
-                 ) AS price,
-                 COUNT(*) AS total"
-            )
-            ->join(
-                $tableJoin,
-                "$tableJoin.number",
-                "=",
-                "$table.purchase_number"
-            )
-            ->groupByRaw(
-                "YEAR($table.created_at),
-                 MONTH($table.created_at),
-                 year,
-                 month,
-                 price
-                 DESC"
+                "price,
+                 created_at"
             )
-            ->get();
+            ->orderByRaw("created_at")
+            ->get()
+            ->groupBy([
+                fn($value) => Carbon::parse($value->created_at)->format("Y"),
+                fn($value) => Carbon::parse($value->created_at)->format("M"),
+            ])
+            ->take(2)
+            ->transform(
+                fn($year) => $year->transform(
+                    fn($month) => $month->sum(fn($arr) => $arr->price)
+                )
+            );
     }
 }

lang/en/words.php

@@ -1,7 +1,6 @@
 <?php
 
 return [
-
     /*
     |--------------------------------------------------------------------------
     | Words Language Lines
@@ -11,36 +10,37 @@ return [
     |
      */
 
-    'active' => 'Active',
-    'not_active' => 'Not Active',
-    'male' => 'Male',
-    'female' => 'Female',
-    'income' => 'Income',
-    'expense' => 'Expense',
-    'today' => 'Today',
-    'this_month' => 'This Month',
-    'total' => 'Total',
-    'discount_given' => 'Discount Given',
-    'transaction' => 'Transaction',
-    'expense' => 'Expense',
-    'laundry_type' => 'Laundry Type',
-    'product_type' => 'Product Type',
-    'transaction_statistic' => 'Transaction Statistic',
-    'mutation_statistic' => 'Mutations Statistic',
-    'transaction_outlet_statistic' => 'Transaction Statistic/Outlet',
-    'per_year' => 'Per Year',
-    'top_customer' => 'Top customer',
-    'top_number_customer' => 'Top :number Customer',
-    'member' => 'Member',
-    'member_expired' => 'Member has expired please Top Up again',
-    'type_member' => 'Type Member',
-    'type_vehicle' => 'Type Kendaraan',
-    'top_up_rank' => 'Top Up',
-    'top_up_number_rank' => 'Top Up :number Rank',
-    'user' => 'User',
-    'sale' => 'Sale',
-    'purchase' => 'Purchase',
-    'product' => 'Product',
-    'stock_product' => 'Stock Product'
-
+    "active" => "Active",
+    "not_active" => "Not Active",
+    "male" => "Male",
+    "female" => "Female",
+    "income" => "Income",
+    "expense" => "Expense",
+    "today" => "Today",
+    "this_month" => "This Month",
+    "total" => "Total",
+    "discount_given" => "Discount Given",
+    "transaction" => "Transaction",
+    "expense" => "Expense",
+    "laundry_type" => "Laundry Type",
+    "product_type" => "Product Type",
+    "transaction_statistic" => "Transaction Statistic",
+    "mutation_statistic" => "Mutations Statistic",
+    "transaction_outlet_statistic" => "Transaction Statistic/Outlet",
+    "per_year" => "Per Year",
+    "top_customer" => "Top customer",
+    "top_number_customer" => "Top :number Customer",
+    "member" => "Member",
+    "member_expired" => "Member has expired please Top Up again",
+    "type_member" => "Type Member",
+    "type_vehicle" => "Type Kendaraan",
+    "top_up_rank" => "Top Up",
+    "top_up_number_rank" => "Top Up :number Rank",
+    "user" => "User",
+    "sale" => "Sale",
+    "purchase" => "Purchase",
+    "product" => "Product",
+    "stock_product" => "Stock Product",
+    "best_product" => "Best Product",
+    "sale_and_purchase" => "Sale and Purchase",
 ];

lang/id/words.php

@@ -1,7 +1,6 @@
 <?php
 
 return [
-
     /*
     |--------------------------------------------------------------------------
     | Words Language Lines
@@ -11,36 +10,37 @@ return [
     |
      */
 
-    'active' => 'Aktif',
-    'not_active' => 'Tidak aktif',
-    'male' => 'Laki-laki',
-    'female' => 'Perempuan',
-    'income' => 'Pendapatan',
-    'expense' => 'Pengeluaran',
-    'today' => 'Hari ini',
-    'this_month' => 'Bulan ini',
-    'total' => 'Total',
-    'discount_given' => 'Diskon diberikan',
-    'transaction' => 'Transaksi',
-    'expense' => 'Pengeluaran',
-    'laundry_type' => 'Jenis Laundry',
-    'product_type' => 'Jenis Produk',
-    'transaction_statistic' => 'Statistik Transaksi',
-    'mutation_statistic' => 'Statistik Mutasi',
-    'transaction_outlet_statistic' => 'Statistik Transaksi/Outlet',
-    'per_year' => 'Pertahun',
-    'top_customer' => 'Top Pelanggan',
-    'top_number_customer' => 'Top :number Pelanggan',
-    'member' => 'Member',
-    'member_expired' => 'Member telah expired silahkan lakukan Top Up kembali',
-    'type_member' => 'Jenis Member',
-    'type_vehicle' => 'Jenis Kendaraan',
-    'top_up_rank' => 'Top Up',
-    'top_up_number_rank' => 'Peringkat :number Top Up',
-    'user' => 'User',
-    'sale' => 'Penjualan',
-    'purchase' => 'Pembelian',
-    'product' => 'Produk',
-    'stock_product' => 'Stok Produk'
-
+    "active" => "Aktif",
+    "not_active" => "Tidak aktif",
+    "male" => "Laki-laki",
+    "female" => "Perempuan",
+    "income" => "Pendapatan",
+    "expense" => "Pengeluaran",
+    "today" => "Hari ini",
+    "this_month" => "Bulan ini",
+    "total" => "Total",
+    "discount_given" => "Diskon diberikan",
+    "transaction" => "Transaksi",
+    "expense" => "Pengeluaran",
+    "laundry_type" => "Jenis Laundry",
+    "product_type" => "Jenis Produk",
+    "transaction_statistic" => "Statistik Transaksi",
+    "mutation_statistic" => "Statistik Mutasi",
+    "transaction_outlet_statistic" => "Statistik Transaksi/Outlet",
+    "per_year" => "Pertahun",
+    "top_customer" => "Top Pelanggan",
+    "top_number_customer" => "Top :number Pelanggan",
+    "member" => "Member",
+    "member_expired" => "Member telah expired silahkan lakukan Top Up kembali",
+    "type_member" => "Jenis Member",
+    "type_vehicle" => "Jenis Kendaraan",
+    "top_up_rank" => "Top Up",
+    "top_up_number_rank" => "Peringkat :number Top Up",
+    "user" => "User",
+    "sale" => "Penjualan",
+    "purchase" => "Pembelian",
+    "product" => "Produk",
+    "stock_product" => "Stok Produk",
+    "best_product" => "Produk Terlaris",
+    "sale_and_purchase" => "Penjualan dan Pembelian",
 ];

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

@@ -0,0 +1,16 @@
+<script setup>
+defineProps({
+  title: {
+    required: true,
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div class="card">
+    <h5>{{ title }}</h5>
+
+    <Chart v-bind="$attrs" />
+  </div>
+</template>

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

@@ -1,14 +1,14 @@
 <script setup>
 defineProps({
-  products: {
+  data: {
     required: true,
-    type: Array,
+    type: Object,
   },
 })
 </script>
 
 <template>
-  <div v-for="product in products" class="col-12 lg:col-6 xl:col-3">
+  <div v-for="product in data.data" class="col-12 lg:col-6 xl:col-3">
     <div class="card mb-0">
       <div class="flex justify-content-between mb-3">
         <div>
@@ -26,10 +26,14 @@ defineProps({
           <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 class="text-green-500 font-medium">
+        {{ product.amountToday }} {{ product.title.toLowerCase() }} {{ ' ' }}
+      </span>
+
+      <span class="text-500">
+        {{ product.amountTodayDescription.toLowerCase() }}
       </span>
-      <span class="text-500"> hari ini</span>
     </div>
   </div>
 </template>

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

@@ -1,8 +1,8 @@
 <script setup>
 defineProps({
-  products: {
+  data: {
     required: true,
-    type: Array,
+    type: Object,
   },
 })
 </script>
@@ -10,12 +10,12 @@ defineProps({
 <template>
   <div class="card">
     <div class="flex justify-content-between align-items-center">
-      <h5>Produk Terlaris</h5>
+      <h5>{{ data.title }}</h5>
     </div>
 
     <ul class="list-none p-0 m-0">
       <li
-        v-for="product in products"
+        v-for="product in data.data"
         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">{{

resources/js/pages/Dashboards/Composables/useStatistic.js

@@ -0,0 +1,34 @@
+export function useStatistic(chartData) {
+  const chartSettings = {
+    title: null,
+    datasets: [
+      {
+        label: '-',
+        data: null,
+        fill: false,
+        backgroundColor: '#2f4860',
+        borderColor: '#2f4860',
+        tension: 0.4,
+      },
+      {
+        label: '-',
+        data: null,
+        fill: false,
+        backgroundColor: '#00bb7e',
+        borderColor: '#00bb7e',
+        tension: 0.4,
+      },
+    ],
+  }
+
+  let index = 0
+
+  for (const key in chartData.data) {
+    chartSettings.datasets[index].label = key
+    chartSettings.datasets[index].data = chartData.data[key]
+
+    index++
+  }
+
+  return { title: chartData.title, data: chartSettings }
+}

resources/js/pages/Dashboards/Composables/useStatisticDualYear.js

@@ -0,0 +1,34 @@
+export function useStatisticDualYear(chartData) {
+  const chartSettings = {
+    title: null,
+    datasets: [
+      {
+        label: '-',
+        data: [],
+        fill: false,
+        backgroundColor: '#2f4860',
+        borderColor: '#2f4860',
+        tension: 0.4,
+      },
+      {
+        label: '-',
+        data: [],
+        fill: false,
+        backgroundColor: '#00bb7e',
+        borderColor: '#00bb7e',
+        tension: 0.4,
+      },
+    ],
+  }
+
+  let index = 0
+
+  for (const key in chartData.data) {
+    chartSettings.datasets[index].label = key
+    chartSettings.datasets[index].data = chartData.data[key]
+
+    index++
+  }
+
+  return { title: chartData.title, data: chartSettings }
+}

resources/js/pages/Dashboards/Index.vue

@@ -1,91 +1,28 @@
 <script setup>
+import { useStatistic } from './Composables/useStatistic'
+import { useStatisticDualYear } from './Composables/useStatisticDualYear'
+import CardCart from './Components/CardCart.vue'
 import CardCount from './Components/CardCount.vue'
 import CardProductFavorite from './Components/CardProductFavorite.vue'
 import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
-import { computed } from '@vue/reactivity'
 
 const props = defineProps([
   'productAmount',
-  'productFavorites',
-  'salePurchaseStatistic',
+  'productBestSelling',
+  'salePurchaseAmountStatistic',
+  'salePriceStatistic',
+  'purchasePriceStatistic',
 ])
 
-const salePurchase = computed(() => {
-  const data = {
-    datasets: [
-      {
-        label: null,
-        data: null,
-        fill: false,
-        backgroundColor: '#2f4860',
-        borderColor: '#2f4860',
-        tension: 0.4,
-      },
-      {
-        label: null,
-        data: null,
-        fill: false,
-        backgroundColor: '#00bb7e',
-        borderColor: '#00bb7e',
-        tension: 0.4,
-      },
-    ],
-  }
+const salePurchaseAmountStatistic = useStatistic(
+  props.salePurchaseAmountStatistic
+)
 
-  let index = 0
+const salePriceStatistic = useStatisticDualYear(props.salePriceStatistic)
 
-  for (const key in props.salePurchaseStatistic) {
-    data.datasets[index].label = key
-    data.datasets[index].data = props.salePurchaseStatistic[key]
-
-    console.info(props.salePurchaseStatistic[key])
-
-    index++
-  }
-
-  return data
-})
-
-const barData = {
-  labels: [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec',
-  ],
-  datasets: [
-    {
-      label: 'Bulan lalu',
-      data: [
-        65_000_000, 59_000_000, 80_000_000, 81_000_000, 56_000_000, 55_000_000,
-        40_000_000,
-      ],
-      fill: false,
-      backgroundColor: '#2f4860',
-      borderColor: '#2f4860',
-      tension: 0.4,
-    },
-    {
-      label: 'Bulan ini',
-      data: [
-        28_000_000, 48_000_000, 40_000_000, 19_000_000, 86_000_000, 27_000_000,
-        90_000_000,
-      ],
-      fill: false,
-      backgroundColor: '#00bb7e',
-      borderColor: '#00bb7e',
-      tension: 0.4,
-    },
-  ],
-}
+const purchasePriceStatistic = useStatisticDualYear(
+  props.purchasePriceStatistic
+)
 </script>
 
 <template>
@@ -93,22 +30,22 @@ const barData = {
     <div class="grid">
       <div class="col-12">
         <div class="grid">
-          <CardCount :products="productAmount" />
+          <CardCount :data="productAmount" />
         </div>
       </div>
 
       <div class="col-12 xl:col-6">
         <div class="grid">
           <div class="col-12">
-            <div class="card">
-              <h5>Pembelian dan Penjualan</h5>
-
-              <Chart type="line" :data="salePurchase" />
-            </div>
+            <CardProductFavorite :data="productBestSelling" />
           </div>
 
           <div class="col-12">
-            <CardProductFavorite :products="productFavorites" />
+            <CardCart
+              type="line"
+              :title="salePurchaseAmountStatistic.title"
+              :data="salePurchaseAmountStatistic.data"
+            />
           </div>
         </div>
       </div>
@@ -116,19 +53,19 @@ const barData = {
       <div class="col-12 xl:col-6">
         <div class="grid">
           <div class="col-12">
-            <div class="card">
-              <h5>Pembelian</h5>
-
-              <Chart type="bar" :data="barData" />
-            </div>
+            <CardCart
+              type="bar"
+              :title="salePriceStatistic.title"
+              :data="salePriceStatistic.data"
+            />
           </div>
 
           <div class="col-12">
-            <div class="card">
-              <h5>Pendapatan</h5>
-
-              <Chart type="bar" :data="barData" />
-            </div>
+            <CardCart
+              type="bar"
+              :title="purchasePriceStatistic.title"
+              :data="purchasePriceStatistic.data"
+            />
           </div>
         </div>
       </div>