@necrolab/dashboard 0.4.32 → 0.4.34

package/.claude/settings.local.json

@@ -38,7 +38,10 @@
       "Bash(sudo chown:*)",
       "Bash(sudo npm install:*)",
       "Bash(node:*)",
-      "Bash(git checkout:*)"
+      "Bash(git checkout:*)",
+      "Bash(npx vue-tsc:*)",
+      "Bash(npx vite build:*)",
+      "Bash(npx eslint:*)"
     ],
     "deny": []
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.32",
+    "version": "0.4.34",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.js",
         "dev": "vite",

package/src/App.vue

@@ -264,14 +264,6 @@ watch(
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
-.task-buttons {
-    @apply flex mx-auto gap-x-4;
-    
-    svg {
-        width: 15px;
-        height: 15px;
-    }
-}
 
 .dropdown {
     position: relative;

package/src/assets/css/_input.scss

@@ -123,7 +123,7 @@ input[type="number"] {
 }
 // Ant Design Select styling
 .ant-select-dropdown {
-    z-index: 20000000000;
+    z-index: 10000 !important;
     position: relative;
     @apply rounded-lg #{!important};
 }

package/src/assets/css/main.scss

@@ -1,5 +1,29 @@
 @use "input";
 
+/* Global input styling fixes for iOS and other platforms */
+input, textarea, select, button {
+    /* Remove iOS blue highlight/border */
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    
+    /* Remove default focus outline */
+    outline: none;
+}
+
+input, textarea, select {
+    /* Remove browser default styling */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+/* Enhanced focus state removal for iOS */
+input:focus, textarea:focus, select:focus {
+    outline: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    box-shadow: none !important;
+}
+
 // Base styles
 html {
     overscroll-behavior: contain;
@@ -88,16 +112,42 @@ img {
     
     svg {
         @apply ml-2;
+        color: #6e7084 !important;
+        width: 16px;
+        height: 16px;
+        fill: #6e7084 !important;
     }
 }
 
 // Use CSS custom property to avoid global path selector
 .label-override svg {
-    color: #6e7084;
+    color: #6e7084 !important;
+    fill: #6e7084 !important;
 }
 
 .label-override svg path {
-    fill: currentColor;
+    fill: #6e7084 !important;
+    color: #6e7084 !important;
+}
+
+.label-override svg * {
+    fill: #6e7084 !important;
+    color: #6e7084 !important;
+}
+
+.switch-wrapper svg {
+    color: #6e7084 !important;
+    fill: #6e7084 !important;
+}
+
+.switch-wrapper svg path {
+    fill: #6e7084 !important;
+    color: #6e7084 !important;
+}
+
+.switch-wrapper svg * {
+    fill: #6e7084 !important;
+    color: #6e7084 !important;
 }
 
 // Component utilities
@@ -109,9 +159,6 @@ img {
     @apply w-2 h-2 rounded-full;
 }
 
-.task-buttons {
-    @apply bg-dark-600 px-1 lg:px-2 rounded-full shadow-lg items-center flex gap-x-1;
-}
 
 .mobile-icons {
     @apply flex lg:hidden ml-auto items-center gap-x-2;

package/src/components/Editors/Account/Account.vue

@@ -60,28 +60,76 @@ h4 {
     @apply text-center;
 }
 .task-buttons {
-    @apply flex mx-auto gap-x-2;
-    
+    @apply flex items-center justify-center mx-auto;
+    background: linear-gradient(135deg, rgba(45, 47, 74, 0.8), rgba(32, 32, 54, 0.9));
+    border: 1px solid rgba(74, 74, 97, 0.3);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 1px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+
     button {
-        @apply p-1 rounded transition-colors hover:bg-dark-500;
+        @apply flex items-center justify-center text-white transition-all duration-150 border-0 outline-0 relative;
+        background: transparent;
+        border-radius: 7px;
+        width: 28px;
+        height: 28px;
+        position: relative;
+
+        &:hover {
+            background: rgba(74, 74, 97, 0.3);
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(74, 74, 97, 0.5);
+            transform: scale(0.95);
+        }
     }
-    
+
     svg {
-        @apply w-4 h-4;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        z-index: 1;
+        
+        path {
+            fill: currentColor;
+        }
     }
-    
+
     img {
-        @apply w-4 h-4;
+        width: 14px;
+        height: 14px;
+        position: relative;
+        z-index: 1;
     }
 }
 
+// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
+    
     .task-buttons {
-        @apply gap-x-3;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 8px;
+        
+        button {
+            width: 26px;
+            height: 26px;
+            border-radius: 6px;
+        }
+
+        svg, img {
+            width: 13px;
+            height: 13px;
+        }
     }
+    
     .task-id {
         font-size: 6px !important;
         margin-right: -12px;
@@ -91,6 +139,51 @@ h4 {
         font-size: 7px !important;
     }
 }
+
+// Mobile optimization
+@media (max-width: 768px) {
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 7px;
+        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        
+        button {
+            width: 22px;
+            height: 22px;
+            border-radius: 5px;
+        }
+
+        svg, img {
+            width: 11px;
+            height: 11px;
+        }
+    }
+}
+
+// iPhone vertical (portrait) specific
+@media (max-width: 480px) and (orientation: portrait) {
+    .task-buttons {
+        padding: 1px;
+        gap: 0;
+        border-radius: 6px;
+        
+        button {
+            width: 18px;
+            height: 18px;
+            border-radius: 4px;
+            
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+
+        svg, img {
+            width: 9px;
+            height: 9px;
+        }
+    }
+}
 </style>
 <script setup>
 import { Row } from "@/components/Table";

package/src/components/Editors/Account/AccountView.vue

@@ -6,6 +6,7 @@
                     class="mr-3"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
+                    :isHeader="true"
                 />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
                     <MailIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />

package/src/components/Editors/Account/CreateAccount.vue

@@ -9,7 +9,9 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3 mt-7 mb-4">
                 <div class="input-wrapper col-span-4 z-10">
-                    <label class="label-override">Profile Tag </label>
+                    <label class="label-override">Profile Tag 
+                        <TagIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
                         :default="ui.profile.accountTags[0]"
@@ -19,7 +21,9 @@
                     />
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override">Email </label>
+                    <label class="label-override">Email 
+                        <MailIcon />
+                    </label>
                     <div :class="`input-default required ${errors.includes('email') ? 'error' : ''}`">
                         <input
                             placeholder="email@example.com"
@@ -39,7 +43,9 @@
                 </div>
             </div>
             <div class="input-wrapper col-span-12">
-                <label class="label-override">Password </label>
+                <label class="label-override">Password 
+                    <KeyIcon />
+                </label>
                 <div :class="`input-default required ${errors.includes('password') ? 'error' : ''}`">
                     <input
                         placeholder="***********"
@@ -72,7 +78,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon } from "@/components/icons";
+import { EditIcon, MailIcon, KeyIcon, ProfileIcon, TimerIcon, SandclockIcon, TagIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 

package/src/components/Editors/Profile/CreateProfile.vue

@@ -10,7 +10,9 @@
             <div class="grid grid-cols-12 gap-3 my-3">
                 <!-- Profile tag -->
                 <div class="input-wrapper col-span-4" style="z-index: 30 !important">
-                    <label class="label-override mb-2">Profile Tag </label>
+                    <label class="label-override mb-2">Profile Tag 
+                        <TagIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
                         :default="ui.profile.accountTags[0]"
@@ -22,7 +24,9 @@
 
                 <!-- Card Number -->
                 <div class="input-wrapper col-span-8 z-0">
-                    <label class="label-override mb-2">Card Number </label>
+                    <label class="label-override mb-2">Card Number 
+                        <CartIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cardNumber') ? 'error' : ''}`">
                         <input
                             ref="cardNumberInput"
@@ -38,7 +42,9 @@
 
                 <!-- Country chooser -->
                 <div class="input-wrapper col-span-2">
-                    <label class="label-override mb-2">Country </label>
+                    <label class="label-override mb-2">Country 
+                        <SandclockIcon />
+                    </label>
                     <ProfileCountryChooser
                         class="h-8"
                         :value="profile.country"
@@ -49,7 +55,9 @@
 
                 <!-- Exp Year -->
                 <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2 z-0">Expiry Year </label>
+                    <label class="label-override mb-2 z-0">Expiry Year 
+                        <TimerIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expYear') ? 'error' : ''}`"
                         default="Expiry Year"
@@ -66,8 +74,10 @@
                 </div>
 
                 <!-- Exp Month -->
-                <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2">Expiry Month </label>
+                <div class="input-wrapper col-span-5 z-2">
+                    <label class="label-override mb-2">Expiry Month 
+                        <TimerIcon />
+                    </label>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expMonth') ? 'error' : ''}`"
                         default="Expiry Month"
@@ -79,7 +89,9 @@
 
                 <!-- CVV -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">CVV </label>
+                    <label class="label-override mb-2">CVV 
+                        <ShieldIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cvv') ? 'error' : ''}`">
                         <input
                             placeholder="183"
@@ -94,24 +106,28 @@
 
                 <!-- City -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">City </label>
+                    <label class="label-override mb-2">City 
+                        <StadiumIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('city') ? 'error' : ''}`">
                         <input placeholder="Denver" v-model="profile.city" />
                     </div>
                 </div>
 
                 <!-- State -->
-                <div class="input-wrapper col-span-6 md:col-span-4 z-50">
-                    <label class="label-override mb-2">State </label>
+                <div class="input-wrapper col-span-6 md:col-span-4 z-1">
+                    <label class="label-override mb-2">State 
+                        <SandclockIcon />
+                    </label>
                     <div v-if="profile.country === 'US'" :class="`${errors.includes('state') ? 'error' : ''}`">
                         <Dropdown
                             class="input-default w-full"
                             default="Select State"
-                            :onClick="(state) => profile.state = state"
+                            :onClick="(state) => (profile.state = state)"
                             :options="usStates"
                             :allowDefault="false"
                             rightAmount="right-2"
-                            :chosen="profile.state"
+                            :value="profile.state"
                         />
                     </div>
                     <div v-else :class="`input-default ${errors.includes('state') ? 'error' : ''}`">
@@ -121,26 +137,45 @@
 
                 <!-- Zip -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">Zip </label>
+                    <label class="label-override mb-2">Zip 
+                        <KeyIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('zipCode') ? 'error' : ''}`">
-                        <input placeholder="80281" type="number" min="1" max="12" v-model="profile.zipCode" />
+                        <input placeholder="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
                     </div>
                 </div>
 
                 <!-- Address -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2">Address </label>
+                    <label class="label-override mb-2">Address 
+                        <HandIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('address') ? 'error' : ''}`">
-                        <input placeholder="Denver" v-model="profile.address" />
+                        <input placeholder="100 5th Avenue" v-model="profile.address" />
                     </div>
                 </div>
 
                 <!-- Generate -->
                 <div class="input-wrapper col-span-6 md:col-span-4 z-0">
-                    <label class="label-override mb-2 z-0"> Fake ID</label>
+                    <label class="label-override mb-2"> Fake ID
+                        <WildcardIcon />
+                    </label>
                     <div class="input-default mt-2 w-full h-10 flex items-center">
-                        <button @click="generate" class="text-white w-full text-xs flex items-center justify-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <button
+                            @click="generate"
+                            class="text-white w-full text-xs flex items-center justify-center gap-2"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
                                 <rect x="3" y="4" width="18" height="16" rx="2" />
                                 <line x1="7" y1="2" x2="7" y2="6" />
                                 <line x1="17" y1="2" x2="17" y2="6" />
@@ -169,6 +204,12 @@
 .z-0 {
     z-index: 0 !important;
 }
+.z-1 {
+    z-index: 1 !important;
+}
+.z-1 {
+    z-index: 2 !important;
+}
 
 .error {
     border-width: 2px !important;
@@ -177,6 +218,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
+import { MailIcon, CartIcon, ShieldIcon, StadiumIcon, KeyIcon, HandIcon, ProfileIcon, SandclockIcon, TimerIcon, TagIcon, WildcardIcon } from "@/components/icons";
 import { EditIcon } from "@/components/icons";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
@@ -191,7 +233,55 @@ const ui = useUIStore();
 
 // US States list (excluding GA and PR, alphabetically ordered)
 const usStates = [
-    "AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DE", "FL", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY"
+    "AK",
+    "AL",
+    "AR",
+    "AZ",
+    "CA",
+    "CO",
+    "CT",
+    "DE",
+    "FL",
+    "HI",
+    "IA",
+    "ID",
+    "IL",
+    "IN",
+    "KS",
+    "KY",
+    "LA",
+    "MA",
+    "MD",
+    "ME",
+    "MI",
+    "MN",
+    "MO",
+    "MS",
+    "MT",
+    "NC",
+    "ND",
+    "NE",
+    "NH",
+    "NJ",
+    "NM",
+    "NV",
+    "NY",
+    "OH",
+    "OK",
+    "OR",
+    "PA",
+    "RI",
+    "SC",
+    "SD",
+    "TN",
+    "TX",
+    "UT",
+    "VA",
+    "VT",
+    "WA",
+    "WI",
+    "WV",
+    "WY"
 ];
 const cardNumberInput = ref(null);
 const profile = ref({
@@ -232,17 +322,20 @@ const formatCardNumberDisplay = () => {
 };
 
 // Watch for changes in profile.cardNumber to sync with display
-watch(() => profile.value.cardNumber, (newValue) => {
-    if (newValue) {
-        const cleanNumber = newValue.replace(/\s+/g, "");
-        if (cleanNumber) {
-            const cardInfo = validateCard(cleanNumber);
-            displayCardNumber.value = cardInfo.formatted;
+watch(
+    () => profile.value.cardNumber,
+    (newValue) => {
+        if (newValue) {
+            const cleanNumber = newValue.replace(/\s+/g, "");
+            if (cleanNumber) {
+                const cardInfo = validateCard(cleanNumber);
+                displayCardNumber.value = cardInfo.formatted;
+            }
+        } else {
+            displayCardNumber.value = "";
         }
-    } else {
-        displayCardNumber.value = "";
     }
-});
+);
 
 // Initialize on modal open
 onMounted(() => {
@@ -277,9 +370,10 @@ const validate = (p) => {
     if (!/^\d{3,4}$/.test(`${p.cvv}`)) errors.value.push("cvv");
     const cleanCardNumber = p.cardNumber.replace(/\s+/g, "");
     // Validate card number based on type and length
-    const isValidCard = cleanCardNumber.match(/^4\d{15}$/) || // Visa (16 digits)
-                       cleanCardNumber.match(/^5[1-5]\d{14}$/) || // Mastercard (16 digits)
-                       cleanCardNumber.match(/^3[47]\d{13}$/); // AMEX (15 digits)
+    const isValidCard =
+        cleanCardNumber.match(/^4\d{15}$/) || // Visa (16 digits)
+        cleanCardNumber.match(/^5[1-5]\d{14}$/) || // Mastercard (16 digits)
+        cleanCardNumber.match(/^3[47]\d{13}$/); // AMEX (15 digits)
     if (!isValidCard) errors.value.push("cardNumber");
     if (!p.expYear) errors.value.push("expYear");
     if (!p.expMonth) errors.value.push("expMonth");
@@ -289,18 +383,18 @@ const validate = (p) => {
 
 const handleCreditCardUpdate = (event) => {
     const value = event.target.value.replace(/\D/g, "");
-    
+
     // Determine max length based on card type
     let maxLength = 16; // Default for Visa/Mastercard
-    if (value.startsWith('3')) {
+    if (value.startsWith("3")) {
         maxLength = 15; // AMEX
-    } else if (value.startsWith('4') || value.startsWith('5')) {
+    } else if (value.startsWith("4") || value.startsWith("5")) {
         maxLength = 16; // Visa/Mastercard
     }
-    
+
     const subs = value.substring(0, maxLength);
     const cardInfo = validateCard(subs);
-    
+
     // Store clean number (without spaces) in profile
     profile.value.cardNumber = subs;
     // Display formatted number in input
@@ -309,10 +403,10 @@ const handleCreditCardUpdate = (event) => {
 
 function done() {
     // Clear state if country is not US
-    if (profile.value.country !== 'US') {
-        profile.value.state = '';
+    if (profile.value.country !== "US") {
+        profile.value.state = "";
     }
-    
+
     ui.logger.Info("Created profile", profile.value);
     if (validate(profile.value) !== true) return;
     ui.toggleModal("");