@necrolab/dashboard 0.5.12 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.12",
+    "version": "0.5.13",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/src/App.vue

@@ -1,15 +1,5 @@
 <template>
-    <div class="layout">
-        <!-- iPhone Landscape Lock Overlay -->
-        <div v-if="!isIpadOS() && isIOS()" class="iphone-landscape-lock">
-            <div class="rotate-message">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="rotate-icon">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                </svg>
-                <p class="rotate-text">Please rotate your device to portrait mode</p>
-            </div>
-        </div>
-
+    <div class="layout min-h-screen h-screen">
         <transition name="fade">
             <Splash v-if="isLoading" />
         </transition>
@@ -60,10 +50,7 @@
                         <component
                             :is="Component"
                             :key="route.path"
-                            :class="[
-                                'component-container pb-2 mt-0 lg:mt-4 ios-wrapper',
-                                { 'w-full': landscapeIos }
-                            ]" />
+                            class="component-container w-full mx-auto px-3 xs:px-3 md:px-2 lg:px-6 xl:px-10 pb-2 mt-0 lg:mt-4 ios-wrapper" />
                     </transition>
                 </router-view>
             </div>
@@ -84,7 +71,6 @@ const ui = useUIStore();
 const router = useRouter();
 const isLoading = ref(false);
 const spinner = storeToRefs(ui).showSpinner;
-const landscapeIos = ref(false);
 
 function isIOS() {
     if (/iPad|iPhone|iPod/.test(navigator.platform)) {
@@ -98,33 +84,6 @@ function isIpadOS() {
     return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
 }
 
-// Lock iPhone (not iPad) to portrait orientation only
-function lockOrientationToPortrait() {
-    if (isIOS() && !isIpadOS()) {
-        // Try to lock orientation using Screen Orientation API
-        if (screen.orientation && screen.orientation.lock) {
-            screen.orientation.lock('portrait').catch(() => {
-                // Silently fail if not supported or in browser (vs PWA)
-            });
-        }
-
-        // Also prevent landscape handling
-        const preventLandscape = () => {
-            if (window.innerWidth > window.innerHeight) {
-                // Force dimensions to portrait if somehow in landscape
-                document.documentElement.style.setProperty('width', window.innerHeight + 'px');
-                document.documentElement.style.setProperty('height', window.innerWidth + 'px');
-            }
-        };
-
-        window.addEventListener('orientationchange', preventLandscape);
-        window.addEventListener('resize', preventLandscape);
-    }
-}
-
-// Run orientation lock on mount
-lockOrientationToPortrait();
-
 // Prevent pinch-to-zoom gestures
 let lastTouchDistance = 0;
 
@@ -162,28 +121,6 @@ document.addEventListener('touchend', (e) => {
     lastTouchEnd = now;
 }, { passive: false });
 
-// Handle orientation changes for iOS devices
-const handleOrientationChange = () => {
-    if (isIOS()) {
-        if (isIpadOS()) {
-            // For iPad, we want to allow proper viewport resizing
-            landscapeIos.value = window.matchMedia("(orientation: landscape)").matches;
-            document.documentElement.style.setProperty("width", "100%", "important");
-            document.body.style.setProperty("width", "100%", "important");
-        } else {
-            // For iPhone, maintain the current behavior
-            landscapeIos.value = window.matchMedia("(orientation: landscape)").matches;
-        }
-    }
-};
-
-// Initial orientation check
-handleOrientationChange();
-
-// Listen for orientation changes
-window.matchMedia("(orientation: portrait)").addEventListener("change", handleOrientationChange);
-window.matchMedia("(orientation: landscape)").addEventListener("change", handleOrientationChange);
-
 if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
 // Ensure notch handling runs when Vue app mounts
@@ -673,33 +610,6 @@ watch(
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
-// Ultra bulletproof scroll prevention and zoom prevention
-html,
-body {
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    width: 100% !important;
-    height: 100% !important;
-    touch-action: none !important;
-    // Prevent zoom on desktop
-    zoom: 1;
-    -moz-transform: scale(1);
-    -moz-transform-origin: 0 0;
-}
-
-#app {
-    overflow: hidden !important;
-    overscroll-behavior: none !important;
-    width: 100% !important;
-    height: 100vh !important;
-    touch-action: none !important;
-}
-
-// Prevent zoom but allow scrolling on specific elements
-* {
-    touch-action: manipulation !important;
-}
-
 // Override for scrollable containers - allow proper touch scrolling
 .table-component,
 .stop-pan,
@@ -728,73 +638,6 @@ body {
     z-index: 1;
 }
 
-.layout {
-    @apply flex flex-col;
-    min-height: 90vh;
-    overflow: hidden !important;
-    height: 100vh !important;
-}
-
-// iPhone landscape lock overlay
-.iphone-landscape-lock {
-    position: fixed;
-    inset: 0;
-    background: oklch(0.1822 0 0);
-    z-index: 99999;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    opacity: 1;
-    transition: opacity 0.1s ease-out;
-
-    // Hide in portrait mode
-    @media (max-device-width: 430px) and (orientation: portrait) {
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    // Show immediately in landscape
-    @media (max-device-width: 430px) and (orientation: landscape) {
-        opacity: 1;
-        pointer-events: all;
-    }
-
-    // Hide completely on iPad and desktop
-    @media (min-device-width: 431px) {
-        display: none;
-    }
-
-    .rotate-message {
-        text-align: center;
-        padding: 2rem;
-
-        .rotate-icon {
-            width: 64px;
-            height: 64px;
-            margin: 0 auto 1rem;
-            color: oklch(0.72 0.15 145);
-            animation: rotate-pulse 2s ease-in-out infinite;
-        }
-
-        .rotate-text {
-            color: oklch(0.9 0 0);
-            font-size: 1.125rem;
-            font-weight: 500;
-        }
-    }
-}
-
-@keyframes rotate-pulse {
-    0%, 100% {
-        transform: rotate(0deg) scale(1);
-        opacity: 1;
-    }
-    50% {
-        transform: rotate(90deg) scale(1.1);
-        opacity: 0.8;
-    }
-}
-
 .router-wrapper {
     @apply pt-5;
     transition: margin 0.25s;
@@ -805,10 +648,6 @@ body {
     transition: margin 0.25s;
 }
 
-.component-container {
-    @apply w-full mx-auto px-4 xs:px-4 md:px-2 lg:px-6 xl:px-10;
-}
-
 // Page navigation transitions
 .page-transition-enter-active {
     transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

package/src/assets/css/components/buttons.scss

@@ -5,65 +5,50 @@
 /* Primary Button - Solid green with clean shadow */
 .btn-primary {
     @apply font-medium transition-all duration-150;
-    background-color: oklch(0.72 0.15 145);
-    color: oklch(1 0 0);
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
-    border: 2px solid oklch(0.72 0.15 145);
+    @apply bg-accent-green text-white;
+    @apply px-4 py-2 rounded-md;
+    @apply shadow-sm border-2 border-accent-green;
 
     &:hover {
-        background-color: oklch(0.68 0.15 145);
-        border-color: oklch(0.68 0.15 145);
+        @apply bg-green-400 border-green-400;
     }
 
     &:active {
-        background-color: oklch(0.64 0.15 145);
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
+        @apply bg-green-500 border-accent-green;
+        @apply outline outline-1 outline-accent-green outline-offset-0;
     }
 }
 
 /* Secondary Button - Transparent with green border, fills on hover */
 .btn-secondary {
     @apply font-medium transition-all duration-150;
-    background-color: transparent;
-    color: oklch(0.72 0.15 145);
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    border: 2px solid oklch(0.72 0.15 145);
+    @apply bg-transparent text-accent-green;
+    @apply px-4 py-2 rounded-md;
+    @apply border-2 border-accent-green;
 
     &:hover {
-        background-color: oklch(0.72 0.15 145);
-        color: oklch(1 0 0);
-        border-color: oklch(0.72 0.15 145);
+        @apply bg-accent-green text-white border-accent-green;
     }
 
     &:active {
-        background-color: oklch(0.68 0.15 145);
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
+        @apply bg-green-400 border-accent-green;
+        @apply outline outline-1 outline-accent-green outline-offset-0;
     }
 }
 
 /* Ghost Button - No border, muted text, subtle hover */
 .btn-ghost {
     @apply font-medium transition-all duration-150;
-    background-color: transparent;
-    color: oklch(0.82 0 0);
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    border: none;
+    @apply bg-transparent text-light-400;
+    @apply px-4 py-2 rounded-md;
+    @apply border-none;
 
     &:hover {
-        background-color: oklch(0.22 0 0);
-        color: oklch(0.90 0 0);
+        @apply bg-dark-450 text-light-300;
     }
 
     &:active {
-        background-color: oklch(0.19 0 0);
+        @apply bg-dark-350;
     }
 }
 
@@ -71,114 +56,85 @@
 .btn-danger,
 .btn-destructive {
     @apply font-medium transition-all duration-150;
-    background-color: oklch(0.60 0.20 25);
-    color: oklch(1 0 0);
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 2px oklch(0 0 0 / 0.1);
-    border: none;
+    @apply bg-error-500 text-white;
+    @apply px-4 py-2 rounded-md;
+    @apply shadow-sm border-none;
 
     &:hover {
-        background-color: oklch(0.56 0.20 25);
+        @apply bg-error-400;
     }
 
     &:active {
-        background-color: oklch(0.52 0.20 25);
+        @apply bg-red-500;
     }
 }
 
 /* Icon Button - Clean hover states */
 .btn-icon {
     @apply flex items-center justify-center transition-all duration-150;
-    padding: 0.25rem;
-    border-radius: 0.375rem;
-    background-color: transparent;
-    color: oklch(0.82 0 0);
-    border: none;
+    @apply p-1 rounded-md;
+    @apply bg-transparent text-light-400;
+    @apply border-none;
 
     &:hover {
-        background-color: oklch(0.22 0 0);
-        color: oklch(1 0 0);
+        @apply bg-dark-450 text-white;
     }
 
     &:active {
-        background-color: oklch(0.19 0 0);
+        @apply bg-dark-350;
     }
 }
 
 /* Action Button - Similar to secondary but with specific sizing */
 .btn-action {
     @apply font-medium flex items-center justify-center gap-x-2 transition-all duration-150;
-    background-color: transparent;
-    color: oklch(0.72 0.15 145);
-    padding: 0 1rem;
-    height: 2.5rem;
-    border-radius: 0.375rem;
-    border: 2px solid oklch(0.72 0.15 145);
-    font-size: 0.75rem;
+    @apply bg-transparent text-accent-green;
+    @apply px-4 h-10 rounded-md;
+    @apply border-2 border-accent-green;
+    @apply text-xs;
 
     &:hover {
-        background-color: oklch(0.72 0.15 145);
-        color: oklch(1 0 0);
-        border-color: oklch(0.72 0.15 145);
+        @apply bg-accent-green text-white border-accent-green;
     }
 
     &:active {
-        background-color: oklch(0.68 0.15 145);
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
+        @apply bg-green-400 border-accent-green;
+        @apply outline outline-1 outline-accent-green outline-offset-0;
     }
 }
 
 /* Default Button - Base styling */
 .button-default {
     @apply font-medium transition-all duration-150 flex items-center justify-center gap-x-2;
-    height: 3.5rem;
-    border-radius: 0.5rem;
-    color: oklch(1 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    font-size: 0.875rem;
-    padding: 0 1.5rem;
-    width: 12rem;
+    @apply h-14 rounded-lg text-white border-2 border-dark-600 text-sm px-6 w-48;
 
     svg {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
+        @apply w-4 h-4 flex-shrink-0;
     }
 
     @media (max-width: 768px) {
-        height: 3rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        width: 100%;
-        max-width: 100%;
+        @apply h-12 text-sm font-medium w-full max-w-full;
 
         svg {
-            width: 16px;
-            height: 16px;
+            @apply w-4 h-4;
         }
     }
 
     @media (max-width: 480px) {
-        height: 3.25rem;
-        font-size: 0.9375rem;
+        @apply h-[3.25rem] text-[0.9375rem];
 
         svg {
-            width: 16px;
-            height: 16px;
+            @apply w-4 h-4;
         }
     }
 
     &:hover {
-        border-color: oklch(0.72 0.15 145);
+        @apply border-accent-green;
     }
 
     &:active, &:focus {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
+        @apply border-accent-green;
+        @apply outline outline-1 outline-accent-green outline-offset-0;
     }
 }
 
@@ -206,11 +162,3 @@
         border-radius: 8px;
     }
 }
-
-@screen mobile-landscape {
-    .btn-action {
-        @apply text-base px-8 h-14;
-        min-height: 56px;
-        font-weight: 600;
-    }
-}

package/src/assets/css/components/forms.scss

@@ -3,20 +3,18 @@
    ========================================================================== */
 
 .input-default {
-    @apply flex items-center bg-clip-padding relative box-border px-3 py-2 border-2 h-10;
+    @apply relative box-border flex h-10 items-center border-2 bg-clip-padding px-3 py-2;
     background: oklch(0.19 0 0);
     border-color: oklch(0.26 0 0);
     border-radius: 0.5rem;
     transition: border-color 0.15s ease;
 
     &:hover {
-        border-color: oklch(0.30 0 0);
+        border-color: oklch(0.3 0 0);
     }
 
     &:focus-within {
         border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
     }
 
     input {
@@ -29,7 +27,7 @@
         }
 
         &::placeholder {
-            color: oklch(0.50 0 0);
+            color: oklch(0.5 0 0);
         }
 
         // Hide default number input spinners - use custom .input-incrementer instead
@@ -45,7 +43,8 @@
     }
 
     .input-incrementer {
-        @apply flex flex-col ml-2 gap-0.5;
+        @apply flex flex-col gap-0.5;
+        margin-left: 0.5rem;
 
         button {
             @apply w-6 h-4 flex items-center justify-center text-white transition-all duration-200 rounded-sm;
@@ -67,19 +66,10 @@
                 transform: translateY(0);
             }
 
-            &:first-child {
-                border-radius: 4px 4px 2px 2px;
-            }
-
-            &:last-child {
-                border-radius: 2px 2px 4px 4px;
+            svg {
+                @apply h-3 w-3;
             }
         }
-
-        svg {
-            @apply w-2.5 h-2.5;
-            filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.3));
-        }
     }
 }
 
@@ -88,7 +78,7 @@
 }
 
 .input-wrapper label {
-    @apply text-white font-medium mb-2 block;
+    @apply mb-2 block font-medium text-white;
     font-size: 16px;
 }
 
@@ -104,7 +94,7 @@
 }
 
 .ant-select {
-    @apply flex items-center bg-clip-padding relative box-border px-1 py-1 border-2 h-10 !important;
+    @apply relative box-border flex h-10 items-center border-2 bg-clip-padding px-1 py-1 !important;
     background: oklch(0.19 0 0); /* Input background */
     border-color: oklch(0.26 0 0); /* Default border */
     border-radius: 0.375rem; /* Consistent with buttons */
@@ -112,7 +102,7 @@
     transition: border-color 0.15s ease;
 
     &:hover {
-        border-color: oklch(0.30 0 0); /* Hover border */
+        border-color: oklch(0.3 0 0); /* Hover border */
     }
 
     &.ant-select-focused {
@@ -201,14 +191,6 @@
         input {
             font-size: 12px;
         }
-
-        .input-incrementer button {
-            @apply w-5 h-3;
-
-            svg {
-                @apply w-2 h-2;
-            }
-        }
     }
 
     .input-wrapper label {

package/src/assets/css/components/search-groups.scss

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   UNIFIED SEARCH GROUP COMPONENTS
+   Shared styling for the combined search/filter/dropdown input groups
+   used on Accounts and Profiles pages.
+   ========================================================================== */
+
+.unified-search-group {
+    border: 2px solid oklch(0.2809 0 0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: oklch(0.2603 0 0);
+    transition: all 0.15s ease;
+    display: flex;
+
+    .tag-toggle,
+    .dropdown,
+    input {
+        border: none !important;
+        border-width: 0 !important;
+        border-radius: 0 !important;
+        height: 40px !important;
+        background: transparent !important;
+        box-shadow: none !important;
+        min-width: fit-content !important;
+    }
+
+    .tag-toggle {
+        padding: 0;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    .tag-toggle button {
+        font-size: 0.875rem;
+        padding: 0.5rem 0.75rem;
+        min-width: fit-content;
+        border: 0 solid transparent !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    .dropdown {
+        width: 120px !important;
+        min-width: 120px !important;
+    }
+
+    .dropdown-display {
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+    }
+
+    input {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        flex: 1;
+
+        &::placeholder {
+            color: oklch(0.50 0 0);
+        }
+
+        &:focus {
+            outline: none !important;
+        }
+    }
+
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}

package/src/assets/css/components/tables.scss

@@ -16,12 +16,4 @@
     overflow: visible !important;
     background-color: oklch(0.2046 0 0);
     box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
-
-    &:hover {
-        background-color: oklch(0.2046 0 0);
-    }
-
-    tr:hover {
-        background-color: oklch(0.2046 0 0);
-    }
 }