From 0602256cb497a0ab13526a6432e9fdb04796553b Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 12 Mar 2025 19:30:26 -0300
Subject: [PATCH 1/4] Add field occurrence point style

---
 src/assets/css/vars.css                                      | 1 +
 src/components/Map/icons/FieldOccurrence.js                  | 5 +++++
 src/components/Map/icons/index.js                            | 1 +
 src/components/Map/shapes/FieldOccurrence.js                 | 5 +++++
 .../otus/components/Panel/PanelMap/constants/legend.js       | 4 ++++
 tailwind.config.cjs                                          | 3 ++-
 6 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Map/icons/FieldOccurrence.js
 create mode 100644 src/components/Map/shapes/FieldOccurrence.js

diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
index 6afb3eb..c59557f 100644
--- a/src/assets/css/vars.css
+++ b/src/assets/css/vars.css
@@ -22,6 +22,7 @@
   --color-map-asserted: 249, 115, 22;
   --color-map-type-material: 51, 136, 255;
   --color-map-collection-object: 239, 68, 68;
+  --color-map-field-occurrence: 132, 204, 22;
 
   --color-scrollbar-thumb: 156, 163, 175;
   --color-scrollbar-track: 229, 231, 235;
diff --git a/src/components/Map/icons/FieldOccurrence.js b/src/components/Map/icons/FieldOccurrence.js
new file mode 100644
index 0000000..214d928
--- /dev/null
+++ b/src/components/Map/icons/FieldOccurrence.js
@@ -0,0 +1,5 @@
+export const FieldOccurrence = {
+  className: 'bg-map-field-occurrence rounded-full map-point-marker',
+  iconSize: [8, 8],
+  iconAnchor: [4, 4]
+}
diff --git a/src/components/Map/icons/index.js b/src/components/Map/icons/index.js
index 2f9fb72..3889f3f 100644
--- a/src/components/Map/icons/index.js
+++ b/src/components/Map/icons/index.js
@@ -1,4 +1,5 @@
 export * from './AssertedDistribution'
 export * from './CollectionObject'
+export * from './FieldOccurrence'
 export * from './Georeference'
 export * from './TypeMaterial'
diff --git a/src/components/Map/shapes/FieldOccurrence.js b/src/components/Map/shapes/FieldOccurrence.js
new file mode 100644
index 0000000..484d4df
--- /dev/null
+++ b/src/components/Map/shapes/FieldOccurrence.js
@@ -0,0 +1,5 @@
+export const CollectionObject = {
+  color: `rgb(var(--color-map-field-occurrence))`,
+  weight: 1,
+  fillOpacity: 'var(--color-map-shape-opacity)'
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/constants/legend.js b/src/modules/otus/components/Panel/PanelMap/constants/legend.js
index 9107aa8..66c3fd5 100644
--- a/src/modules/otus/components/Panel/PanelMap/constants/legend.js
+++ b/src/modules/otus/components/Panel/PanelMap/constants/legend.js
@@ -18,5 +18,9 @@ export const LEGEND = {
   TypeMaterial: {
     label: 'Type material',
     background: 'bg-map-type-material'
+  },
+  FieldOccurrence: {
+    label: 'Field occurrence',
+    background: 'bg-map-field-occurrence'
   }
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index dd78091..91b40eb 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -41,7 +41,8 @@ module.exports = {
           aggregate: withOpacity('--color-map-aggregate'),
           asserted: withOpacity('--color-map-asserted'),
           'type-material': withOpacity('--color-map-type-material'),
-          'collection-object': withOpacity('--color-map-collection-object')
+          'collection-object': withOpacity('--color-map-collection-object'),
+          'field-occurrence': withOpacity('--color-map-field-occurrence')
         },
 
         primary: {

From 236b371b0bc16159b3faab76979de67997642161 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sun, 16 Mar 2025 20:29:10 -0300
Subject: [PATCH 2/4] Add multi layout

---
 .gitignore               |  1 +
 README.markdown          | 47 ++++++++++++++++++++++++++++++++++++++++
 src/App.vue              | 22 +++++++++++++++++--
 src/utils/index.js       |  1 +
 src/utils/loadLayouts.js | 21 ++++++++++++++++++
 tailwind.config.cjs      |  1 +
 vite.config.js           |  2 +-
 7 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/loadLayouts.js

diff --git a/.gitignore b/.gitignore
index 30e63a6..3633253 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ dist-ssr
 /pages
 /components
 /panels
+/layouts
 public
 README.md
 *.local
diff --git a/README.markdown b/README.markdown
index 89c4bfd..578f89b 100644
--- a/README.markdown
+++ b/README.markdown
@@ -209,6 +209,53 @@ export default {
 }
 ```
 
+### Customizing the Layout
+
+The application comes with a default layout that includes a header and a footer. If you'd like to replace this layout with your own, you can do so by creating a custom layout file.
+
+Steps to replace the default layout
+
+1. In the root folder of your project, create a new folder called `layouts` (if it doesn't already exist).
+2. Inside this folder, create a file named default.vue.
+3. Define your custom layout structure inside this file as needed.
+
+Example of layout/default.vue
+
+```vuejs
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+```
+
+This custom layout will replace the default one and be applied throughout the application. You can include your own elements, such as a navigation bar or footer, as needed.
+
+#### Using Multiple Layouts
+
+In addition to replacing the default layout, you can create multiple layouts by adding more .vue files inside the layout folder. You can then specify which layout to use for a specific page by setting the layout name in the meta property of the `<route>` tag in your Single File Component (SFC).
+
+JSON5:
+
+```js
+<route>
+{
+  meta: {
+    layout: 'custom'
+  }
+}
+</route>
+```
+
+YAML:
+
+```yaml
+<route lang="yaml">
+meta:
+  layout: custom
+</route>
+```
+
 ### External panels
 
 To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`
diff --git a/src/App.vue b/src/App.vue
index bb29998..45c71d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,31 @@
 <template>
-  <ApplicationLayout>
+  <component :is="currentLayout">
     <router-view />
-  </ApplicationLayout>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useHead } from 'unhead'
+import { loadUserLayouts } from './utils'
 import ApplicationLayout from '@/layout/Application.vue'
 
+const DEFAULT_LAYOUT = 'defaultLayout'
+
+const route = useRoute()
+const userLayouts = loadUserLayouts()
+const routeLayout = route.meta?.layout
+
+const currentLayout = computed(() => {
+  const layouts = {
+    [DEFAULT_LAYOUT]: ApplicationLayout,
+    ...userLayouts
+  }
+
+  return layouts[route.meta?.layout || DEFAULT_LAYOUT] || ApplicationLayout
+})
+
 useHead({
   title: __APP_ENV__.project_name,
   meta: __APP_ENV__.metadata
diff --git a/src/utils/index.js b/src/utils/index.js
index 5087657..b9742a3 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,3 +1,4 @@
 export * from './color'
 export * from './request'
 export * from './strings'
+export * from './loadLayouts'
diff --git a/src/utils/loadLayouts.js b/src/utils/loadLayouts.js
new file mode 100644
index 0000000..578a440
--- /dev/null
+++ b/src/utils/loadLayouts.js
@@ -0,0 +1,21 @@
+export function loadUserLayouts() {
+  const files = import.meta.glob('#/layouts/*.vue', {
+    eager: true,
+    import: 'default'
+  })
+
+  return makeLayoutObject(files)
+}
+
+function makeLayoutObject(files) {
+  const components = Object.entries(files)
+  const layouts = {}
+
+  components.forEach(([path, component]) => {
+    const layoutName = path.split('/').pop().replace('.vue', '')
+
+    Object.assign(layouts, { [layoutName]: component })
+  })
+
+  return layouts
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 91b40eb..2390816 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,6 +12,7 @@ module.exports = {
     './index.html',
     './vite.config.js',
     './src/**/*.{vue,js,ts,jsx,tsx,md}',
+    './layouts/**/*.{vue,js}',
     './pages/**/*.{vue,md}',
     './panels/**/*.{vue,md}',
     './components/**/*.{vue,md}',
diff --git a/vite.config.js b/vite.config.js
index 5d19371..9bcac49 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -54,7 +54,7 @@ export default () => {
 
       Pages({
         dirs: 'pages',
-        exclude: ['**/components/*.vue'],
+        exclude: ['**/components/*.vue', 'components/**/*.vue'],
         extensions: ['vue', 'md'],
         extendRoute(route) {
           if (route.path === '/home') {

From 163fdbecfeec3e9f648a8d38079033e8eeeb613d Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sun, 16 Mar 2025 21:07:38 -0300
Subject: [PATCH 3/4] Fix empty tooltip

---
 .../PanelMap/composables/useGeojsonOptions.js     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js b/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js
index e488aca..16ef9cc 100644
--- a/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js
+++ b/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js
@@ -1,4 +1,5 @@
 import { DISABLE_LAYER_OPTIONS } from '@/components/Map/constants'
+import { AGGREGATE } from '@/constants/objectTypes'
 import { computed, ref } from 'vue'
 
 export function makeGeojsonOptions({ popupElement, popupItem }) {
@@ -8,13 +9,15 @@ export function makeGeojsonOptions({ popupElement, popupItem }) {
         layer.pm.setOptions(DISABLE_LAYER_OPTIONS)
         layer.pm.disable()
 
-        layer.on('popupopen', () => (popupItem.value = feature.properties))
-        layer.on('popupclose', () => (popupItem.value = null))
+        if (feature.properties.base.some(({ label }) => Boolean(label))) {
+          layer.on('popupopen', () => (popupItem.value = feature.properties))
+          layer.on('popupclose', () => (popupItem.value = null))
 
-        layer.bindPopup(popupElement.value, {
-          minWidth: 400,
-          maxWidth: 400
-        })
+          layer.bindPopup(popupElement.value, {
+            minWidth: 400,
+            maxWidth: 400
+          })
+        }
       }
     }
   }

From 6e17b288965c045e55c38cfe7916d18f2a8b573b Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sun, 16 Mar 2025 21:47:21 -0300
Subject: [PATCH 4/4] Refactor footer, add css classes

---
 .../Autocomplete/Autocomplete.global.vue      | 10 +--
 src/components/Button/VButton.global.vue      |  1 +
 src/components/Card/VCard.global.vue          | 15 +++--
 src/components/Card/VCardContent.global.vue   |  4 +-
 src/components/Card/VCardHeader.global.vue    |  6 +-
 src/components/Footer/FooterCitation.vue      | 45 +++++++++++++
 src/components/Footer/FooterCopyright.vue     | 20 ++++++
 src/components/Layout/LayoutFooter.vue        | 66 ++-----------------
 src/components/Layout/LayoutHeader.vue        |  8 +--
 src/components/Navbar/NavbarMobile.vue        |  4 +-
 src/components/Tab/TabItem.global.vue         |  2 +-
 src/components/Tab/TabMenu.global.vue         |  2 +-
 src/components/Table/VTable.global.vue        |  2 +-
 src/components/TrackerReport.global.vue       |  2 +-
 src/components/VSpinner.global.vue            | 14 ++--
 .../otus/components/Breadcrumb/Breadcrumb.vue |  2 +-
 16 files changed, 108 insertions(+), 95 deletions(-)
 create mode 100644 src/components/Footer/FooterCitation.vue
 create mode 100644 src/components/Footer/FooterCopyright.vue

diff --git a/src/components/Autocomplete/Autocomplete.global.vue b/src/components/Autocomplete/Autocomplete.global.vue
index aa3cd5b..58affca 100644
--- a/src/components/Autocomplete/Autocomplete.global.vue
+++ b/src/components/Autocomplete/Autocomplete.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete md:block md:mr-0 mr-3 relative w-fit">
+  <div class="tp-autocomplete md:block md:mr-0 mr-3 relative w-fit">
     <div
       class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
     >
@@ -9,7 +9,7 @@
       v-model="typed"
       type="text"
       autocomplete="none"
-      class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
+      class="tp-autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
       ref="inputElement"
     />
@@ -20,12 +20,12 @@
 
     <ul
       v-if="list.length"
-      class="autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
+      class="tp-autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0 shadow-md"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
+        class="tp-autocomplete__item px-3 py-2 border-b text-xs text-base-content cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
@@ -116,7 +116,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.autocomplete {
+.tp-autocomplete {
   &__list {
     display: none;
     padding: 0px;
diff --git a/src/components/Button/VButton.global.vue b/src/components/Button/VButton.global.vue
index 14353b2..73a7db2 100644
--- a/src/components/Button/VButton.global.vue
+++ b/src/components/Button/VButton.global.vue
@@ -2,6 +2,7 @@
   <button
     type="button"
     :class="[
+      'tp-button',
       'px-3',
       'py-1',
       'hover:bg-opacity-80',
diff --git a/src/components/Card/VCard.global.vue b/src/components/Card/VCard.global.vue
index 95a9c61..239910a 100644
--- a/src/components/Card/VCard.global.vue
+++ b/src/components/Card/VCard.global.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="border-1 card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded">
+  <div
+    class="border-1 tp-card border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded"
+  >
     <slot />
   </div>
 </template>
 
 <style>
-.card {
-    box-shadow: rgba(30,41,59,.04) 0 2px 4px 0;
-    border: 1px solid rgba(98,105,118,.16);
-    transition: transform .3s ease-out,opacity .3s ease-out,box-shadow .3s ease-out;
+.tp-card {
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out,
+    box-shadow 0.3s ease-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Card/VCardContent.global.vue b/src/components/Card/VCardContent.global.vue
index a07e30b..8abe623 100644
--- a/src/components/Card/VCardContent.global.vue
+++ b/src/components/Card/VCardContent.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 pl-5 pr-5">
+  <div class="p-4 pl-5 pr-5 tp-card-content">
     <slot />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Card/VCardHeader.global.vue b/src/components/Card/VCardHeader.global.vue
index 0857e92..1dcc288 100644
--- a/src/components/Card/VCardHeader.global.vue
+++ b/src/components/Card/VCardHeader.global.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="p-4 pl-5 pr-5 border-b font-medium border-base-muted">
+  <div
+    class="tp-card-header p-4 pl-5 pr-5 border-b font-medium border-base-muted"
+  >
     <slot />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Footer/FooterCitation.vue b/src/components/Footer/FooterCitation.vue
new file mode 100644
index 0000000..c40fb40
--- /dev/null
+++ b/src/components/Footer/FooterCitation.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="tp-footer-citation pt-4 pb-2 break-words">
+    {{ project_authors }}
+    <ClientOnly>
+      <span v-html="store.nextAuthor" />
+    </ClientOnly>
+    {{ project_citation }}.
+    <ClientOnly>
+      <span>Retrieved on {{ currentDate }}</span>
+    </ClientOnly>
+    <span v-if="currentUrl">
+      at
+      <a
+        class="text-secondary-color"
+        :href="currentUrl"
+      >
+        {{ currentUrl }}
+      </a>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useFooterStore } from '@/store'
+const { project_authors, project_citation, project_url, hash_mode } =
+  __APP_ENV__
+
+const store = useFooterStore()
+const currentDate = new Date().toISOString().split('T')[0]
+const route = useRoute()
+
+const currentUrl = computed(() => {
+  const projectUrl = (project_url || '').replace(/\/$/, '')
+
+  if (!projectUrl.length) {
+    return ''
+  }
+
+  return hash_mode
+    ? projectUrl + '/#' + route.fullPath
+    : projectUrl + route.fullPath
+})
+</script>
diff --git a/src/components/Footer/FooterCopyright.vue b/src/components/Footer/FooterCopyright.vue
new file mode 100644
index 0000000..78ffbf0
--- /dev/null
+++ b/src/components/Footer/FooterCopyright.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="tp-footer-copyright flex items-center text-xs gap-2">
+    <component
+      :is="copyright_image_link ? 'a' : 'span'"
+      :href="copyright_image_link"
+      class="min-w-fit"
+    >
+      <img
+        v-if="copyright_image"
+        :src="copyright_image"
+        alt="copyright"
+      />
+    </component>
+    <span>{{ copyright_text }}</span>
+  </div>
+</template>
+
+<script setup>
+const { copyright_image, copyright_image_link, copyright_text } = __APP_ENV__
+</script>
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index eb29d76..7a65f19 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/src/components/Layout/LayoutFooter.vue
@@ -3,39 +3,8 @@
     class="footer text-white bottom-0 border-gray-200 bg-zinc-800 pl-4 pr-4"
   >
     <div class="container mx-auto text-sm pt-2 pb-4">
-      <div class="pt-4 pb-2 break-words">
-        {{ project_authors }}
-        <ClientOnly>
-          <span v-html="store.nextAuthor" />
-        </ClientOnly>
-        {{ project_citation }}.
-        <ClientOnly>
-          <span>Retrieved on {{ currentDate }}</span>
-        </ClientOnly>
-        <span v-if="currentUrl">
-          at
-          <a
-            class="text-secondary-color"
-            :href="currentUrl"
-          >
-            {{ currentUrl }}
-          </a>
-        </span>
-      </div>
-      <div class="flex items-center text-xs gap-2">
-        <component
-          :is="copyright_image_link ? 'a' : 'span'"
-          :href="copyright_image_link"
-          class="min-w-fit"
-        >
-          <img
-            v-if="copyright_image"
-            :src="copyright_image"
-            alt="copyright"
-          />
-        </component>
-        <span>{{ copyright_text }}</span>
-      </div>
+      <FooterCitation />
+      <FooterCopyright />
 
       <hr class="mt-3 mb-3 border-gray-500" />
 
@@ -86,34 +55,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useFooterStore } from '@/store'
+import FooterCitation from '@/components/Footer/FooterCitation.vue'
+import FooterCopyright from '@/components/Footer/FooterCopyright.vue'
 import FooterAnalytics from '@/components/Footer/FooterAnalytics.vue'
-
-const {
-  project_authors,
-  project_citation,
-  project_url,
-  copyright_text,
-  copyright_image,
-  copyright_image_link,
-  hash_mode
-} = __APP_ENV__
-
-const store = useFooterStore()
-const currentDate = new Date().toISOString().split('T')[0]
-const route = useRoute()
-
-const currentUrl = computed(() => {
-  const projectUrl = (project_url || '').replace(/\/$/, '')
-
-  if (!projectUrl.length) {
-    return ''
-  }
-
-  return hash_mode
-    ? projectUrl + '/#' + route.fullPath
-    : projectUrl + route.fullPath
-})
 </script>
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 9fdb59a..0e59203 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
+    class="tp-header relative bg-header px-2 sm:px-4 py-2.5 shadow-sm shadow-base-muted pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
     <div
       class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
@@ -23,18 +23,18 @@
       <NavbarMobile />
 
       <div class="relative hidden md:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-normal">
+        <nav class="tp-header-nav text-sm leading-6 font-normal">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
               :key="index"
             >
-              <router-link
+              <RouterLink
                 :to="item.link"
                 class="hover:text-primary-content text-primary-content"
               >
                 {{ item.label }}
-              </router-link>
+              </RouterLink>
             </li>
           </ul>
         </nav>
diff --git a/src/components/Navbar/NavbarMobile.vue b/src/components/Navbar/NavbarMobile.vue
index 9a70d98..03ea29d 100644
--- a/src/components/Navbar/NavbarMobile.vue
+++ b/src/components/Navbar/NavbarMobile.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
+    class="tp-mobile-navbar-button inline-flex items-center p-2 z-50 ml-3 text-sm text-primary-content rounded-lg md:hidden print:hidden"
     title="Menu"
     aria-controls="mobile-menu"
     :aria-expanded="isMenuVisible"
@@ -18,7 +18,7 @@
   <AnimationOpacity>
     <div
       v-if="isMenuVisible"
-      class="absolute top-full left-0 w-full z-50 bg-base-foreground text-base-content block shadow-md md:hidden print:hidden"
+      class="tp-mobile-navbar absolute top-full left-0 w-full z-50 bg-base-foreground text-base-content block shadow-md md:hidden print:hidden"
     >
       <nav class="font-normal container mx-auto">
         <ul class="flex flex-col m-0 p-0 border-t border-base-border">
diff --git a/src/components/Tab/TabItem.global.vue b/src/components/Tab/TabItem.global.vue
index 2bf551a..70e8fae 100644
--- a/src/components/Tab/TabItem.global.vue
+++ b/src/components/Tab/TabItem.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="inline-flex items-center text-sm">
+  <li class="tp-tab-item inline-flex items-center text-sm">
     <router-link
       class="p-2 pb-2 block py-2 pr-4 pl-3 text-base-content border-b-2 border-transparent"
       active-class="border-b-2 !border-secondary-color font-medium"
diff --git a/src/components/Tab/TabMenu.global.vue b/src/components/Tab/TabMenu.global.vue
index 238c3ed..a647758 100644
--- a/src/components/Tab/TabMenu.global.vue
+++ b/src/components/Tab/TabMenu.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="inline-flex items-center space-x-1 md:space-x-3">
+  <ul class="tp-tab-list inline-flex items-center space-x-1 md:space-x-3">
     <slot />
   </ul>
 </template>
diff --git a/src/components/Table/VTable.global.vue b/src/components/Table/VTable.global.vue
index 2950a2d..cbbbbb2 100644
--- a/src/components/Table/VTable.global.vue
+++ b/src/components/Table/VTable.global.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative sm:rounded-lg">
+  <div class="tp-table relative sm:rounded-lg">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
       <slot />
     </table>
diff --git a/src/components/TrackerReport.global.vue b/src/components/TrackerReport.global.vue
index 52a8f7a..004101e 100644
--- a/src/components/TrackerReport.global.vue
+++ b/src/components/TrackerReport.global.vue
@@ -14,7 +14,7 @@
   </component>
   <VModal
     v-if="isModalVisible"
-    class="text-base-content"
+    class="tp-tracker-report-modal text-base-content"
     @close="isModalVisible = false"
   >
     <template #header>
diff --git a/src/components/VSpinner.global.vue b/src/components/VSpinner.global.vue
index 65687b8..e6f6528 100644
--- a/src/components/VSpinner.global.vue
+++ b/src/components/VSpinner.global.vue
@@ -4,7 +4,7 @@
     class="box-spinner mx-spinner absolute bg-base-foreground opacity-90 h-full flex items-center"
     :style="cssProperties"
   >
-    <div :class="['tw-spinner', `tw-spinner-${spinnerPosition}`]">
+    <div :class="['tp-spinner', `tp-spinner-${spinnerPosition}`]">
       <svg
         v-if="showSpinner"
         :style="logoSize"
@@ -165,7 +165,7 @@ const checkResize = () => {
 }
 </script>
 <style lang="scss" scoped>
-.tw-spinner {
+.tp-spinner {
   display: flex;
   margin: 0 auto;
   height: auto;
@@ -181,16 +181,16 @@ const checkResize = () => {
 .fade-leave-to {
   opacity: 0;
 }
-.tw-spinner-left {
+.tp-spinner-left {
   flex-direction: row;
 }
-.tw-spinner-right {
+.tp-spinner-right {
   flex-direction: row-reverse;
 }
-.tw-spinner-top {
+.tp-spinner-top {
   flex-direction: column;
 }
-.tw-spinner-bottom {
+.tp-spinner-bottom {
   flex-direction: column-reverse;
 }
 
@@ -198,7 +198,7 @@ const checkResize = () => {
   z-index: 4000;
 }
 
-.tw-spinner {
+.tp-spinner {
   font-size: 20px;
   overflow: hidden;
   width: 100%;
diff --git a/src/modules/otus/components/Breadcrumb/Breadcrumb.vue b/src/modules/otus/components/Breadcrumb/Breadcrumb.vue
index 0acf0d7..efd8abe 100644
--- a/src/modules/otus/components/Breadcrumb/Breadcrumb.vue
+++ b/src/modules/otus/components/Breadcrumb/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="inline-flex items-center flex-wrap">
+  <ul class="breadcrumb inline-flex items-center flex-wrap">
     <li
       v-for="(item, key, index) in list"
       :key="item.id"