feat(analysis): membuat chart

app/Livewire/Chart/ChannelRevenue.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Livewire\Chart;
+
+use App\Enums\OrderChannel;
+use App\Models\Order;
+use Livewire\Component;
+
+class ChannelRevenue extends Component
+{
+    public array $channels = [];
+
+    public array $revenues = [];
+
+    public array $backgroundColors = [];
+
+    public array $borderColors = [];
+
+    public function mount()
+    {
+        $outlets = auth()->user()->outlets()->pluck('name', 'outlets.id');
+
+        $orders = Order::select('channel', 'total')
+            ->whereIn('outlet_id', $outlets->keys())
+            ->get()
+            ->groupBy('channel');
+
+        $data = [];
+
+        $count = count(OrderChannel::cases());
+
+        foreach (OrderChannel::cases() as $channel) {
+            $channelOrders = $orders[$channel->value] ?? collect();
+            $total = $channelOrders->sum('total');
+
+            $data[] = $total;
+            $this->channels[] = $channel->label();
+        }
+
+        $this->revenues = $data;
+
+        $this->backgroundColors = randomColors($count, 0.2);
+        $this->borderColors = randomColors($count, 1.0);
+    }
+
+    public function render()
+    {
+        return view('livewire.chart.channel-revenue');
+    }
+}

app/Livewire/Chart/OutletExpense.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Livewire\Chart;
+
+use App\Models\Expense;
+use App\Models\Payroll;
+use App\Models\Purchase;
+use Livewire\Component;
+
+class OutletExpense extends Component
+{
+    public array $outlets = [];
+
+    public array $expenses = [];
+
+    public array $backgroundColors = [];
+
+    public array $borderColors = [];
+
+    public function mount()
+    {
+        $outlets = auth()->user()->outlets()->pluck('name', 'outlets.id');
+
+        $expensesData = [];
+
+        foreach ($outlets as $id => $name) {
+            $expenseTotal = Expense::where('outlet_id', $id)->sum('amount');
+
+            $purchaseTotal = Purchase::where('outlet_id', $id)->sum('total');
+
+            $payrollTotal = Payroll::whereHas('user.outlets', fn ($q) => $q->where('outlet_id', $id))->sum('total_salary');
+
+            $total = $expenseTotal + $purchaseTotal + $payrollTotal;
+
+            $expensesData[$name] = $total;
+        }
+
+        $this->outlets = array_keys($expensesData);
+
+        $this->expenses = array_values($expensesData);
+
+        $count = count($this->outlets);
+        $this->backgroundColors = randomColors($count, 0.2);
+        $this->borderColors = randomColors($count, 1.0);
+    }
+
+    public function render()
+    {
+        return view('livewire.chart.outlet-expense');
+    }
+}

app/Livewire/Chart/OutletRevenue.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Livewire\Chart;
+
+use Illuminate\Support\Facades\DB;
+use Livewire\Component;
+
+class OutletRevenue extends Component
+{
+    public array $outlets = [];
+
+    public array $revenues = [];
+
+    public array $backgroundColors = [];
+
+    public array $borderColors = [];
+
+    public function mount()
+    {
+        $outlets = auth()->user()->outlets()->pluck('name', 'outlets.id');
+
+        $revenues = DB::table('orders')
+            ->select('outlet_id', DB::raw('SUM(total) as total_revenue'))
+            ->whereIn('outlet_id', $outlets->keys())
+            ->groupBy('outlet_id')
+            ->pluck('total_revenue', 'outlet_id');
+
+        $this->outlets = $outlets->values()->toArray();
+
+        $this->revenues = $outlets->map(fn ($name, $id) => $revenues[$id] ?? 0)->values()->toArray();
+
+        $count = count($this->outlets);
+        $this->backgroundColors = randomColors($count, 0.2);
+        $this->borderColors = randomColors($count, 1.0);
+    }
+
+    public function render()
+    {
+        return view('livewire.chart.outlet-revenue');
+    }
+}

app/Livewire/Chart/OutletRevenueExpense.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Chart;
+
+use App\Models\Expense;
+use App\Models\Order;
+use App\Models\Payroll;
+use App\Models\Purchase;
+use Livewire\Component;
+
+class OutletRevenueExpense extends Component
+{
+    public array $outlets = [];
+
+    public array $revenues = [];
+
+    public array $expenses = [];
+
+    public function mount()
+    {
+        $outlets = auth()->user()->outlets()->pluck('name', 'outlets.id');
+
+        $revenueData = [];
+
+        $expenseData = [];
+
+        foreach ($outlets as $id => $name) {
+            $totalRevenue = Order::where('outlet_id', $id)->sum('total');
+            $revenueData[$name] = $totalRevenue;
+
+            $expenseTotal = Expense::where('outlet_id', $id)->sum('amount');
+            $purchaseTotal = Purchase::where('outlet_id', $id)->sum('total');
+            $payrollTotal = Payroll::whereHas('user.outlets', fn ($q) => $q->where('outlet_id', $id))->sum('total_salary');
+            $expenseData[$name] = $expenseTotal + $purchaseTotal + $payrollTotal;
+        }
+
+        $this->outlets = $outlets->values()->toArray();
+
+        $this->revenues = array_values($revenueData);
+
+        $this->expenses = array_values($expenseData);
+    }
+
+    public function render()
+    {
+        return view('livewire.chart.outlet-revenue-expense');
+    }
+}

resources/views/livewire/chart/channel-revenue.blade.php

@@ -0,0 +1,32 @@
+<div>
+    <h3>Pendapatan per Channel</h3>
+    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+        <canvas id="channelRevenueChart" width="400" height="200"></canvas>
+    </flux:card>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+    <script>
+        document.addEventListener('livewire:navigated', function() {
+            var ctx = document.getElementById('channelRevenueChart').getContext('2d');
+            var channelRevenueChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: @json($channels),
+                    datasets: [{
+                        label: 'Rp',
+                        data: @json($revenues),
+                        backgroundColor: @json($backgroundColors),
+                        borderColor: @json($borderColors),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    legend: {
+                        display: false
+                    }
+                }
+            });
+        });
+    </script>
+</div>

resources/views/livewire/chart/outlet-expense.blade.php

@@ -0,0 +1,28 @@
+<div>
+    <h3>Pengeluaran per Outlet</h3>
+    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+        <canvas id="outletExpenseChart" width="400" height="200"></canvas>
+    </flux:card>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+    <script>
+        document.addEventListener('livewire:navigated', function() {
+            var ctx = document.getElementById('outletExpenseChart').getContext('2d');
+            var outletExpenseChart = new Chart(ctx, {
+                type: 'polarArea',
+                data: {
+                    labels: @json($outlets),
+                    datasets: [{
+                        data: @json($expenses),
+                        backgroundColor: @json($backgroundColors),
+                        borderColor: @json($borderColors),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true
+                }
+            });
+        });
+    </script>
+</div>

resources/views/livewire/chart/outlet-revenue-expense.blade.php

@@ -0,0 +1,43 @@
+<div>
+    <h3>Pengeluaran per Outlet</h3>
+    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+        <canvas id="outletRevenueExpenseChart" width="400" height="200"></canvas>
+    </flux:card>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+    <script>
+        document.addEventListener('livewire:navigated', function() {
+            var ctx = document.getElementById('outletRevenueExpenseChart').getContext('2d');
+            var outletRevenueExpenseChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: @json($outlets),
+                    datasets: [{
+                            label: 'Pendapatan',
+                            data: @json($revenues),
+                            backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                            borderColor: 'rgba(0, 128, 0, 1)',
+                            borderWidth: 1
+                        },
+                        {
+                            label: 'Pengeluaran',
+                            data: @json($expenses),
+                            backgroundColor: 'rgba(255, 99, 132, 0.5)',
+                            borderColor: 'rgba(255, 0, 0, 1)',
+                            borderWidth: 1
+                        }
+                    ]
+
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                }
+            });
+        });
+    </script>
+</div>

resources/views/livewire/chart/outlet-revenue.blade.php

@@ -0,0 +1,29 @@
+<div>
+    <h3>Pendapatan per Outlet</h3>
+    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
+        <canvas id="outletRevenueChart" width="400" height="200"></canvas>
+    </flux:card>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+    <script>
+        document.addEventListener('livewire:navigated', function() {
+            var ctx = document.getElementById('outletRevenueChart').getContext('2d');
+            var outletRevenueChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: @json($outlets),
+                    datasets: [{
+                        label: 'Rp',
+                        data: @json($revenues),
+                        backgroundColor: @json($backgroundColors),
+                        borderColor: @json($borderColors),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                }
+            });
+        });
+    </script>
+</div>

resources/views/livewire/studio/dashboard/analysis.blade.php

@@ -125,5 +125,12 @@
                 </flux:card>
             </div>
         </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 mt-2">
+            <livewire:chart.outlet-revenue />
+            <livewire:chart.outlet-expense />
+            <livewire:chart.channel-revenue />
+        </div>
+        <livewire:chart.outlet-revenue-expense />
     </div>
 </flux:main>