Updated UI to fit new figma design. This also contains the new search…

app/build.gradle

@@ -77,8 +77,8 @@ dependencies {
     implementation "com.github.bumptech.glide:glide:4.14.2"
 
     // Dagger Hilt
-    implementation 'com.google.dagger:hilt-android:2.51.1'
-    kapt 'com.google.dagger:hilt-android-compiler:2.51.1'
+    implementation 'com.google.dagger:hilt-android:2.57.1'
+    kapt 'com.google.dagger:hilt-android-compiler:2.57.1'
     kapt "androidx.hilt:hilt-compiler:1.2.0"
 
     // Pendo
@@ -92,9 +92,9 @@ dependencies {
     implementation "com.squareup.retrofit2:converter-gson:2.9.0"
 
     // Room
-    implementation "androidx.room:room-runtime:2.6.1"
-    kapt "androidx.room:room-compiler:2.6.1"
-    implementation "androidx.room:room-ktx:2.6.1"
+    implementation "androidx.room:room-runtime:2.7.2"
+    kapt "androidx.room:room-compiler:2.7.2"
+    implementation "androidx.room:room-ktx:2.7.2"
 
     // LiveData
     implementation "androidx.lifecycle:lifecycle-livedata-ktx:2.8.3"

app/src/main/assets/assets/main.js

@@ -0,0 +1,77 @@
+// function to handle tab switching for any table
+function activateTab(tableContainer, tabIndex) {
+    if (!tableContainer) return;
+
+    tableContainer.querySelectorAll('.tab-button, .tab, .tab, .tab').forEach(tab => {
+        tab.classList.remove('active-option', 'active-tab');
+    });
+
+    tableContainer.querySelectorAll('.option-content, .tab-content, .tab-content, .tab-content').forEach(content => {
+        content.classList.remove('active-option', 'active-tab');
+    });
+
+    // Add active class to selected tab and content
+    const selectedTab = tableContainer.querySelectorAll('.tab-button, .tab, .tab, .tab')[tabIndex];
+    const selectedContent = tableContainer.querySelectorAll('.option-content, .tab-content, .tab-content, .tab-content')[tabIndex];
+
+    if (selectedTab) {
+        if (selectedTab.classList.contains('tab')) {
+            selectedTab.classList.add('active-tab');
+        } else if (selectedTab.classList.contains('tab-button')) {
+            selectedTab.classList.add('active-option');
+        } else if (selectedTab.classList.contains('tab')) {
+            selectedTab.classList.add('active-tab');
+        } else if (selectedTab.classList.contains('tab')) {
+            selectedTab.classList.add('active-tab');
+        }
+    }
+
+    if (selectedContent) {
+        if (selectedContent.classList.contains('tab-content')) {
+            selectedContent.classList.add('active-tab');
+        } else if (selectedContent.classList.contains('option-content')) {
+            selectedContent.classList.add('active-option');
+        } else if (selectedContent.classList.contains('tab-content')) {
+            selectedContent.classList.add('active-tab');
+        } else if (selectedContent.classList.contains('tab-content')) {
+            selectedContent.classList.add('active-tab');
+        }
+    }
+}
+
+// Function to handle tab switching with event
+function handleTabSwitch(event, tabIndex) {
+    // Get the clicked button from the event
+    const clickedButton = event.currentTarget;
+
+    const tableContainer = clickedButton.closest('.uk-overflow-auto');
+    if (!tableContainer) return;
+
+    // Get all tab buttons in this container
+    const tabButtons = tableContainer.querySelectorAll('.tab-button, .tab, .tab, .tab');
+
+    // Find the index of the clicked button within its container
+    const clickedIndex = Array.from(tabButtons).indexOf(clickedButton);
+
+    // Generate a unique ID for the container if it doesn't have one
+    if (!tableContainer.id) {
+        tableContainer.id = 'table-' + Math.random().toString(36).substr(2, 9);
+    }
+
+    // Switch to the correct tab
+    activateTab(tableContainer, clickedIndex);
+}
+
+function switchTab(tabIndex, event) {
+    handleTabSwitch(event, tabIndex);
+}
+
+// For Dropdown Togglers
+function toggleItem(clickedTitle) {
+    const itemContent = clickedTitle.nextElementSibling;
+
+    itemContent.classList.toggle('active');
+
+    const chevronUp = clickedTitle.querySelector('.chevron-up');
+    chevronUp.classList.toggle('active');
+}