@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/widgets/PresetBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp" v-if="config">
+	<div v-if="config" :class="$style.comp">
 
     <TransitionGroup name="openltr" tag="div" class="flex-1 flex">
 
@@ -8,102 +8,139 @@
         <div class="flex flex-row items-center gap-2 p-3">
           <slot name="start"></slot>
           <div class="flex-1">
-            <h5 class="px-3">{{ config.name ?? 'Config' }}</h5>
+            <h5 class="px-3" @click="log(config)">{{ config.name ?? 'Config' }}</h5>
           </div>
           <slot name="toolbar" :edit="false"></slot>
         </div>
 
-        <div class="p-3">
+        <div class="p-5">
           <div class="px-2">
             <label class="text-text-300">Presets</label>
           </div>
 
-          <div class="mt-1 flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
-            <div v-for="(_preset, idx) in presets" type="button"
-                 class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center group">
-              <Radio :checked="config.presetIdx === _preset.uid"
-                     @click="config.presetIdx = _preset.uid" />
-              <button type="button"
-                      class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      @click="config.presetIdx = _preset.uid"
-                      @click.shift="select(_preset.uid)">
-                {{ _preset.name }}
-              </button>
-              <button type="button"
-                      class="pl-2 hidden group-hover:block"
-                      ref="btn"
-                      @click="$refs.contextMenu.open($refs.btn[idx], { preset:_preset, idx })">
-                <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>
-          </div>
+          <ListItem :items="config.presets"
+                    class="mt-1 rounded-lg overflow-hidden bg-base-300 border-border-50 border-[1px]"
+                    container-class="divide-y divide-border-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>
+            </template>
+          </ListItem>
+
+          <ContextMenu ref="contextMenu" position="bottom-right">
+            <template #default="{ context }">
+              <div class="flex flex-col min-w-[200px] divide-y divide-border-50">
+
+                <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 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 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>
+            </template>
+          </ContextMenu>
         </div>
 
-        <div v-if="sharedPresets?.length > 0" class="p-3">
+        <div v-if="(config.sharedPresets ?? []).length > 0" class="p-5">
           <div class="px-2">
             <label class="text-text-300">Shared Presets</label>
           </div>
 
-          <div class="mt-1 flex flex-col divide-y divide-text-50 bg-base-500 border-[1px] border-text-50 overflow-hidden rounded-lg">
-            <div v-for="(_preset, idx) in sharedPresets" type="button"
-                 class="px-3 p-2 text-left hover:bg-primary-100 flex flex-row gap-2 items-center group">
-              <Radio :checked="config.presetIdx === _preset.uid"
-                     @click="config.presetIdx = _preset.uid" />
-              <button type="button"
-                      class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                      @click="config.presetIdx = _preset.uid"
-                      @click.shift="select(_preset.uid)">
-                {{ _preset.name }}
-              </button>
-              <button type="button"
-                      class="pl-2 hidden group-hover:block"
-                      ref="sharedBtn"
-                      @click="$refs.contextMenu.open($refs.sharedBtn[idx], { preset:_preset, idx, sharing:true })">
-                <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>
-          </div>
-        </div>
-
-        <ContextMenu ref="contextMenu" position="bottom-right">
-          <template #default="{ context }">
-            <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+          <ListItem :items="config.sharedPresets"
+                    class="mt-1 rounded-lg overflow-hidden"
+                    container-class="divide-y divide-border-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>
 
-              <button v-if="!context.sharing" class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                      @click="select(context.preset.uid)">
-                <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="contextMenu2" position="bottom-right">
+            <template #default="{ context }">
+              <div class="flex flex-col min-w-[200px] divide-y divide-border-50">
 
-              <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                      @click="duplicate(context.preset)">
-                <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="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 v-if="presets.length > 1 && !context.sharing" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
-                      @click="remove(context.preset.uid)">
-                <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>
 
-              <button v-else class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
-                      @click="removeShared(context.preset.uid)">
-                <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>
+            </template>
+          </ContextMenu>
+        </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>
             </div>
-          </template>
-        </ContextMenu>
+            <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>
 
       </div>
 
@@ -121,36 +158,61 @@
           <slot name="toolbar" :edit="true"></slot>
         </div>
 
-        <div class="flex items-center justify-center border-b-[1px] border-text-100 px-3">
-          <Tabs :items="tabItems[config.type ?? 'list']" v-model="config.presetBarTabIndex" />
+        <div class="flex items-center justify-center border-b-[1px] border-border-50 px-3">
+          <Tabs :items="tabItems[config.type ?? 'list']" v-model="configParams.presetBarTabIndex" />
         </div>
 
-        <div class="flex-1 overflow-y-auto">
-
-          <div v-if="config.presetBarTabIndex === 1" class="flex-1 flex flex-col p-5">
-            <ListItem :items="presetColumns"
-                      body-class="divide-y divide-text-50 rounded-lg border-[1px] border-text-50 bg-base-300"
-                      @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
-              <template v-slot="{ item }">
-                <div v-if="!item.key.startsWith('_') || (item.key.startsWith('_') && (preset.pivot && preset.pivot.enabled))"
-                     class="flex flex-row items-center gap-3 px-3 p-1 hover:bg-primary-100">
-                  <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 class="flex-1 flex">
+
+          <div v-if="configParams.presetBarTabIndex === 1" class="flex-1 flex flex-col gap-5 py-5">
+            <div class="px-5">
+              <Textbox placeholder="Search..."
+                       v-model="configParams.columnSearchKey"
+                       :clearable="true"
+                       class="border-none"
+                       @clear="delete configParams.columnSearchKey">
+                <template #start>
+                  <div class="pl-3">
+                    <svg width="14" height="14" class="fill-text-300" 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>
-                  <div class="flex-1 flex flex-row gap-2 items-center">
-                    <div>
-                      <Checkbox v-model="item.visible" default="true" />
+                </template>
+                <template #end>
+                  <div class="pr-3 hidden">
+                    <button type="button" @click="configParams.activeColumnOnly = !configParams.activeColumnOnly">
+                      <svg width="14" height="14" :class="configParams.activeColumnOnly ? 'fill-primary' : 'fill-text-200 hover:fill-primary'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M384 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V96C448 60.65 419.3 32 384 32zM339.8 211.8l-128 128C206.3 345.3 199.2 348 192 348s-14.34-2.719-19.81-8.188l-64-64c-10.91-10.94-10.91-28.69 0-39.63c10.94-10.94 28.69-10.94 39.63 0L192 280.4l108.2-108.2c10.94-10.94 28.69-10.94 39.63 0C350.7 183.1 350.7 200.9 339.8 211.8z"/></svg>
+                    </button>
+                  </div>
+                </template>
+              </Textbox>
+            </div>
+
+            <div class="flex-1 overflow-y-auto px-5">
+              <ListItem v-if="presetColumns.length > 0"
+                        :items="presetColumns"
+                        class="flex-1 bg-transparent"
+                        body-class="divide-y divide-border-50 rounded-lg border-[1px] border-border-50 bg-base-300"
+                        @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
+                <template v-slot="{ item }">
+                  <div v-if="(!item.key.startsWith('_') || (item.key.startsWith('_') && (preset.pivot && preset.pivot.enabled)))"
+                       class="flex flex-row items-center gap-2 pr-3 p-1 hover:bg-primary-100">
+                    <div data-reorder v-if="!configParams.columnSearchKey">
+                      <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>
+                    <div class="flex-1 flex flex-row gap-2 items-center">
+                      <div>
+                        <Checkbox v-model="item.visible" default="true" />
+                      </div>
+                      <Textbox v-model="item.label2" :placeholder="item.label"
+                               class="border-none bg-transparent" :class="$style.columnTextbox"
+                               item-class="p-1 px-0" />
                     </div>
-                    <Textbox v-model="item.label2" :placeholder="item.label"
-                             class="border-none bg-transparent" :class="$style.columnTextbox"
-                             item-class="p-1 px-0" />
                   </div>
-                </div>
-              </template>
-            </ListItem>
+                </template>
+              </ListItem>
+            </div>
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5">
+          <div v-else-if="configParams.presetBarTabIndex === 2" class="flex-1 flex flex-col p-5 overflow-y-auto">
 
             <div class="flex-1 flex flex-col gap-6">
 
@@ -159,20 +221,22 @@
                 <div class="flex flex-row items-start">
                   <Checkbox v-model="filter.enabled" :default="true" @change="apply" />
                   <div class="flex-1 flex flex-col gap-3">
-                    <div class="flex-1 flex flex-row gap-2">
-                      <strong class="flex-1 cursor-pointer" @click="filter._collapsed = !filter._collapsed">
+                    <div class="flex-1 flex flex-row items-center gap-2">
+                      <strong class="flex-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis" @click="filter._collapsed = !filter._collapsed">
                         <svg class="inline fill-text transition-transform relative top-[-1px]"
                              :class="filter._collapsed === true ? `` : `rotate-90`"
                              width="11" height="11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"/></svg>
                         {{ column(filter.key).label ?? filter.key }}
                       </strong>
-                      <select v-if="filter.value.length > 1"
-                              v-model="filter.modifier"
-                              class="appearance-none bg-text-50 min-w-[60px] text-text-400 px-2 outline-none"
-                              @change="apply()">
-                        <option value="and">And</option>
-                        <option value="or">Or</option>
-                      </select>
+                      <div>
+                        <select v-if="filter.value.length > 1"
+                                v-model="filter.modifier"
+                                class="appearance-none bg-text-50 min-w-[40px] text-text-400 px-2 outline-none"
+                                @change="apply()">
+                          <option value="and">And</option>
+                          <option value="or">Or</option>
+                        </select>
+                      </div>
                       <button v-if="typeOf(column(filter.key).type) !== 'enum' && filter._collapsed !== true" type="button" @click="filter.value.push({})">
                         <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
                       </button>
@@ -180,11 +244,12 @@
                         <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
                       </button>
                     </div>
-                    <div v-if="filter._collapsed !== true">
+                    <div v-if="filter._collapsed !== true" class="flex flex-col">
                       <div v-if="Array.isArray(filter.value)" class="flex flex-col gap-2">
                         <div class="flex flex-row" v-for="(filterVal, filterIdx) in filter.value">
                           <PresetSelectorFilterItem
                               class="flex-1"
+                              :enabled="filter.enabled"
                               :column="column(filter.key)"
                               :type="typeOf(column(filter.key).type)"
                               :typeParams="typeParamsOf(column(filter.key))"
@@ -200,12 +265,6 @@
                           </button>
                         </div>
                       </div>
-                      <PresetSelectorFilterItem v-else
-                                                :column="column(filter.key)"
-                                                :type="typeOf(column(filter.key).type)"
-                                                :value="filter"
-                                                :enumCache="enumCache"
-                                                @change="apply()" />
                     </div>
                   </div>
                 </div>
@@ -223,12 +282,12 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 3" class="flex-1 flex flex-col p-5">
+          <div v-else-if="configParams.presetBarTabIndex === 3" class="flex-1 flex flex-col p-5 overflow-y-auto">
 
             <ListItem v-if="Array.isArray(preset.sorts) && preset.sorts.length > 0"
                       :items="preset.sorts"
                       @reorder="(from, to) => { preset.sorts.splice(to, 0, preset.sorts.splice(from, 1)[0]); apply() }"
-                      container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50">
+                      container-class="flex flex-col rounded-lg">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 p-1">
                   <div data-reorder>
@@ -274,7 +333,7 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 4" class="flex-1 flex flex-col gap-6 p-6">
+          <div v-else-if="configParams.presetBarTabIndex === 4" class="flex-1 flex flex-col gap-6 p-6 overflow-y-auto">
 
             <div>
               <label>Select Type:</label>
@@ -309,7 +368,7 @@
                   </button>
                 </div>
                 <ListItem :items="xAxis"
-                          class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
+                          class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-1"
                           body-class="flex flex-col gap-1"
                           @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                   <template v-slot="{ item, index }">
@@ -350,7 +409,7 @@
                   </button>
                 </div>
                 <ListItem :items="yAxis"
-                          class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-1"
+                          class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-1"
                           body-class="flex flex-col gap-1"
                           @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                   <template v-slot="{ item, index }">
@@ -401,7 +460,7 @@
                   </button>
                 </div>
                 <ListItem :items="yAxis"
-                          class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
                           body-class="flex flex-col gap-1"
                           @reorder="(from, to) => { yAxis.splice(to, 0, yAxis.splice(from, 1)[0]); }">
                   <template v-slot="{ item, index }">
@@ -433,7 +492,7 @@
                   </button>
                 </div>
                 <ListItem :items="xAxis"
-                          class="mt-2 h-[90px] border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                          class="mt-2 h-[90px] border-[1px] border-border-200 bg-base-400 rounded-lg p-0.5"
                           body-class="flex flex-col gap-1"
                           @reorder="(from, to) => { xAxis.splice(to, 0, xAxis.splice(from, 1)[0]); }">
                   <template v-slot="{ item, index }">
@@ -491,37 +550,46 @@
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 5" class="flex-1 p-6">
+          <div v-else-if="configParams.presetBarTabIndex === 5" class="flex-1 p-6 flex overflow-y-auto">
 
-            <PresetBarPivot :pivot="presetPivot" :columns="pivotColumns" @apply="apply"/>
+            <PresetBarPivot :pivot="presetPivot" :columns="pivotColumns" class="flex-1" @apply="apply"/>
 
           </div>
 
-          <div v-else-if="config.presetBarTabIndex === 6" class="flex-1 p-6">
+          <div v-else-if="configParams.presetBarTabIndex === 6" class="flex-1 p-6">
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Sharing</label>
+              <button class="text-primary" type="button"
+                      @click="$refs.sharingModal.open([], { callback:addSharing })">
+                Share
+              </button>
 
+              <SharingModal ref="sharingModal" :src="sharingSrc"/>
+            </div>
             <div class="flex flex-col gap-1 mt-2">
-              <div v-for="(user, index) in preset.sharing"
+              <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 width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/></svg>
-                  {{ user.name }}
+                  <svg class="fill-text-200" 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
+                        d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/>
+                  </svg>
+                  {{ item.user?.name ?? item.userId }}
                 </div>
-                <button type="button" @click="removeSharing(index)">
-                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+                <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">
+                    <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+                    <path
+                        d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                  </svg>
                 </button>
               </div>
             </div>
 
-            <div class="flex justify-center p-5">
-              <button type="button" class="text-primary flex flex-row items-center"
-                      @click="$refs.sharingModal.open([], { callback:addSharing })">
-                <svg width="14" height="14" class="fill-primary inline mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
-                Share...
-              </button>
-            </div>
-
-            <SharingModal ref="sharingModal" :src="sharingSrc" />
-
           </div>
 
         </div>
@@ -539,31 +607,31 @@
 
 import PresetSelectorFilterItem from "../components/PresetSelectorFilterItem.vue";
 import PresetBarPivot from "./PresetBarPivot.vue";
-import {getPresetUid} from "../utils/preset-selector.mjs";
 import SharingModal from "./Dashboard/SharingModal.vue";
+import {getPresetUid} from "../utils/preset-selector.mjs";
 
 export default{
 
   components: {SharingModal, PresetBarPivot, PresetSelectorFilterItem},
 
-  emits: [ 'apply', 'duplicate', 'remove', 'remove-shared' ],
+  emits: [ 'apply' ],
 
-  inject: [ 'appStyle', 'confirm' ],
+  inject: [ 'alert', 'appStyle', 'confirm', 'load', 'socket' ],
 
   props: {
 
-    canShare: Boolean,
-
     config: Object,
 
-    presets: Array,
+    controller: String,
 
-    sharedPresets: Array,
+    presetKey: String,
 
-    sharingSrc: String,
-    removeSharingSrc: String,
+    enumCache: Object,
 
-    enumCache: Object
+    useAssistant: {
+      type: undefined,
+      default: false
+    }
 
   },
 
@@ -576,6 +644,40 @@ export default{
       this.apply()
     },
 
+    addSharing(item) {
+      const obj = {
+        key: this.presetKey,
+        presetUid: this.preset.uid,
+        userId: item.id
+      }
+
+      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"})
+          })
+    },
+
+    removeSharing(item, index) {
+      this.confirm('Remove shared?', () => {
+        this.socket.send(`${this.controller}.remove-sharing`, item)
+            .then(_ => {
+              this.preset.shared.splice(index, 1)
+            })
+      })
+    },
+
+    removeShared(item, index) {
+      this.confirm('Remove shared?', () => {
+        this.socket.send(`${this.controller}.remove-sharing`, item.UserConfigPresetShared)
+            .then(_ => {
+              this.config.sharedPresets.splice(index, 1)
+              this.configParams.presetIdx = this.config.presets[0].uid
+            })
+      })
+    },
+
     addSort(obj){
       if(!Array.isArray(this.preset.sorts))
         this.preset.sorts = []
@@ -592,7 +694,7 @@ export default{
     canApply(){
 
       if(this.preset){
-        if(this.config.presetBarTabIndex === 2){
+        if(this.configParams.presetBarTabIndex === 2){
           return true
           /*if(Array.isArray(this.preset.filters)){
             if(this.preset.filters.filter(_ => !_.key).length > 0){
@@ -600,14 +702,14 @@ export default{
             }
           }*/
         }
-        else if(this.config.presetBarTabIndex === 3){
+        else if(this.configParams.presetBarTabIndex === 3){
           if(Array.isArray(this.preset.sorts)){
             if(this.preset.sorts.filter(_ => !_.key).length > 0){
               return false
             }
           }
         }
-        else if(this.config.presetBarTabIndex === 4){
+        else if(this.configParams.presetBarTabIndex === 4){
           if(Array.isArray(this.chartOpt.xAxis)){
             if(this.chartOpt.xAxis.filter(_ => !_.key).length > 0){
               return false
@@ -629,67 +731,76 @@ export default{
       return this.preset.columns.filter(_ => _.key === key).pop() ?? {}
     },
 
-    duplicate(preset){
-      const uid = getPresetUid()
+    generatePreset(){
+      if(!this.generateText) return
 
-      let name = preset.name.substring(0, preset.name.indexOf(' (Copy') > -1 ? preset.name.indexOf(' (Copy') : preset.name.length)
-      for(let i = 1 ; i < 100 ; i++){
-        const curName = `${name} (Copy${i > 1 ? ' ' + i : ''})`
-        if(this.presets.findIndex(_ => _.name === curName) < 0){
-          name = curName
-          break
-        }
-      }
+      this.$refs.generateBtn.setState(2)
+      this.socket.send(`${this.controller}.prompt-ai-assistance`, {
+        text: this.generateText
+      })
+          .then(preset => {
+
+            /*preset = {
+              columns: [
+                { key: 'code', label: 'Kode' },
+                { key: 'loginCode', label: 'NIP' },
+                { key: 'bertemuDengan', label: 'Bertemu Dengan' }
+              ],
+              filters: [
+                {
+                  key: 'createdAt',
+                  value: [ { operator: '=', value: [ '2024-07-05' ] } ]
+                }
+              ]
+            }*/
+
+            preset.uid = 'ai-assistant'
+            preset.name = !preset.name ? 'AI Assistant' : preset.name
+
+            let index = this.config.presets.findIndex(_ => _.uid === preset.uid)
+            if(index < 0){
+              this.config.presets.push(preset)
+            }
+            else {
+              Object.assign(this.config.presets[index], preset)
+              this.load()
+            }
 
-      const newPreset = {
-        ...JSON.parse(JSON.stringify(preset)),
-        name,
-        uid
-      }
+            this.configParams.presetIdx = preset.uid
 
-      this.presets.push(newPreset)
+          })
+          .catch(err => this.alert(err))
+          .finally(_ => this.$refs.generateBtn?.resetState())
+    },
 
-      this.$emit('duplicate', preset)
+    duplicate(item){
+      const newItem = JSON.parse(JSON.stringify(item))
+      newItem.name = `${item.name} (Copy)`
+      newItem.uid = getPresetUid()
 
-      this.$nextTick(() => this.select(newPreset.uid))
+      this.config.presets.push(newItem)
+      this.configParams.presetIdx = newItem.uid
     },
 
-    remove(uid){
-      if(this.presets.length > 1){
+    remove(item){
+      if(this.config.presets.length > 1){
         this.confirm('Remove this preset?', () => {
-          const index = this.presets.findIndex(_ => _.uid === uid)
-          const [ removed ] = this.presets.splice(index, 1)
-          this.$emit('remove', removed)
-
-          const nextIndex = index - 1 >= 0 ? index - 1 : 0
-          this.config.presetIdx = this.presets[nextIndex].uid
+          this.config.presets.splice(this.config.presets.findIndex(_ => _.uid === item.uid), 1)
         })
       }
     },
 
-    removeShared(uid){
-      this.$emit('remove-shared', uid)
-    },
-
-    addSharing(item){
-      if(!Array.isArray(this.preset.sharing))
-        this.preset.sharing = []
-
-      this.$util.push(this.preset.sharing, item, { key:"id" })
-    },
-
-    removeSharing(index){
-      this.preset.sharing.splice(index, 1)
-    },
-
-    select(uid){
-      this.config.presetIdx = uid
+    select(item){
       this.presetBar.view = 2
-      this.apply()
+
+      if(this.configParams.presetIdx !== item.uid){
+        this.configParams.presetIdx = item.uid
+        this.apply()
+      }
     },
 
     deselect(){
-      this.config.presetBar.view = 1
+      this.presetBar.view = 1
     },
 
     filterColumnAdded(column){
@@ -701,7 +812,7 @@ export default{
         return 'boolean'
       else if([ 'date' ].includes(type))
         return 'date'
-      else if([ 'number' ].includes(type))
+      else if([ 'number', 'currency', 'decimal', 'double', 'float', 'integer' ].includes(type))
         return 'number'
       else if([ 'enum' ].includes(type))
         return 'enum'
@@ -732,6 +843,18 @@ export default{
       return this.presetChart[this.chartType]
     },
 
+    configParams(){
+      if(!this.config.params)
+        this.config.params = {}
+
+      if(this.config.presets.length > 0 &&
+          (!this.config.params.presetIdx ||
+              !this.config.presets.find(_ => _.uid === this.config.params.presetIdx)))
+        this.config.params.presetIdx = this.config.presets[0].uid
+
+      return this.config.params
+    },
+
     filterColumns(){
       return this.config.columns.filter(_ => {
         return _.filterable !== false
@@ -745,7 +868,8 @@ export default{
     },
 
     preset(){
-      return this.presets.find(_ => _.uid === this.config.presetIdx)
+      return this.config.presets.find(_ => _.uid === this.configParams.presetIdx) ??
+          this.config.sharedPresets.find(_ => _.uid === this.configParams.presetIdx)
     },
 
     presetChart(){
@@ -761,6 +885,12 @@ export default{
         this.preset.columns = JSON.parse(JSON.stringify(this.config.columns))
       }
 
+      if(this.configParams.columnSearchKey){
+        return this.preset.columns.filter(_ => {
+          return _.label.toLowerCase().includes(this.configParams.columnSearchKey.toLowerCase()) ||
+                  _.key.toLowerCase().includes(this.configParams.columnSearchKey.toLowerCase())
+        })
+      }
       return this.preset.columns
     },
 
@@ -771,8 +901,10 @@ export default{
       return this.preset.pivot
     },
 
+    sharingSrc(){ return `${this.controller}.load-sharing` },
+
     sortColumns(){
-      return this.presetColumns.filter(_ => _.key && !_.key.startsWith('_'))
+      return this.presetColumns.filter(_ => _.key && !_.key.startsWith('_') && (_.sortable ?? false) !== false)
     },
 
     xAxis(){
@@ -790,12 +922,16 @@ export default{
     },
 
     presetBar(){
-      if(!this.config.presetBar || !this.config.presetBar.view)
-        this.config.presetBar = {
+      if(!this.configParams.presetBar || !this.configParams.presetBar.view)
+        this.configParams.presetBar = {
           view: 2
         }
 
-      return this.config.presetBar
+      return this.configParams.presetBar
+    },
+
+    canGenerate(){
+      return this.generateText.length > 0
     }
 
   },
@@ -808,19 +944,20 @@ 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.canShare ? [{ text:'Sharing', value:6 }] : [])
+          ...(this.controller && (this.config ?? {}).sharing !== false ? [{ text:'Sharing', value:6 }] : []),
         ],
         chart: [
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
           ...((this.config ?? {}).chart !== false ? [{ text:'Chart', value:4 }] : []),
         ]
       },
+      generateText: 'List kunjungan tgl 5 juli, hanya kolom kode, nip kolektor dan bertemu dengan'
     }
   },
 
   mounted() {
-    if(!this.config.presetBarTabIndex){
-      this.config.presetBarTabIndex = this.config.type === 'chart' ? 4 : 1
+    if(!this.configParams.presetBarTabIndex){
+      this.configParams.presetBarTabIndex = this.config.type === 'chart' ? 4 : 1
     }
   }
 
@@ -831,11 +968,23 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col relative;
+  @apply flex flex-col relative bg-base-400;
+}
+
+.presetBtn{
+  @apply flex flex-row items-center gap-3 px-3 p-2 hover:bg-text-50;
+}
+
+.presetOptBtn{
+  @apply pl-2 hidden
+}
+.presetBtn:hover .presetOptBtn{
+  @apply flex;
 }
 
 .columnTextbox input::placeholder{
-  @apply text-text;
+  @apply text-text-500;
 }
 
+
 </style>