diff --git a/app/Http/Controllers/BillEventController.php b/app/Http/Controllers/BillEventController.php
index 99ad1024..e22c708c 100644
--- a/app/Http/Controllers/BillEventController.php
+++ b/app/Http/Controllers/BillEventController.php
@@ -3,6 +3,8 @@
 namespace App\Http\Controllers;
 
 use App\Models\Bill;
+use DateInterval;
+use DateTime;
 use Illuminate\Support\Facades\Request;
 
 class BillEventController
@@ -20,7 +22,7 @@ public function __invoke()
                         'url' => route('bills.show', $bill->id),
                         'paid' => $bill->paid,
                         'start' => $date,
-                        'end' => $date,
+                        'end' => (new DateTime($date))->add(new DateInterval('P1D'))->format('Y-m-d'),
                     ];
                 }
             });
diff --git a/app/Models/Account.php b/app/Models/Account.php
index 6a7cfddc..7bf31972 100644
--- a/app/Models/Account.php
+++ b/app/Models/Account.php
@@ -20,7 +20,7 @@ class Account extends Model
     ];
 
     protected $casts = [
-        'date_opened' => 'datetime',
+        'date_opened' => 'datetime:Y-m-d H:i:s',
     ];
 
     public function getRunningBalanceAttribute()
@@ -39,6 +39,6 @@ public function getRunningBalanceAttribute()
 
     public function transactions()
     {
-        return $this->hasMany(Transaction::class);
+        return $this->hasMany(Transaction::class)->ordered();
     }
 }
diff --git a/app/Models/Bill.php b/app/Models/Bill.php
index 70effca8..5f18d635 100644
--- a/app/Models/Bill.php
+++ b/app/Models/Bill.php
@@ -21,12 +21,12 @@ class Bill extends Model
     ];
 
     protected $casts = [
-        'start_date' => 'date',
+        'start_date' => 'date:Y-m-d',
     ];
 
     public function transactions()
     {
-        return $this->hasMany(Transaction::class);
+        return $this->hasMany(Transaction::class)->ordered();
     }
 
     public function getTotalAttribute()
diff --git a/app/Models/Category.php b/app/Models/Category.php
index 46724bf8..22644a8a 100644
--- a/app/Models/Category.php
+++ b/app/Models/Category.php
@@ -43,6 +43,6 @@ public function getProgressAttribute()
 
     public function transactions()
     {
-        return $this->hasMany(Transaction::class);
+        return $this->hasMany(Transaction::class)->ordered();
     }
 }
diff --git a/app/Models/Goal.php b/app/Models/Goal.php
index cb6b7cc7..a6ac2212 100644
--- a/app/Models/Goal.php
+++ b/app/Models/Goal.php
@@ -22,7 +22,7 @@ class Goal extends Model
     protected $casts = [
         'amount' => 'float',
         'balance' => 'float',
-        'goal_date' => 'date',
+        'goal_date' => 'date:Y-m-d',
     ];
 
     public function getAchievedAttribute(): bool
diff --git a/app/Models/Transaction.php b/app/Models/Transaction.php
index c868876d..c6acbe63 100644
--- a/app/Models/Transaction.php
+++ b/app/Models/Transaction.php
@@ -25,7 +25,7 @@ class Transaction extends Model
     ];
 
     protected $casts = [
-        'date' => 'datetime',
+        'date' => 'datetime:Y-m-d H:i:s',
         'amount' => 'float',
         'cleared' => 'bool',
         'inflow' => 'bool',
diff --git a/app/Models/User.php b/app/Models/User.php
index fc3d2408..272320de 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -53,6 +53,6 @@ public function goals()
 
     public function transactions()
     {
-        return $this->hasMany(Transaction::class);
+        return $this->hasMany(Transaction::class)->ordered();
     }
 }
diff --git a/database/migrations/2020_01_18_195913_create_budgets_table.php b/database/migrations/2020_01_18_195913_create_budgets_table.php
index c9dea043..1324ae0d 100644
--- a/database/migrations/2020_01_18_195913_create_budgets_table.php
+++ b/database/migrations/2020_01_18_195913_create_budgets_table.php
@@ -13,9 +13,9 @@ public function up()
             $table->integer('month');
             $table->bigInteger('category_id')->unsigned()->nullable();
             $table->bigInteger('user_id')->unsigned()->nullable();
-            $table->decimal('budgeted', 12, 3);
-            $table->decimal('spent', 12, 3);
-            $table->decimal('balance', 12, 3);
+            $table->decimal('budgeted', 12, 3)->default(0);
+            $table->decimal('spent', 12, 3)->default(0);
+            $table->decimal('balance', 12, 3)->default(0);
             $table->timestamps();
 
             $table->foreign('category_id')
diff --git a/docker-compose.yml b/docker-compose.yml
index 49850e24..9265080b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,58 +1,62 @@
 # For more information: https://laravel.com/docs/sail
 services:
-    laravel.test:
-        build:
-            context: ./vendor/laravel/sail/runtimes/8.4
-            dockerfile: Dockerfile
-            args:
-                WWWGROUP: '${WWWGROUP}'
-        image: sail-8.4/app
-        extra_hosts:
-            - 'host.docker.internal:host-gateway'
-        ports:
-            - '${APP_PORT:-80}:80'
-            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
-        environment:
-            WWWUSER: '${WWWUSER}'
-            LARAVEL_SAIL: 1
-            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
-            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
-        volumes:
-            - '.:/var/www/html'
-        networks:
-            - sail
-        depends_on:
-            - mysql
-            - selenium
-    mysql:
-        image: 'mysql/mysql-server:8.0'
-        ports:
-            - '${FORWARD_DB_PORT:-3306}:3306'
-        environment:
-            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
-            MYSQL_ROOT_HOST: "%"
-            MYSQL_DATABASE: '${DB_DATABASE}'
-            MYSQL_USER: '${DB_USERNAME}'
-            MYSQL_PASSWORD: '${DB_PASSWORD}'
-            MYSQL_ALLOW_EMPTY_PASSWORD: 1
-            MYSQL_EXTRA_OPTIONS: '${MYSQL_EXTRA_OPTIONS}'
-        volumes:
-            - 'sail-mysql:/var/lib/mysql'
-        networks:
-            - sail
-        healthcheck:
-            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
-            retries: 3
-            timeout: 5s
-    selenium:
-        image: 'selenium/standalone-chrome'
-        volumes:
-            - '/dev/shm:/dev/shm'
-        networks:
-            - sail
+  laravel:
+    build:
+      context: ./vendor/laravel/sail/runtimes/8.4
+      dockerfile: Dockerfile
+      args:
+        WWWGROUP: '${WWWGROUP}'
+    image: sail-8.4/app
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    ports:
+      - '${APP_PORT:-80}:80'
+      - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
+    environment:
+      WWWUSER: '${WWWUSER}'
+      LARAVEL_SAIL: 1
+      XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
+      XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
+      IGNITION_LOCAL_SITES_PATH: '${PWD}'
+    volumes:
+      - '.:/var/www/html'
+    networks:
+      - sail
+    depends_on:
+      - mysql
+      - selenium
+  mysql:
+    image: 'mysql/mysql-server:8.0'
+    ports:
+      - '${FORWARD_DB_PORT:-3306}:3306'
+    environment:
+      MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
+      MYSQL_ROOT_HOST: '%'
+      MYSQL_DATABASE: '${DB_DATABASE}'
+      MYSQL_USER: '${DB_USERNAME}'
+      MYSQL_PASSWORD: '${DB_PASSWORD}'
+      MYSQL_ALLOW_EMPTY_PASSWORD: 1
+      MYSQL_EXTRA_OPTIONS: '${MYSQL_EXTRA_OPTIONS}'
+    volumes:
+      - 'sail-mysql:/var/lib/mysql'
+      # - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
+    networks:
+      - sail
+    healthcheck:
+      test: ['CMD', 'mysqladmin', 'ping', '-p${DB_PASSWORD}']
+      retries: 3
+      timeout: 5s
+  selenium:
+    image: 'selenium/standalone-chromium'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    volumes:
+      - '/dev/shm:/dev/shm'
+    networks:
+      - sail
 networks:
-    sail:
-        driver: bridge
+  sail:
+    driver: bridge
 volumes:
-    sail-mysql:
-        driver: local
+  sail-mysql:
+    driver: local
diff --git a/package-lock.json b/package-lock.json
index b6069df2..3ed2a66b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,33 +6,31 @@
         "": {
             "name": "bdgt",
             "devDependencies": {
-                "@fortawesome/fontawesome-svg-core": "^1.3.0",
-                "@fortawesome/free-regular-svg-icons": "^6.7.2",
-                "@fortawesome/free-solid-svg-icons": "^6.7.2",
-                "@fortawesome/vue-fontawesome": "^2.0.10",
+                "@fortawesome/fontawesome-svg-core": "^7.0.0",
+                "@fortawesome/free-regular-svg-icons": "^7.0.0",
+                "@fortawesome/free-solid-svg-icons": "^7.0.0",
+                "@fortawesome/vue-fontawesome": "^3.1.2",
+                "@primevue/themes": "^4.4.0",
                 "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
                 "@tailwindcss/postcss": "^4.1.14",
-                "@vitejs/plugin-vue2": "^2.3.3",
-                "apexcharts": "^4.0",
+                "@vitejs/plugin-vue": "^6.0.1",
+                "apexcharts": "^5.0",
                 "axios": "^1.12",
-                "cross-env": "^7.0",
                 "dayjs": "^1.11",
                 "husky": "^9.0.0",
                 "laravel-vite-plugin": "^2.0.0",
                 "lint-staged": "^16.0.0",
                 "prettier": "3.0.0",
+                "primevue": "^4.4.0",
                 "tailwindcss": "^4.1.14",
-                "v-calendar": "^1.0.8",
+                "v-calendar": "3.0.1",
                 "vite": "^7.0.0",
-                "vue": "^2.7.0",
-                "vue-apexcharts": "^1.7",
-                "vue-cal": "^2.0.0",
-                "vue-clickaway": "^2.2.2",
-                "vue-i18n": "^8.22.1",
-                "vue-loader": "^16.0.0",
-                "vue-slider-component": "^3.2.24",
-                "vue-tables-2": "^2.3.5",
-                "vue-template-compiler": "^2.7.16"
+                "vue": "^3.5.22",
+                "vue-cal": "^5.0.1-rc.30",
+                "vue-i18n": "^11.1.12",
+                "vue-loader": "^17.0.0",
+                "vue-slider-component": "next",
+                "vue3-apexcharts": "^1.8.0"
             }
         },
         "node_modules/@alloc/quick-lru": {
@@ -551,87 +549,110 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "0.3.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz",
-            "integrity": "sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==",
-            "deprecated": "Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/",
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
+            "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
             "dev": true,
-            "hasInstallScript": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6"
             }
         },
         "node_modules/@fortawesome/fontawesome-svg-core": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz",
-            "integrity": "sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==",
-            "deprecated": "Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/",
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
+            "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
             "dev": true,
-            "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "^0.3.0"
+                "@fortawesome/fontawesome-common-types": "7.1.0"
             },
             "engines": {
                 "node": ">=6"
             }
         },
         "node_modules/@fortawesome/free-regular-svg-icons": {
-            "version": "6.7.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
-            "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.1.0.tgz",
+            "integrity": "sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==",
             "dev": true,
             "license": "(CC-BY-4.0 AND MIT)",
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.7.2"
+                "@fortawesome/fontawesome-common-types": "7.1.0"
             },
             "engines": {
                 "node": ">=6"
             }
         },
-        "node_modules/@fortawesome/free-regular-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.7.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
-            "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+        "node_modules/@fortawesome/free-solid-svg-icons": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
+            "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
             "dev": true,
-            "license": "MIT",
+            "license": "(CC-BY-4.0 AND MIT)",
+            "dependencies": {
+                "@fortawesome/fontawesome-common-types": "7.1.0"
+            },
             "engines": {
                 "node": ">=6"
             }
         },
-        "node_modules/@fortawesome/free-solid-svg-icons": {
-            "version": "6.7.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
-            "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+        "node_modules/@fortawesome/vue-fontawesome": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.1.2.tgz",
+            "integrity": "sha512-mhYnBIuuW8OIMHf31kOjaBmyE7BMrwBorhrOHVud6vTTu+7IPQNWB+DWaHoE75v10dRF5s/dFtcrgE7vKSEWwQ==",
             "dev": true,
-            "license": "(CC-BY-4.0 AND MIT)",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7",
+                "vue": ">= 3.0.0 < 4"
+            }
+        },
+        "node_modules/@intlify/core-base": {
+            "version": "11.1.12",
+            "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.12.tgz",
+            "integrity": "sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==",
+            "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.7.2"
+                "@intlify/message-compiler": "11.1.12",
+                "@intlify/shared": "11.1.12"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
             }
         },
-        "node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.7.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
-            "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+        "node_modules/@intlify/message-compiler": {
+            "version": "11.1.12",
+            "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.12.tgz",
+            "integrity": "sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==",
             "dev": true,
             "license": "MIT",
+            "dependencies": {
+                "@intlify/shared": "11.1.12",
+                "source-map-js": "^1.0.2"
+            },
             "engines": {
-                "node": ">=6"
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
             }
         },
-        "node_modules/@fortawesome/vue-fontawesome": {
-            "version": "2.0.10",
-            "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.10.tgz",
-            "integrity": "sha512-OTETSXz+3ygD2OK2/vy82cmUBpuJqeOAg4gfnnv+f2Rir1tDIhQg026Q3NQxznq83ZLz8iNqGG9XJm26inpDeg==",
+        "node_modules/@intlify/shared": {
+            "version": "11.1.12",
+            "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.12.tgz",
+            "integrity": "sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==",
             "dev": true,
             "license": "MIT",
-            "peerDependencies": {
-                "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-                "vue": "~2"
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
             }
         },
         "node_modules/@isaacs/fs-minipass": {
@@ -709,6 +730,113 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
+        "node_modules/@primeuix/styled": {
+            "version": "0.7.3",
+            "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.3.tgz",
+            "integrity": "sha512-qAzefzODuYZRaEh2b2uTJCtaT+qUMAt1WPCZhYgkbLUVQ8qt7hFL5BjTsqqCaiBWZCZtDkGmKhP19SRIL6hAlQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/utils": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=12.11.0"
+            }
+        },
+        "node_modules/@primeuix/styles": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.5.tgz",
+            "integrity": "sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/styled": "^0.7.3"
+            }
+        },
+        "node_modules/@primeuix/themes": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.5.tgz",
+            "integrity": "sha512-n3YkwJrHQaEESc/D/A/iD815sxp8cKnmzscA6a8Tm8YvMtYU32eCahwLLe6h5rywghVwxASWuG36XBgISYOIjQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/styled": "^0.7.3"
+            }
+        },
+        "node_modules/@primeuix/utils": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz",
+            "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.11.0"
+            }
+        },
+        "node_modules/@primevue/core": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.0.tgz",
+            "integrity": "sha512-ZlPupIFdsyP8uaSMl+FlqKR9IJriJm2dzH4bPyTt0E50Y4EQF2eZR2nKrwrCkLQYKHAngiCQey0RTLOEu+4QoA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/styled": "^0.7.3",
+                "@primeuix/utils": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=12.11.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
+        "node_modules/@primevue/icons": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.4.0.tgz",
+            "integrity": "sha512-BDi9dACZIDopfepaRAuAfNwTVN0w+ZZVFu6RsnOQyrJM7FOJc9rs35Ig1MAyyknuINhPjLJ6lzOGGVycFQVb+w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/utils": "^0.6.1",
+                "@primevue/core": "4.4.0"
+            },
+            "engines": {
+                "node": ">=12.11.0"
+            }
+        },
+        "node_modules/@primevue/themes": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.4.0.tgz",
+            "integrity": "sha512-O+NVKXbXKilLppLkitDs8w0UuTLI1y7MT1Ep5orG/ULiRfJ8LL5KNmZFhqQZJBHFSPfGaVmPIbfXQXmuVtQKjw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/styled": "^0.7.3",
+                "@primeuix/themes": "^1.2.5"
+            },
+            "engines": {
+                "node": ">=12.11.0"
+            }
+        },
+        "node_modules/@rolldown/pluginutils": {
+            "version": "1.0.0-beta.29",
+            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
+            "integrity": "sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.52.4",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz",
@@ -1406,6 +1534,13 @@
             "license": "MIT",
             "peer": true
         },
+        "node_modules/@types/lodash": {
+            "version": "4.17.20",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+            "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/node": {
             "version": "24.6.2",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-24.6.2.tgz",
@@ -1417,51 +1552,146 @@
                 "undici-types": "~7.13.0"
             }
         },
-        "node_modules/@vitejs/plugin-vue2": {
-            "version": "2.3.4",
-            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.3.4.tgz",
-            "integrity": "sha512-LgqtRRedJb1KdmgcllwGX0gtlPvOvtR6pITXmqxGwQhBZaAysg0Hd7wvj3sjCsj4+PENWsqS7O+ceYSOgJ+H9g==",
+        "node_modules/@types/resize-observer-browser": {
+            "version": "0.1.11",
+            "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+            "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@vitejs/plugin-vue": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
+            "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==",
             "dev": true,
             "license": "MIT",
+            "dependencies": {
+                "@rolldown/pluginutils": "1.0.0-beta.29"
+            },
             "engines": {
-                "node": "^14.18.0 || >= 16.0.0"
+                "node": "^20.19.0 || >=22.12.0"
             },
             "peerDependencies": {
-                "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
-                "vue": "^2.7.0-0"
+                "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+                "vue": "^3.2.25"
+            }
+        },
+        "node_modules/@vue/compiler-core": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+            "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.28.4",
+                "@vue/shared": "3.5.22",
+                "entities": "^4.5.0",
+                "estree-walker": "^2.0.2",
+                "source-map-js": "^1.2.1"
+            }
+        },
+        "node_modules/@vue/compiler-dom": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+            "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/compiler-core": "3.5.22",
+                "@vue/shared": "3.5.22"
             }
         },
         "node_modules/@vue/compiler-sfc": {
-            "version": "2.7.16",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
-            "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+            "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@babel/parser": "^7.23.5",
-                "postcss": "^8.4.14",
-                "source-map": "^0.6.1"
-            },
-            "optionalDependencies": {
-                "prettier": "^1.18.2 || ^2.0.0"
+                "@babel/parser": "^7.28.4",
+                "@vue/compiler-core": "3.5.22",
+                "@vue/compiler-dom": "3.5.22",
+                "@vue/compiler-ssr": "3.5.22",
+                "@vue/shared": "3.5.22",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.30.19",
+                "postcss": "^8.5.6",
+                "source-map-js": "^1.2.1"
             }
         },
-        "node_modules/@vue/compiler-sfc/node_modules/prettier": {
-            "version": "2.8.8",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-            "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+        "node_modules/@vue/compiler-ssr": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+            "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
             "dev": true,
             "license": "MIT",
-            "optional": true,
-            "bin": {
-                "prettier": "bin-prettier.js"
-            },
-            "engines": {
-                "node": ">=10.13.0"
+            "dependencies": {
+                "@vue/compiler-dom": "3.5.22",
+                "@vue/shared": "3.5.22"
+            }
+        },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.4",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+            "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@vue/reactivity": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+            "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/shared": "3.5.22"
+            }
+        },
+        "node_modules/@vue/runtime-core": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+            "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/reactivity": "3.5.22",
+                "@vue/shared": "3.5.22"
+            }
+        },
+        "node_modules/@vue/runtime-dom": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+            "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/reactivity": "3.5.22",
+                "@vue/runtime-core": "3.5.22",
+                "@vue/shared": "3.5.22",
+                "csstype": "^3.1.3"
+            }
+        },
+        "node_modules/@vue/server-renderer": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+            "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vue/compiler-ssr": "3.5.22",
+                "@vue/shared": "3.5.22"
             },
-            "funding": {
-                "url": "https://github.com/prettier/prettier?sponsor=1"
+            "peerDependencies": {
+                "vue": "3.5.22"
             }
         },
+        "node_modules/@vue/shared": {
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+            "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -1783,11 +2013,11 @@
             }
         },
         "node_modules/apexcharts": {
-            "version": "4.7.0",
-            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.7.0.tgz",
-            "integrity": "sha512-iZSrrBGvVlL+nt2B1NpqfDuBZ9jX61X9I2+XV0hlYXHtTwhwLTHDKGXjNXAgFBDLuvSYCB/rq2nPWVPRv2DrGA==",
+            "version": "5.3.5",
+            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.3.5.tgz",
+            "integrity": "sha512-I04DY/WBZbJgJD2uixeV5EzyiL+J5LgKQXEu8rctqAwyRmKv44aDVeofJoLdTJe3ao4r2KEQfCgtVzXn6pqirg==",
             "dev": true,
-            "license": "MIT",
+            "license": "SEE LICENSE IN LICENSE",
             "dependencies": {
                 "@svgdotjs/svg.draggable.js": "^3.0.4",
                 "@svgdotjs/svg.filter.js": "^3.0.8",
@@ -1797,13 +2027,6 @@
                 "@yr/monotone-cubic-spline": "^1.0.3"
             }
         },
-        "node_modules/array-intersect": {
-            "version": "0.0.1",
-            "resolved": "https://registry.npmjs.org/array-intersect/-/array-intersect-0.0.1.tgz",
-            "integrity": "sha512-n7+bHor4z+uofaUyLmUD9H/yEkDFsIHXQVRcK4xLpHgnpkVQA2lkaMTPNg0T3J0tCEVb6oACxeyTmCtspd+BBA==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1823,20 +2046,6 @@
                 "proxy-from-env": "^1.1.0"
             }
         },
-        "node_modules/babel-helper-vue-jsx-merge-props": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-            "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
-            "dev": true,
-            "license": "MIT"
-        },
-        "node_modules/babel-plugin-add-module-exports": {
-            "version": "0.2.1",
-            "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
-            "integrity": "sha512-3AN/9V/rKuv90NG65m4tTHsI04XrCKsWbztIcW7a8H5iIN7WlvWucRtVV0V/rT4QvtA11n5Vmp20fLwfMWqp6g==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/baseline-browser-mapping": {
             "version": "2.8.12",
             "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.12.tgz",
@@ -1848,16 +2057,6 @@
                 "baseline-browser-mapping": "dist/cli.js"
             }
         },
-        "node_modules/big.js": {
-            "version": "5.2.2",
-            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": "*"
-            }
-        },
         "node_modules/braces": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -2087,52 +2286,6 @@
                 "node": ">=20"
             }
         },
-        "node_modules/core-js": {
-            "version": "3.45.1",
-            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
-            "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
-            "dev": true,
-            "hasInstallScript": true,
-            "license": "MIT",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/core-js"
-            }
-        },
-        "node_modules/cross-env": {
-            "version": "7.0.3",
-            "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-            "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "cross-spawn": "^7.0.1"
-            },
-            "bin": {
-                "cross-env": "src/bin/cross-env.js",
-                "cross-env-shell": "src/bin/cross-env-shell.js"
-            },
-            "engines": {
-                "node": ">=10.14",
-                "npm": ">=6",
-                "yarn": ">=1"
-            }
-        },
-        "node_modules/cross-spawn": {
-            "version": "7.0.6",
-            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "path-key": "^3.1.0",
-                "shebang-command": "^2.0.0",
-                "which": "^2.0.1"
-            },
-            "engines": {
-                "node": ">= 8"
-            }
-        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2170,6 +2323,16 @@
                 "url": "https://opencollective.com/date-fns"
             }
         },
+        "node_modules/date-fns-tz": {
+            "version": "1.3.8",
+            "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+            "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "date-fns": ">=2.0.0"
+            }
+        },
         "node_modules/dayjs": {
             "version": "1.11.18",
             "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
@@ -2177,20 +2340,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/de-indent": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-            "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
-            "dev": true,
-            "license": "MIT"
-        },
-        "node_modules/debounce": {
-            "version": "1.2.1",
-            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2241,16 +2390,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/emojis-list": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 4"
-            }
-        },
         "node_modules/enhanced-resolve": {
             "version": "5.18.3",
             "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -2265,6 +2404,19 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/environment": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
@@ -2439,6 +2591,13 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/eventemitter3": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
@@ -2616,8 +2775,7 @@
             "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
             "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
             "dev": true,
-            "license": "BSD-2-Clause",
-            "peer": true
+            "license": "BSD-2-Clause"
         },
         "node_modules/gopd": {
             "version": "1.2.0",
@@ -2698,16 +2856,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/he": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-            "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-            "dev": true,
-            "license": "MIT",
-            "bin": {
-                "he": "bin/he"
-            }
-        },
         "node_modules/husky": {
             "version": "9.1.7",
             "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -2750,13 +2898,6 @@
                 "node": ">=0.12.0"
             }
         },
-        "node_modules/isexe": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/jest-worker": {
             "version": "27.5.1",
             "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
@@ -2800,13 +2941,6 @@
                 "jiti": "lib/jiti-cli.mjs"
             }
         },
-        "node_modules/js-tokens": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -2823,19 +2957,6 @@
             "license": "MIT",
             "peer": true
         },
-        "node_modules/json5": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-            "dev": true,
-            "license": "MIT",
-            "bin": {
-                "json5": "lib/cli.js"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/laravel-vite-plugin": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-2.0.1.tgz",
@@ -3149,21 +3270,6 @@
                 "node": ">=6.11.5"
             }
         },
-        "node_modules/loader-utils": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-            },
-            "engines": {
-                "node": ">=8.9.0"
-            }
-        },
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3171,13 +3277,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/lodash.clonedeep": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-            "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/log-update": {
             "version": "6.1.0",
             "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
@@ -3198,19 +3297,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/loose-envify": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "js-tokens": "^3.0.0 || ^4.0.0"
-            },
-            "bin": {
-                "loose-envify": "cli.js"
-            }
-        },
         "node_modules/magic-string": {
             "version": "0.30.19",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -3231,13 +3317,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/merge": {
-            "version": "2.1.1",
-            "resolved": "https://registry.npmjs.org/merge/-/merge-2.1.1.tgz",
-            "integrity": "sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/merge-stream": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3383,16 +3462,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/path-key": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/picocolors": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3426,18 +3495,6 @@
                 "node": ">=0.10"
             }
         },
-        "node_modules/popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-            "dev": true,
-            "license": "MIT",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
-            }
-        },
         "node_modules/postcss": {
             "version": "8.5.6",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3517,6 +3574,23 @@
                 "url": "https://github.com/prettier/prettier?sponsor=1"
             }
         },
+        "node_modules/primevue": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.4.0.tgz",
+            "integrity": "sha512-SscTQg1UxFzUCOk058pv9kVjLsC/RSIxltxKGrHIOJzDOaqr9BfxPSxjo/ipecZx1hB10k+jzGApG0iWL84zsg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@primeuix/styled": "^0.7.3",
+                "@primeuix/styles": "^1.2.5",
+                "@primeuix/utils": "^0.6.1",
+                "@primevue/core": "4.4.0",
+                "@primevue/icons": "4.4.0"
+            },
+            "engines": {
+                "node": ">=12.11.0"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3666,29 +3740,6 @@
                 "randombytes": "^2.1.0"
             }
         },
-        "node_modules/shebang-command": {
-            "version": "2.0.0",
-            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "shebang-regex": "^3.0.0"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
-        "node_modules/shebang-regex": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/signal-exit": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -3725,6 +3776,7 @@
             "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
             "dev": true,
             "license": "BSD-3-Clause",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -4018,18 +4070,22 @@
             "license": "MIT"
         },
         "node_modules/v-calendar": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-1.0.8.tgz",
-            "integrity": "sha512-2st0wvSM7oGTOQixVMFHAEPjGBWEJmAhBDE6NYR5MB9Owe1d/pR5+A1OB+/HICXbuiKMjG8KzDpeySnPECddsw==",
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.0.1.tgz",
+            "integrity": "sha512-basXEXcmBsxHyxqjj/82vjgz5vbIMREiiUC2VOVh0pHCDXEF1birPUZD12lk8u3+5R+909WUnxu7bt0DFxCOLw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "date-fns": "^2.6.0",
-                "lodash": "^4.17.15",
-                "popper.js": "^1.14.7"
+                "@types/lodash": "^4.14.165",
+                "@types/resize-observer-browser": "^0.1.7",
+                "date-fns": "^2.16.1",
+                "date-fns-tz": "^1.0.12",
+                "lodash": "^4.17.20",
+                "vue-screen-utils": "^1.0.0-beta.13"
             },
             "peerDependencies": {
-                "vue": "^2.5.18"
+                "@popperjs/core": "^2.0.0",
+                "vue": "^3.2.0"
             }
         },
         "node_modules/vite": {
@@ -4150,159 +4206,118 @@
             }
         },
         "node_modules/vue": {
-            "version": "2.7.16",
-            "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
-            "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
-            "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+            "version": "3.5.22",
+            "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+            "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vue/compiler-sfc": "2.7.16",
-                "csstype": "^3.1.0"
-            }
-        },
-        "node_modules/vue-apexcharts": {
-            "version": "1.7.0",
-            "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.7.0.tgz",
-            "integrity": "sha512-QMpvBllJ1XvFsK4dwcbyxKalVpHfJnoqsNWszY55HJk/Sn7WP1f5YUv4JIzugqu4GTQB6gLcCVwwPDQFtwr0oQ==",
-            "dev": true,
-            "license": "MIT",
+                "@vue/compiler-dom": "3.5.22",
+                "@vue/compiler-sfc": "3.5.22",
+                "@vue/runtime-dom": "3.5.22",
+                "@vue/server-renderer": "3.5.22",
+                "@vue/shared": "3.5.22"
+            },
             "peerDependencies": {
-                "apexcharts": ">=4.0.0",
-                "vue": "^2.5.17"
+                "typescript": "*"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
             }
         },
         "node_modules/vue-cal": {
-            "version": "2.24.8",
-            "resolved": "https://registry.npmjs.org/vue-cal/-/vue-cal-2.24.8.tgz",
-            "integrity": "sha512-n2aSJlzAHhu1OHECysTzi4xKRA4Myc1cMUZF2zABWFfS0QvXOSQjhSfpgnCahmYYbJ7SFIdgi4fqqN+QKspECg==",
-            "dev": true,
-            "license": "MIT"
-        },
-        "node_modules/vue-class-component": {
-            "version": "7.2.6",
-            "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
-            "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+            "version": "5.0.1-rc.30",
+            "resolved": "https://registry.npmjs.org/vue-cal/-/vue-cal-5.0.1-rc.30.tgz",
+            "integrity": "sha512-kbbKftcIMvYubS/dWh66tq0ATKl2MrNprad8o94nBn9+YMZrPv0fEJ/eH59J5CXYB5RwrqMznx7ge8OIgl9xPA==",
             "dev": true,
             "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antoniandre"
+            },
             "peerDependencies": {
-                "vue": "^2.0.0"
+                "vue": "^3.5.0"
             }
         },
-        "node_modules/vue-clickaway": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/vue-clickaway/-/vue-clickaway-2.2.2.tgz",
-            "integrity": "sha512-25SpjXKetL06GLYoLoC8pqAV6Cur9cQ//2g35GRFBV4FgoljbZZjTINR8g2NuVXXDMLSUXaKx5dutgO4PaDE7A==",
+        "node_modules/vue-i18n": {
+            "version": "11.1.12",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz",
+            "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "loose-envify": "^1.2.0"
+                "@intlify/core-base": "11.1.12",
+                "@intlify/shared": "11.1.12",
+                "@vue/devtools-api": "^6.5.0"
+            },
+            "engines": {
+                "node": ">= 16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/kazupon"
             },
             "peerDependencies": {
-                "vue": "^2.0.0"
+                "vue": "^3.0.0"
             }
         },
-        "node_modules/vue-i18n": {
-            "version": "8.28.2",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
-            "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==",
-            "deprecated": "Vue I18n v8.x has reached EOL and is no longer actively maintained. About maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/vue-loader": {
-            "version": "16.8.3",
-            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-            "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+            "version": "17.4.2",
+            "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
+            "integrity": "sha512-yTKOA4R/VN4jqjw4y5HrynFL8AK0Z3/Jt7eOJXEitsm0GMRHDBjCfCiuTiLP7OESvsZYo2pATCWhDqxC5ZrM6w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "chalk": "^4.1.0",
                 "hash-sum": "^2.0.0",
-                "loader-utils": "^2.0.0"
+                "watchpack": "^2.4.0"
             },
             "peerDependencies": {
                 "webpack": "^4.1.0 || ^5.0.0-0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/compiler-sfc": {
+                    "optional": true
+                },
+                "vue": {
+                    "optional": true
+                }
             }
         },
-        "node_modules/vue-pagination-2": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/vue-pagination-2/-/vue-pagination-2-3.1.0.tgz",
-            "integrity": "sha512-gySZMsQq7DQ++tQ3FinQ8jr4n/lwJx1Qo5T5BXwacdYwDui9bH1tmx29Ob1sZ/gq3BTFwfuJasLLKg6BRDxpYg==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "babel-plugin-add-module-exports": "^0.2.1",
-                "merge": "^2.1.1",
-                "vue": ">=2.0.0",
-                "vuex": "^2.0.0"
-            }
-        },
-        "node_modules/vue-property-decorator": {
-            "version": "8.5.1",
-            "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",
-            "integrity": "sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==",
+        "node_modules/vue-screen-utils": {
+            "version": "1.0.0-beta.13",
+            "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+            "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "vue-class-component": "^7.1.0"
-            },
             "peerDependencies": {
-                "vue": "*"
+                "vue": "^3.2.0"
             }
         },
         "node_modules/vue-slider-component": {
-            "version": "3.2.24",
-            "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-3.2.24.tgz",
-            "integrity": "sha512-28hfotAL/CPXPwqHgVFyUwUEV0zweoc2wW0bgraGkoIcRZGlFjk8caYJLE8+Luug5t3b9tJm/NyDXpyIdmcYZg==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "core-js": "^3.6.5",
-                "vue-property-decorator": "^8.0.0"
-            }
-        },
-        "node_modules/vue-tables-2": {
-            "version": "2.3.5",
-            "resolved": "https://registry.npmjs.org/vue-tables-2/-/vue-tables-2-2.3.5.tgz",
-            "integrity": "sha512-Oq1Nrq6EkjEbSTEvqTKPFInrTrav34KBZARNDFtvu8nDItw9D+S/y/lTbmNapPiNxaGuXPYef10lqOJp02hONg==",
+            "version": "4.1.0-beta.7",
+            "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+            "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA==",
             "dev": true,
-            "license": "GPLv3",
-            "dependencies": {
-                "array-intersect": "^0.0.1",
-                "babel-helper-vue-jsx-merge-props": "^2.0.3",
-                "debounce": "^1.1",
-                "lodash.clonedeep": "^4.5.0",
-                "merge": "^2.1.1",
-                "vue": "^2.6.10",
-                "vue-pagination-2": "^3.0"
-            }
+            "license": "MIT"
         },
-        "node_modules/vue-template-compiler": {
-            "version": "2.7.16",
-            "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
-            "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
+        "node_modules/vue3-apexcharts": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.8.0.tgz",
+            "integrity": "sha512-5tSD4mXTBbIJ9ir+58qHE6oNtIe0RNgqIRYMKpcsIaxkKtwUww4JhvPkpUFlmiW4OJbbdklgjleXq1lfcM4gdA==",
             "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "de-indent": "^1.0.2",
-                "he": "^1.2.0"
+            "peerDependencies": {
+                "apexcharts": ">=4.0.0",
+                "vue": ">=3.0.0"
             }
         },
-        "node_modules/vuex": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/vuex/-/vuex-2.5.0.tgz",
-            "integrity": "sha512-5oJPOJySBgSgSzoeO+gZB/BbN/XsapgIF6tz34UwJqnGZMQurzIO3B4KIBf862gfc9ya+oduY5sSkq+5/oOilQ==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/watchpack": {
             "version": "2.4.4",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
             "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "glob-to-regexp": "^0.4.1",
                 "graceful-fs": "^4.1.2"
@@ -4372,22 +4387,6 @@
                 "node": ">=10.13.0"
             }
         },
-        "node_modules/which": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-            "dev": true,
-            "license": "ISC",
-            "dependencies": {
-                "isexe": "^2.0.0"
-            },
-            "bin": {
-                "node-which": "bin/node-which"
-            },
-            "engines": {
-                "node": ">= 8"
-            }
-        },
         "node_modules/wrap-ansi": {
             "version": "9.0.2",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
diff --git a/package.json b/package.json
index cbdbefc8..2bc05b5a 100644
--- a/package.json
+++ b/package.json
@@ -20,32 +20,30 @@
         "**/*.{js,vue}": "prettier --write --ignore-unknown"
     },
     "devDependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.3.0",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
-        "@fortawesome/free-solid-svg-icons": "^6.7.2",
-        "@fortawesome/vue-fontawesome": "^2.0.10",
+        "@fortawesome/fontawesome-svg-core": "^7.0.0",
+        "@fortawesome/free-regular-svg-icons": "^7.0.0",
+        "@fortawesome/free-solid-svg-icons": "^7.0.0",
+        "@fortawesome/vue-fontawesome": "^3.1.2",
+        "@primevue/themes": "^4.4.0",
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "@tailwindcss/postcss": "^4.1.14",
-        "@vitejs/plugin-vue2": "^2.3.3",
-        "apexcharts": "^4.0",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "apexcharts": "^5.0",
         "axios": "^1.12",
-        "cross-env": "^7.0",
         "dayjs": "^1.11",
         "husky": "^9.0.0",
         "laravel-vite-plugin": "^2.0.0",
         "lint-staged": "^16.0.0",
         "prettier": "3.0.0",
+        "primevue": "^4.4.0",
         "tailwindcss": "^4.1.14",
-        "v-calendar": "^1.0.8",
+        "v-calendar": "3.0.1",
         "vite": "^7.0.0",
-        "vue": "^2.7.0",
-        "vue-apexcharts": "^1.7",
-        "vue-cal": "^2.0.0",
-        "vue-clickaway": "^2.2.2",
-        "vue-i18n": "^8.22.1",
-        "vue-loader": "^16.0.0",
-        "vue-slider-component": "^3.2.24",
-        "vue-tables-2": "^2.3.5",
-        "vue-template-compiler": "^2.7.16"
+        "vue": "^3.5.22",
+        "vue-cal": "^5.0.1-rc.30",
+        "vue-i18n": "^11.1.12",
+        "vue-loader": "^17.0.0",
+        "vue-slider-component": "next",
+        "vue3-apexcharts": "^1.8.0"
     }
 }
\ No newline at end of file
diff --git a/resources/css/components/_button.css b/resources/css/components/_button.css
index 5def2f85..1413d27d 100644
--- a/resources/css/components/_button.css
+++ b/resources/css/components/_button.css
@@ -1,5 +1,6 @@
 .button {
     @apply bg-gray-300;
+    @apply cursor-pointer;
     @apply inline-block;
     @apply px-4;
     @apply py-2;
diff --git a/resources/css/components/_calendar.css b/resources/css/components/_calendar.css
index 61bc4052..e6068c97 100644
--- a/resources/css/components/_calendar.css
+++ b/resources/css/components/_calendar.css
@@ -1,22 +1,41 @@
-.vuecal--events-on-month-view {
-    .vuecal__menu {
-        .active {
-            @apply border-blue-600;
-            @apply border-b-3;
-            @apply text-blue-600;
-        }
+.vuecal__menu {
+    .active {
+        @apply border-blue-600;
+        @apply border-b-3;
+        @apply text-blue-600;
     }
+}
+
+.vuecal__title-bar {
+    @apply bg-blue-800!;
+    @apply text-white;
 
-    .vuecal__title-bar {
-        @apply bg-blue-800!;
-        @apply text-white;
+    .vuecal__title small {
+        @apply hidden!;
     }
+}
+
+.vuecal__event {
+    @apply bg-transparent!;
+    @apply rounded-xs;
+}
 
+.vuecal__event-title {
+    @apply px-1;
+    @apply py-0.5;
+    @apply rounded-sm;
+}
+
+.vuecal--month-view {
     .vuecal__cell-content {
         @apply h-full;
     }
 
-    .vuecal__event {
-        @apply rounded-xs;
+    .vuecal__cell-events {
+        @apply p-0!;
+    }
+
+    .vuecal__event-details {
+        @apply block!;
     }
 }
diff --git a/resources/css/components/_table.css b/resources/css/components/_table.css
index b39cbbfe..2be98967 100644
--- a/resources/css/components/_table.css
+++ b/resources/css/components/_table.css
@@ -1,107 +1,80 @@
-.VueTables {
-    @apply flex;
-    @apply flex-col;
+.p-datatable {
+    @apply w-full;
+}
 
-    .table {
-        @apply w-full;
+.p-datatable {
+    .p-datatable-thead th {
+        @apply px-3;
+        @apply py-4;
+        @apply text-left;
+        @apply text-sm;
+        @apply font-semibold;
+        @apply bg-white;
+    }
 
-        thead th {
-            @apply cursor-pointer;
+    .p-datatable-tbody tr {
+        td {
+            @apply border-t;
+            @apply border-gray-200;
             @apply px-3;
             @apply py-4;
-            @apply text-left;
-            @apply text-sm;
         }
 
-        tbody tr {
-            @apply rounded-sm;
-
-            td {
-                @apply border-t;
-                @apply border-gray-300;
-                @apply px-3;
-                @apply py-4;
-            }
+        &:hover {
+            @apply bg-gray-100;
         }
     }
-
-    .table-responsive {
-        @apply overflow-x-auto;
-    }
-
-    &__heading {
-        @apply text-gray-800;
-    }
 }
 
-.VueTables__search {
-    @apply flex;
-    @apply flex-col;
-    @apply font-light;
-    @apply items-end;
-    @apply mb-8;
+.p-paginator {
+    @apply mt-4;
+    @apply py-2;
 
-    label {
-        @apply mr-4;
+    .p-paginator-content-start,
+    .p-paginator-content-end {
+        @apply flex;
+        @apply items-center;
+        @apply gap-2;
     }
-}
 
-.VueTables__sortable {
-    @apply relative;
-
-    .VueTables__sort-icon {
-        @apply text-gray-400;
+    .p-button {
+        @apply min-w-0;
+        @apply text-blue-700;
 
-        .fa-sort-down, .fa-sort-up {
-            @apply text-gray-900;
+        &.p-disabled {
+            @apply text-gray-400;
+            @apply cursor-not-allowed;
         }
-    }
-}
-
-.VueTables__limit-field {
-    @apply font-light;
-
-    label {
-        @apply mr-4;
-    }
-
-    select {
-        @apply appearance-none;
-        @apply bg-white;
-    }
-}
-
-.VuePagination__count {
-    @apply font-light;
-}
-
-.VueTables__no-results {
-    @apply font-light;
-    @apply text-sm;
-}
 
-.VuePagination {
-    @apply mt-4;
-
-    a {
-        /* @apply link; */
-
-        &.active {
+        &.p-active {
             @apply font-semibold;
             @apply text-blue-900;
+            @apply bg-blue-100;
+        }
+
+        &:hover:not(.p-disabled) {
+            @apply bg-gray-100;
         }
     }
+}
 
-    li {
-        @apply mx-1;
+.p-inputtext {
+    @apply px-3;
+    @apply py-2;
+    @apply pl-10!;
+    @apply border;
+    @apply border-gray-300;
+    @apply rounded;
+    @apply w-64;
 
-        @apply lg:mx-2;
+    &::placeholder {
+        @apply text-gray-400;
     }
 
-    ul {
-        @apply flex;
-        @apply items-center;
-        @apply justify-center;
-        @apply mb-6;
+    &:focus {
+        @apply outline-none;
+        @apply border-blue-500;
+        @apply ring-2;
+        @apply ring-blue-200;
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 723176db..b59cb223 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,22 +1,27 @@
 import './bootstrap'
-import Vue from 'vue/dist/vue'
+import { createApp } from 'vue'
+
+const app = createApp({})
 
 /**
  * Vue Internationalization/Translations
  */
+// Generate this file using `npm run i18n`
 import languageBundle from './i18n'
-import VueI18n from 'vue-i18n'
-Vue.use(VueI18n)
+import { createI18n } from 'vue-i18n'
 
-const i18n = new VueI18n({
+const i18n = createI18n({
+  legacy: false,
   locale: window.Locale,
   messages: languageBundle,
 })
 
+app.use(i18n)
+
 /**
  * Font Awesome
  */
-import { library, config, dom } from '@fortawesome/fontawesome-svg-core'
+import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCaretDown,
   faCaretUp,
@@ -28,6 +33,7 @@ import {
   faDollarSign,
   faPencilAlt,
   faPlus,
+  faSearch,
   faSort,
   faSortDown,
   faSortUp,
@@ -47,6 +53,7 @@ library.add(
   faDollarSign,
   faPencilAlt,
   faPlus,
+  faSearch,
   faSort,
   faSortDown,
   faSortUp,
@@ -58,33 +65,23 @@ library.add(
   faFlag
 )
 
-/**
- * Ensure vue-tables-2 sorting icons can be replaced with font-awesome chevrons
- */
-config.autoReplaceSvg = 'nest'
-dom.watch()
-
-Vue.component('font-awesome-icon', FontAwesomeIcon)
-Vue.component('font-awesome-layers', FontAwesomeLayers)
+app.component('font-awesome-icon', FontAwesomeIcon)
+app.component('font-awesome-layers', FontAwesomeLayers)
 
 /**
- * Vue-Tables-2
+ * DataTables
  */
-import { ClientTable } from 'vue-tables-2'
-import TailwindTheme from './themes/vue-tables-tailwind-theme'
-Vue.use(
-  ClientTable,
-  {
-    sortIcon: {
-      is: 'fa-sort',
-      base: 'fas',
-      up: 'fa-sort-up',
-      down: 'fa-sort-down',
+import PrimeVue from 'primevue/config'
+import Lara from '@primevue/themes/lara'
+
+app.use(PrimeVue, {
+  theme: {
+    preset: Lara,
+    options: {
+      darkModeSelector: '.dark-mode',
     },
   },
-  false,
-  TailwindTheme
-)
+})
 
 /**
  * The following block of code may be used to automatically register your
@@ -94,10 +91,7 @@ Vue.use(
  * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
 
-const files = import.meta.glob('./**/*.vue')
-Object.keys(files).map((key) => Vue.component(key.split('/').pop().split('.')[0], files[key]))
+const files = Object.entries(import.meta.glob('./**/*.vue', { eager: true }))
+files.forEach(([path, module]) => app.component(path.split('/').pop().split('.')[0], module.default))
 
-const app = new Vue({
-  el: '#app',
-  i18n,
-})
+app.mount('#app')
diff --git a/resources/js/components/BillCalendar.vue b/resources/js/components/BillCalendar.vue
index 877867df..0ada3628 100644
--- a/resources/js/components/BillCalendar.vue
+++ b/resources/js/components/BillCalendar.vue
@@ -1,17 +1,15 @@
 <template>
   <vue-cal
     :events="events"
-    :disable-views="['years', 'year', 'day']"
+    :events-on-month-view="true"
+    :views="['week', 'month']"
     :time="false"
-    default-view="month"
-    events-on-month-view="short"
-    @ready="fetchEvents($event.startDate, $event.endDate)"
-    @view-change="fetchEvents($event.startDate, $event.endDate)"
+    view="month"
+    @ready="({ view }) => fetchEvents(view.start, view.end)"
+    @view-change="(view) => fetchEvents(view.start, view.end)"
   >
-    <div slot="no-event" />
-
     <template #title="{ title }">
-      <h2 class="text-xl">{{ title }}</h2>
+      <h2 class="text-xl" v-html="title" />
     </template>
 
     <template #event="{ event }">
@@ -31,8 +29,8 @@
 <script>
 import axios from 'axios'
 import dayjs from 'dayjs'
-import VueCal from 'vue-cal'
-import 'vue-cal/dist/vuecal.css'
+import { VueCal } from 'vue-cal'
+import 'vue-cal/style'
 
 export default {
   components: { VueCal },
diff --git a/resources/js/components/Budget.vue b/resources/js/components/Budget.vue
index 5e396077..bf3d65f4 100644
--- a/resources/js/components/Budget.vue
+++ b/resources/js/components/Budget.vue
@@ -21,84 +21,88 @@
       <budget-category-table
         v-if="!screenXS"
         :budgets="previousBudgets"
+        :setBudgeted="setBudgeted"
         :showCategories="!screenXS"
         :label="previousDate.format('MMMM')"
       />
 
-      <budget-category-table :budgets="budgets" :showCategories="screenXS" :label="month" />
+      <budget-category-table :budgets="budgets" :setBudgeted="setBudgeted" :showCategories="screenXS" :label="month" />
 
-      <budget-category-table v-if="screenLG" :budgets="nextBudgets" :label="nextDate.format('MMMM')" />
+      <budget-category-table
+        v-if="screenLG"
+        :budgets="nextBudgets"
+        :setBudgeted="setBudgeted"
+        :label="nextDate.format('MMMM')"
+      />
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 import axios from 'axios'
 import dayjs from 'dayjs'
-import Debounce from '../mixins/debounce'
+import { useDebounce } from '../composables/useDebounce'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 
-export default {
-  mixins: [Debounce],
+const { debounce } = useDebounce()
+const date = ref(dayjs())
+const previousBudgets = ref([])
+const budgets = ref([])
+const nextBudgets = ref([])
+const windowWidth = ref(window.innerWidth)
 
-  data() {
-    return {
-      date: dayjs(),
-      previousBudgets: [],
-      budgets: [],
-      nextBudgets: [],
-      windowWidth: window.innerWidth,
-    }
-  },
+const previousDate = computed(() => {
+  return date.value.subtract(1, 'month')
+})
 
-  computed: {
-    previousDate() {
-      return this.date.subtract(1, 'month')
-    },
-    month() {
-      return this.date.format('MMMM')
-    },
-    year() {
-      return this.date.format('YYYY')
-    },
-    nextDate() {
-      return this.date.add(1, 'month')
-    },
-    screenXS() {
-      return this.windowWidth < 640
-    },
-    screenLG() {
-      return this.windowWidth >= 1024
-    },
-  },
+const month = computed(() => {
+  return date.value.format('MMMM')
+})
+const year = computed(() => {
+  return date.value.format('YYYY')
+})
+const nextDate = computed(() => {
+  return date.value.add(1, 'month')
+})
+const screenXS = computed(() => {
+  return windowWidth.value < 640
+})
+const screenLG = computed(() => {
+  return windowWidth.value >= 1024
+})
 
-  methods: {
-    async fetchBudgets(delay = 700) {
-      this.debounce(async () => {
-        this.budgets = (await axios.get(`/api/budget/${this.year}/${this.date.format('MM')}`)).data.data
+const fetchBudgets = async (delay = 700) => {
+  debounce(async () => {
+    budgets.value = (await axios.get(`/api/budget/${year.value}/${date.value.format('MM')}`)).data.data
 
-        if (!this.screenXS) {
-          this.previousBudgets = (
-            await axios.get(`/api/budget/${this.previousDate.year()}/${this.previousDate.format('MM')}`)
-          ).data.data
-        }
-        if (this.screenLG) {
-          this.nextBudgets = (
-            await axios.get(`/api/budget/${this.nextDate.year()}/${this.nextDate.format('MM')}`)
-          ).data.data
-        }
-      }, delay)
-    },
-    async setBudgeted(category, amount) {
-      const idx = this.budgets.findIndex((budget) => budget.category_id === category)
+    if (!screenXS.value) {
+      previousBudgets.value = (
+        await axios.get(`/api/budget/${previousDate.value.year()}/${previousDate.value.format('MM')}`)
+      ).data.data
+    }
+    if (screenLG.value) {
+      nextBudgets.value = (
+        await axios.get(`/api/budget/${nextDate.value.year()}/${nextDate.value.format('MM')}`)
+      ).data.data
+    }
+  }, delay)
+}
 
-      const response = await axios.post(
-        `/api/budget/${this.year}/${this.date.format('MM')}/${category}`,
-        Object.assign({}, this.budgets[idx], {
+const setBudgeted = async (category, amount, budgetDate) => {
+  const budgetMonth = dayjs(budgetDate).month()
+  let idx, response
+  switch (budgetMonth) {
+    case previousDate.value.month():
+      updateAndReplaceBudget(previousBudgets)
+      idx = previousBudgets.value.findIndex((budget) => budget.category_id === category)
+      response = await axios.post(
+        `/api/budget/${year.value}/${budgetMonth}/${category}`,
+        Object.assign({}, previousBudgets.value[idx], {
           budgeted: amount,
         })
       )
 
-      this.budgets = this.budgets.map((budget) => {
+      previousBudgets.value = previousBudgets.value.map((budget) => {
         return budget.category_id === category
           ? Object.assign({}, budget, {
               budgeted: response.data.data.budgeted,
@@ -107,32 +111,65 @@ export default {
             })
           : budget
       })
-    },
-    goForward() {
-      this.date = this.date.add(1, 'month')
-      this.fetchBudgets()
-    },
-    goBack() {
-      this.date = this.date.subtract(1, 'month')
-      this.fetchBudgets()
-    },
-    onResize() {
-      this.windowWidth = window.innerWidth
-    },
-  },
-
-  async created() {
-    this.fetchBudgets(0)
-  },
+      break
+    case date.value.month():
+      idx = budgets.value.findIndex((budget) => budget.category_id === category)
+      response = await axios.post(
+        `/api/budget/${year.value}/${budgetMonth}/${category}`,
+        Object.assign({}, budgets.value[idx], {
+          budgeted: amount,
+        })
+      )
 
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize)
-    })
-  },
+      budgets.value = budgets.value.map((budget) => {
+        return budget.category_id === category
+          ? Object.assign({}, budget, {
+              budgeted: response.data.data.budgeted,
+              spent: response.data.data.spent,
+              balance: response.data.data.balance,
+            })
+          : budget
+      })
+      break
+    case nextDate.value.month():
+      idx = nextBudgets.value.findIndex((budget) => budget.category_id === category)
+      response = await axios.post(
+        `/api/budget/${year.value}/${budgetMonth}/${category}`,
+        Object.assign({}, nextBudgets.value[idx], {
+          budgeted: amount,
+        })
+      )
 
-  beforeDestroy() {
-    window.removeEventListener('resize', this.onResize)
-  },
+      nextBudgets.value = nextBudgets.value.map((budget) => {
+        return budget.category_id === category
+          ? Object.assign({}, budget, {
+              budgeted: response.data.data.budgeted,
+              spent: response.data.data.spent,
+              balance: response.data.data.balance,
+            })
+          : budget
+      })
+      break
+  }
+}
+const goForward = () => {
+  date.value = date.value.add(1, 'month')
+  fetchBudgets()
 }
+const goBack = () => {
+  date.value = date.value.subtract(1, 'month')
+  fetchBudgets()
+}
+const onResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => {
+  fetchBudgets(0)
+  window.addEventListener('resize', onResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+})
 </script>
diff --git a/resources/js/components/BudgetCategoryTable.vue b/resources/js/components/BudgetCategoryTable.vue
index f19139f3..7c0e1906 100644
--- a/resources/js/components/BudgetCategoryTable.vue
+++ b/resources/js/components/BudgetCategoryTable.vue
@@ -30,7 +30,7 @@
               min="0"
               max="99999"
               :value="budget.budgeted || 0"
-              @change="setBudgeted(budget.category_id, $event.target.value)"
+              @change="setBudgeted(budget.category_id, $event.target.value, budget.date)"
             />
           </div>
         </td>
@@ -54,8 +54,6 @@
 </template>
 
 <script>
-import axios from 'axios'
-
 export default {
   props: {
     budgets: {
@@ -66,32 +64,12 @@ export default {
       type: String,
       default: '',
     },
+    setBudgeted: {
+      type: Function,
+    },
     showCategories: {
       type: Boolean,
     },
   },
-
-  methods: {
-    async setBudgeted(category, amount) {
-      const idx = this.budgets.findIndex((budget) => budget.category_id === category)
-
-      const response = await axios.post(
-        `/api/budget/${this.year}/${this.date.format('MM')}/${category}`,
-        Object.assign({}, this.budgets[idx], {
-          budgeted: amount,
-        })
-      )
-
-      this.budgets = this.budgets.map((budget) => {
-        return budget.category_id === category
-          ? Object.assign({}, budget, {
-              budgeted: response.data.data.budgeted,
-              spent: response.data.data.spent,
-              balance: response.data.data.balance,
-            })
-          : budget
-      })
-    },
-  },
 }
 </script>
diff --git a/resources/js/components/TransactionsTable.vue b/resources/js/components/TransactionsTable.vue
index c7567350..a4c2dcb4 100644
--- a/resources/js/components/TransactionsTable.vue
+++ b/resources/js/components/TransactionsTable.vue
@@ -1,116 +1,143 @@
 <template>
-  <v-client-table
-    :data="transactions"
-    :columns="tableHeaders"
-    :options="{
-      headings: {
-        flair: '',
-        actions: '',
-      },
-      perPage: 25,
-      texts: {
-        filter: 'Search:',
-        filterPlaceholder: '',
-        limit: 'Showing:',
-      },
-      sortable: ['date', 'account', 'category', 'payee', 'amount', 'cleared'],
-      customSorting: {
-        amount: function (ascending) {
-          return function (a, b) {
-            var aAmount = a.inflow ? a.amount : -a.amount
-            var bAmount = b.inflow ? b.amount : -b.amount
-            if (ascending) {
-              return aAmount >= bAmount ? 1 : -1
-            }
-            return aAmount <= bAmount ? 1 : -1
-          }
-        },
-      },
-    }"
+  <DataTable
+    :value="transactions"
+    :paginator="true"
+    :rows="25"
+    :rowsPerPageOptions="[10, 25, 50, 100]"
+    sortMode="multiple"
+    removableSort
+    filterDisplay="row"
+    :globalFilterFields="['date', 'account.name', 'category.label', 'payee', 'outflow', 'inflow']"
+    tableStyle="width: 100%"
+    v-model:filters="filters"
   >
-    <template #flair="{ row }">
-      <font-awesome-icon :icon="['far', 'flag']" :style="{ color: row.flair }" />
+    <template #header>
+      <div class="flex justify-between items-baseline" :class="{ 'justify-end': !title }">
+        <h3 v-if="!!title" class="font-light text-2xl mb-6">{{ title }}</h3>
+        <span class="relative">
+          <font-awesome-icon icon="search" class="absolute left-3 top-4 text-gray-400" />
+          <InputText v-model="filters['global'].value" placeholder="Search" class="pl-10" />
+        </span>
+      </div>
     </template>
 
-    <template #date="{ row }">
-      <span>{{ formatDate(row.date) }}</span>
-    </template>
+    <Column v-if="tableHeaders.includes('flair')" field="flair" header="" :sortable="false" style="width: 3rem">
+      <template #body="{ data }">
+        <font-awesome-icon :icon="['far', 'flag']" :style="{ color: data.flair }" />
+      </template>
+    </Column>
 
-    <template #account="{ row }">
-      <span>{{ row.account ? row.account.name : '' }}</span>
-    </template>
+    <Column v-if="tableHeaders.includes('date')" field="date" header="Date" sortable dataType="date">
+      <template #body="{ data }">
+        {{ formatDate(data.date) }}
+      </template>
+    </Column>
 
-    <template #category="{ row }">
-      <span>{{ row.category ? row.category.label : '' }}</span>
-    </template>
+    <Column v-if="tableHeaders.includes('account')" field="account.name" header="Account" sortable>
+      <template #body="{ data }">
+        {{ data.account ? data.account.name : '' }}
+      </template>
+    </Column>
 
-    <template #amount="{ row }">
-      <formatter-currency :amount="row.amount" :negative="!row.inflow" />
-    </template>
+    <Column v-if="tableHeaders.includes('category')" field="category.label" header="Category" sortable>
+      <template #body="{ data }">
+        {{ data.category ? data.category.label : '' }}
+      </template>
+    </Column>
 
-    <template #cleared="{ row }">
-      <font-awesome-icon icon="check" :class="row.cleared ? 'text-black' : 'text-gray-300'" />
-    </template>
+    <Column v-if="tableHeaders.includes('payee')" field="payee" header="Payee" sortable />
 
-    <template #actions="{ row }" v-if="showActions">
-      <button
-        aria-label="Edit transaction"
-        class="button button--warning w-8 text-gray-100 p-1"
-        @click="$root.$emit('editTransaction', row.id)"
-        dusk="edit-transaction"
-      >
-        <font-awesome-icon icon="pencil-alt" class="fa-sm" />
-      </button>
-
-      <button
-        aria-label="Delete transaction"
-        class="button button--danger w-8 p-1"
-        @click="$root.$emit('deleteTransaction', row.id)"
-        dusk="delete-transaction"
-      >
-        <font-awesome-icon icon="times" class="fa-sm" />
-      </button>
-    </template>
-  </v-client-table>
+    <Column v-if="tableHeaders.includes('outflow')" field="amount" header="Outflow" sortable dataType="numeric">
+      <template #body="{ data }">
+        <formatter-currency v-if="!data.inflow" :amount="data.amount" />
+      </template>
+    </Column>
+
+    <Column v-if="tableHeaders.includes('inflow')" field="amount" header="Inflow" sortable dataType="numeric">
+      <template #body="{ data }">
+        <formatter-currency v-if="data.inflow" :amount="data.amount" />
+      </template>
+    </Column>
+
+    <Column v-if="tableHeaders.includes('cleared')" field="cleared" header="Cleared" sortable style="width: 5rem">
+      <template #body="{ data }">
+        <font-awesome-icon icon="check" :class="data.cleared ? 'text-black' : 'text-gray-300'" />
+      </template>
+    </Column>
+
+    <Column v-if="showActions" header="" :sortable="false" style="width: 8rem">
+      <template #body="{ data }">
+        <button
+          aria-label="Edit transaction"
+          class="button button--warning w-8 text-gray-100 p-1 mr-2"
+          @click="handleEdit(data.id)"
+          dusk="edit-transaction"
+        >
+          <font-awesome-icon icon="pencil-alt" class="fa-sm" />
+        </button>
+        <button
+          aria-label="Delete transaction"
+          class="button button--danger w-8 p-1"
+          @click="handleDelete(data.id)"
+          dusk="delete-transaction"
+        >
+          <font-awesome-icon icon="times" class="fa-sm" />
+        </button>
+      </template>
+    </Column>
+  </DataTable>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import InputText from 'primevue/inputtext'
+import { FilterMatchMode } from '@primevue/core/api'
 import dayjs from 'dayjs'
+import { useEventBus } from '../composables/useEventBus'
 
-export default {
-  props: {
-    transactions: {
-      type: Array,
-      required: true,
-    },
-    showActions: {
-      type: Boolean,
-    },
-    columns: {
-      type: Array,
-    },
+const props = defineProps({
+  title: {
+    type: String,
   },
-  data() {
-    return {
-      defaultColumns: ['flair', 'date', 'account', 'category', 'payee', 'amount', 'cleared'],
-    }
+  transactions: {
+    type: Array,
+    required: true,
   },
-  computed: {
-    tableHeaders() {
-      let cols = this.defaultColumns
-      if (this.columns) {
-        cols = this.columns
-      }
-      if (this.showActions) {
-        cols.push('actions')
-      }
-      return cols
-    },
+  showActions: {
+    type: Boolean,
   },
-  methods: {
-    formatDate(date) {
-      return dayjs(date).format('MM/DD/YYYY')
-    },
+  columns: {
+    type: Array,
   },
+})
+
+const defaultColumns = ['flair', 'date', 'account', 'category', 'payee', 'outflow', 'inflow', 'cleared']
+
+const tableHeaders = computed(() => {
+  let cols = props.columns || defaultColumns
+  if (props.showActions) {
+    cols = [...cols, 'actions']
+  }
+  return cols
+})
+
+const filters = ref({
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+})
+
+const formatDate = (date) => {
+  return dayjs(date).format('MM/DD/YYYY')
+}
+
+const eventBus = useEventBus()
+
+const handleEdit = (id) => {
+  eventBus.emit('editTransaction', id)
+}
+
+const handleDelete = (id) => {
+  eventBus.emit('deleteTransaction', id)
 }
 </script>
diff --git a/resources/js/components/forms/TransactionForm.vue b/resources/js/components/forms/TransactionForm.vue
index 7db4fed1..8db642be 100644
--- a/resources/js/components/forms/TransactionForm.vue
+++ b/resources/js/components/forms/TransactionForm.vue
@@ -148,115 +148,101 @@
   </modal>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
 import axios from 'axios'
-
-export default {
-  props: {
-    accounts: { type: Array, required: true },
-    bills: { type: Array, required: true },
-    categories: { type: Array, required: true },
-    flairs: { type: Array, required: true },
+import { useEventBus } from '../../composables/useEventBus'
+
+const props = defineProps({
+  accounts: { type: Array, required: true },
+  bills: { type: Array, required: true },
+  categories: { type: Array, required: true },
+  flairs: { type: Array, required: true },
+})
+
+const form = ref(null)
+const id = ref(null)
+const action = ref(null)
+const transaction = ref({})
+
+const formAction = computed(() => {
+  if (editing.value || deleting.value) {
+    return `/api/transactions/${id.value}`
+  }
+  return '/api/transactions/create'
+})
+
+const formMethod = computed(() => {
+  if (editing.value) return 'PUT'
+  if (deleting.value) return 'DELETE'
+  return 'POST'
+})
+
+const creating = computed(() => action.value === 'create')
+const editing = computed(() => action.value === 'edit')
+const deleting = computed(() => action.value === 'delete')
+
+const transactionAmount = computed({
+  get() {
+    return transaction.value
+      ? transaction.value.inflow
+        ? transaction.value.amount
+        : -1 * transaction.value.amount
+      : null
   },
-
-  data() {
-    return {
-      id: null,
-      action: null,
-      transaction: {},
-    }
+  set(value) {
+    transaction.value.amount = transaction.value.inflow ? value : -1 * value
   },
+})
+
+const fetchTransaction = async () => {
+  try {
+    const response = await axios.get(`/api/transactions/${id.value}`)
+    transaction.value = response.data.data
+  } catch (error) {
+    console.log('Error fetching transaction', error)
+  }
+}
 
-  computed: {
-    formAction() {
-      if (this.editing || this.deleting) {
-        return `/api/transactions/${this.id}`
-      }
-
-      return '/api/transactions/create'
-    },
-    formMethod() {
-      if (this.editing) {
-        return 'PUT'
-      }
-      if (this.deleting) {
-        return 'DELETE'
-      }
-
-      return 'POST'
+const save = () => {
+  if (!form.value.checkValidity()) {
+    form.value.reportValidity()
+    return false
+  }
+
+  axios({
+    method: formMethod.value,
+    url: formAction.value,
+    data: {
+      ...transaction.value,
     },
-    creating() {
-      return this.action === 'create'
-    },
-    editing() {
-      return this.action === 'edit'
-    },
-    deleting() {
-      return this.action === 'delete'
-    },
-    transactionAmount: {
-      get() {
-        return this.transaction
-          ? this.transaction.inflow
-            ? this.transaction.amount
-            : -1 * this.transaction.amount
-          : null
-      },
-      set(value) {
-        this.transaction.amount = this.transaction.inflow ? value : -1 * value
-      },
-    },
-  },
+  })
+    .then((response) => {
+      reset()
+      window.location.reload()
+    })
+    .catch((error) => {
+      console.log('Error saving transaction', error)
+    })
+}
 
-  methods: {
-    async fetchTransaction() {
-      await axios
-        .get(`/api/transactions/${this.id}`)
-        .then((response) => {
-          this.transaction = response.data.data
-        })
-        .catch((error) => {
-          console.log('Error fetching transaction', error)
-        })
-    },
-    save() {
-      if (!this.$refs.form.checkValidity()) {
-        this.$refs.form.reportValidity()
+const reset = () => {
+  id.value = null
+  action.value = null
+}
 
-        return false
-      }
+const eventBus = useEventBus()
 
-      axios({
-        method: this.formMethod,
-        url: this.formAction,
-        data: {
-          ...this.transaction,
-        },
-      })
-        .then((response) => {
-          this.reset()
-          window.location.reload()
-        })
-        .catch((error) => {
-          console.log('Error saving transaction', error)
-        })
-    },
-    reset() {
-      this.id = null
-      this.action = null
-    },
-  },
+onMounted(() => {
+  eventBus.on('editTransaction', async (transactionId) => {
+    id.value = transactionId
+    await fetchTransaction()
+    action.value = 'edit'
+  })
 
-  created() {
-    this.$root.$on('editTransaction', async (id) => {
-      this.id = id
-      await this.fetchTransaction()
-      this.action = 'edit'
-    })
-    this.$root.$on('deleteTransaction', (id) => {
-      this.id = id
-      this.action = 'delete'
-    })
-  },
-}
+  eventBus.on('deleteTransaction', (transactionId) => {
+    id.value = transactionId
+    action.value = 'delete'
+  })
+})
 </script>
diff --git a/resources/js/components/interface/FormatterCurrency.vue b/resources/js/components/interface/FormatterCurrency.vue
index 25730da7..2b70cde4 100644
--- a/resources/js/components/interface/FormatterCurrency.vue
+++ b/resources/js/components/interface/FormatterCurrency.vue
@@ -1,25 +1,23 @@
 <script>
+import { h } from 'vue'
 import { formatMoney } from '../../utils'
 
-export default {
-  functional: true,
+function FormatterCurrency(props) {
+  const amount = formatMoney(props.amount, props.currency)
 
-  props: {
-    amount: {},
-    currency: {
-      type: String,
-      default: 'USD',
-    },
-    negative: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  render(h, context) {
-    const amount = formatMoney(context.props.amount, context.props.currency)
+  return h('span', (props.negative && amount.indexOf('-') !== 0 ? '-' : '') + amount)
+}
 
-    return h('span', context.data, (context.props.negative && amount.indexOf('-') !== 0 ? '-' : '') + amount)
+FormatterCurrency.props = {
+  amount: {},
+  currency: {
+    type: String,
+    default: 'USD',
+  },
+  negative: {
+    type: Boolean,
+    default: false,
   },
 }
+export default FormatterCurrency
 </script>
diff --git a/resources/js/components/interface/FormatterDate.vue b/resources/js/components/interface/FormatterDate.vue
index ba4ec230..7446dfab 100644
--- a/resources/js/components/interface/FormatterDate.vue
+++ b/resources/js/components/interface/FormatterDate.vue
@@ -1,36 +1,35 @@
 <script>
+import { h } from 'vue'
 import dayjs from 'dayjs'
 
-export default {
-  functional: true,
+function FormatterDate(props) {
+  function date(value) {
+    return dayjs(value).format('MM/DD/YYYY')
+  }
 
-  props: {
-    diff: Boolean,
-    time: String,
-    unit: String,
-  },
+  function diff(value, unit = 'day') {
+    const days = dayjs(value).diff(dayjs(), unit)
+    const units = Math.abs(days) === 1 ? 'day' : 'days'
 
-  render(h, context) {
-    function date(value) {
-      return dayjs(value).format('MM/DD/YYYY')
+    if (days === 0) {
+      return 'today'
     }
 
-    function diff(value, unit = 'day') {
-      const days = dayjs(value).diff(dayjs(), unit)
-      const units = Math.abs(days) === 1 ? 'day' : 'days'
-
-      if (days === 0) {
-        return 'today'
-      }
+    if (isNaN(days)) {
+      return 'N/A'
+    }
 
-      if (isNaN(days)) {
-        return 'N/A'
-      }
+    return days > 0 ? 'in ' + Math.abs(days) + ' ' + units : Math.abs(days) + ' ' + units + ' ago'
+  }
 
-      return days > 0 ? 'in ' + Math.abs(days) + ' ' + units : Math.abs(days) + ' ' + units + ' ago'
-    }
+  return h('span', props.diff ? diff(props.time, props.unit) : date(props.time))
+}
 
-    return h('span', {}, context.props.diff ? diff(context.props.time, context.props.unit) : date(context.props.time))
-  },
+FormatterDate.props = {
+  diff: Boolean,
+  time: String,
+  unit: String,
 }
+
+export default FormatterDate
 </script>
diff --git a/resources/js/components/interface/InputDatepicker.vue b/resources/js/components/interface/InputDatepicker.vue
index a2c2c054..58ea693e 100644
--- a/resources/js/components/interface/InputDatepicker.vue
+++ b/resources/js/components/interface/InputDatepicker.vue
@@ -1,75 +1,57 @@
 <template>
-  <v-date-picker
-    v-model="date"
-    :is-required="required"
-    :from-date="date"
-    :mode="mode"
-    :popover="{ placement: 'bottom', visibility: 'click' }"
-    dusk="datepicker"
-  >
-    <template v-slot="{ inputProps, inputEvents, hidePopover }">
-      <div class="input-addon--end">
-        <input type="hidden" :name="name" :value="timestamp" />
-        <input
-          type="text"
-          class="input-text pr-10"
-          :required="required"
-          v-bind="inputProps"
-          v-on="inputEvents"
-          @blur="hidePopover"
-        />
-        <span class="input-addon cursor-pointer">
-          <font-awesome-icon :icon="['far', 'calendar']" />
-        </span>
-      </div>
-    </template>
-  </v-date-picker>
+  <div dusk="datepicker">
+    <v-date-picker
+      v-model.string="date"
+      :is-required="required"
+      :masks="mode === 'date' ? { modelValue: 'YYYY-MM-DD' } : { modelValue: 'YYYY-MM-DD HH:mm:ss' }"
+      :mode="mode"
+      :popover="{ placement: 'bottom', visibility: 'click' }"
+    >
+      <template v-slot="{ inputValue, inputEvents, togglePopover }">
+        <div class="input-addon--end">
+          <input
+            type="text"
+            class="input-text pr-10"
+            :name="name"
+            :required="required"
+            :value="inputValue"
+            v-on="inputEvents"
+          />
+          <span class="input-addon cursor-pointer" @click="togglePopover">
+            <font-awesome-icon :icon="['far', 'calendar']" />
+          </span>
+        </div>
+      </template>
+    </v-date-picker>
+  </div>
 </template>
 
 <script>
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
-import dayjs from 'dayjs'
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/style.css'
 
 export default {
   components: { 'v-date-picker': DatePicker },
-
   props: {
     mode: {
       type: String,
-      default: 'single',
+      default: 'date',
     },
-    name: { String },
-    required: { Boolean },
-    value: {},
+    name: String,
+    required: Boolean,
+    modelValue: {},
   },
-
   data() {
     return {
-      mutableValue: this.value || null,
+      date: this.modelValue || null,
     }
   },
-  computed: {
-    date: {
-      get() {
-        if (!this.mutableValue) {
-          return null
-        }
-
-        return new Date(this.mutableValue)
-      },
-      set(value) {
-        this.mutableValue = value
-        this.$emit('input', value)
-      },
-    },
-    timestamp() {
-      return this.date ? dayjs(this.date).format('YYYY-MM-DD') : null
-    },
-  },
-
   watch: {
-    value(value) {
-      this.mutableValue = value
+    date(newValue) {
+      this.$emit('update:modelValue', newValue)
+    },
+    modelValue(newValue) {
+      this.date = newValue
     },
   },
 }
diff --git a/resources/js/components/interface/Modal.vue b/resources/js/components/interface/Modal.vue
index 3ead7737..e1d63069 100644
--- a/resources/js/components/interface/Modal.vue
+++ b/resources/js/components/interface/Modal.vue
@@ -17,16 +17,13 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    value: Boolean,
-  },
+<script setup>
+const props = defineProps({
+  value: Boolean,
+})
 
-  methods: {
-    hide() {
-      this.$emit('input', false)
-    },
-  },
+const emit = defineEmits(['input'])
+const hide = () => {
+  emit('input', false)
 }
 </script>
diff --git a/resources/js/components/interface/ProgressBar.vue b/resources/js/components/interface/ProgressBar.vue
index 4ef8336c..28ee7c12 100644
--- a/resources/js/components/interface/ProgressBar.vue
+++ b/resources/js/components/interface/ProgressBar.vue
@@ -1,23 +1,23 @@
-<template functional>
+<template>
   <div class="bg-gray-200 border border-gray-400 rounded-xs">
     <div
       class="text-center text-sm px-2 py-1"
       :class="{
-        'text-white': props.progress > 0,
-        'bg-green-500': props.progress > 0 && props.achieved,
-        'bg-orange-400': props.progress > 0 && props.balance > 0,
-        'bg-red-500': props.progress > 0 && !props.achieved && !props.balance,
+        'text-white': progress > 0,
+        'bg-green-500': progress > 0 && achieved,
+        'bg-orange-400': progress > 0 && balance > 0,
+        'bg-red-500': progress > 0 && !achieved && !balance,
       }"
       role="progressbar"
-      :aria-valuenow="props.progress"
+      :aria-valuenow="progress"
       aria-valuemin="0"
       aria-valuemax="100"
       :style="{
-        width: Math.min(Math.max(parseInt(props.progress), 0), 100) + '%',
+        width: Math.min(Math.max(parseInt(progress), 0), 100) + '%',
         minWidth: '1%',
       }"
     >
-      {{ props.progress }}%
+      {{ progress }}%
     </div>
   </div>
 </template>
diff --git a/resources/js/components/reports/ReportManager.vue b/resources/js/components/reports/ReportManager.vue
index 1795d69c..2e725b0a 100644
--- a/resources/js/components/reports/ReportManager.vue
+++ b/resources/js/components/reports/ReportManager.vue
@@ -1,5 +1,5 @@
-<template functional>
-  <component :is="props.type" :url="props.url" />
+<template>
+  <component :is="type" :url="url" />
 </template>
 
 <script>
@@ -7,6 +7,7 @@ import SpendingByCategory from './SpendingByCategory.vue'
 import SpendingOverTime from './SpendingOverTime.vue'
 
 export default {
+  props: ['type', 'url'],
   components: {
     SpendingByCategory,
     SpendingOverTime,
diff --git a/resources/js/components/reports/SpendingByCategory.vue b/resources/js/components/reports/SpendingByCategory.vue
index 1c7ee99e..7a426d0d 100644
--- a/resources/js/components/reports/SpendingByCategory.vue
+++ b/resources/js/components/reports/SpendingByCategory.vue
@@ -1,13 +1,21 @@
 <template>
-  <div class="w-full max-w-5xl mx-auto relative">
+  <div class="w-full max-w-6xl mx-auto relative">
     <v-date-picker
-      class="absolute right-0 md:mr-6"
       style="min-width: 220px"
-      mode="range"
-      v-model="range"
-      @input="fetchData"
+      mode="date"
+      v-model.range="range"
+      @update:modelValue="fetchData"
+      @ready="fetchData"
       :popover="{ placement: 'bottom', visibility: 'click' }"
-    />
+    >
+      <template v-slot="{ inputEvents }">
+        <div class="absolute right-0 md:mr-6 flex justify-center items-center">
+          <input type="text" class="input-text" :value="formatDate(range.start)" v-on="inputEvents.start" />
+          <span class="px-2">-</span>
+          <input type="text" class="input-text" :value="formatDate(range.end)" v-on="inputEvents.end" />
+        </div>
+      </template>
+    </v-date-picker>
 
     <h1 class="w-full md:text-center text-gray-800 text-xl mb-1">
       {{ $t('labels.reports.spending_by_category') }}
@@ -15,14 +23,16 @@
 
     <h2 class="w-full md:text-center font-bold text-gray-700 text-lg mb-6">{{ total }}</h2>
 
-    <apexchart type="pie" :options="chartOptions" :series="datasets" />
+    <div v-show="!datasets.length > 0" class="text-center">No results for time period</div>
+    <apexchart v-show="!!datasets.length > 0" type="pie" :options="chartOptions" :series="datasets" />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
-import VueApexCharts from 'vue-apexcharts'
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
+import VueApexCharts from 'vue3-apexcharts'
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/style.css'
 import dayjs from 'dayjs'
 import colors from './ReportColors'
 import { formatMoney } from '../../utils'
@@ -124,6 +134,9 @@ export default {
   },
 
   methods: {
+    formatDate(date) {
+      return dayjs(date).format('MM/DD/YYYY')
+    },
     fetchData() {
       axios
         .post(this.url, {
diff --git a/resources/js/components/reports/SpendingOverTime.vue b/resources/js/components/reports/SpendingOverTime.vue
index 1f7f25db..616b9380 100644
--- a/resources/js/components/reports/SpendingOverTime.vue
+++ b/resources/js/components/reports/SpendingOverTime.vue
@@ -1,13 +1,21 @@
 <template>
   <div class="w-full max-w-6xl mx-auto relative">
     <v-date-picker
-      class="absolute right-0 mr-6"
       style="min-width: 210px"
-      mode="range"
-      v-model="range"
-      @input="fetchData"
+      mode="date"
+      v-model.range="range"
+      @update:modelValue="fetchData"
+      @ready="fetchData"
       :popover="{ placement: 'bottom', visibility: 'click' }"
-    />
+    >
+      <template v-slot="{ inputEvents }">
+        <div class="absolute right-0 mr-6 flex justify-center items-center">
+          <input type="text" class="input-text" :value="formatDate(range.start)" v-on="inputEvents.start" />
+          <span class="px-2">-</span>
+          <input type="text" class="input-text" :value="formatDate(range.end)" v-on="inputEvents.end" />
+        </div>
+      </template>
+    </v-date-picker>
 
     <h1 class="w-full md:text-center text-gray-800 text-xl mb-1">
       {{ $t('labels.reports.spending_over_time') }}
@@ -15,14 +23,16 @@
 
     <h2 class="w-full md:text-center font-bold text-gray-700 text-lg mb-6">{{ total }}</h2>
 
-    <apexchart type="bar" :options="chartOptions" :series="datasets" />
+    <div v-show="!datasets.length > 0" class="text-center">No results for time period</div>
+    <apexchart v-show="!!datasets.length > 0" type="bar" :options="chartOptions" :series="datasets" />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
-import VueApexCharts from 'vue-apexcharts'
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
+import VueApexCharts from 'vue3-apexcharts'
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/style.css'
 import dayjs from 'dayjs'
 import colors from './ReportColors'
 import { formatMoney } from '../../utils'
@@ -75,6 +85,9 @@ export default {
           },
           position: 'right',
         },
+        noData: {
+          text: 'No results',
+        },
         states: {
           active: {
             filter: {
@@ -116,6 +129,9 @@ export default {
   },
 
   methods: {
+    formatDate(date) {
+      return dayjs(date).format('MM/DD/YYYY')
+    },
     fetchData() {
       axios
         .post(this.url, {
diff --git a/resources/js/components/utilities/Toggle.vue b/resources/js/components/utilities/Toggle.vue
index 432dd6c0..aa889543 100644
--- a/resources/js/components/utilities/Toggle.vue
+++ b/resources/js/components/utilities/Toggle.vue
@@ -1,38 +1,34 @@
 <template>
-  <div v-on-clickaway="blur">
+  <div v-clickaway="blur">
     <slot :is-on="isOn" :set-to="setTo" :toggle="toggle" />
   </div>
 </template>
 
-<script>
-import { mixin as clickaway } from 'vue-clickaway'
+<script setup>
+import { ref } from 'vue'
+import clickaway from '../../composables/clickaway'
 
-export default {
-  mixins: [clickaway],
-
-  props: {
-    closeOnBlur: Boolean,
-    on: Boolean,
+const props = defineProps({
+  closeOnBlur: {
+    type: Boolean,
+    default: true,
   },
+  on: Boolean,
+})
 
-  data() {
-    return {
-      isOn: !!this.on,
-    }
-  },
+const vClickaway = clickaway
 
-  methods: {
-    setTo(value) {
-      this.isOn = !!value
-    },
-    toggle() {
-      this.isOn = !this.isOn
-    },
-    blur() {
-      if (this.closeOnBlur) {
-        this.setTo(false)
-      }
-    },
-  },
+const isOn = ref(!!props.on)
+
+const setTo = (value) => {
+  isOn.value = !!value
+}
+const toggle = () => {
+  isOn.value = !isOn.value
+}
+const blur = () => {
+  if (props.closeOnBlur) {
+    setTo(false)
+  }
 }
 </script>
diff --git a/resources/js/composables/clickaway.js b/resources/js/composables/clickaway.js
new file mode 100644
index 00000000..e4733be2
--- /dev/null
+++ b/resources/js/composables/clickaway.js
@@ -0,0 +1,14 @@
+export default {
+  beforeMount(el, binding) {
+    el.onClickaway = function (event) {
+      if (el !== event.target && !el.contains(event.target)) {
+        // Call the provided method
+        binding.value(event)
+      }
+    }
+    document.addEventListener('click', el.onClickaway)
+  },
+  unmounted(el) {
+    document.removeEventListener('click', el.onClickaway)
+  },
+}
diff --git a/resources/js/composables/useDebounce.js b/resources/js/composables/useDebounce.js
new file mode 100644
index 00000000..a3620c39
--- /dev/null
+++ b/resources/js/composables/useDebounce.js
@@ -0,0 +1,14 @@
+import { ref, onUnmounted } from 'vue'
+
+export function useDebounce() {
+  const debounceTimer = ref(null)
+
+  function debounce(callback, delay = 500) {
+    clearTimeout(debounceTimer.value)
+    debounceTimer.value = setTimeout(() => callback.apply(this, arguments), delay)
+  }
+
+  onUnmounted(() => clearTimeout(debounceTimer.value))
+
+  return { debounce }
+}
diff --git a/resources/js/composables/useEventBus.js b/resources/js/composables/useEventBus.js
new file mode 100644
index 00000000..316b6f1c
--- /dev/null
+++ b/resources/js/composables/useEventBus.js
@@ -0,0 +1,26 @@
+import { ref } from 'vue'
+
+const events = ref({})
+
+export function useEventBus() {
+  const on = (event, callback) => {
+    if (!events.value[event]) {
+      events.value[event] = []
+    }
+    events.value[event].push(callback)
+  }
+
+  const emit = (event, ...args) => {
+    if (events.value[event]) {
+      events.value[event].forEach((callback) => callback(...args))
+    }
+  }
+
+  const off = (event, callback) => {
+    if (events.value[event]) {
+      events.value[event] = events.value[event].filter((cb) => cb !== callback)
+    }
+  }
+
+  return { on, emit, off }
+}
diff --git a/resources/js/mixins/debounce.js b/resources/js/mixins/debounce.js
deleted file mode 100644
index 52a7295c..00000000
--- a/resources/js/mixins/debounce.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
-  data() {
-    return {
-      debounceTimer: null,
-    }
-  },
-
-  methods: {
-    debounce(callback, delay = 500) {
-      clearTimeout(this.debounceTimer)
-      this.debounceTimer = setTimeout(() => callback.apply(this, arguments), delay)
-    },
-  },
-}
diff --git a/resources/views/account/show.blade.php b/resources/views/account/show.blade.php
index 943ebd28..24a23647 100644
--- a/resources/views/account/show.blade.php
+++ b/resources/views/account/show.blade.php
@@ -31,10 +31,8 @@
         @number($account->interest)%
     </p>
 
-    <div class="bg-white rounded-xs shadow-sm p-6 mt-6">
-        <h3 class="font-light text-2xl mb-6">{{ trans('labels.transactions.plural') }}</h3>
-
-        <transactions-table :transactions='@json($account->transactions)'></transactions-table>
+    <div class="bg-white rounded-xs shadow-sm mt-6">
+        <transactions-table title="{{ trans('labels.transactions.plural') }}" :transactions='@json($account->transactions)'></transactions-table>
     </div>
 
     <toggle class="flex justify-end">
diff --git a/resources/views/bill/show.blade.php b/resources/views/bill/show.blade.php
index 4e599388..7bc5a279 100644
--- a/resources/views/bill/show.blade.php
+++ b/resources/views/bill/show.blade.php
@@ -41,10 +41,8 @@
         <formatter-currency :amount="{{ $bill->total }}"></formatter-currency> paid since @date($bill->lastDue)
     </p>
 
-    <div class="bg-white rounded-xs shadow-sm p-6 mt-6">
-        <h3 class="font-light text-2xl mb-6">Payments</h3>
-
-        <transactions-table :transactions='@json($bill->transactions)'></transactions-table>
+    <div class="bg-white rounded-xs shadow-sm mt-6">
+        <transactions-table title="Payments" :transactions='@json($bill->transactions)'></transactions-table>
 
         <toggle class="flex justify-end">
             <template v-slot="{ isOn, setTo }">
diff --git a/resources/views/category/show.blade.php b/resources/views/category/show.blade.php
index d6f807c5..cb6a1c27 100644
--- a/resources/views/category/show.blade.php
+++ b/resources/views/category/show.blade.php
@@ -32,10 +32,8 @@
         Budgeted
     </p>
 
-    <div class="bg-white rounded-xs shadow-sm p-6 mt-6">
-        <h3 class="font-light text-2xl mb-6">{{ trans('labels.transactions.plural') }}</h3>
-
-        <transactions-table :transactions='@json($category->transactions)'></transactions-table>
+    <div class="bg-white rounded-xs shadow-sm mt-6">
+        <transactions-table title="{{ trans('labels.transactions.plural') }}" :transactions='@json($category->transactions)'></transactions-table>
     </div>
 
     <toggle class="flex justify-end">
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 2cbd9741..9e8f0b1e 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -63,7 +63,7 @@
 @endsection
 
 @section('content')
-    <div class="w-full bg-white rounded-xs shadow-sm p-6">
+    <div class="w-full bg-white rounded-xs shadow-sm">
         <transactions-table
             :transactions='{{ json_encode($transactions) }}'
             :show-actions="true"
diff --git a/resources/views/partials/nav.blade.php b/resources/views/partials/nav.blade.php
index ed4fafcb..c657338b 100644
--- a/resources/views/partials/nav.blade.php
+++ b/resources/views/partials/nav.blade.php
@@ -16,60 +16,58 @@
             </div>
 
             <div class="w-full grow lg:flex lg:items-center lg:w-auto" :class="{ hidden: ! isOn }">
-                <div class="lg:flex lg:items-center lg:grow">
-                    <template v-cloak>
-                        @auth
-                        <div class="{{ (request()->route()->getName() == 'dashboard' ? 'active' : '') }}">
-                            <a class="nav-item mr-4" href="{{ route('dashboard') }}">{{ trans('labels.dashboard.singular') }}</a>
-                        </div>
-                        <div class="{{ (strpos(request()->route()->getName(), 'accounts') !== false ? 'active' : '') }}">
-                            <a class="nav-item mr-4" href="{{ route('accounts.index') }}">{{ trans('labels.accounts.plural') }}</a>
-                        </div>
-                        <div class="{{ (strpos(request()->route()->getName(), 'categories') !== false ? 'active' : '') }}">
-                            <a class="nav-item mr-4" href="{{ route('categories.index') }}">{{ trans('labels.categories.plural') }}</a>
-                        </div>
-                        <div class="{{ (strpos(request()->route()->getName(), 'goals') !== false ? 'active' : '') }}">
-                            <a class="nav-item mr-4" href="{{ route('goals.index') }}">{{ trans('labels.goals.plural') }}</a>
-                        </div>
-                        <div class="{{ (strpos(request()->route()->getName(), 'bills') !== false ? 'active' : '') }}">
-                            <a class="nav-item mr-4" href="{{ route('bills.index') }}">{{ trans('labels.bills.plural') }}</a>
-                        </div>
+                <template class="lg:flex lg:items-center lg:grow" v-cloak>
+                    @auth
+                    <div class="{{ (request()->route()->getName() == 'dashboard' ? 'active' : '') }}">
+                        <a class="nav-item mr-4" href="{{ route('dashboard') }}">{{ trans('labels.dashboard.singular') }}</a>
+                    </div>
+                    <div class="{{ (strpos(request()->route()->getName(), 'accounts') !== false ? 'active' : '') }}">
+                        <a class="nav-item mr-4" href="{{ route('accounts.index') }}">{{ trans('labels.accounts.plural') }}</a>
+                    </div>
+                    <div class="{{ (strpos(request()->route()->getName(), 'categories') !== false ? 'active' : '') }}">
+                        <a class="nav-item mr-4" href="{{ route('categories.index') }}">{{ trans('labels.categories.plural') }}</a>
+                    </div>
+                    <div class="{{ (strpos(request()->route()->getName(), 'goals') !== false ? 'active' : '') }}">
+                        <a class="nav-item mr-4" href="{{ route('goals.index') }}">{{ trans('labels.goals.plural') }}</a>
+                    </div>
+                    <div class="{{ (strpos(request()->route()->getName(), 'bills') !== false ? 'active' : '') }}">
+                        <a class="nav-item mr-4" href="{{ route('bills.index') }}">{{ trans('labels.bills.plural') }}</a>
+                    </div>
 
-                        <toggle close-on-blur class="{{ (strpos(request()->route()->getName(), 'reports') !== false ? 'active' : '') }}">
-                            <template v-slot="{ isOn, toggle }">
-                                <a class="nav-item mr-4" href="#" @click.prevent="toggle">
-                                    {{ trans('labels.reports.plural') }}
-                                    <font-awesome-icon :icon="isOn ? 'caret-up' : 'caret-down'" class="ml-2"></font-awesome-icon>
-                                </a>
+                    <toggle close-on-blur class="{{ (strpos(request()->route()->getName(), 'reports') !== false ? 'active' : '') }}">
+                        <template v-slot="{ isOn, toggle }">
+                            <a class="nav-item mr-4" href="#" @click.prevent="toggle">
+                                {{ trans('labels.reports.plural') }}
+                                <font-awesome-icon :icon="isOn ? 'caret-up' : 'caret-down'" class="ml-2"></font-awesome-icon>
+                            </a>
 
-                                <div v-if="isOn" class="absolute bg-white shadow-md rounded-sm mt-1 z-30">
-                                    <div {{ (strpos(request()->route()->getName(), 'reports.spending_by_category') !== false ? 'active' : '') }}>
-                                        <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('reports.show', 'categorial') }}">{{ trans('labels.reports.spending_by_category') }}</a>
-                                    </div>
-                                    <div {{ (strpos(request()->route()->getName(), 'reports.spending_over_time') !== false ? 'active' : '') }}>
-                                        <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('reports.show', 'spending') }}">{{ trans('labels.reports.spending_over_time') }}</a>
-                                    </div>
+                            <div v-if="isOn" class="absolute bg-white shadow-md rounded-sm mt-1 z-30">
+                                <div class="{{ (strpos(request()->route()->getName(), 'reports.spending_by_category') !== false ? 'active' : '') }}">
+                                    <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('reports.show', 'categorial') }}">{{ trans('labels.reports.spending_by_category') }}</a>
+                                </div>
+                                <div class="{{ (strpos(request()->route()->getName(), 'reports.spending_over_time') !== false ? 'active' : '') }}">
+                                    <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('reports.show', 'spending') }}">{{ trans('labels.reports.spending_over_time') }}</a>
                                 </div>
-                            </template>
-                        </toggle>
-                        @endauth
+                            </div>
+                        </template>
+                    </toggle>
+                    @endauth
 
-                        <toggle close-on-blur class="{{ (strpos(request()->route()->getName(), 'calculators') !== false ? 'active' : '') }}">
-                            <template v-slot="{ isOn, toggle }">
-                                <a class="nav-item mr-4" href="#" @click.prevent="toggle">
-                                    {{ trans('labels.calculators.plural') }}
-                                    <font-awesome-icon :icon="isOn ? 'caret-up' : 'caret-down'" class="ml-2"></font-awesome-icon>
-                                </a>
+                    <toggle close-on-blur class="{{ (strpos(request()->route()->getName(), 'calculators') !== false ? 'active' : '') }}">
+                        <template v-slot="{ isOn, toggle }">
+                            <a class="nav-item mr-4" href="#" @click.prevent="toggle">
+                                {{ trans('labels.calculators.plural') }}
+                                <font-awesome-icon :icon="isOn ? 'caret-up' : 'caret-down'" class="ml-2"></font-awesome-icon>
+                            </a>
 
-                                <div v-if="isOn" class="absolute bg-white shadow-md rounded-sm mt-1 z-30">
-                                    <div {{ (strpos(request()->route()->getName(), 'calculators.debt') !== false ? 'active' : '') }}>
-                                        <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('calculators.debt') }}">{{ trans('labels.calculators.debt.label') }}</a>
-                                    </div>
+                            <div v-if="isOn" class="absolute bg-white shadow-md rounded-sm mt-1 z-30">
+                                <div class="{{ (strpos(request()->route()->getName(), 'calculators.debt') !== false ? 'active' : '') }}">
+                                    <a class="block text-gray-800 hover:text-gray-600 p-4" href="{{ route('calculators.debt') }}">{{ trans('labels.calculators.debt.label') }}</a>
                                 </div>
-                            </template>
-                        </toggle>
-                    </template>
-                </div>
+                            </div>
+                        </template>
+                    </toggle>
+                </template>
 
                 <div class="lg:flex items-center -mr-2">
                     <toggle close-on-blur>
diff --git a/tests/Browser/CalculatorTest.php b/tests/Browser/CalculatorTest.php
index 83779187..f95fec49 100644
--- a/tests/Browser/CalculatorTest.php
+++ b/tests/Browser/CalculatorTest.php
@@ -21,6 +21,7 @@ public function test_unauthenticated_user_can_use_debt_calculator()
                 ->assertSee(Carbon::now()->addYear()->addMonths(2)->format('F jS, Y'))
                 ->assertSee('$67.21')
                 ->dragRight('.vue-slider-dot-handle', 40)
+                ->pause(100)
                 ->releaseMouse()
                 ->moveMouse(20, 20)
                 ->assertSee(Carbon::now()->addYear()->subMonth()->format('F jS, Y'))
diff --git a/tests/Browser/Components/Datepicker.php b/tests/Browser/Components/Datepicker.php
index 7cda780e..c1422a62 100644
--- a/tests/Browser/Components/Datepicker.php
+++ b/tests/Browser/Components/Datepicker.php
@@ -46,11 +46,8 @@ public function selectDate($browser, Carbon $date)
         $browser
             ->click('@datepicker-trigger')
             ->waitFor('.vc-title')
-            // Click the overlay element before selecting a date
-            // to prevent the exception "element click intercepted"
-            ->click('.vc-popover-content-wrapper')
             // For now, just select the last day of the first week
-            ->click('.vc-grid-cell-col-7.vc-grid-cell-row--6')
+            ->click('.on-top.on-right')
             ->click('@datepicker-trigger')
             ->waitUntilMissing('.vc-title');
     }
diff --git a/vite.config.js b/vite.config.js
index 50cf29ae..884eca9a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import laravel from 'laravel-vite-plugin'
-import vue from '@vitejs/plugin-vue2'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   server: {
@@ -20,4 +20,9 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js',
+    },
+  },
 })