feat: automated replacement

frontend/src/autosize.js

@@ -1,3 +1,3 @@
-import autosize from "autosize/dist/autosize";
+import * as autosize from "autosize/dist/autosize";
 
 window.autosize = autosize;

frontend/src/datepicker.js

@@ -1,21 +1,96 @@
 import AirDatepicker from 'air-datepicker';
 import {createPopper} from '@popperjs/core';
 
+// --- Static Locale Imports ---
+// We import all locales statically to ensure Vite transforms them correctly.
+import localeAr from 'air-datepicker/locale/ar.js';
+import localeBg from 'air-datepicker/locale/bg.js';
+import localeCa from 'air-datepicker/locale/ca.js';
+import localeCs from 'air-datepicker/locale/cs.js';
+import localeDa from 'air-datepicker/locale/da.js';
+import localeDe from 'air-datepicker/locale/de.js';
+import localeEl from 'air-datepicker/locale/el.js';
+import localeEn from 'air-datepicker/locale/en.js';
+import localeEs from 'air-datepicker/locale/es.js';
+import localeEu from 'air-datepicker/locale/eu.js';
+import localeFi from 'air-datepicker/locale/fi.js';
+import localeFr from 'air-datepicker/locale/fr.js';
+import localeHr from 'air-datepicker/locale/hr.js';
+import localeHu from 'air-datepicker/locale/hu.js';
+import localeId from 'air-datepicker/locale/id.js';
+import localeIt from 'air-datepicker/locale/it.js';
+import localeJa from 'air-datepicker/locale/ja.js';
+import localeKo from 'air-datepicker/locale/ko.js';
+import localeNb from 'air-datepicker/locale/nb.js';
+import localeNl from 'air-datepicker/locale/nl.js';
+import localePl from 'air-datepicker/locale/pl.js';
+import localePtBr from 'air-datepicker/locale/pt-BR.js';
+import localePt from 'air-datepicker/locale/pt.js';
+import localeRo from 'air-datepicker/locale/ro.js';
+import localeRu from 'air-datepicker/locale/ru.js';
+import localeSi from 'air-datepicker/locale/si.js';
+import localeSk from 'air-datepicker/locale/sk.js';
+import localeSl from 'air-datepicker/locale/sl.js';
+import localeSv from 'air-datepicker/locale/sv.js';
+import localeTh from 'air-datepicker/locale/th.js';
+import localeTr from 'air-datepicker/locale/tr.js';
+import localeUk from 'air-datepicker/locale/uk.js';
+import localeZh from 'air-datepicker/locale/zh.js';
+
+// Map language codes to their imported locale objects
+const allLocales = {
+  'ar': localeAr,
+  'bg': localeBg,
+  'ca': localeCa,
+  'cs': localeCs,
+  'da': localeDa,
+  'de': localeDe,
+  'el': localeEl,
+  'en': localeEn,
+  'es': localeEs,
+  'eu': localeEu,
+  'fi': localeFi,
+  'fr': localeFr,
+  'hr': localeHr,
+  'hu': localeHu,
+  'id': localeId,
+  'it': localeIt,
+  'ja': localeJa,
+  'ko': localeKo,
+  'nb': localeNb,
+  'nl': localeNl,
+  'pl': localePl,
+  'pt-BR': localePtBr,
+  'pt': localePt,
+  'ro': localeRo,
+  'ru': localeRu,
+  'si': localeSi,
+  'sk': localeSk,
+  'sl': localeSl,
+  'sv': localeSv,
+  'th': localeTh,
+  'tr': localeTr,
+  'uk': localeUk,
+  'zh': localeZh
+};
+// --- End of Locale Imports ---
+
+
 /**
- * Dynamically imports a language file from the locale folder.
- *
- * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
- * @returns {Promise<object>} A promise that resolves with the default export of the language file.
- */
+ * Selects a pre-imported language file from the locale map.
+ *
+ * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
+ * @returns {Promise<object>} A promise that resolves with the locale object.
+ */
 export const getLocale = async (langCode) => {
-  try {
-    const localeModule = await import(`air-datepicker/locale/${langCode}.js`);
-    return localeModule.default;
-  } catch (error) {
-    console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
-    const englishModule = await import('air-datepicker/locale/en.js');
-    return englishModule.default;
+  const locale = allLocales[langCode];
+
+  if (locale) {
+    return locale;
   }
+
+  console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
+  return allLocales['en']; // Default to English
 };
 
 function isMobileDevice() {
@@ -40,9 +115,7 @@ window.DatePicker = async function createDynamicDatePicker(element) {
             dp.setViewDate(date);
         }
     };
-
     let isOnMobile = isMobile();
-
     let baseOpts = {
         isMobile: isOnMobile,
         dateFormat: element.dataset.dateFormat,
@@ -59,7 +132,6 @@ window.DatePicker = async function createDynamicDatePicker(element) {
             datepicker.$el.dispatchEvent(_event);
         }
     };
-
     const positionConfig = !isOnMobile ? {
         position({$datepicker, $target, $pointer, done}) {
             let popper = createPopper($target, $datepicker, {
@@ -84,24 +156,20 @@ window.DatePicker = async function createDynamicDatePicker(element) {
                         options: {
                             element: $pointer
                         }
-                    }
+                     }
                 ]
             });
-
             return function completeHide() {
                 popper.destroy();
                 done();
             };
         }
     } : {};
-
     let opts = {...baseOpts, ...positionConfig};
-
     if (element.dataset.value) {
         opts["selectedDates"] = [element.dataset.value];
         opts["startDate"] = [element.dataset.value];
     }
-
     return new AirDatepicker(element, opts);
 };
 
@@ -114,9 +182,7 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
             dp.setViewDate(date);
         }
     };
-
     let isOnMobile = isMobile();
-
     let baseOpts = {
         isMobile: isOnMobile,
         view: 'months',
@@ -133,7 +199,6 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
             datepicker.$el.dispatchEvent(_event);
         }
     };
-
     const positionConfig = !isOnMobile ? {
         position({$datepicker, $target, $pointer, done}) {
             let popper = createPopper($target, $datepicker, {
@@ -161,16 +226,13 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
                     }
                 ]
             });
-
             return function completeHide() {
                 popper.destroy();
                 done();
             };
         }
     } : {};
-
     let opts = {...baseOpts, ...positionConfig};
-
     if (element.dataset.value) {
         opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
         opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
@@ -187,9 +249,7 @@ window.YearPicker = async function createDynamicDatePicker(element) {
             dp.setViewDate(date);
         }
     };
-
     let isOnMobile = isMobile();
-
     let baseOpts = {
         isMobile: isOnMobile,
         view: 'years',
@@ -206,7 +266,6 @@ window.YearPicker = async function createDynamicDatePicker(element) {
             datepicker.$el.dispatchEvent(_event);
         }
     };
-
     const positionConfig = !isOnMobile ? {
         position({$datepicker, $target, $pointer, done}) {
             let popper = createPopper($target, $datepicker, {
@@ -234,16 +293,13 @@ window.YearPicker = async function createDynamicDatePicker(element) {
                     }
                 ]
             });
-
             return function completeHide() {
                 popper.destroy();
                 done();
             };
         }
     } : {};
-
     let opts = {...baseOpts, ...positionConfig};
-
     if (element.dataset.value) {
         opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
         opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];

frontend/src/select.js

@@ -1,3 +1,5 @@
+import 'tom-select/dist/css/tom-select.bootstrap5.min.css';
+
 import TomSelect from "tom-select";
 import * as Popper from "@popperjs/core";
 

frontend/src/style.js

@@ -1,2 +1,3 @@
 // Import our custom CSS
-import '../styles/style.scss';
+import './styles/style.scss';
+import './styles/tailwind.css';

frontend/src/styles/_animations.scss

@@ -102,7 +102,7 @@
     width: 40px;
     height: 40px;
     border: 4px solid #f3f3f3;
-    border-top: 4px solid $primary;
+    //border-top: 4px solid $primary;
     border-radius: 50%;
     animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;

frontend/src/styles/_bootstrap.scss

@@ -1,33 +1,28 @@
 @use "sass:map";
-@import "bootstrap/scss/functions";
 @import "variables";
+@import "bootstrap/scss/bootstrap-utilities";
 
 // Import all of Bootstrap's CSS
-@import "bootstrap/scss/bootstrap";
+// @import "bootstrap/scss/bootstrap";
+@import "bootstrap/scss/offcanvas";
+// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+// @import "bootstrap/scss/"
 
 .form-label {
   font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
   font-weight: bold;
 }
 
-$theme-colors: map.merge(
-  $theme-colors,
-  (
-    "primary": $primary
-  )
-);
-
-@media all and (min-width: 992px) {
-  .navbar .nav-item .dropdown-menu {
-    display: none;
-    margin-top: 0;
-  }
-
-  .navbar .nav-item:hover .dropdown-menu {
-    display: block;
-    left: 0;
-  }
-}
+$theme-colors: map.merge($theme-colors,
+    ("primary": $primary ));
 
 .table .col-auto {
   width: 1%;
@@ -42,7 +37,8 @@ $theme-colors: map.merge(
   --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
 }
 
-.offcanvas-size-md { /* add Responsivenes to default offcanvas */
+.offcanvas-size-md {
+  /* add Responsivenes to default offcanvas */
   --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
 }
 
@@ -51,5 +47,5 @@ $theme-colors: map.merge(
 }
 
 .dropdown-toggle.dropdown-toggle-no-icon::after {
-  display:none;
-}
+  display: none;
+}

frontend/src/styles/_font-awesome.scss

@@ -1,4 +1 @@
-@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
-@import "@fortawesome/fontawesome-free/css/solid.min.css";
-@import "@fortawesome/fontawesome-free/css/regular.min.css";
-@import "@fortawesome/fontawesome-free/css/brands.min.css";
+@use "@fortawesome/fontawesome-free/css/all.css";

frontend/src/styles/_scrollbar.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 /* custom scrollbar */
 ::-webkit-scrollbar {
@@ -6,16 +6,16 @@
 }
 
 ::-webkit-scrollbar-track {
-  background-color: $gray-800;
+  //background-color: $gray-800;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: $gray-600;
+  //background-color: $gray-600;
   border-radius: 20px;
   border: 4px solid transparent;
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: $primary;
+  //background-color: $primary;
 }

frontend/src/styles/_tom-select.scss

@@ -1,56 +1,57 @@
-@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
-@import "variables";
-
-/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
-.ts-dropdown,
-.ts-control,
-.ts-control input {
-  color: var(--bs-body-color);
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.ts-wrapper.plugin-remove_button .item .remove {
-  color: $red;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.plugin-clear_button .clear-button {
-  color: $red;
-  right: 60px;
-}
-
-.ts-wrapper.multi .ts-control > div.active {
-  background: $primary;
-  color: $body-color;
-  border: 0 solid #0000;
-}
-
-.focus .ts-control {
-  color: $input-focus-color;
-  background-color: $input-focus-bg;
-  border-color: $input-focus-border-color;
-  outline: 0;
-
-  @if $enable-shadows {
-    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-  } @else {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: $input-focus-box-shadow;
-  }
-}
-
-.focus.ts-wrapper {
-  border-color: $form-select-focus-border-color;
-  outline: 0;
-
-  @if $enable-shadows {
-    @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-  } @else {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: $form-select-focus-box-shadow;
-  }
-}
-
-.ts-control > .clear-button {
-  color: $red !important;
-}
+//@use "tom-select/dist/css/tom-select.default.min.css";
+//@use "tom-select/dist/css/tom-select.bootstrap5.min.css";
+//@use "variables";
+//
+///* FIX BOOTSTRAP STYLING FOR TOM SELECT */
+//.ts-dropdown,
+//.ts-control,
+//.ts-control input {
+//  color: var(--bs-body-color);
+//}
+//
+///* stylelint-disable-next-line selector-class-pattern */
+////.ts-wrapper.plugin-remove_button .item .remove {
+////  color: $red;
+////}
+//
+///* stylelint-disable-next-line selector-class-pattern */
+////.plugin-clear_button .clear-button {
+////  color: $red;
+////  right: 60px;
+////}
+//
+//.ts-wrapper.multi .ts-control > div.active {
+//  //background: $primary;
+//  //color: $body-color;
+//  border: 0 solid #0000;
+//}
+//
+//.focus .ts-control {
+//  //color: $input-focus-color;
+//  //background-color: $input-focus-bg;
+//  //border-color: $input-focus-border-color;
+//  outline: 0;
+//
+//  @if $enable-shadows {
+//    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+//  } @else {
+//    // Avoid using mixin so we can pass custom focus shadow properly
+//    box-shadow: $input-focus-box-shadow;
+//  }
+//}
+//
+//.focus.ts-wrapper {
+//  border-color: $form-select-focus-border-color;
+//  outline: 0;
+//
+//  @if $enable-shadows {
+//    @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+//  } @else {
+//    // Avoid using mixin so we can pass custom focus shadow properly
+//    box-shadow: $form-select-focus-box-shadow;
+//  }
+//}
+//
+//.ts-control > .clear-button {
+//  color: $red !important;
+//}

frontend/src/styles/style.scss

@@ -1,11 +1,10 @@
-@import "variables";
-@import "font-awesome";
-@import "bootstrap";
-@import "datepicker";
-@import "tom-select";
-@import "animations";
-@import "scrollbar";
-@import "./tailwind.css";
+@use "variables";
+@use "font-awesome";
+@use "bootstrap";
+@use "datepicker";
+@use "tom-select";
+@use "animations";
+@use "scrollbar";
 
 .sticky-sidebar {
   position: sticky;
@@ -21,17 +20,17 @@ select[multiple] {
   max-height: 50vh;
 }
 
-.font-base {
-  font-family: $font-family-base;
-}
+//.font-base {
+//  font-family: bootstrap.$font-family-base;
+//}
 
 ::selection {
-  color: $gray-800;
-  background-color: $primary;
+  color: variables.$gray-800;
+  background-color: variables.$primary;
 }
 
 .dotted-line {
-  border-bottom: 2px dotted $gray-700;
+  border-bottom: 2px dotted variables.$gray-700;
   margin: 0 5px;
   position: relative;
 }
@@ -50,9 +49,9 @@ select[multiple] {
   padding: 0 8px !important;
 }
 
-.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
-  background-color: $primary-bg-subtle-dark;
-}
+//.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
+//  background-color: bootstrap.$primary-bg-subtle-dark;
+//}
 
 .offline {
   text-align: center;
@@ -88,4 +87,4 @@ select[multiple] {
 
 div:where(.swal2-container) {
   z-index: 1100 !important;
-}
+}

frontend/src/styles/tailwind.css

@@ -1,16 +1,103 @@
 @import "tailwindcss" prefix(tw) source("../../../app/templates/");
-@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *));
+
+@plugin "daisyui" {
+  themes: dark --default, light;
+  logs: true;
+}
+@plugin "tw-bootstrap-grid";
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(98% 0 0);
+  --color-base-300: oklch(95% 0 0);
+  --color-base-content: oklch(21% 0.006 285.885);
+  --color-primary: oklch(87% 0.169 91.605);
+  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-secondary: oklch(44% 0.043 257.281);
+  --color-secondary-content: oklch(98% 0.003 247.858);
+  --color-accent: oklch(70% 0.01 56.259);
+  --color-accent-content: oklch(14% 0.004 49.25);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(76% 0.177 163.223);
+  --color-success-content: oklch(37% 0.077 168.94);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(41% 0.112 45.904);
+  --color-error: oklch(71% 0.194 13.428);
+  --color-error-content: oklch(27% 0.105 12.094);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: true;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(25.33% 0.016 252.42);
+  --color-base-200: oklch(23.26% 0.014 253.1);
+  --color-base-300: oklch(21.15% 0.012 254.09);
+  --color-base-content: oklch(97.807% 0.029 256.847);
+  --color-primary: oklch(87% 0.169 91.605);
+  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-secondary: oklch(44% 0.043 257.281);
+  --color-secondary-content: oklch(98% 0.003 247.858);
+  --color-accent: oklch(70% 0.01 56.259);
+  --color-accent-content: oklch(14% 0.004 49.25);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(76% 0.177 163.223);
+  --color-success-content: oklch(37% 0.077 168.94);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(41% 0.112 45.904);
+  --color-error: oklch(71% 0.194 13.428);
+  --color-error-content: oklch(27% 0.105 12.094);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *), &:where([data-theme=dark], [data-theme=dark] *));
 @custom-variant hover (&:hover);
 
-.sidebar-active {
-    @apply tw:bg-gray-700 tw:text-white;
+
+@layer utilities {
+    .transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
+        background-color: --alpha(var(--color-primary) / 15%);
+    }
 }
 
-.sidebar-item:not(.sidebar-active) {
-    @apply tw:text-gray-300 tw:hover:text-white;
-}
 
 @layer components {
+    .sidebar-active {
+        @apply tw:text-primary-content tw:bg-primary;
+    }
+
+    .sidebar-item:not(.sidebar-active) {
+        @apply tw:text-base-content/80 tw:hover:text-base-content;
+    }
+
     .sidebar {
         @apply tw:z-1020 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:transition-all tw:duration-100;
     }