@simitgroup/simpleapp-generator 1.1.1 → 1.1.3

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

@@ -0,0 +1,163 @@
+<template>   
+        <AutoComplete v-model="modelValue"  v-if="!readonly" ref="autocompleteinput"
+               forceSelection optionLabel="label"                
+               @item-select="pickAutoComplete"
+               @complete="getListFromAutocompleteApi"       
+               :placeholder="t('keyword')"
+               :dropdown="true"
+               :dropdown-icon="buttonClass"               
+               @before-show="beforeShow"
+               @clear = "clear"
+               :dropdown-mode="'current'"
+                :pt="pt"
+                :delay="500"
+               :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 ">
+            <span :readonly="readonly" class="cursor-pointer text-primary-600  dark:text-primary-400 "
+                tabindex="0" @click="openViewer(true)">{{ modelValue && modelValue.label ?  modelValue.label:'-' }}</span>
+        </div>
+</template>
+<script setup lang="ts">
+import { isNull } from 'lodash';
+import {autocompletetype,SchemaConfig,SchemaType} from '~/types'
+const autocompleteinput = ref()
+const {$event} = useNuxtApp()
+const list = ref<any[]>([])
+const emptyautocomplete =():autocompletetype=> ({_id:'',code:'',label:''})
+
+const props = withDefaults(defineProps<{
+    setting:any    
+    allowAddNew?:boolean
+    showNull?:boolean
+    readonly?:boolean
+    inputId:string
+    pt?:any
+}>(),{
+allowAddNew:true,showNull:true
+})
+const autocompleteitem = ref<autocompletetype>(emptyautocomplete())
+const modelValue = defineModel<autocompletetype>()        
+if(modelValue.value && modelValue.value._id){
+    autocompleteitem.value={...modelValue.value}
+}
+//clear auto complete auto set value = empty
+const clear = ()=>{
+    autocompleteitem.value = emptyautocomplete()
+    modelValue.value = emptyautocomplete()
+}
+const buttonClass=computed(()=>modelValue.value?._id ? 'pi pi-link' : 'pi pi-angle-down')
+
+//if record picked, click button show record info instead
+const beforeShow = ()=>{    
+    if(modelValue.value?._id ){                
+        openViewer(true)        
+    }
+}
+   
+//recorrect data if lose focus
+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
+    }
+}
+
+//obtain remote data
+const getListFromAutocompleteApi =  (event:any)=>{    
+ const keyword = event.query??''  
+ const targetDocument = props.setting.fieldsetting['x-foreignkey']
+ getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
+
+   list.value = res.data
+
+   if(props.allowAddNew){
+    list.value = list.value.concat({_id:'new',label:'<'+t('new')+'>'})
+   }
+ })
+}
+
+//on select
+const pickAutoComplete = (event:any)=>{
+    console.log("event",event,'event.value._id',"'"+event.value._id+"'")
+    if(event.value._id===''){
+        
+        modelValue.value =  emptyautocomplete()
+        autocompleteitem.value = emptyautocomplete()
+        console.log(modelValue.value )
+    } else if(event.value._id==='new'){
+        
+        modelValue.value =  emptyautocomplete()
+        autocompleteitem.value = emptyautocomplete()
+        openViewer(false)        
+    } 
+    else 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)=>{
+   
+   emitChanges()
+   
+})
+const emitChanges = () =>{
+    
+    emits('change',modelValue.value)
+ 
+}
+
+//pop up records
+const openViewer = (readonly:boolean) =>{
+    const remotedoc = getDocument(props.setting.fieldsetting['x-foreignkey'])
+    
+    if(remotedoc){
+        const schema:SchemaType = remotedoc.docClass.getSchema()
+        const labelfield = schema['x-simpleapp-config'].documentTitle as string
+        const codefield  = schema['x-simpleapp-config'].uniqueKey as string
+        $event('ViewRecord',{
+            _id: modelValue.value?._id as string,
+            eventId: crypto.randomUUID(),
+            label: modelValue.value?.label as string,
+            readonly:readonly,
+            viewer : getDocument(props.setting.fieldsetting['x-foreignkey'])?.viewer,
+            documentName: props.setting.fieldsetting['x-foreignkey'],
+
+            //after create, auto copy value into auto complete
+            afterCreate:(data:any)=>{                
+                autocompleteitem.value = {
+                    _id: data._id,
+                    code: data[codefield],                    
+                    label: data[labelfield],
+                }
+                if(schema['x-simpleapp-config'].additionalAutoCompleteFields){
+                    const addfields = schema['x-simpleapp-config'].additionalAutoCompleteFields
+                    for(let i=0;i<addfields.length;i++){
+                        const fieldname = addfields[i] as string
+                        autocompleteitem.value[fieldname] = data[fieldname]
+                    }
+                }   
+                modelValue.value = {...autocompleteitem.value}                             
+                emitChanges()
+                console.log("autocompleteitem.value",autocompleteitem.value ,modelValue.value)
+                
+            }
+        })
+
+    }
+  }
+
+</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,13 +16,13 @@
             >
             <!-- 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>
                     <div class="flex-1">
                         <slot name="title">
-                            <h1 class="text text-2xl pt-2 text-center">{{ title }}</h1>
+                            <h1 class="text text-2xl pt-2 text-center">{{ t(title) }}</h1>
                         </slot>
                         
                     </div>                    
@@ -35,7 +36,7 @@
             <template #empty>
                 <div class="text-center ">
                     <div class="text-3xl   text-gray-400 pi pi-exclamation-circle"></div>
-                    <div class="text-3xl text-gray-400">no data found</div>
+                    <div class="text-3xl text-gray-400">{{t('noDataFound')}}</div>
                     
                 </div>
             </template>
@@ -47,7 +48,7 @@
                     <p >{{ t(col) }}</p>
                 </template>               
                 <template v-else-if="typeof col =='object'" #header>            
-                    <span>{{ col.title }} </span>
+                    <span>{{ t(col.title) }} </span>
                 </template>
                 <template v-else #header>
                     <span class="text-danger-600">unknown</span>
@@ -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>
 
 

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

@@ -1,64 +1,64 @@
 <template>
-  <!-- <ul role="list" class="divide-y divide-gray-100">
-    <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
-      <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
-        <div class="flex min-w-0 gap-x-4">
-          <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
-          <div class="min-w-0 flex-auto">
-            <p class="text-sm font-semibold leading-6 text-gray-900">{{ data.fullName }}</p>
-            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ data.email }}</p>
-          </div>
+<!-- <ul role="list" class="divide-y divide-gray-100">
+  <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
+    <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
+      <div class="flex min-w-0 gap-x-4">
+        <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
+        <div class="min-w-0 flex-auto">
+          <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-200">{{ data.fullName }}</p>
+          <p class="mt-1 truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{ data.email }}</p>
         </div>
-        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
-          
-          <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
-            <div class="flex-none rounded-full bg-emerald-500/20 p-1">
-              <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
-            </div>
-            <p class="text-xs leading-5 text-gray-500">Online</p>
+      </div>
+      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+        
+        <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
+          <div class="flex-none rounded-full bg-emerald-500/20 p-1">
+            <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
           </div>
-          <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
-            <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
-            <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
-            <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
-            <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
-            <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
-          </p>          
-          <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
-            {{ data.description }}
-          </p>
+          <p class="text-xs leading-5 text-gray-500 dark:text-gray-400">Online</p>
         </div>
+        <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
+          <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
+          <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
+          <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
+          <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
+          <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
+        </p>          
+        <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
+          {{ data.description }}
+        </p>
       </div>
-    
+    </div>
+  
 </template>
 
 <script setup lang="ts">
 import {computed} from 'vue'
 import moment from 'moment'
 const props = defineProps<{
-  data:any
+data:any
 }>()
 
 
 
 const datedifferent = computed(()=>{  
-  const data = moment.duration(differentTime.value)
-  return data
+const data = moment.duration(differentTime.value)
+return data
 })
 const differentTime =  computed(()=>{
-    const lasttime = new Date(props.data.lastActivity).getTime()
-    const current = new Date().getTime()
-    const result  =  current - lasttime
-    return result
+  const lasttime = new Date(props.data.lastActivity).getTime()
+  const current = new Date().getTime()
+  const result  =  current - lasttime
+  return result
 })
 const isOnline = computed(()=>{
-  if(props.data.lastActivity) {
-    const diffminutes = differentTime.value/ 1000/60
-    return diffminutes < 1
-  }else{
-    return false
-  }
-  
+if(props.data.lastActivity) {
+  const diffminutes = differentTime.value/ 1000/60
+  return diffminutes < 1
+}else{
+  return false
+}
+
 })