@simitgroup/simpleapp-generator 1.0.46 → 1.0.48

package/templates/nest/src/simpleapp/services/user.service.ts.eta

@@ -1,7 +1,7 @@
 /**
- * This file was automatically generated by simpleapp generator.
- * It will not override by generator
- * last change 2023-09-23
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
  * Author: Ks Tan
  */
 import { InjectModel } from '@nestjs/mongoose';
@@ -11,7 +11,7 @@ import { Injectable } from '@nestjs/common';
 import { UserProcessor } from '../generate/processors/user.processor';
 import { Permission } from '../generate/types/perm.type';
 import { User } from '../generate/types/user.type';
-import { DocNumberFormatGenerator } from '../generate/commons/docnogenerator.service';
+
 export { User } from '../generate/types/user.type';
 
 
@@ -21,9 +21,8 @@ export class UserService extends UserProcessor {
   constructor(
     @InjectModel('User') mydoc: Model<User>,
     @InjectModel('Permission') private permdoc: Model<Permission>,
-    docnogenerator: DocNumberFormatGenerator,
   ) {
-    super(mydoc,docnogenerator);
+    super(mydoc);
   }
 
   hook = async (appuser: UserContext, type: string, data?: any) => {

package/templates/nest/src/simpleapp/simpleapp.module.ts.eta

@@ -1,15 +1,13 @@
-
 /**
- * This file was automatically generated by simpleapp generator.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and regenerate this file.
- * last change 2023-09-09
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
  * Author: Ks Tan
  */
 import { Module } from '@nestjs/common';
 import { MongooseModule } from '@nestjs/mongoose';
 import {DocNumberFormatGenerator} from './generate/commons/docnogenerator.service'
-
+import { AuditTrail } from './generate/commons/audittrail.service';
 // auto import modules
 <% for(let i=0;i<it.modules.length; i++){ %>
 <% let obj = it.modules[i]%>
@@ -37,7 +35,7 @@ import { ProfileService } from './profile/profile.service';
       ]),
   ],
   controllers: [<% for(let i=0;i<it.modules.length; i++){ %><%= it.modules[i].docname %>Controller,<%}%> ProfileController],
-  providers: [DocNumberFormatGenerator,<% for(let i=0;i<it.modules.length; i++){ %><%= it.modules[i].docname %>Service,<%}%> ProfileService,],
-  exports:[DocNumberFormatGenerator,<% for(let i=0;i<it.modules.length; i++){ %><%= it.modules[i].docname %>Service,<%}%> ProfileService,]
+  providers: [AuditTrail,DocNumberFormatGenerator,<% for(let i=0;i<it.modules.length; i++){ %><%= it.modules[i].docname %>Service,<%}%> ProfileService,],
+  exports:[AuditTrail,DocNumberFormatGenerator,<% for(let i=0;i<it.modules.length; i++){ %><%= it.modules[i].docname %>Service,<%}%> ProfileService,]
 })
 export class GenerateModule {}

package/templates/nuxt/app.vue.eta

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-
+/**
+ * This file was automatically generated by simpleapp generator. Every
+ * MODIFICATION OVERRIDE BY GENERATEOR
+ * last change 2023-10-28
+ * Author: Ks Tan
+ */
 </script>
 <template>
   <div>

package/templates/nuxt/assets/css/style.css._eta

@@ -0,0 +1,12 @@
+.btn {
+    @apply p-2  border-2 m-1
+}
+.btn-primary{
+    @apply bg-primary-600 text-white
+}
+.btn-danger{
+    @apply bg-danger-600 text-white
+}
+.btn-warning{
+    @apply bg-danger-600 text-white
+}

package/templates/nuxt/assets/css/tailwind.css._eta

@@ -0,0 +1,10 @@
+/* tailwind.css */
+@layer tailwind-base {
+    @tailwind base;
+  }
+  
+  @layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+  }
+

package/templates/nuxt/assets/primevue/passthrough.ts._eta

@@ -0,0 +1,37 @@
+import { usePassThrough } from "primevue/passthrough";
+import Tailwind from "primevue/passthrough/tailwind";
+
+
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        button:{
+            root:{
+                class:['p-2 m-2 border']
+            }
+        },
+        dialog:{
+            root:{
+               class:['bg-white border p-2' ]
+            }
+        },
+        panel: {
+            root:{
+                class:['border']
+            },
+            title: {
+                class: ['leading-none font-light text-2xl']
+            },
+            header:{
+                class:['bg bg-gray-200 h-10 content-middle']
+            },
+            content:{
+                class:['']
+            }
+        }
+    },
+);
+
+
+
+export default CustomTailwind;

package/templates/nuxt/components/ButtonCreateTenant.vue.eta

@@ -0,0 +1,68 @@
+<template>
+  <div>
+      <Button class="btn-primary " @click="visible = true">
+        <i class="pi pi-sitemap mr-2"></i>Create My Company 
+      </Button>
+      <Dialog
+        v-model:visible="visible"
+        modal
+        :header="createtitle"
+        class="crudsimple-dialog"
+      >
+        <form @submit.prevent="true" class="flex flex-col text-center">
+          <div v-if="errCreateTenant" class="text-error">
+            {{ errCreateTenant }}
+          </div>
+          <InputText
+            v-else
+            type="text"
+            autofocus="true"
+            v-model:model-value="data.tenantName"
+            placeholder="Organization Name"
+          />
+
+          <Button class=" btn-primary" type="submit" @click="createTenant" :loading="onhold">
+            Create <span class="pi pi-save"></span>
+          </Button>
+        </form>
+      </Dialog>
+  </div>
+  
+</template>
+<script setup lang="ts">
+import {ref} from 'vue'
+import {AxiosResponse} from 'axios'
+const visible = ref(false);
+const data = ref({tenantName: "",});
+
+const createtitle = ref("Create My Company");
+const errCreateTenant = ref();
+const onhold = ref(false);
+
+const createTenant = async () => {
+onhold.value = true;
+const { $axios, $listen } = useNuxtApp();
+
+const openapi = getApi();
+const apipath = `${useRuntimeConfig().public.API_URL}`;
+let profileapi = new openapi.PROFILEApi(undefined, apipath, $axios);
+
+profileapi
+  .createTenant(data.value)
+  .then((res:AxiosResponse) => {
+    if (res && res.status && res.status == 201) {
+      if (res.data && res.data["xOrg"]) {
+        const xorg = res.data["xOrg"];
+        navigateTo("/" + xorg, { external: true });
+      }
+    }
+  })
+  .catch((err) => {
+    errCreateTenant.value = err["message"];
+    console.error("errCreateTenant", err);
+  })
+  .finally(() => {
+    onhold.value = false;
+  });
+};
+</script>

package/templates/nuxt/components/ButtonHome.vue.eta

@@ -0,0 +1,10 @@
+<template>
+    <button class="flex flex-row">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+            </svg>
+
+        <span>{{ getUserProfile().orgName }}</span>
+
+    </button>
+</template>

package/templates/nuxt/components/ButtonLogout.vue.eta

@@ -0,0 +1,9 @@
+<template>
+    <button class="flex flex-row">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+        </svg>
+        <span>logout</span>
+
+    </button>
+</template>

package/templates/nuxt/components/ButtonMenuPicker.vue.eta

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import Dialog from 'primevue/dialog';
+import {ref} from 'vue'
+import {MenuData} from '~/types'
+const visible = ref(false)
+const menus = getMenus();
+// const emit = defineEmits(['select'])
+const selectMenu = (menu:MenuData) =>{
+  navigateTo(menu.url)
+  visible.value=false
+  // emit('select',menu)
+}
+</script>
+<template>
+  <div>
+
+    <button class="text-center border-none  cursor-pointer" v-if="useRoute().params.xorg" @click="visible=true">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+      </svg>
+    </button>
+
+     <Dialog v-model:visible="visible" modal header="Pick Document" >
+      <div class="desktop-shortcut-link">
+          
+          <Button v-for="menu in menus[1].items" @click="selectMenu(menu)">
+            <div v-if="menu.isolationType == 'none'" class="adminmenu">
+              * {{ camelCaseToWords(menu.label) }}
+            </div>
+            <div v-else class="usermenu">{{ camelCaseToWords(menu.label) }}</div>
+          </Button>
+        </div>
+    </Dialog>
+       
+
+    
+  </div>
+</template>
+<style scoped>
+.desktop-shortcut-link {
+  @apply m-2 p-2 space-x-2 rounded-sm text-center grid grid-cols-4 gap-4;
+}
+.desktop-shortcut-link .adminmenu {
+  @apply bg-red-300 p-2;
+}
+.desktop-shortcut-link .adminmenu:hover {
+  @apply bg-red-600 p-2;
+}
+.desktop-shortcut-link .usermenu {
+  @apply bg-teal-300 p-2;
+}
+.desktop-shortcut-link .usermenu:hover {
+  @apply bg-teal-600 p-2;
+}
+</style>

package/templates/nuxt/components/ButtonPermissionInfo.vue.eta

@@ -0,0 +1,113 @@
+<template>
+    
+  <div>        
+        <Button
+              class="btn-primary pi pi-question"
+              @click="previewPermission"
+            >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
+            </svg>
+        </Button>
+        <Sidebar
+                v-model:visible="showpermissioninfo"
+                modal
+                :header="permissiontitle"
+                position="right"
+            >
+            <SelectButton v-model="selectedgroup"  @change="selectGroup" :options="grouplist" option-label="label" option-value="value"></SelectButton>                                          
+            <div v-if="selectedgroup">
+                    <div  v-if="useRuntimeConfig().public.DEBUGDATA" class="flex flex-row gap-2 p-2">
+                        <div class="flex align-items-center">
+                            <RadioButton v-model="mode" inputId="modepreview" name="pizza" value="preview" />
+                            <label for="modepreview" class="ml-2">Preview</label>
+                        </div>
+                        <div class="flex align-items-center">
+                            <RadioButton v-model="mode" inputId="modeedit" name="edit" value="edit" />
+                            <label for="modeedit" class="ml-2">Edit</label>
+                        </div>
+                        <div class="flex align-items-center">
+                            <RadioButton v-model="mode" inputId="modejson" name="json" value="json" />
+                            <label for="modejson" class="ml-2">JSON</label>
+                        </div>
+                        
+                    </div>
+                    <div v-if="mode=='json'">
+                        <div class="flex-row">
+                            <div><Button @click="copyText">copy</Button> </div>
+                            <div class="text text-gray-400">{{ copied }}</div>
+                        </div>
+                        <pre id="permissionstr">
+                            {{ permissions }}
+                        </pre>
+                    </div>
+                    <div class="permission-block flex flex-col m mt-4" v-for="res in allresources" v-else="showjson">
+                    <div class="m mr-3 ">{{ res }}</div>
+                    <div class="gap-4" v-if="allactions">                
+                            <SelectButton v-if="mode=='edit'" multiple :options="allactions[res]" v-model="permissions[res]"></SelectButton>
+                            
+                            <span v-else v-for="actionname in allactions[res]" class="m m-1">
+                                <Chip class="bg-primary" v-if="canPerformAction(selectedgroup,res,actionname)" severity="success" :label="actionname" ></Chip>
+                                <Chip v-else :label="actionname" ></Chip>
+                            </span>
+                        
+                        
+                    </div>
+                    </div>
+            </div>
+        </Sidebar>
+  </div>
+</template>
+<script setup lang="ts">
+import _ from "lodash";
+import Chip from 'primevue/chip';
+import RadioButton from 'primevue/radiobutton';
+import {ref} from 'vue'
+
+
+const showpermissioninfo = ref(false)
+const permissiontitle = "Permission Information";
+const selectedgroup = ref('')
+const grouplist = getAllGroups().map((item)=>{return {value:item,label:_.capitalize(item)}})
+const mode = ref('preview')
+
+const allresources = getUniqueResource()
+const allactions = ref()
+const permissions=ref()
+
+const activeroles = ref()
+const copied = ref('')
+
+const previewPermission = () => {
+  showpermissioninfo.value = true;
+};
+
+
+const copyText = () => {
+    copied.value="copied!"
+    const storage = document.createElement('textarea');
+    storage.value = String(document.getElementById('permissionstr')?.innerHTML)
+    document.body.appendChild(storage);
+    storage.select();
+    storage.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    document.body.removeChild(storage);
+    
+
+
+}
+const selectGroup = (selectedgroup:any) => {
+    const groupname = selectedgroup.value
+    activeroles.value= getGroupRoles(groupname)
+    allactions.value={}
+    permissions.value={}
+    for(let i=0; i< allresources.length; i++){
+        const r = allresources[i]
+        console.log(r)
+        const actions = getActionFromResource(r)
+        allactions.value[r]=actions
+        permissions.value[r]=getGroupResourcePermission(groupname,r).map(item=>item.action)
+    }
+    console.log(allactions.value,permissions.value)
+}
+</script>

package/templates/nuxt/components/ButtonProfile.vue.eta

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+import OverlayPanel from 'primevue/overlaypanel';
+import {ref} from 'vue'
+
+const userprofileoverlay = ref();
+const toggle = (event:any) => {
+    userprofileoverlay.value.toggle(event);
+}
+
+</script>
+
+<template>
+    <div>
+        <div class=" w-[120px] truncate ...">
+            
+            <div class="flex flex-row-reverse  cursor-pointer border-none w-full" @click="toggle">                    
+                <p>{{ getUserProfile().fullName }}</p>
+                <Avatar :image="getUserStore().getAvatarLink(32)" class="" size="normal" shape="circle" />                
+            </div>
+            
+        </div>
+        <OverlayPanel ref="userprofileoverlay">                    
+            <div class="flex flex-col">
+                <div class="flex flex-row">
+                    <div class="content-center	border">            
+                        <Avatar :image="getUserStore().getAvatarLink(60)" class="mr-2" size="xlarge" shape="circle" />            
+                    </div>
+                    <div>
+                        <div  class="text text-center border">
+                            {{getUserProfile().fullName }}
+                        </div>
+                        <div  class="text text-center text-sm border" >
+                            {{getUserProfile().group }}
+                        </div>
+                    </div>
+                </div>
+            
+            
+            <div class="flex flex-row gap-2 border">
+                <Button class="border">
+                    <i class="pi pi-user"></i>profile
+                </Button>    
+                <Button class="border" @click="logout()">
+                    <i class="pi pi-sign-out"></i>logout
+                </Button>    
+            </div>
+            
+        </div>
+        </OverlayPanel>
+    </div>
+</template>

package/templates/nuxt/components/CrudNestedDoc.vue.eta

@@ -53,7 +53,11 @@ defineShortcuts({
   'ctrl_enter': () => newData()
 })
 const refresh = () => {
-  obj.list().then((res:any) => {    
+  const searchbody: SearchBody = {
+    fields: props.listColumns.concat(['created']),
+    // sorts:props.sorts
+  }
+  obj.search(searchbody).then((res:any) => {    
     recordlist.value = res;
     disabled.value=false
   });
@@ -65,8 +69,8 @@ const newData = () => {
   $event("newRecord")
 };
 
-const triggerEdit = (event: any) => {
-  let id = event.data._id.toString()
+const triggerEdit = (data: any) => {
+  let id = data._id.toString()
   router.push({ path: `${props.path}/${id}` })  
 };
 const editRecord = (id:string) => {  
@@ -129,13 +133,17 @@ onNuxtReady(()=>{
 <template>
     <div class="simpleapp-crudnesteddocument">    
       <h1 v-if="systemwindows" class="error-text text-center">* It is system administration screen</h1>
-      <button class="btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">New</button>
+      <Button class="btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">New</Button>
       <SimpleAppDatatable
             @row-dblclick="triggerEdit"
             v-model="recordlist"                                 
             :setting="{}"
             :columns="listColumns"
           >         
+          <Column header=" ">
+          <template #body="{index,data}">
+            <Button icon="pi pi-pencil" class="btn-primary" @click="triggerEdit(data)"></Button>
+          </template></Column>
         </SimpleAppDatatable>
 
       
@@ -144,10 +152,10 @@ onNuxtReady(()=>{
     <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
         <SimpleAppForm :document="obj"  #default="o">     
             <div class="simpleapp-tool-bar   col-span-4 text-left gap-4"  >
-              <button class="btn-default" :disabled="disabled" @click="newData" type="button" v-if="canPerform(resourcename,'create')">New</button>
-              <button class="btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(resourcename,'update') && data.created==''">Create</button>
-              <button class="btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(resourcename,'update') && data.created!=''">Update</button>
-              <button class="btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(resourcename,'delete') && data.created!=''">Delete</button>
+              <Button class=" btn-default" :disabled="disabled" @click="newData" type="button" v-if="canPerform(resourcename,'create')">New</Button>
+              <Button class=" btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(resourcename,'update') && data.created==''">Create</Button>
+              <Button class=" btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(resourcename,'update') && data.created!=''">Update</Button>
+              <Button class=" btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(resourcename,'delete') && data.created!=''">Delete</Button>
               <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
               <ConfirmPopup></ConfirmPopup>
               

package/templates/nuxt/components/CrudSimple.vue.eta

@@ -70,8 +70,8 @@ const newData = () => {
   $event("newRecord")
 };
 
-const triggerEdit = (event: any) => {
-  let id = event.data._id.toString()
+const triggerEdit = (data: any) => {
+  let id = data._id
   router.push({ path: `${props.path}/${id}` })  
 };
 const editRecord = (id:string) => {
@@ -140,15 +140,17 @@ onNuxtReady(()=>{
  
 <template>
     <div class="simpleapp-crudsimple">    
-      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>
-      
-      <button class="btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">New</button>
-      <SimpleAppDatatable
-            @row-dblclick="triggerEdit"
+      <h1 v-if="systemwindows" class="error-text text-center">* system administration screen</h1>      
+      <Button class=" btn-primary" @click="newData" v-tooltip="'Add new(ctrl+enter)'" v-if="canPerform(resourcename,'create')">New</Button>
+      <SimpleAppDatatable            
             v-model="recordlist"                                 
             :setting="{}"
             :columns="listColumns"
           >         
+          <Column header=" ">
+          <template #body="{index,data}">
+            <Button icon="pi pi-pencil" class="btn-primary" @click="triggerEdit(data)"></Button>
+          </template></Column>
         </SimpleAppDatatable>
 
       <DebugDocumentData v-model="data"/>
@@ -157,10 +159,10 @@ onNuxtReady(()=>{
     <Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
         <SimpleAppForm :document="obj"  #default="o">     
             <div class="simpleapp-tool-bar   col-span-4 text-left gap-4"  >
-              <button class="btn-default" :disabled="disabled" @click="newData" type="button" v-if="canPerform(resourcename,'create')">New</button>
-              <button class="btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(resourcename,'create') && data.created==''">Create</button>
-              <button class="btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(resourcename,'update') && data.created!=''">Update</button>
-              <button class="btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(resourcename,'delete') && data.created!=''">Delete</button>
+              <Button class=" btn-default" :disabled="disabled" @click="newData" type="button" v-if="canPerform(resourcename,'create')">New</Button>
+              <Button class=" btn-primary" :disabled="disabled" @click="createData" type="button" v-if="canPerform(resourcename,'create') && data.created==''">Create</Button>
+              <Button class=" btn-primary" :disabled="disabled" @click="updateData" type="button" v-if="canPerform(resourcename,'update') && data.created!=''">Update</Button>
+              <Button class=" btn-danger" :disabled="disabled" @click="deleteData($event)" type="button" v-if="canPerform(resourcename,'delete') && data.created!=''">Delete</Button>
               <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
               <ConfirmPopup></ConfirmPopup>
               

package/templates/nuxt/components/DebugDocumentData.vue.eta

@@ -18,7 +18,7 @@ const label = ref(props.label??'Debug')
 </script>
 <template>
     <div class="floatright" v-if="isdebug=='1'">
-        <button @click="visible=true">{{ label }}</button>
+        <Button @click="visible=true">{{ label }}</Button>
         <Dialog v-model:visible="visible" modal header="Debug data" :style="{ width: '80vw' }">
             <pre>{{ modelValue }}</pre>
         </Dialog>                

package/templates/nuxt/components/HeaderBar.vue.eta

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import ButtonMenuPicker from "./ButtonMenuPicker.vue"
+
+import ButtonProfile from './ButtonProfile.vue';
+
+
+</script>
+<template>
+    <!-- <header>       -->
+        <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
+    <div class="bg-white border-b-2 border-b-gray-300  h-10 flex flex-row">
+        
+        
+        <div class="flex-1 flex flex-row gap-2 p-2">
+            <div class="">
+                <ButtonMenuPicker/>
+                
+            </div>            
+            <div class="">
+                <ButtonHome @click="navigateTo(`/${getUserProfile().currentxorg}`)"/>                
+            </div>
+            
+        </div>
+        <div class="flex-1 flex flex-row-reverse  gap-2 p-2">
+
+            <div class=" text-right">
+                <ButtonProfile/>                                
+            </div>
+         
+            <div class="">
+                <SelectBranch/>              
+            </div>        
+        </div>
+
+        
+        
+    </div>
+    <!-- </header> -->
+</template>

package/templates/nuxt/components/Invitation.vue.eta

@@ -8,8 +8,8 @@
                     <div class="text text-xs text-gray-500 italic">{{ item.created }}</div>
                 </div>
                 <div >
-                    <button class="btn-primary" @click="approve(item._id)">Approve</button>
-                    <button class="btn-danger" @click="decline(item._id)">Decline</button>
+                    <Button class="btn-primary" @click="approve(item._id)">Approve</Button>
+                    <Button class="btn-danger" @click="decline(item._id)">Decline</Button>
                 </div>
             </div>
         </div>