@mixd-id/web-scaffold 0.1.240411093 → 0.1.240411095

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411093",
+  "version": "0.1.240411095",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/List.vue

@@ -14,6 +14,7 @@
                    :controller="controller"
                    :preset-key="presetKey"
                    :use-assistant="useAssistant"
+                   :use-sharing="useSharing"
                    @apply="load">
 
           <template #toolbar>
@@ -87,7 +88,7 @@
                 <slot name="toolbar"></slot>
               </div>
 
-              <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
+              <div class="flex flex-row gap-1" v-if="Boolean(toolbar)">
                 <Textbox v-if="canSearch"
                          class="flex-1 md:w-[240px] bg-base-400 border-text-50"
                          placeholder="Search..."
@@ -103,25 +104,6 @@
                   </template>
                 </Textbox>
 
-                <div v-if="false && $slots.gridItem"
-                     class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-text-50 rounded-lg">
-                  <Radio v-model="preset.view"
-                         name="view"
-                         value="table"
-                         :custom="true"
-                         class="p-2 px-3 rounded-lg rounded-r-none"
-                         :class="preset.view === 'table' ? 'bg-primary-500' : 'bg-base-500'">
-                    <svg width="14" height="14" :class="preset.view === 'table' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
-                  </Radio>
-                  <Radio v-model="preset.view"
-                         name="view"
-                         value="grid"
-                         :custom="true"
-                         class="p-2 px-3 bg-base-500 rounded-lg rounded-l-none"
-                         :class="preset.view === 'grid' ? 'bg-primary-500' : 'bg-base-500'">
-                    <svg width="14" height="14" :class="preset.view === 'grid' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C176 302.3 161.7 288 144 288zM368 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C400 302.3 385.7 288 368 288zM592 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C624 302.3 609.7 288 592 288zM144 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C176 78.33 161.7 64 144 64zM368 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C400 78.33 385.7 64 368 64zM592 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C624 78.33 609.7 64 592 64z"/></svg>
-                  </Radio>
-                </div>
               </div>
 
             </div>
@@ -179,7 +161,7 @@
                          :config="cConfig">
               <template #item="{ item }">
                 <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
-                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden p-3 gap-3">
                     <div>
                       <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                     </div>
@@ -242,7 +224,7 @@
                        :config="cConfig">
             <template #item="{ item }">
               <slot name="gridItem" :item="item" :getEnumText="getEnumText">
-                <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                <div class="flex flex-row panel-400 rounded-lg overflow-hidden p-3 gap-3">
                   <div>
                     <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                   </div>
@@ -282,7 +264,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import {generatePivotColumns, generateTotalColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
-import {groupBy, invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
@@ -342,6 +324,10 @@ export default{
     useAssistant: {
       type: undefined,
       default: false
+    },
+    useSharing: {
+      type: undefined,
+      default: false
     }
   },
 
@@ -407,7 +393,7 @@ export default{
             })
             .finally(_ => this.readyState = 1)
       }
-      return new Promise(resolve => resolve())
+      return Promise.resolve()
     },
 
     loadNext(){
@@ -436,7 +422,7 @@ export default{
             .catch(err => this.toast(err))
             .finally(_ => this.readyState = 1)
       }
-      return new Promise(resolve => resolve())
+      return Promise.resolve()
     },
 
     async loadPreset(){
@@ -464,25 +450,21 @@ export default{
           const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
           Object.assign(this.cConfig, defaultConfig)
 
-          return new Promise(resolve => resolve())
+          return Promise.resolve()
         }
       }
       else{
         const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
         Object.assign(this.cConfig, defaultConfig)
 
-        return new Promise((resolve) => {
-          const query = {}
-          for(let key in this.$route.query){
-            if(key.toLowerCase() !== 'reset')
-              query[key] = this.$route.query[key]
-          }
-          this.$router.replace({
-            ...this.$route,
-            query
-          })
-
-          resolve()
+        const query = {}
+        for(let key in this.$route.query){
+          if(key.toLowerCase() !== 'reset')
+            query[key] = this.$route.query[key]
+        }
+        this.$router.replace({
+          ...this.$route,
+          query
         })
       }
     },
@@ -526,9 +508,9 @@ export default{
               }
             })
 
-            for(let key in this.enumCache[column.key]){
-              if(!this.enumCache[column.key][key].text)
-                this.enumCache[column.key][key].text = key
+            for(let cacheKey in this.enumCache[column.key]){
+              if(!this.enumCache[column.key][cacheKey].text)
+                this.enumCache[column.key][cacheKey].text = cacheKey
             }
 
             this.lastEnumItems = reqItems
@@ -634,7 +616,9 @@ export default{
 
     sortItems(items){
 
-      if(typeof this.sorts === 'function'){}
+      if(typeof this.sorts === 'function'){
+        return (items ?? []).sort(this.sorts)
+      }
       else if((this.sorts ?? []).length > 0){
         return (items ?? []).sort((a, b) => {
           return sortsFn(a, b, this.sorts, 0)
@@ -946,42 +930,6 @@ export default{
     columns(){
       if((this.preset.pivot ?? {}).enabled){
         return this.preset.pivot.columns ?? []
-
-        const tableColumns = groupBy(this.preset.columns ?? this.cConfig.columns, 'key')
-
-        const columns = []
-
-        for(let row of this.preset.pivot.rows){
-          if(!tableColumns[row.key][0].defaultFormat)
-            tableColumns[row.key][0].defaultFormat = tableColumns[row.key][0].format
-
-          switch(row.aggregrate){
-            case 'year':
-              tableColumns[row.key][0].format = 'YYYY'
-              break
-
-            case 'month':
-              tableColumns[row.key][0].format = 'MMM YYYY'
-              break
-
-            case 'date':
-              tableColumns[row.key][0].format = 'D MMM YYYY'
-              break
-          }
-
-          columns.push(tableColumns[row.key][0])
-        }
-
-        for(let value of this.preset.pivot.values){
-          const key = value.aggregrate ? `_${value.key}-${value.aggregrate}` : `_${value.key}-`
-          for(let k in tableColumns){
-            if(k.startsWith(key)){
-              columns.push(tableColumns[k][0])
-            }
-          }
-        }
-
-        return columns
       }
 
       for(let idx in this.preset.columns){
@@ -1029,7 +977,7 @@ export default{
       const items = this.sortItems(this.data.items)
 
       if(typeof this.itemsFn === 'function'){
-        return this.itemsFn(this.data.items)
+        return this.itemsFn(items)
       }
 
       return items
@@ -1040,6 +988,8 @@ export default{
           this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
 
       if(preset){
+        if(!preset.columns)
+          preset.columns = JSON.parse(JSON.stringify(this.cConfig.columns))
         if(!preset.search) preset.search = ''
         preset.search = this.$route.query?.search ? this.$route.query.search : preset.search
       }
@@ -1055,7 +1005,7 @@ export default{
 
     presetView(){
       return this.$device.type === 'mobile' ? 'grid' :
-          (this.view ?? this.preset.view)
+          (this.view ?? this.preset.view ?? 'table')
     },
 
     configParams(){
@@ -1064,7 +1014,8 @@ export default{
 
       if(this.configPresets.length > 0 &&
           (!this.cConfig.params.presetIdx ||
-              !this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx)))
+              (!this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx) &&
+               !this.configSharedPresets.find(_ => _.uid === this.cConfig.params.presetIdx))))
         this.cConfig.params.presetIdx = this.configPresets[0].uid
 
       return this.cConfig.params
@@ -1124,7 +1075,7 @@ export default{
     },
 
     freezeLeft(){
-      return (this.preset?.columns).findIndex(_ => _.freeze) + 1
+      return (this.preset?.columns ?? []).findIndex(_ => _.freeze) + 1
     }
 
   },
@@ -1135,10 +1086,8 @@ export default{
       data: {
         itemsPerPage: 16,
       },
-      observer: null,
       compPrefix: '',
       enumCache: {},
-      extItems: null,
       lastEnumItems: null,
       queue: null,
       _config: {

package/src/utils/wss.js

@@ -72,8 +72,6 @@ class WSS extends EventEmitter2{
 
   _authFn = []
   _reqFn = []
-  _retryCount = 0
-
   _connectionId = 0
   _debugIds = {}
 
@@ -110,6 +108,7 @@ class WSS extends EventEmitter2{
 
     this._instance.on('connection', async (socket, req) => {
       socket.id = `${++this._connectionId}`
+      socket._retryCount = 0
 
       if(`${req.url}`.indexOf('debug-ws') > 0){
         this._debugIds[socket.id] = {}
@@ -167,7 +166,7 @@ class WSS extends EventEmitter2{
 
         if(pong){
           delete socket.pinging
-          this._retryCount = 0
+          socket._retryCount = 0
         }
         else if(ping){
           socket.send(await this.toBinaryData({ pong: 1 }, !!this._debugIds[socket.id]))
@@ -217,6 +216,9 @@ class WSS extends EventEmitter2{
         if(subscriber){
           subscriber.disconnect()
         }
+        if(this._debugIds[socket.id]){
+          delete this._debugIds[socket.id]
+        }
         this.emit('close', e, socket)
       });
 
@@ -230,46 +232,117 @@ class WSS extends EventEmitter2{
           await fn(token, socket)
         }
 
-        socket.isAuth = true
-        socket.send(await this.toBinaryData({ auth:true }, !!this._debugIds[socket.id]))
-
         subscriber = this._client.duplicate()
         await subscriber.connect()
+
+        socket.isAuth = true
+        socket.send(await this.toBinaryData({ auth:true }, !!this._debugIds[socket.id]))
       }
       catch(e){
         return socket.close(1002, (e.message ?? '').substring(0, 123));
       }
 
       if(this._opt.ping !== false){
+        let pingTimer
 
         const ping = async() => {
+          if(socket.readyState !== WebSocket.OPEN) return
+
           socket.send(await this.toBinaryData({ ping:1 }, !!this._debugIds[socket.id]))
           socket.pinging = true
 
-          setTimeout(() => {
+          pingTimer = setTimeout(() => {
             if(socket.pinging){
-              this._retryCount++
+              socket._retryCount++
 
-              if(this._retryCount > 10){
+              if(socket._retryCount > 10){
                 socket.close(1002, 'ping timeout')
                 if(subscriber){
                   subscriber.disconnect()
                 }
-                else{
-                  console.log('CLOSE SOCKET#2', token.substring(0, 10) + '...')
-                }
+              }
+              else{
+                pingTimer = setTimeout(ping, 3000)
               }
             }
             else{
-              setTimeout(ping, (Math.round(Math.random() * 10) % 5) * 5000)
+              pingTimer = setTimeout(ping, (Math.round(Math.random() * 10) % 5) * 5000)
             }
           }, 3000)
         }
-        setTimeout(ping, (Math.round(Math.random() * 10) % 5) * 5000)
+        pingTimer = setTimeout(ping, (Math.round(Math.random() * 10) % 5) * 5000)
+
+        socket.on('close', () => {
+          clearTimeout(pingTimer)
+        })
       }
     })
   }
 
+  stats(){
+    let authenticated = 0
+    this._instance.clients.forEach(socket => {
+      if(socket.isAuth) authenticated++
+    })
+
+    return {
+      pid: process.pid,
+      connections: this._instance.clients.size,
+      authenticated,
+      totalConnections: this._connectionId,
+      debugConnections: Object.keys(this._debugIds).length,
+    }
+  }
+
+  clusterStats(){
+    return new Promise((resolve) => {
+      const workers = {}
+      const timeout = setTimeout(() => resolve(this._aggregateStats(workers)), 3000)
+
+      process.on('message', (packet) => {
+        if(packet.type === 'process:msg' && packet.data?.type === 'wss:stats:response'){
+          workers[packet.data.pid] = packet.data.stats
+        }
+
+        const expected = parseInt(process.env.instances || '0', 10)
+        if(expected > 0 && Object.keys(workers).length >= expected){
+          clearTimeout(timeout)
+          resolve(this._aggregateStats(workers))
+        }
+      })
+
+      process.send({ type: 'process:msg', data: { type: 'wss:stats:request' } })
+
+      // Include own stats
+      workers[process.pid] = this.stats()
+    })
+  }
+
+  _aggregateStats(workers){
+    const pids = Object.keys(workers)
+    return {
+      workers: pids.length,
+      connections: pids.reduce((sum, pid) => sum + workers[pid].connections, 0),
+      authenticated: pids.reduce((sum, pid) => sum + workers[pid].authenticated, 0),
+      totalConnections: pids.reduce((sum, pid) => sum + workers[pid].totalConnections, 0),
+      debugConnections: pids.reduce((sum, pid) => sum + workers[pid].debugConnections, 0),
+      perWorker: workers,
+    }
+  }
+
+  initClusterStats(){
+    if(process.send){
+      process.on('message', (packet) => {
+        if(packet.type === 'process:msg' && packet.data?.type === 'wss:stats:request'){
+          process.send({
+            type: 'process:msg',
+            data: { type: 'wss:stats:response', pid: process.pid, stats: this.stats() }
+          })
+        }
+      })
+    }
+  }
+
   auth(fn){
     this._authFn.push(fn)
   }

package/src/widgets/Dashboard/SharingModal.vue

@@ -3,8 +3,10 @@
          width="360"
          height="480" @show="$refs.search.select()">
 	  <template v-slot:head>
-	    <div class="relative p-6 flex flex-col gap-4">
-	      <h3>Sharing</h3>
+	    <div class="relative pt-6 pb-3 flex flex-col gap-4">
+	      <div class="px-6">
+          <h3>Sharing</h3>
+        </div>
 	      <div class="absolute top-0 right-0 p-2">
 	        <button type="button" class="p-2" @click="close">
 	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
@@ -14,27 +16,36 @@
 	      </div>
 
         <div>
-          <Textbox @keyup.enter="load"
-                   ref="search"
-                   v-model="search"
-                   placeholder="Search..."
-                   :clearable="true"
-                   @clear="load(search = '')">
-            <template #start>
-              <div class="pl-3">
-                <svg width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
-              </div>
-            </template>
-          </Textbox>
+          <div class="mb-3 flex border-b-[1px] border-text-50 px-6">
+            <Tabs :items="tabItems" v-model="tabIndex" />
+          </div>
+
+          <div class="px-6">
+            <Textbox @keyup.enter="load"
+                     ref="search"
+                     v-model="search"
+                     placeholder="Search..."
+                     :clearable="true"
+                     @clear="load(search = '')">
+              <template #start>
+                <div class="pl-3">
+                  <svg width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+                </div>
+              </template>
+            </Textbox>
+          </div>
         </div>
 	    </div>
 	  </template>
-	  <div class="flex-1 p-6 flex flex-col">
+	  <div class="flex-1 flex flex-col">
 
-      <div v-if="items?.length > 0">
-        <div v-for="item in items" :class="appStyle.menuItem" @click="select(item)">
+      <div v-if="items?.length" class="divide-y divide-text-50 border-y-[1px] border-text-50">
+        <div v-for="item in items" class="px-6 p-3 hover:bg-primary" @click="select(item)">
           <slot name="item" :item="item">
-            <div>{{ item.name }}</div>
+            <div v-if="tabIndex === 1">{{ item.user?.name }}</div>
+            <div v-else-if="tabIndex === 2">{{ item.business }}</div>
+            <div v-else-if="tabIndex === 3">{{ item.subBusiness }}</div>
+            <div v-else-if="tabIndex === 4">{{ item.branchCode }}</div>
           </slot>
         </div>
       </div>
@@ -69,6 +80,13 @@ export default{
       selectedIds: null,
       callback: null,
       search: '',
+      tabItems: [
+        { text:'User', value:1 },
+        { text:'Bisnis', value:2 },
+        { text:'Sub Bisnis', value:3 },
+        { text:'Cabang', value:4 }
+      ],
+      tabIndex: 1
 		}
 	},
 
@@ -79,7 +97,7 @@ export default{
     },
 
     load(){
-      this.socket.send(this.src, { search:this.search })
+      this.socket.send(this.src, { search:this.search, type: this.tabIndex })
           .then(res => {
             this.items = res.items
           })
@@ -94,13 +112,26 @@ export default{
 		},
 
     select(item){
+      const newItem = JSON.parse(JSON.stringify(item))
+
       if(typeof this.callback === 'function')
-        this.callback(item)
-      this.$emit('select', item)
+        this.callback(newItem)
+      this.$emit('select', newItem)
       this.close()
     },
 
-	}
+	},
+
+  watch: {
+
+    tabIndex: {
+      handler(){
+        this.search = ''
+        this.load()
+      }
+    }
+
+  }
 
 }
 

package/src/widgets/PresetBar.vue

@@ -13,132 +13,140 @@
           <slot name="toolbar" :edit="false"></slot>
         </div>
 
-        <div class="p-5">
-          <div class="px-2">
-            <label class="text-text-300">Presets</label>
-          </div>
+        <div class="flex-1 overflow-y-auto">
+          <div class="p-5">
+            <div class="px-2">
+              <label class="text-text-300">Presets</label>
+            </div>
 
-          <ListItem :items="config.presets"
-                    class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
-                    container-class="divide-y divide-text-50"
-                    @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
-            <template v-slot="{ item }">
-              <div :class="$style.presetBtn">
-                <div data-reorder>
-                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+            <ListItem :items="config.presets"
+                      class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
+                      container-class="divide-y divide-text-50"
+                      @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
+              <template v-slot="{ item }">
+                <div :class="$style.presetBtn">
+                  <div data-reorder>
+                    <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                  </div>
+                  <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
+                  <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                          @click="configParams.presetIdx = item.uid; apply()">
+                    {{ item.name }}
+                  </button>
+                  <button type="button"
+                          :class="$style.presetOptBtn"
+                          :ref="`presetbtn${item.uid}`"
+                          @click="$refs.contextMenu.open($refs[`presetbtn${item.uid}`], { item })">
+                    <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
+                  </button>
                 </div>
-                <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
-                <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                        @click="configParams.presetIdx = item.uid; apply()">
-                  {{ item.name }}
-                </button>
-                <button type="button"
-                        :class="$style.presetOptBtn"
-                        :ref="`presetbtn${item.uid}`"
-                        @click="$refs.contextMenu.open($refs[`presetbtn${item.uid}`], { item })">
-                  <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
-                </button>
-              </div>
-            </template>
-          </ListItem>
-
-          <ContextMenu ref="contextMenu" position="bottom-right">
-            <template #default="{ context }">
-              <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+              </template>
+            </ListItem>
 
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="select(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
-                  </div>
-                  Edit
-                </button>
+            <ContextMenu ref="contextMenu" position="bottom-right">
+              <template #default="{ context }">
+                <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
 
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="duplicate(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
-                  </div>
-                  Duplicate
-                </button>
+                  <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                          @click="select(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
+                    </div>
+                    Edit
+                  </button>
 
-                <button v-if="config.presets.length > 1" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
-                        @click="remove(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
-                  </div>
-                  Remove
-                </button>
+                  <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                          @click="duplicate(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+                    </div>
+                    Duplicate
+                  </button>
 
-              </div>
-            </template>
-          </ContextMenu>
-        </div>
+                  <button v-if="config.presets.length > 1" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
+                          @click="remove(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
+                    </div>
+                    Remove
+                  </button>
 
-        <div v-if="(config.sharedPresets ?? []).length > 0" class="p-5">
-          <div class="px-2">
-            <label class="text-text-300">Shared Presets</label>
+                </div>
+              </template>
+            </ContextMenu>
           </div>
 
-          <ListItem :items="config.sharedPresets"
-                    class="mt-1 rounded-lg overflow-hidden"
-                    container-class="divide-y divide-text-50">
-            <template v-slot="{ item, index }">
-              <div :class="$style.presetBtn">
-                <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
-                <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                        @click="configParams.presetIdx = item.uid; apply()">
-                  {{ item.name }}
-                </button>
-                <button type="button"
-                        :class="$style.presetOptBtn"
-                        :ref="`presetsbtn${item.uid}`"
-                        @click="$refs.contextMenu2.open($refs[`presetsbtn${item.uid}`], { item, index })">
-                  <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
-                </button>
-              </div>
-            </template>
-          </ListItem>
-
-          <ContextMenu ref="contextMenu2" position="bottom-right">
-            <template #default="{ context }">
-              <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+          <div v-if="useSharing" class="p-5">
+            <div class="px-2">
+              <label class="text-text-300">Shared Presets</label>
+            </div>
 
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="duplicate(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+            <div v-if="config.sharedPresets?.length">
+              <ListItem :items="config.sharedPresets"
+                        class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
+                        container-class="divide-y divide-text-50">
+                <template v-slot="{ item, index }">
+                  <div :class="$style.presetBtn">
+                    <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
+                    <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                            @click="configParams.presetIdx = item.uid; apply()">
+                      {{ item.name }}
+                    </button>
+                    <button type="button"
+                            :class="$style.presetOptBtn"
+                            :ref="`presetsbtn${item.uid}`"
+                            @click="$refs.contextMenu2.open($refs[`presetsbtn${item.uid}`], { item, index })">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
+                    </button>
                   </div>
-                  Duplicate
-                </button>
+                </template>
+              </ListItem>
+
+              <ContextMenu ref="contextMenu2" position="bottom-right">
+                <template #default="{ context }">
+                  <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+
+                    <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                            @click="duplicate(context.item)">
+                      <div class="w-[24px]">
+                        <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+                      </div>
+                      Duplicate
+                    </button>
+
+                    <button class="w-full p-3 text-left flex flex-row gap-3 text-red-500"
+                            :class="appStyle.menuItem"
+                            @click="removeShared(context.item, context.index)">
+                      <div class="w-[24px]">
+                        <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
+                      </div>
+                      Remove
+                    </button>
 
-                <button class="w-full p-3 text-left flex flex-row gap-3 text-red-500"
-                        :class="appStyle.menuItem"
-                        @click="removeShared(context.item, context.index)">
-                  <div class="w-[24px]">
-                    <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
                   </div>
-                  Remove
-                </button>
+                </template>
+              </ContextMenu>
+            </div>
 
-              </div>
-            </template>
-          </ContextMenu>
-        </div>
+            <div v-else class="mt-2">
+              <p class="text-text-300 p-3 text-center bg-base-300">No Shared Presets</p>
+            </div>
+          </div>
 
-        <div class="p-5" v-if="['true', 1, true].includes(useAssistant)">
-          <div class="px-2 flex flex-col gap-1">
-            <div class="flex flex-row gap-2">
-              <div class="flex-1">
-                <label class="text-text-300">AI Assistant</label>
-              </div>
-              <div v-if="$isDebugMode" class="flex flex-row gap-2">
-                <button type="button" class="text-primary text-sm" @click="log(config)">Config</button>
-                <button type="button" class="text-primary text-sm" @click="log(preset)">Preset</button>
+          <div class="p-5" v-if="['true', 1, true].includes(useAssistant)">
+            <div class="px-2 flex flex-col gap-1">
+              <div class="flex flex-row gap-2">
+                <div class="flex-1">
+                  <label class="text-text-300">AI Assistant</label>
+                </div>
+                <div v-if="$isDebugMode" class="flex flex-row gap-2">
+                  <button type="button" class="text-primary text-sm" @click="log(config)">Config</button>
+                  <button type="button" class="text-primary text-sm" @click="log(preset)">Preset</button>
+                </div>
               </div>
+              <Textarea rows="6" placeholder="Generate preset based on text" v-model="generateText" />
+              <Button ref="generateBtn" class="w-[100px] mt-2" :state="canGenerate ? 1 : -1" @click="generatePreset">Generate</Button>
             </div>
-            <Textarea rows="6" placeholder="Generate preset based on text" v-model="generateText" />
-            <Button ref="generateBtn" class="w-[100px] mt-2" :state="canGenerate ? 1 : -1" @click="generatePreset">Generate</Button>
           </div>
         </div>
 
@@ -570,8 +578,8 @@
             <div class="flex flex-col gap-1 mt-2">
               <div v-for="(item, index) in preset.shared"
                    class="bg-base-500 hover:bg-text-50 p-3 rounded-lg flex flex-row gap-2 items-center gap-1">
-                <div class="flex-1 flex flex-row items-center cursor-default gap-2">
-                  <svg class="fill-text-200" height="14" viewBox="0 0 448 512" width="14"
+                <div v-if="item.userId" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" height="14" viewBox="0 0 448 512" width="14"
                        xmlns="http://www.w3.org/2000/svg">
                     <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
                     <path
@@ -579,6 +587,18 @@
                   </svg>
                   {{ item.user?.name ?? item.userId }}
                 </div>
+                <div v-else-if="item.business" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 192c0-88.38-107.5-160-240-160S0 103.6 0 192c0 35.38 30.88 64 64 64v192c0 17.62 14.38 32 32 32h288c17.62 0 32-14.38 32-32V256C449.1 256 480 227.4 480 192zM400 32c-2.375 0-4.75 .25-7.25 .25C465.3 66.38 512 124.6 512 192c0 42.75-26.88 79-64 91.5V448c-.125 11.25-3.125 22.38-8.875 32H544c17.62 0 32-14.38 32-32V256h4C613.1 256 640 227.4 640 192C640 103.6 532.5 32 400 32z"/></svg>
+                  {{ item.business }}
+                </div>
+                <div v-else-if="item.subBusiness" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 368C144 376.8 151.2 384 160 384s16-7.178 16-16S168.8 352 160 352S144 359.2 144 368zM368 144C368 135.2 360.8 128 352 128s-16 7.178-16 16S343.2 160 352 160S368 152.8 368 144zM184 0C155 0 132 22 129 50c-28 7-48.99 32-48.99 62c0 6 .9863 12 2.986 18C53.1 136 32 161 32 192c0 15 5 29 13.1 40C19 245 0 272 0 304c0 34 21.1 63 52 75C49.1 385 48 392 48 400c0 35 29 64 64 64c5.1 0 11-1 17-2C131 490 155 512 184 512c31 0 56-25 56-56V272H192C183.2 272 176 279.2 176 288v43.43C190.1 337.6 200 351.6 200 368c0 22.09-17.91 40-40 40s-40-17.91-40-40c0-16.38 9.9-30.38 24-36.57V288c0-26.47 21.53-48 48-48h48V160H196.6C190.4 174.1 176.4 184 160 184c-22.09 0-40-17.91-40-40S137.9 104 160 104c16.38 0 30.38 9.9 36.57 24H240V56C240 25 215 0 184 0zM144 144C144 152.8 151.2 160 160 160s16-7.178 16-16S168.8 128 160 128S144 135.2 144 144zM512 304c0-32-19-59-46-72C475 221 480 207 480 192c0-31-22-56-51-62c2-6 2.987-12 2.987-18c0-30-20.99-55-48.99-62C380 22 357 0 328 0c-31 0-56 25-56 56V240H320c8.828 0 16-7.172 16-16V180.6C321.9 174.4 312 160.4 312 144c0-22.09 17.91-40 40-40s40 17.91 40 40c0 16.38-9.9 30.38-24 36.57V224c0 26.47-21.53 48-48 48h-48V352h43.43C321.6 337.9 335.6 328 352 328c22.09 0 40 17.91 40 40s-17.91 40-40 40c-16.38 0-30.38-9.9-36.57-24H272v72c0 31 25 56 56 56c29 0 53-22 55-50C389 463 393.1 464 400 464c35 0 64-29 64-64c0-8-2-15-4-21C489.1 367 512 338 512 304zM368 368c0-8.822-7.178-16-16-16s-16 7.178-16 16S343.2 384 352 384S368 376.8 368 368z"/></svg>
+                  {{ item.subBusiness }}
+                </div>
+                <div v-else-if="item.branchCode" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M464 0h-224C213.5 0 192 21.49 192 48v80.01L48 128c-26.51 0-48 21.49-48 48v304c0 17.67 14.33 32 32 32L480 512c17.67 0 32-14.33 32-32V48C512 21.49 490.5 0 464 0zM128 336c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16v-32c0-8.838 7.164-16 16-16h32c8.836 0 16 7.162 16 16V336zM128 240c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16v-32c0-8.838 7.164-16 16-16h32c8.836 0 16 7.162 16 16V240zM320 304c0 8.836-7.164 16-16 16h-32C263.2 320 256 312.8 256 304v-32C256 263.2 263.2 256 272 256h32C312.8 256 320 263.2 320 272V304zM320 208C320 216.8 312.8 224 304 224h-32C263.2 224 256 216.8 256 208v-32C256 167.2 263.2 160 272 160h32C312.8 160 320 167.2 320 176V208zM320 112C320 120.8 312.8 128 304 128h-32C263.2 128 256 120.8 256 112v-32C256 71.16 263.2 64 272 64h32C312.8 64 320 71.16 320 80V112zM448 304c0 8.836-7.164 16-16 16h-32C391.2 320 384 312.8 384 304v-32C384 263.2 391.2 256 400 256h32C440.8 256 448 263.2 448 272V304zM448 208C448 216.8 440.8 224 432 224h-32C391.2 224 384 216.8 384 208v-32C384 167.2 391.2 160 400 160h32C440.8 160 448 167.2 448 176V208zM448 112C448 120.8 440.8 128 432 128h-32C391.2 128 384 120.8 384 112v-32C384 71.16 391.2 64 400 64h32C440.8 64 448 71.16 448 80V112z"/></svg>
+                  {{ item.branchCode }}
+                </div>
                 <button type="button" @click="removeSharing(item, index)">
                   <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512"
                        width="14" xmlns="http://www.w3.org/2000/svg">
@@ -631,6 +651,11 @@ export default{
     useAssistant: {
       type: undefined,
       default: false
+    },
+
+    useSharing: {
+      type: undefined,
+      default: false
     }
 
   },
@@ -646,16 +671,16 @@ export default{
 
     addSharing(item) {
       const obj = {
+        ...item,
         key: this.presetKey,
-        presetUid: this.preset.uid,
-        userId: item.id
+        presetUid: this.preset.uid
       }
 
       this.socket.send(`${this.controller}.add-sharing`, obj)
           .then(newItem => {
             if (!Array.isArray(this.preset.shared))
               this.preset.shared = []
-            this.$util.push(this.preset.shared, newItem, {key: "presetUid"})
+            this.$util.push(this.preset.shared, newItem, {key: "id"})
           })
     },
 
@@ -675,6 +700,7 @@ export default{
               this.config.sharedPresets.splice(index, 1)
               this.configParams.presetIdx = this.config.presets[0].uid
             })
+            .catch(err => this.alert(err))
       })
     },
 
@@ -849,7 +875,8 @@ export default{
 
       if(this.config.presets.length > 0 &&
           (!this.config.params.presetIdx ||
-              !this.config.presets.find(_ => _.uid === this.config.params.presetIdx)))
+              (!this.config.presets.find(_ => _.uid === this.config.params.presetIdx) &&
+               !(this.config.sharedPresets ?? []).find(_ => _.uid === this.config.params.presetIdx))))
         this.config.params.presetIdx = this.config.presets[0].uid
 
       return this.config.params
@@ -944,7 +971,7 @@ export default{
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
           ...((this.config ?? {}).sorts !== false ? [{ text:'Sorts', value:3 }] : []),
           ...((this.config ?? {}).pivot !== false ? [{ text:'Pivot', value:5 }] : []),
-          ...(this.controller && (this.config ?? {}).sharing !== false ? [{ text:'Sharing', value:6 }] : []),
+          ...(this.useSharing ? [{ text:'Sharing', value:6 }] : []),
         ],
         chart: [
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),