Chore: Upgrade to Laravel 12 + remove Mary and Jetstream dependencies (#141)

* docs: remove requirement for setting APP_KEY manually

* optimize date picker

* clean up modals

* spot light working

* reorganization

* add lazy load

* wip

* remove filament

* styling

resources/views/components/ui/apex-chart.blade.php

@@ -0,0 +1,176 @@
+@props(['seriesData' => [], 'name' => 'apex-chart' ])
+
+@php
+    $seriesData = array_merge([
+      'chart' => [
+        'type' => "area",
+        'stacked' => false,
+        'height' => 300,
+        'foreColor' => "#999",
+        'dropShadow' => [
+           'enabled' => false,
+        ],
+        'toolbar' => [
+            'show' => false,
+        ],
+        'zoom' => [
+          'enabled' => false
+        ]
+      ],
+      'colors' => ['#3185FC', '#48435C', '#9792E3', '#00E396', '#B74F6F'],
+      'stroke' => [
+        'curve' => "smooth",
+        'width' => 3
+      ],
+      'dataLabels' => [
+        'enabled' => false
+      ],
+      'markers' => [
+        'size' => 0,
+        'strokeColor' => "#fff",
+        'strokeWidth' => 3,
+        'strokeOpacity' => 1,
+        'fillOpacity' => 1,
+        'hover' => [
+          'size' => 6
+        ]
+      ],
+      'xaxis' => [
+        'type' => "datetime",
+        'axisBorder' => [
+          'show' => false
+        ],
+        'axisTicks' => [
+          'show' => false
+        ],
+        'labels' => [
+          'offsetX' => 15,
+          'offsetY' => 0
+        ],
+        'tooltip' => [
+          'enabled' => false
+        ]
+      ],
+      'yaxis' => [
+        'labels' => [
+          'offsetX' => -10,
+          'offsetY' => -10
+        ],
+        'tooltip' => [
+          'enabled' => false
+        ]
+      ],
+      'grid' => [
+        'strokeColor' => "#000",
+        'padding' => [
+            'top' => 0,
+            'left' => -30,
+            'right' => 0,
+            'bottom' => -5
+        ]
+      ],
+      'legend' => [
+        'show' => false,
+      ],
+      
+    ], $seriesData);
+    $seriesData = json_encode($seriesData)
+@endphp
+
+<div 
+    id="chart"
+    wire:key="{{ rand() }}"
+    x-data="{
+        data: {{ $seriesData }},
+        init(){
+
+            this.data.chart.events = {
+                mounted: function (chartContext, config) {
+                    renderLegend(chartContext);
+                },
+                {{-- updated: function (chartContext, config) {
+                    renderLegend(chartContext);
+                } --}}
+            }
+
+            this.data.yaxis.labels.formatter = function (value) {
+              return `{{ Number::currencySymbol(auth()->user()->getCurrency()) }}${value}`
+            }
+
+            this.data.tooltip = {
+                enabled: true,
+                y: {
+                    formatter: (value, { series, seriesIndex, dataPointIndex, w }) => {
+                        const firstDataPoint = this.data.series[seriesIndex].data[0][1]
+                        const percentageChange = ((value - firstDataPoint) / firstDataPoint) * 100;
+                        return `${parseFloat(value.toFixed(2))} (${percentageChange.toFixed(2)}%)`;
+                    }
+                },
+            }
+
+            var chart = new ApexCharts(document.querySelector('#chart-{{ $name }}'), this.data);
+
+            chart.render();
+
+            {{-- // reset custom zoom button
+            var resetZoomButton = document.querySelector('#chart-reset-zoom-{{ $name }}');
+            resetZoomButton.addEventListener('click', function () {
+              chart.resetSeries()
+            }); --}}
+
+            // generate custom legend view
+            function renderLegend(chartContext) {
+            
+                var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
+
+                if (!legendContainer) return;
+
+                legendContainer.innerHTML = ''; // Clear any existing legend items
+                
+                chartContext.w.globals.seriesNames.forEach(function (seriesName, i) {
+
+                    var seriesColor = chartContext.w.config.colors[i];
+                    var legendItem = document.createElement('div');
+                    legendItem.classList.add('flex', 'items-center', 'my-2', 'mr-4', 'text-xs', 'md:text-sm', 'cursor-pointer');
+                    legendItem.setAttribute('data-series-index', i);
+
+                    var colorBox = document.createElement('span');
+                    colorBox.id = seriesName
+                    colorBox.classList.add('w-4', 'h-4', 'inline-block', 'mr-2');
+                    colorBox.style.backgroundColor = seriesColor;
+
+                    var labelText = document.createElement('span');
+                    labelText.textContent = seriesName;
+
+                    legendItem.appendChild(colorBox);
+                    legendItem.appendChild(labelText);
+                    legendContainer.appendChild(legendItem);
+
+                    // Initial visibility state
+                    var isCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(i);
+                    if (isCollapsed) {
+                        legendItem.classList.add('opacity-50');
+                    }
+
+                    legendItem.addEventListener('click', function () {
+                      
+                        var seriesIndex = parseInt(this.getAttribute('data-series-index'), 10);
+                        var isCurrentlyCollapsed = chartContext.w.globals.collapsedSeriesIndices.includes(seriesIndex);
+
+                        chart.toggleSeries(chartContext.w.globals.seriesNames[seriesIndex]);
+
+                        if (isCurrentlyCollapsed) {
+                            this.classList.remove('opacity-50');
+                        } else {
+                            this.classList.add('opacity-50');
+                        }
+                    });
+                });
+            }
+
+        }
+    }"
+>
+  <div id="chart-{{ $name }}" class="apex-chart"></div>
+</div>
+