@necrolab/dashboard 0.5.15 → 0.5.17

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

@@ -9,21 +9,17 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Profile tag -->
-                <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
-                        Profile Tag
-                        <TagIcon />
-                    </label>
+                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full`"
                         :default="ui.profile.tags[0]"
                         :options="ui.profile.tags"
-                        :onClick="(f) => (profile.tag = f)"
+                        :onClick="(f) => (formProfile.tag = f)"
                         :capitalize="true" />
-                </div>
+                </FormField>
 
                 <!-- Card Number -->
-                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-8">
+                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-8">
                     <input
                         ref="cardNumberInput"
                         placeholder="Enter card number"
@@ -35,51 +31,39 @@
                 </FormField>
 
                 <!-- Country chooser -->
-                <div class="input-wrapper col-span-2">
-                    <label class="label-override mb-2">
-                        Country
-                        <StadiumIcon />
-                    </label>
+                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-12 md:col-span-2" noWrapper>
                     <ProfileCountryChooser
-                        class="h-8"
-                        :value="profile.country"
+                        class="h-10"
+                        :value="formProfile.country"
                         :onClick="chooseCountry"
                         :disabled="true" />
-                </div>
+                </FormField>
 
                 <!-- Exp Year -->
-                <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2">
-                        Expiry Year
-                        <TimerIcon />
-                    </label>
+                <FormField label="Expiry Year" :icon="TimerIcon" :error="errors.includes('expYear')" z-index="0" class="col-span-6 md:col-span-5" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expYear') ? 'error' : ''}`"
                         default="Expiry Year"
                         :value="
-                            profile.expYear && !profile?.expYear?.startsWith('20')
-                                ? '20' + profile.expYear
-                                : profile.expYear
-                                  ? profile.expYear
+                            formProfile.expYear && !formProfile?.expYear?.startsWith('20')
+                                ? '20' + formProfile.expYear
+                                : formProfile.expYear
+                                  ? formProfile.expYear
                                   : undefined
                         "
                         :options="['2025', '2026', '2027', '2028', '2029', '2030', '2031']"
-                        :onClick="(f) => (profile.expYear = f)" />
-                </div>
+                        :onClick="(f) => (formProfile.expYear = f)" />
+                </FormField>
 
                 <!-- Exp Month -->
-                <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2">
-                        Expiry Month
-                        <TimerIcon />
-                    </label>
+                <FormField label="Expiry Month" :icon="TimerIcon" :error="errors.includes('expMonth')" z-index="0" class="col-span-6 md:col-span-5" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full ${errors.includes('expMonth') ? 'error' : ''}`"
                         default="Expiry Month"
-                        :value="profile.expMonth ? profile.expMonth : undefined"
+                        :value="formProfile.expMonth ? formProfile.expMonth : undefined"
                         :options="['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']"
-                        :onClick="(f) => (profile.expMonth = f)" />
-                </div>
+                        :onClick="(f) => (formProfile.expMonth = f)" />
+                </FormField>
 
                 <!-- CVV -->
                 <FormField label="CVV" :icon="ShieldIcon" :error="errors.includes('cvv')" z-index="0" class="col-span-6 md:col-span-4">
@@ -89,55 +73,45 @@
                         max="9999"
                         maxlength="4"
                         minlength="3"
-                        v-model="profile.cvv" />
+                        v-model="formProfile.cvv" />
                 </FormField>
 
                 <!-- City -->
                 <FormField label="City" :icon="StadiumIcon" :error="errors.includes('city')" z-index="0" class="col-span-6 md:col-span-4">
-                    <input placeholder="Denver" v-model="profile.city" />
+                    <input placeholder="Denver" v-model="formProfile.city" />
                 </FormField>
 
                 <!-- State -->
-                <div class="input-wrapper col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        State
-                        <SandclockIcon />
-                    </label>
-                    <div v-if="profile.country === 'US'">
-                        <Dropdown
-                            class="input-default w-full"
-                            default="Select State"
-                            :onClick="(state) => (profile.state = state)"
-                            :options="usStates"
-                            :allowDefault="false"
-                            rightAmount="right-2"
-                            :value="profile.state" />
-                    </div>
+                <FormField label="State" :icon="SandclockIcon" z-index="0" class="col-span-6 md:col-span-4" noWrapper>
+                    <Dropdown
+                        v-if="formProfile.country === 'US'"
+                        class="input-default w-full"
+                        default="Select State"
+                        :onClick="(state) => (formProfile.state = state)"
+                        :options="usStates"
+                        :allowDefault="false"
+                        rightAmount="right-2"
+                        :value="formProfile.state" />
                     <div v-else class="input-default">
                         <input disabled placeholder="N/A" value="" />
                     </div>
-                </div>
+                </FormField>
 
                 <!-- Zip -->
                 <FormField label="Zip" :icon="KeyIcon" :error="errors.includes('zipCode')" z-index="0" class="col-span-6 md:col-span-4">
-                    <input placeholder="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
+                    <input placeholder="10005" type="number" min="1" max="12" v-model="formProfile.zipCode" />
                 </FormField>
 
                 <!-- Address -->
                 <FormField label="Address" :icon="HandIcon" :error="errors.includes('address')" z-index="0" class="col-span-6 md:col-span-4">
-                    <input placeholder="100 5th Avenue" v-model="profile.address" />
+                    <input placeholder="100 5th Avenue" v-model="formProfile.address" />
                 </FormField>
 
                 <!-- Generate -->
-                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
-                    <label class="label-override mb-2">
-                        Fake ID
-                        <WildcardIcon />
-                    </label>
-                    <div class="input-default mt-2 flex h-10 w-full items-center">
-                        <button
-                            @click="generate"
-                            class="flex w-full items-center justify-center gap-2 text-xs text-white">
+                <FormField label="Fake ID" :icon="WildcardIcon" z-index="0" class="col-span-6 md:col-span-4">
+                    <button
+                        @click="generate"
+                        class="flex h-full w-full items-center justify-center gap-2 text-xs text-white">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="14"
@@ -153,81 +127,52 @@
                                 <line x1="17" y1="2" x2="17" y2="6" />
                             </svg>
                             <span>Generate</span>
-                        </button>
-                    </div>
-                </div>
+                    </button>
+                </FormField>
             </div>
 
             <!-- Readonly fields when editing -->
-            <div v-if="ui.currentlyEditing?.profileName" class="mt-6 grid grid-cols-12 gap-3 pt-4 border-t border-dark-600">
-                <div v-if="ui.currentlyEditing.tags && ui.currentlyEditing.tags.length > 0" class="col-span-6">
-                    <label class="label-override mb-2">Tags</label>
-                    <div class="flex gap-2 flex-wrap">
-                        <TagLabel v-for="tag in ui.currentlyEditing.tags" :key="tag" :text="tag" />
-                    </div>
-                </div>
-                <div class="col-span-6">
-                    <label class="label-override mb-2">Status</label>
-                    <div class="flex items-center gap-3 h-10">
-                        <StatusBadge :enabled="ui.currentlyEditing.enabled" size="large" />
-                        <span class="text-sm font-medium" :class="ui.currentlyEditing.enabled ? 'text-green-400' : 'text-red-400'">
-                            {{ ui.currentlyEditing.enabled ? 'Enabled' : 'Disabled' }}
-                        </span>
-                    </div>
-                </div>
-            </div>
+            <ReadonlyFieldsSection v-if="ui.currentlyEditing?.profileName" :data="ui.currentlyEditing" />
         </div>
 
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-            @click="done()">
+        <button class="btn-modal ml-auto mt-4 w-48" @click="done()">
             Save
-            <EditIcon />
+            <EditIcon class="ml-2" />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.label-override {
-    @apply flex items-center;
-    color: #e1e1e4 !important;
-
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import FormField from "@/components/ui/FormField.vue";
 import {
-    MailIcon,
     CartIcon,
     ShieldIcon,
     StadiumIcon,
     KeyIcon,
     HandIcon,
-    ProfileIcon,
     SandclockIcon,
     TimerIcon,
     TagIcon,
     WildcardIcon
 } from "@/components/icons";
 import { EditIcon } from "@/components/icons";
-import StatusBadge from "@/components/ui/StatusBadge.vue";
-import TagLabel from "@/components/Editors/TagLabel.vue";
+import ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { ref, computed, watch, nextTick, onMounted } from "vue";
-import { fakeId } from "@/stores/utils";
-import { validateCard } from "@/stores/utils";
+import { ref, watch, nextTick, onMounted } from "vue";
+import { fakeId } from "@/libs/utils/dataGeneration";
+import { validateCard } from "@/libs/utils/validation";
+import { useFormValidation } from "@/composables/useFormValidation";
+
+defineProps({
+    profile: {
+        type: Object,
+        default: null
+    }
+});
 
-const props = defineProps({ profile: { type: Object, required: false } });
-const errors = ref([]);
+const { errors, validateProfile } = useFormValidation();
 const ui = useUIStore();
 
 // US States list (excluding GA and PR, alphabetically ordered)
@@ -283,7 +228,7 @@ const usStates = [
     "WY"
 ];
 const cardNumberInput = ref(null);
-const profile = ref({
+const formProfile = ref({
     cvv: "",
     cardNumber: "",
     city: "",
@@ -293,15 +238,15 @@ const profile = ref({
     zipCode: ""
 });
 
-if (ui.currentlyEditing?.profileName) profile.value = ui.currentlyEditing;
+if (ui.currentlyEditing?.profileName) formProfile.value = ui.currentlyEditing;
 
 // Reactive display value for the formatted card number
 const displayCardNumber = ref("");
 
 // Initialize display card number with formatting
 const initializeCardNumberDisplay = () => {
-    if (profile.value.cardNumber) {
-        const cleanNumber = profile.value.cardNumber.replace(/\s+/g, "");
+    if (formProfile.value.cardNumber) {
+        const cleanNumber = formProfile.value.cardNumber.replace(/\s+/g, "");
         if (cleanNumber) {
             const cardInfo = validateCard(cleanNumber);
             displayCardNumber.value = cardInfo.formatted;
@@ -311,8 +256,8 @@ const initializeCardNumberDisplay = () => {
 
 // Format card number display on focus
 const formatCardNumberDisplay = () => {
-    if (profile.value.cardNumber) {
-        const cleanNumber = profile.value.cardNumber.replace(/\s+/g, "");
+    if (formProfile.value.cardNumber) {
+        const cleanNumber = formProfile.value.cardNumber.replace(/\s+/g, "");
         if (cleanNumber) {
             const cardInfo = validateCard(cleanNumber);
             displayCardNumber.value = cardInfo.formatted;
@@ -322,7 +267,7 @@ const formatCardNumberDisplay = () => {
 
 // Watch for changes in profile.cardNumber to sync with display
 watch(
-    () => profile.value.cardNumber,
+    () => formProfile.value.cardNumber,
     (newValue) => {
         if (newValue) {
             const cleanNumber = newValue.replace(/\s+/g, "");
@@ -345,39 +290,21 @@ onMounted(() => {
 
 const generate = () => {
     const fake = fakeId();
-    profile.value.city = fake.city;
-    profile.value.zipCode = fake?.zipCode;
-    profile.value.address = fake.address;
-    profile.value.state = fake.state;
-    profile.value.country = "US";
+    formProfile.value.city = fake.city;
+    formProfile.value.zipCode = fake?.zipCode;
+    formProfile.value.address = fake.address;
+    formProfile.value.state = fake.state;
+    formProfile.value.country = "US";
 };
 
 const chooseCountry = (f) => {
-    profile.value.country = f;
-    if (f !== "US") profile.value.state = "";
+    formProfile.value.country = f;
+    if (f !== "US") formProfile.value.state = "";
 };
 
 const validate = (p) => {
-    errors.value = [];
     if (!p.zipCode && !p.address && !p.state && !p.city) generate();
-
-    if (!p.zipCode) errors.value.push("zipCode");
-    if (!p.address) errors.value.push("address");
-    if (!p.state && p.country === "US") errors.value.push("state");
-    if (!p.city) errors.value.push("city");
-    if (!p.country) errors.value.push("country");
-    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)
-    if (!isValidCard) errors.value.push("cardNumber");
-    if (!p.expYear) errors.value.push("expYear");
-    if (!p.expMonth) errors.value.push("expMonth");
-    if (!p.expMonth) errors.value.push("expMonth");
-    return errors.value.length === 0;
+    return validateProfile(p);
 };
 
 const handleCreditCardUpdate = (event) => {
@@ -395,20 +322,20 @@ const handleCreditCardUpdate = (event) => {
     const cardInfo = validateCard(subs);
 
     // Store clean number (without spaces) in profile
-    profile.value.cardNumber = subs;
+    formProfile.value.cardNumber = subs;
     // Display formatted number in input
     displayCardNumber.value = cardInfo.formatted;
 };
 
 function done() {
     // Clear state if country is not US
-    if (profile.value.country !== "US") {
-        profile.value.state = "";
+    if (formProfile.value.country !== "US") {
+        formProfile.value.state = "";
     }
 
-    ui.logger.Info("Created profile", profile.value);
-    if (validate(profile.value) !== true) return;
+    ui.logger.Info("Created profile", formProfile.value);
+    if (validate(formProfile.value) !== true) return;
     ui.toggleModal("");
-    ui.addProfile(profile.value);
+    ui.addProfile(formProfile.value);
 }
 </script>

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

@@ -1,22 +1,22 @@
 <template>
     <Row
-        class="relative grid-cols-7 text-white lg:grid-cols-8"
+        class="relative h-16 grid-cols-4 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-8 text-white"
         @click="ui.setOpenContextMenu('')"
         @click.right.prevent="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd">
-        <div class="col-span-3 flex lg:col-span-2">
+        <div class="col-span-2 sm:col-span-2 md:col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
                 :toggled="props.profile.selected"
                 @valueUpdate="ui.toggleProfileSelected(props.profile.id)" />
-            <h4 class="mx-auto text-white">
+            <h4 class="mx-auto text-center text-white">
                 {{ props.profile.profileName }}
             </h4>
         </div>
-        <div class="col-span-1 lg:col-span-2">
-            <h4 class="flex items-center justify-center gap-2 text-white">
+        <div class="col-span-1 hidden md:block lg:col-span-2">
+            <h4 class="flex items-center justify-center gap-2 text-center text-white">
                 <span class="hidden sm:block">
                     {{
                         props.profile.privacy
@@ -29,20 +29,20 @@
                 <img class="h-6 w-6" :src="getAccountType()" />
             </h4>
         </div>
-        <div class="col-span-1">
-            <h4 class="text-white">{{ expDate() }}</h4>
+        <div class="col-span-1 hidden md:block">
+            <h4 class="text-center text-white">{{ expDate() }}</h4>
         </div>
         <div class="col-span-1 flex justify-center">
             <StatusBadge :enabled="props.profile.enabled" size="small" />
         </div>
 
         <div class="col-span-1 hidden lg:block">
-            <h4 class="flex justify-center gap-1 text-white">
+            <h4 class="flex justify-center gap-1 text-center text-white">
                 <TagLabel v-for="tag in props.profile.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
-        <div class="col-span-1 flex">
+        <div class="col-span-1 sm:col-span-1 flex">
             <ActionButtonGroup>
                 <li>
                     <button @click="edit">
@@ -51,12 +51,12 @@
                 </li>
                 <li v-if="props.profile.enabled">
                     <button @click="disable">
-                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
+                        <img class="icon-md" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
+                        <img class="icon-md" src="/img/controls/enable.svg" />
                     </button>
                 </li>
                 <li>
@@ -66,26 +66,26 @@
         </div>
     </Row>
 </template>
-<style lang="scss" scoped>
-h4 {
-    @apply text-center;
-}
-</style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { TrashIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import StatusBadge from "@/components/ui/StatusBadge.vue";
 import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
 import { useUIStore } from "@/stores/ui";
-import { validateCard } from "@/stores/utils";
+import { validateCard } from "@/libs/utils/validation";
 import TagLabel from "@/components/Editors/TagLabel.vue";
 import { useRowSelection } from "@/composables/useRowSelection";
+import { computed } from "vue";
+import { useEnableDisable } from "@/composables/useEnableDisable";
 
 const ui = useUIStore();
 
 const props = defineProps({
-    profile: { type: Object }
+    profile: {
+        type: Object,
+        required: true
+    }
 });
 
 const getAccountType = () => {
@@ -99,8 +99,7 @@ const getAccountType = () => {
 
 const expDate = () =>
     props.profile.privacy ? "••/••" : `${props.profile.expMonth}/${props.profile.expYear?.replace("20", "")}`;
-const enable = async () => await ui.addProfile({ ...props.profile, enabled: true });
-const disable = async () => await ui.addProfile({ ...props.profile, enabled: false });
+const { enable, disable } = useEnableDisable(computed(() => props.profile), ui.addProfile);
 const edit = () => {
     ui.currentlyEditing = props.profile;
     ui.toggleModal("create-profile");

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg" ref="dropdownRef">
+        <div class="dropdown input-default h-10 w-12 md:h-10 flex justify-center items-center p-0 bg-dark-550 rounded-lg [background-clip:border-box]" ref="dropdownRef">
             <span @click="toggleOpen" class="flex justify-between items-center z-50 text-white">
                 <div class="flex gap-3 justify-center">
                     <img class="w-5" :src="`/flags/${current?.toLowerCase()}.svg`" />
@@ -9,7 +9,7 @@
             <Teleport to="body">
                 <div
                     v-if="open && !disabled"
-                    class="dropdown-content-portal special-dropdown"
+                    class="min-w-20 bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50 p-2 [max-height:192px] overflow-y-auto custom-scrollbar-y"
                     :style="menuStyle"
                     @click.stop
                     @wheel.stop
@@ -17,9 +17,9 @@
                     <div
                         v-for="(country, i) in countries"
                         v-bind:key="country"
-                        :class="`cursor-pointer w-12 ${i === 0 ? '' : 'my-2'}`"
+                        :class="`px-3 py-2 text-sm text-white cursor-pointer rounded-md ${i === 0 ? '' : 'my-2'}`"
                         @click="set(country)">
-                        <div class="flex justify-center items-center smooth-hover">
+                        <div class="flex items-center justify-center gap-3 smooth-hover">
                             <span class="text-sm">{{ country }}</span>
                             <img class="w-5 ml-3" :src="`/flags/${country?.toLowerCase()}.svg`" />
                         </div>
@@ -40,9 +40,18 @@ const open = ref(false);
 const dropdownRef = ref(null);
 
 const props = defineProps({
-    value: { type: String },
-    onClick: { type: Function },
-    disabled: { type: Boolean, required: false }
+    value: {
+        type: String,
+        default: 'US'
+    },
+    onClick: {
+        type: Function,
+        required: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const current = ref(props.value || "US");
@@ -82,56 +91,3 @@ watch(
     (n) => (current.value = n)
 );
 </script>
-
-<style scoped>
-.special-dropdown {
-    @apply min-w-20;
-}
-
-.small-dropdown {
-    @apply h-10 !important;
-    background-clip: border-box !important;
-    /* border-radius: 100% !important; */
-    padding: 0;
-    width: 3em !important;
-    display: flex;
-    justify-items: center;
-    justify-content: center;
-}
-
-@media (min-width: 768px) {
-    .small-dropdown {
-        height: 40px !important; /* Match input-default responsive height */
-    }
-}
-
-.dropdown-content-portal {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
-    padding: 0.5rem;
-    max-height: 192px !important;
-    overflow-y: auto !important;
-    overscroll-behavior: contain !important;
-    touch-action: pan-y !important;
-    -webkit-overflow-scrolling: touch !important;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.dropdown-content-portal::-webkit-scrollbar {
-    display: none;
-}
-
-.dropdown-content-portal > div {
-    @apply px-3 py-2 text-sm text-white cursor-pointer;
-    border-radius: 6px;
-}
-
-.dropdown-content-portal > div:hover {
-    /* Removed hover background */
-}
-
-.dropdown-content-portal > div .flex {
-    @apply items-center justify-center;
-    gap: 0.75rem;
-}
-</style>