@simitgroup/simpleapp-generator 1.1.0 → 1.1.2

package/templates/nuxt/components/header/button/HeaderButtonProfile.vue.eta

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import Avatar from 'primevue/avatar';
+import Dropdown from 'primevue/dropdown';
 import OverlayPanel from 'primevue/overlaypanel';
 import {ref} from 'vue'
 
+
+const { locale,setLocale,locales } = useI18n()
+const mylocale = ref(locale)
 const userprofileoverlay = ref();
+const colors = [{value:'light', name:'Light'},{value:'dark', name:'Dark'}]
 const toggle = (event:any) => {
     userprofileoverlay.value.toggle(event);   
 }
@@ -21,6 +26,11 @@ const toFrontpage = () =>{
     userprofileoverlay.value.toggle();   
     navigateTo('/')
 }
+const saveLocale=async (v:string)=>{    
+    await setLocale(v)
+} 
+
+
 
 </script>
 
@@ -29,10 +39,10 @@ const toFrontpage = () =>{
         <div class=" w-[120px] truncate ...">
             
             <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
-                <p>{{ getUserProfile().fullName }}</p>
+                <p>{{ getProfileFullName() }}</p>
                 <!-- <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                 -->
                 <div class="w-8 h-8 bg-cover bg-center rounded-md">
-                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                 </div>
             </div>
             
@@ -42,21 +52,42 @@ const toFrontpage = () =>{
                 <div class="py-2 transition duration-150 ease-in-out z-10 absolute top-0 right-0 bottom-0 left-0" id="modal">
                     <div role="alert" class="container mx-auto w-full md:w-full max-w-lg">
                         <div class="relative p-4 md:p-8 bg-white dark:bg-gray-800 shadow-md rounded border border-gray-400">
-                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5 cursor-pointer" @click="toProfile">
+                            <div class="w-full flex items-center justify-start text-gray-600 dark:text-gray-400 mb-5" >
                                 <div class="w-12 h-12 bg-cover bg-center rounded-md">
-                                    <img :src="getAvatarLink(getUserProfile().email,32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
+                                    <img :src="getAvatarLink(getProfileEmail(),32)" alt="" class="h-full w-full overflow-hidden object-cover rounded-full border-2 border-white dark:border-gray-700 shadow" />
                                 </div>
-                                <div class="flex flex-col cursor-pointer" >
+                                <div class="flex flex-col" >
                                     <h1 class="text-left text-gray-800 dark:text-gray-100 font-lg font-bold tracking-normal leading-tight ml-2">{{ getUserProfile().fullName }}</h1>
                                     <p  class="text-gray-400 dark:text-gray-100 font-normal text-base tracking-normal ml-2 mr-4">{{getUserProfile().group }}</p>
                                 </div>
                                 
                             </div>
+                            <!-- language -->
+                            <div class="col-span-full">
+                                <label for="pick-lang" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('language') }}</label>
+                                <div class="mt-2">
+                                    <Dropdown inputId="pick-lang" @update:model-value="saveLocale" v-model="mylocale" option-value="code" option-label="name" :options="locales" >                                    
+                                    </Dropdown>
+                                    <!-- <select v-model="$colorMode.preference" id="picklang">
+                                        <option value="light">Light</option>
+                                        <option value="dark">Dark</option>
+                                    </select> -->
+                                </div>
+                            </div>
+                            <div class="mt-3 col-span-full">
+                                <label for="pick-theme" class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-300">{{ t('theme') }}</label>
+                                <div class="mt-2">
+                                    <Dropdown inputId="pick-theme" v-model="$colorMode.preference" option-value="value" option-label="name" :options="colors" >                                    
+                                    </Dropdown>
+                                   
+                                </div>
+                            </div>
+
                             
-                            <div class="flex items-center justify-start w-full">
-                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Tenant</button>
+                            <div class="mt-3 flex items-center justify-start w-full">
+                                <button class="focus:outline-none transition duration-150 ease-in-out hover:bg-gray-600 bg-gray-700 rounded text-white px-8 py-2 text-sm" @click="toProfile">{{ t('profile') }}</button>
                                 <!-- <button class="focus:outline-none transition duration-150 ease-in-out bg-gray-600  rounded text-white px-8 py-2 text-sm" @click="toFrontpage">Pick Tenant</button> -->
-                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">Logout</button>
+                                <button class="focus:outline-none ml-3 bg-warning-100 dark:bg-warning-700 dark:border-warning-700 dark:hover:bg-warning-600 transition duration-150 text-gray-600 dark:text-gray-400 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm" @click="logout()">{{ t('logout') }}</button>
                             </div>                            
                         </div>
                     </div>

package/templates/nuxt/components/renderer/RendererForeignKey.vue.eta

@@ -1,11 +1,30 @@
 <template>    
-    <NuxtLink  v-if="setting?.collection" :to="getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')" class="text-primary-700 hover:text-primary-500 cursor-pointer">        
+    <span  v-if="setting?.collection" @click="viewRecord" class="text-primary-700 hover:text-primary-500 cursor-pointer">        
         {{modelValue?.label}}
-    </NuxtLink>
+    </span>
     <span v-else>{{modelValue?.label || modelValue}}</span>
 </template>
 <script setup lang="ts">
-const modelValue = defineModel()
 
+
+const modelValue = defineModel<{label:string,_id:string}>()
 const props = defineProps<{setting:any}>()
+const {$event} = useNuxtApp()
+const viewer=ref()
+const viewRecord = () => {
+    viewer.value = getDocument(props.setting.collection)?.viewer
+    
+    // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+    //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
+    $event('ViewRecord',{
+        _id: modelValue.value?._id as string,
+        label: modelValue.value?.label as string,
+        eventId: crypto.randomUUID(),
+        documentName: props.setting.collection,
+        viewer: viewer.value,
+        readonly:true
+
+    })
+
+}
 </script>

package/templates/nuxt/components/simpleApp/SimpleAppAutocomplete.vue.eta

@@ -0,0 +1,82 @@
+<template>    
+    <AutoComplete v-model="modelValue"  v-if="!readonly"
+               forceSelection optionLabel="label" :dropdown="true"                                
+               @item-select="pickAutoComplete"
+               @complete="getListFromAutocompleteApi"                          
+               :pt="pt"
+               :disabled="readonly"
+               :suggestions="list"                                
+               @blur="onBlurAutocomplete"
+               :inputId="inputId" :path="setting.instancepath"
+               :readonly="readonly"
+                />
+   <div v-else class="p-3 border rounded-lg border-gray-300 dark:border-blue-900/40 ">
+       <A :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
+          tabindex="0" @click="openViewer">{{modelValue?.label}}</A>
+   </div>
+</template>
+<script setup lang="ts">
+   import { isNull, pick } from 'lodash';
+   import {autocompletetype} from '~/types'
+   import {ForeignKey} from '~/types'
+   const {$event} = useNuxtApp()
+   const list = ref([])
+   const emptyautocomplete =():autocompletetype=> ({_id:'',label:''})
+   const autocompleteitem = ref<autocompletetype>(emptyautocomplete())
+   const props = defineProps<{
+       setting:any    
+       readonly?:boolean
+       inputId:string
+       pt?:any
+   }>()
+   const modelValue = defineModel<{_id:string,label:string}>()        
+   const onBlurAutocomplete = ()=>{
+   
+   if(  autocompleteitem.value === null){
+       autocompleteitem.value = emptyautocomplete()
+   }
+   if(isNull(modelValue.value )){
+       modelValue.value = autocompleteitem.value
+   }
+   else if(typeof modelValue.value =='object'){
+    
+   }else{
+       modelValue.value = autocompleteitem.value
+   }
+
+}
+const getListFromAutocompleteApi =  (event:any)=>{    
+ const keyword = event.query??''  
+ //props.setting.document.getDocType()
+ const targetDocument = props.setting.fieldsetting['x-foreignkey']
+ getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
+   list.value = res.data 
+ })
+}
+const pickAutoComplete = (event:any)=>{
+ if(typeof event.value.query == 'undefined'){      
+     modelValue.value=event.value
+     autocompleteitem.value = event.value      
+ }
+}
+
+const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
+watch(modelValue ,(newvalue:any)=>{
+   modelValue.value=autocompleteitem.value                
+
+   emits('change',modelValue.value)
+   emits('update:modelValue',modelValue.value)    
+})
+
+const openViewer = () =>{
+   $event('ViewRecord',{
+       _id: modelValue.value?._id as string,
+       eventId: crypto.randomUUID(),
+       label: modelValue.value?.label as string,
+       readonly:true,
+       viewer : getDocument(props.setting.fieldsetting['x-foreignkey'])?.viewer,
+       documentName: props.setting.fieldsetting['x-foreignkey'],
+   })
+}
+
+</script>

package/templates/nuxt/components/simpleApp/SimpleAppDocumentNo.vue.eta

@@ -1,26 +1,26 @@
 
 <template>
     
-        <div class="p-inputgroup w-full flex flex-row">
-            <InputText class="flex-1 rounded-tr-none rounded-br-none" 
+        <div class="flex flex-row w-full">
+            <InputText 
                 :readonly="readonly"
                 v-model="modelValue"    
                 :placeholder="placeholder"
+                :class="'flex-1 w-full rounded-lg  '+ ( props.readonly?'':'dark:!bg-gray-700 rounded-tr-none rounded-br-none')"
             />
-            <span class="p-inputgroup-addon p p-0">
-                <button  type="button" @click="toggle" 
-                    :disabled="readonly"
-                    class="border rounded-tl-none rounded-bl-none btn btn-primary -ml-1 h-full  p-3 rounded-r-md">
+            <span class="" v-if="!readonly">
+                <button  type="button" @click="toggle"  tabindex="-1"
+                    class="'btn btn-primary p-3 dark:border-blue-900/40 rounded-lg rounded-tl-none rounded-bl-none">
                     <i class="pi pi-angle-down"></i>
                 </button>
                 <OverlayPanel ref="op" class="p-4">           
                     <div class="m-4">
                         <ul>                      
                             <li v-for="docno in docFormatlist" class="hover-list-primary p-2" >
-                                <a class="flex-row p-2 mt-4" @click="chooseFormat(docno)">
+                                <a class="" @click="chooseFormat(docno)">
                                     <span class="pi pi-hashtag mr-2"></span>
                                     <span class="">{{docno.docNoFormatName}}</span>
-                                    <span class="ml-2 text text-green-600">{{docno.sample}}</span>
+                                    <span class=" text text-green-600">{{docno.sample}}</span>
                                 </a>
                             </li>                    
                         </ul>

package/templates/nuxt/components/simpleApp/SimpleAppFieldContainer.vue.eta

@@ -1,8 +1,8 @@
 <template>
-    <div v-if="schema" :class="fieldcontainerclass">          
+    <div v-if="schema" class="flex flex-col">          
         <div v-if="hidelabel"></div>
-        <label v-else-if="error" class="text-danger-600" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
-        <label v-else  :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+        <label v-else-if="error" class="text-danger-600 overflow-hidden" :for="uuid">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
+        <label v-else  :for="uuid" class="whitespace-nowrap	text-gray-500 truncate">{{ fieldlabel }} <span v-if="props.setting.isrequired && fieldlabel" class="text-danger-600">*</span></label>        
         
         <!-- <div :uuid="uuid" >{{ modelValue }}</div> -->
         <!-- <div v-if="typeof modelValue =='object' && typeof modelValue['_id']!='undefined' && typeof modelValue['label']!='undefined' &&  readonly ==true " :uuid="uuid" class="simpleapp-value-readonly">{{ modelValue['label'] }}</div> -->
@@ -24,8 +24,10 @@ import SimpleAppValue from './SimpleAppValue.vue'
 // import {computed,setBlockTracking,watch} from 'vue'
 
 import {ref} from 'vue'
+
+
 const uuid =  crypto.randomUUID();
-const fieldlabel = ref('')
+// const fieldlabel = ref('')
 // const fielddesc = ref('')
 const defaultcssclass='simpleapp-input-container'
 const fieldcontainerclass = ref(defaultcssclass)
@@ -57,6 +59,7 @@ let schema:any
 const fielddesc = computed(()=>{
     return props.description ?? schema.description ?? ''
 })
+
 if(props.setting.fieldsetting && props.setting.fieldsetting.type){
     
     schema = props.setting.fieldsetting
@@ -68,9 +71,8 @@ if(props.setting.fieldsetting && props.setting.fieldsetting.type){
     const fieldnamearr = instancepath.value.split('/')
     const fieldname = camelCaseToWords(fieldnamearr[fieldnamearr.length-1])
 
-    if(props.label)fieldlabel.value = props.label 
-    else if (schema.title ) fieldlabel.value=schema.title
-    else fieldlabel.value=fieldname
+   
+    
     
     // if(props.description)fielddesc.value = props.description 
     // else if (schema?.description != 'undefined') fielddesc.value=schema.description
@@ -79,6 +81,18 @@ if(props.setting.fieldsetting && props.setting.fieldsetting.type){
    
 
 }
+const fieldlabel = computed(()=>{
+       
+       if(props.label){
+           return t(props.label)
+       }
+       else if (schema.title ) {
+           return  t(schema.title)
+       }
+       else{
+           return  t(props.setting.key)
+       }
+   })
 const errormsg = computed(()=>{
     
     props.setting.errors[instancepath.value]

package/templates/nuxt/components/simpleApp/SimpleAppInput.vue.eta

@@ -10,7 +10,7 @@
 
         <!-- date component -->        
         <component :is="inputComponent" type="date" :pt="pt" 
-            v-else-if="inputType == SimpleAppInputType.date"
+            v-else-if="inputType == SimpleAppInputType.date"            
             :inputId="slotprops.uuid" :path="setting.instancepath"
             v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"/>
         <!-- calendar component -->        
@@ -24,7 +24,8 @@
             v-else-if="[SimpleAppInputType.select,SimpleAppInputType.list].includes(inputType)"
             :inputId="slotprops.uuid" :path="setting.instancepath"  
             :readonly="isReadonly"
-                :options="getListOptions()" optionLabel="label" optionValue="value"/>
+            :disabled="isReadonly"
+            :options="getListOptions()" optionLabel="label" optionValue="value"/>
         
         <!-- radio component -->                
         <div v-else-if="inputType == SimpleAppInputType.radio" >
@@ -37,32 +38,22 @@
             </div>            
         </div>
         
-        <!-- autocomplete -->
-        <AutoComplete :is="inputComponent" v-model="modelValue"  
-            v-else-if="inputType==SimpleAppInputType.autocomplete"  
-                forceSelection optionLabel="label" :dropdown="true"                                
-                @item-select="pickAutoComplete"
-                @complete="getListFromAutocompleteApi"          
-                
-                :pt="{
-                    root:{class:'rounded-lg flex flex-row'},
-                    input:{class:'w-full font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]  text-base'},
-                    loadingIcon:{class:'hidden'},
-                    dropdownbutton: {
-                        root:' bg-primary-600 hover:bg-primary-400 text-white rounded flex flex-row  p-3 rounded-tl-none rounded-bl-none '
-                    }
-                }"
-                :disabled="isReadonly"
-                :suggestions="list"                                
-                @blur="onBlurAutocomplete"
-                :inputId="slotprops.uuid" :path="setting.instancepath"
+        <!-- autocomplete, need do more enterprise grade component-->
+        <SimpleAppAutocomplete     v-else-if="inputType==SimpleAppInputType.autocomplete"  
+                v-model="modelValue"                          
+                :pt="pt"
+                :setting="setting"
+                :disabled="isReadonly"                                                             
+                :inputId="slotprops.uuid"
+                :path="setting.instancepath"
                 :readonly="isReadonly"
                  />
                  
         <!--  document no input-->
         <SimpleAppDocumentNo v-else-if="inputType == SimpleAppInputType.documentno" 
             :setting="setting" v-model="modelValue" :inputId="slotprops.uuid"
-            :readonly="isReadonly" @update:docNoFormat="triggerDocNoFormatChange"            
+            :readonly="isReadonly" @update:docNoFormat="triggerDocNoFormatChange"     
+            :pt="pt"
              :path="setting.instancepath"/>
            
         
@@ -83,13 +74,11 @@
         <component  v-else-if="inputType == SimpleAppInputType.chip" 
          :is="inputComponent" :type="type" v-model="modelValue"
                  :pt="pt" 
-                :disabled="isReadonly" 
-                
-                
+                :disabled="isReadonly"                                 
                 :inputId="slotprops.uuid" :path="setting.instancepath"/>
         <!-- simple component -->        
-        <component v-else :is="inputComponent" :type="type" v-model="modelValue" :pt="pt" 
-                :readonly="isReadonly" 
+        <component v-else :is="inputComponent" :type="type" v-model="modelValue"
+                :readonly="isReadonly"                 
                 class="w-full flex flex-col"
                 :inputId="slotprops.uuid" :path="setting.instancepath"/>
             
@@ -100,14 +89,13 @@
 </template>
 
 <script lang="ts" setup>
-import { isNull, pick } from 'lodash';
-import {autocompletetype} from '~/types'
 import moment from 'moment'
 import AutoComplete from 'primevue/autocomplete';
 import Calendar from 'primevue/calendar';
 import Checkbox from 'primevue/checkbox';
 import Chips from 'primevue/chips';
 import SimpleAppDocumentNo from './SimpleAppDocumentNo.vue';
+import SimpleAppAutocomplete from './SimpleAppAutocomplete.vue'
 import Dropdown from 'primevue/dropdown';
 import InputNumber from 'primevue/inputnumber';
 import InputSwitch from 'primevue/inputswitch';
@@ -121,12 +109,12 @@ import Slider from 'primevue/slider';
 import Textarea from 'primevue/textarea';
 import {SimpleAppInputType} from '~/types'
 
+
 let inputComponent :Component
-const emptyautocomplete =():autocompletetype=> ({_id:'',label:''})
-const autocompleteitem = ref<autocompletetype>(emptyautocomplete())
+
+
 const datevalue = ref('')
 const modelValue = defineModel()
-const list = ref([])
 const props = withDefaults( defineProps<{
     inputType:SimpleAppInputType,
     label?:string,
@@ -210,7 +198,7 @@ const isReadonly = computed(()=>{
 })
 
 const updateDate = (value:any)=>{
-    modelValue.value = moment(value).toISOString()    
+    modelValue.value = moment(value).format('YYYY-MM-DD')
 }
 
 
@@ -235,9 +223,10 @@ watch(modelValue ,(newvalue:any)=>{
 
     if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
         datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')
-    }else if(props.inputType==SimpleAppInputType.autocomplete){            
-            modelValue.value=autocompleteitem.value                
     }
+    // else if(props.inputType==SimpleAppInputType.autocomplete){            
+    //         modelValue.value=autocompleteitem.value                
+    // }
 
     emits('change',modelValue.value)
     emits('update:modelValue',modelValue.value)    
@@ -245,35 +234,7 @@ watch(modelValue ,(newvalue:any)=>{
 
 
 /************ start autocomplete only ***************/
-const onBlurAutocomplete = ()=>{
-    
-    if(  autocompleteitem.value === null){
-        autocompleteitem.value = emptyautocomplete()
-    }
-    if(isNull(modelValue.value )){
-        modelValue.value = autocompleteitem.value
-    }
-    else if(typeof modelValue.value =='object'){
-     
-    }else{
-        modelValue.value = autocompleteitem.value
-    }
 
-}
-const getListFromAutocompleteApi =  (event:any)=>{    
-  const keyword = event.query??''  
-  //props.setting.document.getDocType()
-  const targetDocument = props.setting.fieldsetting['x-foreignkey']
-  getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
-    list.value = res.data 
-  })
-}
-const pickAutoComplete = (event:any)=>{
-  if(typeof event.value.query == 'undefined'){      
-      modelValue.value=event.value
-      autocompleteitem.value = event.value      
-  }
-}
 /************ end autocomplete only ***************/
 
 

package/templates/nuxt/components/table/TableDocuments.vue.eta

@@ -5,9 +5,10 @@
             :showGridlines="true"
             size="small"
             :pt="{
-                // header:{ class:'border bg-gray-100'},
-                headerRow:{ class:'border bg-gray-200'},                                
+                header:{ class:''},
+                headerRow:{ class:' bg-gray-200'},                                
             }"
+            v-on:row-click="clickRow"
             :value="value" 
             :filters="filters"
             :paginator="true" :rows="20"
@@ -15,7 +16,7 @@
             >
             <!-- header -->
             <template #header>
-                <div class=" flex flex-row w-full text-right justify-content-end">
+                <div class=" flex flex-row w-full text-right justify-content-end" >
                     <div class="flex-1">
                         <slot name="toolbar"></slot>
                     </div>
@@ -100,13 +101,18 @@ import { FilterMatchMode } from 'primevue/api';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
 import renderComponent from '~/components/renderer'
+import { emit } from 'process';
 const props = defineProps<{
     value:any[]
-    columns: CellSetting[]
-    title:string
-    
+    columns: CellSetting[]    
+    title:string    
     
 }>()
+const emits = defineEmits(['selectRow'])
+
+const clickRow = (eventdata:any) =>{
+    emits('selectRow',eventdata.data)
+}
 
 const filters = ref({
     'global': {value: null, matchMode: FilterMatchMode.CONTAINS},

package/templates/nuxt/components/user/UserButtonCreateTenant.vue.eta

@@ -8,7 +8,29 @@
           /> -->
          
         <!-- <button class="">Create</button> -->
-        <form @submit.prevent="true" class="flex flex-row text-center">
+        <form @submit.prevent="true" class="w-full">
+              <div class="p-inputgroup flex flex-row">
+                <InputText
+                  class="flex-1"
+                  type="email"
+                  placeholder="your company name"
+                  v-model:model-value="data.tenantName"
+                />
+                <div class="p-inputgroup-addon p p-0">
+                  <button
+                    :label="t('create')"
+                    class="border rounded-tl-none rounded-bl-none btn btn-primary -ml-1 h-full p-3 rounded-r-md"
+                    @click="createTenant" :loading="onhold"
+                  >
+                  {{t('create')}}
+                  </button>
+                </div>
+              </div>
+            </form>
+
+
+        <!-- <form @submit.prevent="true" class="flex flex-row text-center">
+
           <div class="flex flex-col">
             <InputText            
               type="text"
@@ -18,10 +40,10 @@
             />
             <div v-if="errCreateTenant" class="text-error">{{ errCreateTenant }}</div>
           </div>
-          <Button class="w-full md:w-auto bg-primary-800 dark:border-transparent text-white px-8 py-4 border rounded-md hover:bg-primary-800 grid place-items-center font-semibold mt-4 md:mt-0 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-primary-50" type="submit" @click="createTenant" :loading="onhold">
+          <Button class="w-full md:w-auto  dark:border-transparent px-8 py-4 border rounded-md btn btn-primary grid place-items-center font-semibold mt-4 md:mt-0 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-primary-50" type="submit" @click="createTenant" :loading="onhold">
             Create
           </Button>
-        </form>
+        </form> -->
     </div>