edvoyui-component-library-test-flight 0.0.170 → 0.0.171

package/src/components/HelloWorld.vue

@@ -0,0 +1,1974 @@
+<template>
+  <div class="max-w-screen-xl mx-auto bg-white">
+    <h1
+      class="my-10 text-2xl font-bold text-center text-gray-900 underline underline-offset-8 decoration-green-400 decoration-wavy"
+    >
+      Edvoy User Interface
+    </h1>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss"></style>
+
+<!-- Development code here  -->
+
+<!--<template>
+  <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
+    <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
+    <div
+      class="flex flex-col max-w-screen-sm gap-4 p-6 mx-auto mb-10 border rounded-xl"
+    >
+      <pre>{{ inputNumber }} ==> {{ inputNumberPoints }}</pre>
+      <EUINumberInput
+        v-model.trim="inputNumber"
+        name="addnote"
+        id="addnote"
+        label="Add Note"
+        placeholder="Note here..."
+        :min="0"
+        :max="100"
+        :step="1"
+      />
+      <EUINumberInput
+        v-model.trim="inputNumberPoints"
+        name="addnote"
+        id="addnote"
+        label="Add Note"
+        placeholder="Note here..."
+        :min="0"
+        :max="100"
+        :step="0.5"
+      />
+    </div>
+
+    <div class="max-w-xs py-4 mx-auto border border-red-500 rounded-xl">
+      <EUISearchTagSelect
+        v-model="selectedCity"
+        :items="datas"
+        :searchIcon="true"
+        :required="false"
+        itemText="name"
+        placeholder="Search Cities"
+        select-type="multiple"
+        :clearable="true"
+        @search="onSearch"
+        @on-change="onCitySelect"
+        @on-deselect="clear"
+      >
+        <template #labelhint>
+          <div class="my-1 text-xs font-medium text-gray-400">
+            Changing the city will affect your university selection
+          </div>
+        </template>
+      </EUISearchTagSelect>
+      <pre class="p-2 text-red-500 text-xxs">{{ selectedCity }}--</pre>
+    </div>
+
+    <div class="relative">
+      <EUIStepperHorizontal
+        :steps="allSteps"
+        :step-status="currentStage"
+        :history="lifeCycleHistory"
+      />
+    </div>
+
+    <div class="grid max-w-5xl grid-cols-3 gap-6 mx-auto mb-6">
+      <EUISelect
+        v-model="businessAreaSel"
+        :value="businessAreaSel"
+        :items="businessArea"
+        search-label="name"
+        label="Select Label"
+        selectedCountLabel="Business Area"
+        placeholder="Placeholder"
+        :multiple="true"
+        :inputFilled="true"
+        :searchable="true"
+      />
+
+      <EUISelect
+        v-model="popoverSelect"
+        :value="popoverSelect"
+        :items="datas"
+        search-label="name"
+        label="Select Label"
+        placeholder="Placeholder"
+        :searchable="true"
+        :multiple="true"
+        :isCheckbox="true"
+        :selectedCount="true"
+        :inputFilled="true"
+      />
+
+      <EUISelect
+        v-model="popoverSelect"
+        :value="popoverSelect"
+        :items="countryAll"
+        search-label="name"
+        label="Country"
+        placeholder="select country"
+        :searchable="true"
+        :multiple="true"
+        :isCheckbox="true"
+        :selectedCount="true"
+        :inputFilled="true"
+        :group-select="true"
+      />
+    </div>
+
+    <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Click Method
+        </div>
+
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="click"
+            placement="bottom-end"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+          >
+            <template #referenceButton="{ open }">
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  v-if="!open"
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                lorem ipsum dolor sit amet consectetur adipisicing elit.
+              </div>
+              <div @click.stop>
+                <EUISelect
+                  search-label="name"
+                  label="Select Label"
+                  placeholder="Placeholder"
+                  :items="datas"
+                  :multiple="true"
+                  :multiple-limit="3"
+                />
+              </div>
+
+              <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
+            </div>
+          </EUIPopover>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Hover Method
+        </div>
+
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="hover"
+            placement="bottom-end"
+            :hover-hide-delay="150"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+          >
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex
+                atque sed illo ipsa tenetur dolores minus quis, impedit aliquam
+                magni. Animi laborum tenetur culpa aperiam porro nihil eius
+                soluta asperiores.
+              </div>
+
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
+            </div>
+          </EUIPopover>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Default Open
+        </div>
+
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            v-model:visible="isInitiallyOpen"
+            placement="bottom-end"
+            :hover-hide-delay="150"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+          >
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex
+                atque sed illo ipsa tenetur dolores minus quis, impedit aliquam
+                magni. Animi laborum tenetur culpa aperiam porro nihil eius
+                soluta asperiores.
+              </div>
+
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="onDefaultClose()"
+                  >Apply</EUIButton
+                >
+              </div>
+            </div>
+          </EUIPopover>
+        </div>
+      </div>
+
+      <div
+        class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
+      >
+        <div class="text-base font-semibold leading-loose text-gray-900">
+          Popover Manual
+        </div>
+
+        <div class="inline-flex items-center justify-end flex-none gap-4">
+          <EUIPopover
+            trigger="manual"
+            v-model:visible="popoverVisible"
+            placement="top"
+            className="max-w-80 min-w-80"
+            customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
+            @click="onPopoverToggle"
+          >
+            <template #referenceButton>
+              <div class="relative">
+                <FunnelIcon class="text-current size-6" />
+                <div
+                  class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
+                />
+              </div>
+            </template>
+            <div
+              class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
+            >
+              <div>
+                lorem ipsum dolor sit amet consectetur adipisicing elit.
+              </div>
+              <div @click.stop>
+                <EUISelect
+                  search-label="name"
+                  label="Select Label"
+                  placeholder="Placeholder"
+                  :items="datas"
+                  :multiple="true"
+                  :multiple-limit="3"
+                />
+              </div>
+
+              <div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
+
+              <div class="flex items-center justify-end gap-4 pt-4">
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="white"
+                  :loading="isLoading"
+                  @click="resetFilters()"
+                  >Reset</EUIButton
+                >
+                <EUIButton
+                  type="button"
+                  size="md"
+                  color="purple"
+                  :loading="isLoading"
+                  @click="applyFilter()"
+                  >Apply</EUIButton
+                >
+              </div>
+            </div>
+          </EUIPopover>
+        </div>
+      </div>
+    </div>
+
+    <div class="mb-10">
+      <EUITabOutline
+        activeColor="purple"
+        size="sm"
+        :items="allDays"
+        :defaultActive="activeTab"
+        @update:activeTabItem="onchangeActiveTab"
+      >
+        <template v-slot:content="{ data, activeName }">
+          <div class="space-y-4">
+            <span class="text-red-400">{{ data.name }} - {{ activeName }}</span>
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+              quia, obcaecati suscipit, praesentium temporibus, non placeat
+              reprehenderit commodi ut adipisci consequatur laboriosam? Est
+              perspiciatis vero illo repudiandae quis explicabo.
+            </p>
+
+            <p>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit odio
+              quia, obcaecati suscipit, praesentium temporibus, non placeat
+              reprehenderit commodi ut adipisci consequatur laboriosam? Est
+              perspiciatis vero illo repudiandae quis explicabo.
+            </p>
+          </div>
+        </template>
+      </EUITabOutline>
+    </div>
+
+    <div class="p-8 space-x-6 space-y-4">
+      <pre class="text-right">{{ activeDays }}--</pre>
+      <div class="inline-flex flex-col items-end w-full">
+        <EUIButtonGroup
+          activeColor="purple"
+          size="sm"
+          :rounded="false"
+          :items="allDays"
+          :defaultActive="activeDays"
+          @update:activeButton="onchangeDays"
+        >
+          <template #before>
+            <div
+              class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
+            >
+              Renewals due in
+            </div>
+          </template>
+          <template #default="{ data, activeName }">
+            {{ data.name }}
+            <small
+              :class="activeName === data.name ? 'opacity-100' : 'opacity-75'"
+              >({{ data.count }})</small
+            >
+          </template>
+        </EUIButtonGroup>
+      </div>
+
+      <div class="inline-flex items-center justify-end w-full">
+        <EUISearchExpand
+          v-model:model-value="searchInput"
+          :search-sync="showSearch"
+          @input="seachStudent($event?.target?.value)"
+          @update:modelValue="seachStudent($event?.target?.value)"
+        />
+      </div>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2 place-items-start">
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Alert
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        ><code>&lt;EUIInput label="Firstname" placeholder="Enter your name" /&gt;</code></pre>
+
+        <div class="space-y-4">
+          <EUIAlerts
+            alert-type="Success"
+            heading="Deactivate account"
+            textMessage="Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone."
+          />
+
+          <EUIAlerts
+            alert-type="Warning"
+            heading="Send Icon here"
+            :alertIcon="ExclamationTriangleIcon"
+          >
+            <template #xclose>
+              <a
+                href="#"
+                class="text-sm font-medium text-yellow-700 whitespace-nowrap hover:text-yellow-600"
+              >
+                Go to Page
+                <span aria-hidden="true"> &rarr;</span>
+              </a>
+            </template>
+          </EUIAlerts>
+
+          <EUIAlerts alert-type="Success" heading="Title only show here" />
+
+          <EUIAlerts
+            alert-type="Warning"
+            heading="Send Icon here"
+            :icon="ExclamationTriangleIcon"
+          />
+
+          <EUIAlerts
+            alert-type="Default"
+            heading="Close Icon Boolean enabled"
+            close-icon
+          />
+
+          <EUIAlerts
+            alert-type="Error"
+            heading="Deactivate account"
+            textMessage="Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone."
+            :showAlert="showAlert"
+            :close-icon="true"
+            @update:showAlert="showAlert = $event"
+          />
+
+          <EUIAlerts
+            alert-type="Warning"
+            heading="Deactivate account"
+            textMessage="Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone."
+            :showAlert="showAlert"
+            close-icon
+            action-items
+            @update:showAlert="showAlert = $event"
+            @alertAction="onClickAlert"
+            @alertDismiss="showAlert = false"
+          />
+
+          <EUIAlerts
+            alert-type="Warning"
+            :showAlert="showAlert"
+            @update:showAlert="showAlert = $event"
+          >
+            <template #icon>
+              <ExclamationTriangleIcon
+                class="text-current size-4"
+                aria-hidden="true"
+              />
+            </template>
+            <template #title>Use Template here</template>
+            <template #content
+              >Are you sure you want to deactivate your account? All of your
+              data will be permanently removed from our servers forever. This
+              action cannot be undone.</template
+            >
+
+            <template #actionButtons>
+              <div class="pt-4">
+                <button
+                  type="button"
+                  class="rounded-md px-3 py-1.5 text-sm font-medium bg-black text-white focus:outline-none focus:ring-2 focus:ring-offset-2"
+                >
+                  View status
+                </button>
+                <button
+                  type="button"
+                  class="ml-3 rounded-md px-3 py-1.5 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2"
+                >
+                  Dismiss
+                </button>
+              </div>
+            </template>
+          </EUIAlerts>
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Input
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        ><code>&lt;EUIInput label="Firstname" placeholder="Enter your name" /&gt;</code></pre>
+
+        <div class="grid grid-cols-3 gap-4 pb-6 mb-4 border-b">
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            placeholder="Note here..."
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note here..."
+          />
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note here..."
+            rounded
+            :class-name="['bg-gray-100/50']"
+          />
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add Note"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            type="search"
+            placeholder="Search here..."
+            rounded
+            :class-name="['bg-gray-100/50 rounded-3xl']"
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add note disabled"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            disabled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addnote"
+            id="addnote"
+            label="Add note readonly"
+            placeholder="Note type here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            readonly
+          />
+        </div>
+
+        <div class="grid grid-cols-3 gap-4">
+          <EUIInput
+            v-model.trim="form.input"
+            label="full name"
+            placeholder="Enter your name"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addname"
+            id="addname"
+            label="Full name"
+            placeholder="Enter your name"
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="addemail"
+            id="addemail"
+            label="Email address"
+            placeholder="Enter your email"
+            :icon="MagnifyingGlassIcon"
+            icon-type="endIcon"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course Search"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course search disabled"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+            disabled
+          />
+
+          <EUIInput
+            v-model.trim="form.input"
+            name="search"
+            id="search"
+            type="search"
+            label="Course Search readonly"
+            placeholder="Search here..."
+            :icon="MagnifyingGlassIcon"
+            icon-type="startIcon"
+            inputFilled
+            readonly
+          />
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Telephone
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITelephone name="contactNumber" label="Contact Number" placeholder="Your mobile number" tag="Mobile
+        input required" tag-color="Error" /&gt;</code>
+    </pre>
+
+        <div class="grid grid-cols-2 gap-6">
+          <EUITelephone
+            v-model="mobileNumber"
+            name="contactNumber"
+            label="Contact Number"
+            placeholder="Your mobile number"
+            tag="Mobile input required"
+            tag-color="Error"
+            :errors="{ name: 'Enter a valid phone number' }"
+            icon-type="startIcon"
+            :icon="DevicePhoneMobileIcon"
+            inputFilled
+          />
+
+          <EUITelephone
+            v-model="mobileNumber"
+            name="contactNumber"
+            label="Contact Number"
+            placeholder="Your mobile number"
+            tag="Mobile input required"
+            tag-color="Error"
+            :errors="{ name: 'Enter a valid phone number' }"
+            icon-type="startIcon"
+            :icon="DevicePhoneMobileIcon"
+            required
+          />
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Select Multiple
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
+    </pre>
+        <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            v-model="checkboxData"
+            search-label="name"
+            placeholder="Placeholder"
+            :items="datas"
+            :selected-count="true"
+            selectedCountLabel="Checkbox"
+            :multiple="true"
+            :is-checkbox="true"
+          />
+
+          <EUISelect
+            search-label="name"
+            label="Select Label"
+            placeholder="Placeholder"
+            :items="datas"
+            :multiple="true"
+            :multiple-limit="3"
+          />
+          <EUISelect placeholder="Enter your name" :items="datas" />
+          <EUISelect
+            :is-use-custom-select="true"
+            :items="datas"
+            name="customselect"
+            placeholder="Select multiple"
+            :multiple="true"
+            customWidth="380px"
+            :custom-offset="[0, 10]"
+          />
+        </div>
+
+        <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            search-label="name"
+            label="Multiple Select width Limiting"
+            placeholder="Enter your name"
+            :items="datas"
+            :multiple="true"
+            :multiple-limit="3"
+            inputFilled
+          />
+          <EUISelect placeholder="Enter your name" :items="datas" inputFilled />
+          <EUISelect
+            :is-use-custom-select="true"
+            :items="datas"
+            name="customselect"
+            placeholder="Select multiple"
+            :multiple="true"
+            customWidth="380px"
+            :custom-offset="[-20, 10]"
+            inputFilled
+          />
+          <EUISelectSearch />
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1 z-[calc(infinity)]"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Multi Dropdown
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        ><code>&lt;EUIMultiDropdown title="dropdown" :menu-items="menubar" /&gt;</code>
+    </pre>
+        <div class="inline-flex items-center gap-4">
+          <EUIMultiDropdown title="dropdown" :menu-items="menubar" />
+
+          <EUIMultiDropdown
+            class-name="px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200"
+            @subMenuItem="handleSubMenuItem"
+            @menuItem="handleMenuItem"
+            @action-item="addAction"
+          >
+            <template #dropdownName="{ open }">
+              <span>My Students</span>
+              <ChevronDownStroke
+                :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
+                class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
+                aria-hidden="true"
+              />
+            </template>
+            <template #actionName> + Add Custom Filter </template>
+          </EUIMultiDropdown>
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Checkbox
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUICheckbox label="Use checkbox" /&gt;</code>
+    </pre>
+        <EUICheckbox label="Use checkbox" />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Tabs
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITabs :tabs="tabData" :defaultActiveIndex="0" /&gt;</code>
+    </pre>
+        <EUITabs tab-style="border" :tabs="tabData" :defaultActiveIndex="0">
+          <template #title="{ tab }">{{ tab.name }}</template>
+          <template #content="{ activeTab }">
+            {{ activeTab }}
+          </template>
+        </EUITabs>
+
+        <div class="bg-white">
+          <EUITabs tab-style="design" :tabs="tabData" :defaultActiveIndex="0">
+            <template #title="{ tab, tabIndex, activeTab }">
+              {{ tab.name }}
+              <span
+                class="rounded-3xl px-1.5 text-xss font-medium uppercase leading-none inline-flex items-center h-4 transition-colors duration-100 ease-in-out"
+                :class="[
+                  tabIndex === activeTab
+                    ? 'text-gray-100 bg-gray-600'
+                    : 'bg-gray-300 text-gray-600',
+                ]"
+                >{{ 28399 }}</span
+              >
+            </template>
+            <template #content="{ activeTab }">
+              <div class="p-2 text-sm">
+                {{ activeTab }}
+              </div>
+            </template>
+          </EUITabs>
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Textarea
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITextarea label="Office Address" placeholder="Enter offices and location details" /&gt;</code>
+    </pre>
+        <EUITextarea
+          placeholder="Enter offices and location details"
+          label="Office Address"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Tag
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITag closeIcon :model-value="tagModal" @remove="handleClose" /&gt;</code>
+    </pre>
+        <EUITag closeIcon :model-value="tagModal" @remove="handleClose"
+          >Tag Name</EUITag
+        >
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Switch Toggle
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIToggle label="toggle switch" /&gt;</code>
+    </pre>
+        <EUIToggle label="toggle switch" />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Loader
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUILoader /&gt;</code>
+    </pre>
+        <EUILoader />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Avatar
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIAvatar image-url="https://tinyurl.com/43e5fxh9" :profile="true" full-name="JohnCena"
+        :show-status="true" status="Online" size="sm"&gt;&lt;template #name&gt;John Cena&lt;/template&gt; &lt;template
+        #designation&gt;Actor&lt;/template&gt; &lt;EUIAvatar/&gt;</code>
+    </pre>
+        <EUIAvatar
+          image-url="https://tinyurl.com/43e5fxh9"
+          :profile="true"
+          full-name="JohnCena"
+          :show-status="true"
+          status="Online"
+          size="sm"
+        >
+          <template #name>John Cena</template>
+          <template #designation>Actor</template>
+        </EUIAvatar>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Datepicker
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIDatepicker v-model="datepicker" label="Datepicker" placeholder="Select Date here..." /&gt;</code>
+    </pre>
+        <EUIDatepicker
+          v-model="datepicker"
+          label="Datepicker"
+          placeholder="Select Date here..."
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Button
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIButton type="button" size="md" color="purple" @click="onClickMethod"&gt;Open
+        Modal&lt;/EUIButton&gt;</code>
+    </pre>
+
+        <div class="space-y-4">
+          <div class="inline-flex flex-row flex-wrap items-center gap-4">
+            <EUIButton type="button" size="xs" color="purple" rounded>
+              XS Button
+            </EUIButton>
+            <EUIButton type="button" size="sm" color="purple" rounded
+              >SM Button</EUIButton
+            >
+            <EUIButton type="button" size="md" color="purple"
+              >MD Button</EUIButton
+            >
+            <EUIButton type="button" size="lg" color="purple"
+              >LG Button</EUIButton
+            >
+            <EUIButton
+              color="primary"
+              rounded
+              size="md"
+              iconType="startIcon"
+              :icon="HomeIcon"
+              >Home</EUIButton
+            >
+          </div>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">
+              Primary Gradient
+            </summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="primary" rounded>
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="primary" rounded
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="primary" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="primary" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">white</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="white" rounded>
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="white" rounded
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="white"
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="white"
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Danger</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="danger">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="danger"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="danger"
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="danger"
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Success</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="success">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="success"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="success" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="success" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+
+          <details>
+            <summary class="text-gray-600 cursor-pointer">Black</summary>
+            <div class="inline-flex flex-row items-center gap-4">
+              <EUIButton type="button" size="xs" color="black">
+                XS Button
+              </EUIButton>
+              <EUIButton type="button" size="sm" color="black"
+                >SM Button</EUIButton
+              >
+              <EUIButton type="button" size="md" color="black" rounded
+                >MD Button</EUIButton
+              >
+              <EUIButton type="button" size="lg" color="black" rounded
+                >LG Button</EUIButton
+              >
+            </div>
+          </details>
+        </div>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Modal
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>
+        &lt;EUIModal :isVisible="showModal" slim-header @update:isVisible="showModal=$event"
+        @confirm="handleConfirm"&gt; &lt;template #title&gt; Custom Title here&lt;/template&gt; &lt;div
+        class=""&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas possimus ea culpa id voluptatum
+        cumque, animi earum sequi, aliquid eius omnis repellendus nihil soluta vitae a temporibus! Perspiciatis,
+        nihil?&lt;/div&gt; &lt;/EUIModal&gt;
+      </code>
+    </pre>
+        <div class="space-x-4">
+          <EUIButton
+            type="button"
+            size="md"
+            color="primary"
+            rounded
+            @click="showModal = true"
+            >Default Modal</EUIButton
+          >
+          <EUIButton
+            type="button"
+            size="md"
+            color="primary"
+            rounded
+            @click="customModal = true"
+            >Custom Modal
+          </EUIButton>
+        </div>
+
+        <EUIModal
+          :isVisible="showModal"
+          slim-header
+          @update:isVisible="showModal = $event"
+          @confirm="handleConfirm"
+        >
+          <template #title> Custom Title here</template>
+          <div class="">
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus quas
+            possimus ea culpa id voluptatum cumque, animi earum sequi, aliquid
+            eius omnis repellendus nihil soluta vitae a temporibus!
+            Perspiciatis, nihil?
+          </div>
+        </EUIModal>
+
+        <EUIModal
+          :isVisible="customModal"
+          @update:isVisible="customModal = $event"
+          @confirm="openModal"
+          rounded-class="rounded-3xl"
+        >
+          <template #header>
+            <div
+              class="sticky inset-x-0 top-0 px-6 py-4 text-base font-semibold bg-white border-b"
+            >
+              Custom Header here
+            </div>
+          </template>
+          <template #content>
+            <div
+              class="p-4 max-h-[calc(100svh-10rem)] overflow-y-auto space-y-4"
+            >
+              <div v-for="item in 10" :key="`row-${item}`">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
+                quas possimus ea culpa id voluptatum cumque, animi earum sequi,
+                aliquid eius omnis repellendus nihil soluta vitae a temporibus!
+                Perspiciatis, nihil?
+              </div>
+            </div>
+          </template>
+          <template #footer>
+            <div
+              class="sticky inset-x-0 bottom-0 flex items-center justify-end p-4 bg-white border-t border-gray-200"
+            >
+              <div class="text-base font-semibold">Custom Footer here</div>
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
+                @click="customModal = false"
+              >
+                Cancel
+              </button>
+              <button
+                class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
+              >
+                Confirm
+              </button>
+            </div>
+          </template>
+        </EUIModal>
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Accordion
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIAccordion :datas="accordionData" :defaultOpen="[1]" :collapse="true" /&gt;</code>
+    </pre>
+        <EUIAccordion
+          :datas="accordionData"
+          :defaultOpen="[1]"
+          :collapse="true"
+        />
+      </div>
+
+      <div
+        class="w-full max-w-xl p-4 overflow-y-auto bg-white border border-gray-200 border-solid rounded-lg max-h-96 hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Timeline
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUITimeLine :items="timelineData" type="view" /&gt;</code>
+    </pre>
+        <EUITimeLine :items="timelineData" type="view" />
+        <EUITimeLine
+          :items="timelineData"
+          type="icon"
+          :icon="ArrowDownCircleIcon"
+        />
+        <EUITimeLine :items="timelineImage" type="image" :show-more="true" />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Stepper Timeline
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIStepperVertical stepStatus="opportunity" /&gt;</code>
+    </pre>
+        <EUIStepperTimeline />
+      </div>
+
+      <div
+        class="w-full max-w-screen-xl col-span-2 p-4 overflow-auto bg-white border border-gray-200 border-solid rounded-lg hover:ring-2 ring-purple-500 ring-offset-1 max-h-svh"
+      >
+        <span
+          class="px-1 py-1 mb-0 font-mono text-xs leading-none text-gray-500 bg-gray-100 rounded-md"
+        >
+          Name: Dashboard Table
+        </span>
+        <pre
+          class="pb-4 my-4 text-sm font-normal text-gray-700 whitespace-pre-wrap border-b border-gray-100 border-solid"
+        >
+      <code>&lt;EUIDashboardTable :checkable="true"
+        paginated
+        :checked-rows.sync="checkedRows"
+        backend-pagination
+        :per-page="limit"
+        :headers="tableHeaders"
+        :items="tableData"
+        :total="totalCount"
+        :default-sort-direction="defaultSortOrder"
+        default-sort="introducer_details"
+        :current-page="offset"
+        @sort="onSort"
+        @mouseenter="select"
+        @mouseleave=";(selectedIndex = null), (selected = null)" &gt; &lt;template #[`item.introducer_details`]="{ row,
+        rowIndex }"&gt;
+        &lt;div class="flex flex-row items-center gap-2"&gt;
+        &lt;div
+        class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+        &gt;
+        &lt;img
+        :src="row?.introducer_details?.url"
+        class="size-8 rounded-3xl"
+        alt=""
+        /&gt;
+        &lt;/div&gt;
+        &lt;div class="text-sm"&gt;{{ row?.introducer_details?.name }}&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;/template&gt;
+        &lt;/EUIDashboardTable&gt;
+      </code>
+    </pre>
+        <EUIDashboardTable
+          :checkable="true"
+          paginated
+          :checked-rows.sync="checkedRows"
+          backend-pagination
+          :per-page="limit"
+          :headers="tableHeaders"
+          :items="tableData"
+          :total="totalCount"
+          :default-sort-direction="defaultSortOrder"
+          default-sort="introducer_details"
+          :current-page="offset"
+          @sort="onSort"
+          @mouseenter="select"
+          @mouseleave="(selectedIndex = null), (selected = null)"
+        >
+          <template #[`item.introducer_details`]="{ row, rowIndex }">
+            <div class="flex flex-row items-center gap-2">
+              <div
+                class="flex items-center justify-center text-sm font-bold text-gray-900 bg-gray-100 rounded-full size-8"
+              >
+                <img
+                  :src="row?.introducer_details?.url"
+                  class="size-8 rounded-3xl"
+                  alt=""
+                />
+              </div>
+              <div class="text-sm">{{ row?.introducer_details?.name }}</div>
+            </div>
+          </template>
+        </EUIDashboardTable>
+
+        <div class="py-4">
+          <EUITable
+            :checkable="true"
+            :table-loading="loading"
+            paginated
+            :checked-rows.sync="checkedRows"
+            backend-pagination
+            :per-page="10"
+            :headers="studentHeader"
+            :items="studentData"
+            :total="studentData.length"
+            :default-sort-direction="defaultSortOrder"
+            default-sort=""
+            :current-page="offset"
+            @changePage="onPageChange"
+            @sort="onSort"
+            @mouseenter="select"
+            @mouseleave="(selectedIndex = null), (selected = null)"
+          >
+            <template #[`item.firstName`]="{ row, rowIndex }">
+              <div class="space-y-0.5">
+                <div class="block text-sm font-medium leading-snug">
+                  {{
+                    capitalizeText(row?.firstName) +
+                    " " +
+                    capitalizeText(row?.lastName)
+                  }}
+                </div>
+                <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                  {{ row?.referenceId }}
+                </div>
+              </div>
+            </template>
+            <template #[`item.activeUser`]="{ row, rowIndex }">
+              {{ row?.activeUser?.user?.firstName }}
+              {{ row?.activeUser?.user?.lastName }}
+            </template>
+          </EUITable>
+        </div>
+      </div>
+    </div>
+
+    <div class="">
+      <pre
+        class="text-[0.5rem] p-2 rounded-lg max-h-72 overflow-y-auto text-red-600 border border-gray-100"
+      >
+        {{ `Total Row:${selectedRows.length}` }}
+        {{ selectedRows.map((x) => x?._id) }}
+      </pre>
+
+      <div class="py-4">
+        <EUITable
+          :checkable="true"
+          :table-loading="loading"
+          paginated
+          v-model:selectedRows.sync="selectedRows"
+          :checked-rows.sync="checkedRows"
+          backend-pagination
+          :per-page="10"
+          :headers="studentHeader"
+          :items="studentData"
+          :total="studentData.length"
+          :default-sort-direction="defaultSortOrder"
+          default-sort=""
+          :current-page="offset"
+          @changePage="onPageChange"
+          @sort="onSort"
+          @mouseenter="select"
+          @mouseleave="(selectedIndex = null), (selected = null)"
+        >
+          <template #[`item.firstName`]="{ row, rowIndex }">
+            <div class="space-y-0.5">
+              <div class="block text-sm font-medium leading-snug">
+                {{
+                  capitalizeText(row?.firstName) +
+                  " " +
+                  capitalizeText(row?.lastName)
+                }}
+              </div>
+              <div class="text-xs font-medium text-gray-900 leading-[normal]">
+                {{ row?.referenceId }}
+              </div>
+            </div>
+          </template>
+          <template #[`item.activeUser`]="{ row, rowIndex }">
+            {{ row?.activeUser?.user?.firstName }}
+            {{ row?.activeUser?.user?.lastName }}
+          </template>
+        </EUITable>
+      </div>
+    </div>
+    <div>
+      <UTableview />
+      <EUIAccordion
+        :datas="accordionData"
+        :defaultOpen="[1]"
+        :collapse="true"
+        accordionStyle="separated"
+        @update:activeItem="handleActiveItem"
+      >
+        <template #title="{ item }">
+          <div>{{ item.title }}</div>
+        </template>
+        <template #right-icon="{ item }">
+          <div
+            :key="item"
+            class="w-10 h-10 bg-red-100 border border-red-500 rounded-full"
+          />
+        </template>
+        <template #content="{ item }">
+          <div>{{ item.content }}</div>
+        </template>
+      </EUIAccordion>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import EUIButton from "./button/EUIButton.vue";
+import EUICheckbox from "./checkbox/EUICheckbox.vue";
+import EUIInput from "./input/EUIInput.vue";
+import EUIModal from "./modal/EUIModal.vue";
+import EUISelect from "./select/EUISelect.vue";
+import EUITabs from "./tabs/EUITabs.vue";
+import EUITextarea from "./textArea/EUITextArea.vue";
+import EUISelectSearch from "./selectSearch/EUISelectSearch.vue";
+import EUITimeLine from "./timeLine/EUITimeLine.vue";
+import {
+  ArrowDownCircleIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/vue/24/solid";
+import EUITag from "./tag/EUITag.vue";
+import EUIToggle from "./toggle/EUIToggle.vue";
+import EUILoader from "./loader/EUILoader.vue";
+import EUIAvatar from "./avatar/EUIAvatar.vue";
+import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
+import EUIAccordion from "./accordion/EUIAccordion.vue";
+import EUITelephone from "./telephone/EUITelephone.vue";
+import {
+  DevicePhoneMobileIcon,
+  ExclamationTriangleIcon,
+  FunnelIcon,
+  HomeIcon,
+} from "@heroicons/vue/24/outline";
+import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
+import EUIDashboardTable from "./table/EUIDashboardTable.vue";
+import tabData from "../data/tab";
+import {
+  studentData,
+  studentHeader,
+  tableData,
+  tableHeaders,
+} from "../data/table";
+import EUITable from "./table/EUITable.vue";
+import { capitalizeText } from "../utils/lodash";
+import ChevronDownStroke from "../assets/svg/ChevronDownStroke.vue";
+import EUIMultiDropdown from "./dropdown/EUIMultiDropdown.vue";
+// import Delete from "./delete.vue";
+import UTableview from "./table/UTableview.vue";
+import EUIAlerts from "./alerts/EUIAlerts.vue";
+import EUIButtonGroup from "./button/EUIButtonGroup.vue";
+import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
+import EUITabOutline from "./tabs/EUITabOutline.vue";
+import EUIPopover from "./popover/EUIPopover.vue";
+import EUIStepperHorizontal from "./stepperTimeline/EUIStepperHorizontal.vue";
+import { debounce } from "lodash";
+import EUISearchTagSelect from "./searchTagSelect/EUISearchTagSelect.vue";
+import { countryAll } from "../data/country";
+import EUINumberInput from "./input/EUINumberInput.vue";
+
+const checkboxData = ref([]);
+const businessAreaSel = ref();
+const popoverSelect = ref();
+
+const businessArea = ref(["All", "B2B", "B2C", "Accelerator"]);
+
+const emit = defineEmits(["update:modelValue", "on-select"]);
+const selectedCity = ref();
+
+const onSearch = debounce(async (query: string) => query, 350);
+const onCitySelect = (value: any) => {
+  emit("on-select", value);
+};
+
+const clear = (item: any) => {
+  // const currentSelection = props.modelValue;
+  // if (Array.isArray(currentSelection)) {
+  //   const updatedSelection = currentSelection.filter(
+  //     (selectedItem) => !selectedItem.slug?.includes(item.slug)
+  //   );
+  //   emit("update:modelValue", updatedSelection);
+  //   emit("on-select", updatedSelection);
+  // }
+};
+
+// TODO: Popover
+const isLoading = ref(false);
+const popoverVisible = ref(false);
+
+const isInitiallyOpen = ref(true);
+const onDefaultClose = () => {
+  isInitiallyOpen.value = false;
+};
+
+const onPopoverToggle = () => {
+  popoverVisible.value = !popoverVisible.value;
+};
+
+const onPopoverHide = () => {
+  popoverVisible.value = false;
+};
+
+const applyFilter = () => {
+  onPopoverHide();
+};
+
+const resetFilters = () => {};
+
+const allDays = ref([
+  { name: "7 days", count: 5 },
+  { name: "15 days", count: 10 },
+  { name: "16-30 days", count: 20 },
+  { name: "31-60 days", count: 121 },
+  { name: "61-90 days", count: 40 },
+]);
+
+const activeDays = ref(allDays.value[0].name);
+const activeTab = ref(allDays.value[3].name);
+
+const onchangeActiveTab = (val: any) => {
+  activeTab.value = val.name;
+};
+
+const onchangeDays = (val: any) => {
+  activeDays.value = val.name;
+};
+
+const searchInput = ref("");
+const showSearch = ref(false);
+
+const seachStudent = (e) => {
+  console.log("seachStudent", e);
+};
+
+const mobileNumber = ref("+91 8667444951");
+const datepicker = ref(new Date());
+const loading = ref(false);
+
+const inputNumber = ref();
+const inputNumberPoints = ref()
+
+const form = reactive({
+  input: "Lorem ipsum dolor sit",
+  mobile: "+918667444951",
+});
+
+const showAlert = ref(true);
+const onClickAlert = () => {
+  alert("Alert action button clicked");
+};
+
+//TODO: Dashboard Table
+const selectedRows = ref([]);
+const checkedRows = ref([]);
+const defaultSortOrder = ref("asc");
+const limit = ref(5);
+const offset = ref(0);
+const selectedIndex = ref(null);
+const selected: { index: string } = { index: "" };
+
+const totalCount = computed(() => {
+  return tableData.length;
+});
+
+const select = (_item: any, index: any) => {
+  selectedIndex.value = index;
+};
+
+const onSort = (field: string, order: string) => {
+  const modifier = order === "desc" ? -1 : 1;
+  tableData.sort((a, b) => {
+    if (a[field] < b[field]) return -1 * modifier;
+    if (a[field] > b[field]) return 1 * modifier;
+    return 0;
+  });
+};
+
+const onPageChange = (offsetData: number) => {
+  offset.value = offsetData;
+  loading.value = true;
+  console.log("@changePage:", offsetData);
+  setTimeout(() => {
+    loading.value = false;
+  }, 800);
+};
+
+// TODO: Multi dropdown menu clicked access
+const menubar = ref([{ text: "Students" }, { text: "Application" }]);
+
+const handleMenuItem = (item: any) => {
+  console.log("Menu clicked:", item);
+};
+
+const addAction = (e: Event) => {
+  console.log("Action Item clicked:" + e);
+};
+
+const handleSubMenuItem = (subItem: any) => {
+  console.log("Submenu item clicked:", subItem);
+};
+
+//TODO: TagModal
+const tagModal = ref(false);
+const handleClose = () => {
+  tagModal.value = true;
+};
+
+//TODO: Modal
+const showModal = ref(false);
+const handleConfirm = () => {
+  showModal.value = true;
+};
+
+const customModal = ref(false);
+const openModal = () => {
+  customModal.value = false;
+};
+
+// accordion active Index
+const handleActiveItem = (activeItems: number) => {
+  console.log("Currently active accordion(s):", activeItems);
+};
+
+// Stepper dynamic Data
+const allSteps = ["MQL", "SAL", "PROSPECT", "CUSTOMER"];
+const currentStage = "PROSPECT";
+const lifeCycleHistory = [
+  {
+    lifecycleStage: "MQL",
+    updatedAt: "2025-08-25T15:35:55.965Z",
+    updatedBy: {
+      email: "testuser3@edvoy.com",
+    },
+  },
+  {
+    lifecycleStage: "SAL",
+    updatedAt: "2025-08-25T15:36:16.616Z",
+    updatedBy: {
+      email: "testuser3@edvoy.com",
+    },
+  },
+  {
+    lifecycleStage: "PROSPECT",
+    updatedAt: "2025-08-25T15:42:30.195Z",
+    updatedBy: {
+      email: "testuser2@edvoy.com",
+    },
+  },
+];
+
+//TODO: Select Data
+const datas = ref([
+  {
+    value: "ShawnBurke",
+    name: "Shawn Burke",
+    age: 6,
+  },
+  {
+    value: "EmeryNolan",
+    name: "Emery Nolan",
+    age: 4,
+  },
+  {
+    value: "EmbryGrant",
+    name: "Embry Grant",
+    age: 3,
+  },
+  {
+    value: "JesseAustin",
+    name: "Jesse Austin",
+    age: 9,
+  },
+  {
+    value: "TandyChristensen",
+    name: "Tandy Christensen",
+    age: 7,
+  },
+  {
+    value: "ShawnBurkeNew",
+    name: "Shawn Burke New",
+    age: 6,
+  },
+  {
+    value: "EmeryNolanNew",
+    name: "Emery Nolan New",
+    age: 4,
+  },
+  {
+    value: "EmbryGrantNew",
+    name: "Embry Grant New",
+    age: 3,
+  },
+  {
+    value: "JesseAustinNew",
+    name: "Jesse Austin New",
+    age: 9,
+  },
+  {
+    value: "TandyChristensenNew",
+    name: "Tandy Christensen New",
+    age: 7,
+  },
+]);
+//TODO: Timeline
+
+const timelineData = ref([
+  {
+    id: 1,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 2,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+  {
+    id: 3,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 4,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+  {
+    id: 5,
+    person: { name: "Alex Curren" },
+    date: "2d ago",
+    dateTime: "2023-01-24T09:12",
+  },
+  {
+    id: 6,
+    person: { name: "Alex Curren" },
+    date: "1d ago",
+    dateTime: "2023-01-24T09:20",
+  },
+]);
+
+const timelineImage = ref([
+  {
+    id: 1,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 2,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 3,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 4,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 5,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+  {
+    id: 6,
+    person: {
+      name: "Chelsea Hagon",
+      imageUrl:
+        "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    },
+    comment:
+      "Called client, they reassured me the invoice would be paid by the 25th.",
+    date: "3d ago",
+    dateTime: "2023-01-23T15:56",
+    showmore: {
+      title: "More Details",
+      content:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dicta quae aliquam provident mollitia nostrum.",
+    },
+  },
+]);
+
+const accordionData = ref([
+  {
+    title: "1.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "2.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "3.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+  {
+    title: "4.How long does the course take?",
+    content:
+      "The video content takes more than 4.5 hours. In addition, you can test gained knowledge on 30 quizzes and practical tasks.",
+  },
+]);
+</script>
+
+<style lang="scss" scoped></style>
+-->