Merge pull request #658 from shariquerik/onboarding

feat: Onboarding & Help center

crm/api/onboarding.py

@@ -0,0 +1,24 @@
+import frappe
+
+
+@frappe.whitelist()
+def get_first_lead():
+	lead = frappe.get_all(
+		"CRM Lead",
+		filters={"converted": 0},
+		fields=["name"],
+		order_by="creation",
+		limit=1,
+	)
+	return lead[0].name if lead else None
+
+
+@frappe.whitelist()
+def get_first_deal():
+	deal = frappe.get_all(
+		"CRM Deal",
+		fields=["name"],
+		order_by="creation",
+		limit=1,
+	)
+	return deal[0].name if deal else None

frappe-ui

@@ -1 +1 @@
-Subproject commit 33c9907aa9163d8d3b84f23dc2a2c829e4d8c6f1
+Subproject commit b6efd25b2122c2c1f3beeea1702788c5e6e5555f

frontend/components.d.ts

@@ -0,0 +1,229 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Activities: typeof import('./src/components/Activities/Activities.vue')['default']
+    ActivityHeader: typeof import('./src/components/Activities/ActivityHeader.vue')['default']
+    ActivityIcon: typeof import('./src/components/Icons/ActivityIcon.vue')['default']
+    AddressIcon: typeof import('./src/components/Icons/AddressIcon.vue')['default']
+    AddressModal: typeof import('./src/components/Modals/AddressModal.vue')['default']
+    AllModals: typeof import('./src/components/Activities/AllModals.vue')['default']
+    AppHeader: typeof import('./src/components/Layouts/AppHeader.vue')['default']
+    Apps: typeof import('./src/components/Apps.vue')['default']
+    AppsIcon: typeof import('./src/components/Icons/AppsIcon.vue')['default']
+    AppSidebar: typeof import('./src/components/Layouts/AppSidebar.vue')['default']
+    ArrowUpRightIcon: typeof import('./src/components/Icons/ArrowUpRightIcon.vue')['default']
+    AscendingIcon: typeof import('./src/components/Icons/AscendingIcon.vue')['default']
+    AssignmentModal: typeof import('./src/components/Modals/AssignmentModal.vue')['default']
+    AssignTo: typeof import('./src/components/AssignTo.vue')['default']
+    AttachmentArea: typeof import('./src/components/Activities/AttachmentArea.vue')['default']
+    AttachmentIcon: typeof import('./src/components/Icons/AttachmentIcon.vue')['default']
+    AttachmentItem: typeof import('./src/components/AttachmentItem.vue')['default']
+    AudioPlayer: typeof import('./src/components/Activities/AudioPlayer.vue')['default']
+    Autocomplete: typeof import('./src/components/frappe-ui/Autocomplete.vue')['default']
+    AvatarIcon: typeof import('./src/components/Icons/AvatarIcon.vue')['default']
+    BrandLogo: typeof import('./src/components/BrandLogo.vue')['default']
+    CalendarIcon: typeof import('./src/components/Icons/CalendarIcon.vue')['default']
+    CallArea: typeof import('./src/components/Activities/CallArea.vue')['default']
+    CallLogDetailModal: typeof import('./src/components/Modals/CallLogDetailModal.vue')['default']
+    CallLogModal: typeof import('./src/components/Modals/CallLogModal.vue')['default']
+    CallLogsListView: typeof import('./src/components/ListViews/CallLogsListView.vue')['default']
+    CallUI: typeof import('./src/components/Telephony/CallUI.vue')['default']
+    CameraIcon: typeof import('./src/components/Icons/CameraIcon.vue')['default']
+    CertificateIcon: typeof import('./src/components/Icons/CertificateIcon.vue')['default']
+    CheckCircleIcon: typeof import('./src/components/Icons/CheckCircleIcon.vue')['default']
+    CheckIcon: typeof import('./src/components/Icons/CheckIcon.vue')['default']
+    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    Column: typeof import('./src/components/FieldLayout/Column.vue')['default']
+    ColumnSettings: typeof import('./src/components/ColumnSettings.vue')['default']
+    ColumnsIcon: typeof import('./src/components/Icons/ColumnsIcon.vue')['default']
+    CommentArea: typeof import('./src/components/Activities/CommentArea.vue')['default']
+    CommentBox: typeof import('./src/components/CommentBox.vue')['default']
+    CommentIcon: typeof import('./src/components/Icons/CommentIcon.vue')['default']
+    CommunicationArea: typeof import('./src/components/CommunicationArea.vue')['default']
+    ContactIcon: typeof import('./src/components/Icons/ContactIcon.vue')['default']
+    ContactModal: typeof import('./src/components/Modals/ContactModal.vue')['default']
+    ContactsIcon: typeof import('./src/components/Icons/ContactsIcon.vue')['default']
+    ContactsListView: typeof import('./src/components/ListViews/ContactsListView.vue')['default']
+    ConvertIcon: typeof import('./src/components/Icons/ConvertIcon.vue')['default']
+    CountUpTimer: typeof import('./src/components/CountUpTimer.vue')['default']
+    CRMLogo: typeof import('./src/components/Icons/CRMLogo.vue')['default']
+    CustomActions: typeof import('./src/components/CustomActions.vue')['default']
+    DashboardIcon: typeof import('./src/components/Icons/DashboardIcon.vue')['default']
+    DataFields: typeof import('./src/components/Activities/DataFields.vue')['default']
+    DataFieldsModal: typeof import('./src/components/Modals/DataFieldsModal.vue')['default']
+    DealModal: typeof import('./src/components/Modals/DealModal.vue')['default']
+    DealsIcon: typeof import('./src/components/Icons/DealsIcon.vue')['default']
+    DealsListView: typeof import('./src/components/ListViews/DealsListView.vue')['default']
+    DeclinedCallIcon: typeof import('./src/components/Icons/DeclinedCallIcon.vue')['default']
+    DesendingIcon: typeof import('./src/components/Icons/DesendingIcon.vue')['default']
+    DesktopLayout: typeof import('./src/components/Layouts/DesktopLayout.vue')['default']
+    DetailsIcon: typeof import('./src/components/Icons/DetailsIcon.vue')['default']
+    DialpadIcon: typeof import('./src/components/Icons/DialpadIcon.vue')['default']
+    DocumentIcon: typeof import('./src/components/Icons/DocumentIcon.vue')['default']
+    DotIcon: typeof import('./src/components/Icons/DotIcon.vue')['default']
+    DoubleCheckIcon: typeof import('./src/components/Icons/DoubleCheckIcon.vue')['default']
+    DragIcon: typeof import('./src/components/Icons/DragIcon.vue')['default']
+    DragVerticalIcon: typeof import('./src/components/Icons/DragVerticalIcon.vue')['default']
+    Dropdown: typeof import('./src/components/frappe-ui/Dropdown.vue')['default']
+    DropdownItem: typeof import('./src/components/DropdownItem.vue')['default']
+    DuplicateIcon: typeof import('./src/components/Icons/DuplicateIcon.vue')['default']
+    DurationIcon: typeof import('./src/components/Icons/DurationIcon.vue')['default']
+    EditIcon: typeof import('./src/components/Icons/EditIcon.vue')['default']
+    EditValueModal: typeof import('./src/components/Modals/EditValueModal.vue')['default']
+    Email2Icon: typeof import('./src/components/Icons/Email2Icon.vue')['default']
+    EmailArea: typeof import('./src/components/Activities/EmailArea.vue')['default']
+    EmailAtIcon: typeof import('./src/components/Icons/EmailAtIcon.vue')['default']
+    EmailContent: typeof import('./src/components/Activities/EmailContent.vue')['default']
+    EmailEditor: typeof import('./src/components/EmailEditor.vue')['default']
+    EmailIcon: typeof import('./src/components/Icons/EmailIcon.vue')['default']
+    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
+    EmailTemplateSelectorModal: typeof import('./src/components/Modals/EmailTemplateSelectorModal.vue')['default']
+    EmailTemplatesListView: typeof import('./src/components/ListViews/EmailTemplatesListView.vue')['default']
+    ERPNextIcon: typeof import('./src/components/Icons/ERPNextIcon.vue')['default']
+    ERPNextSettings: typeof import('./src/components/Settings/ERPNextSettings.vue')['default']
+    ExotelCallUI: typeof import('./src/components/Telephony/ExotelCallUI.vue')['default']
+    ExportIcon: typeof import('./src/components/Icons/ExportIcon.vue')['default']
+    ExternalLinkIcon: typeof import('./src/components/Icons/ExternalLinkIcon.vue')['default']
+    FadedScrollableDiv: typeof import('./src/components/FadedScrollableDiv.vue')['default']
+    Field: typeof import('./src/components/FieldLayout/Field.vue')['default']
+    FieldLayout: typeof import('./src/components/FieldLayout/FieldLayout.vue')['default']
+    FieldLayoutEditor: typeof import('./src/components/FieldLayoutEditor.vue')['default']
+    FileAudioIcon: typeof import('./src/components/Icons/FileAudioIcon.vue')['default']
+    FileIcon: typeof import('./src/components/Icons/FileIcon.vue')['default']
+    FileImageIcon: typeof import('./src/components/Icons/FileImageIcon.vue')['default']
+    FileSpreadsheetIcon: typeof import('./src/components/Icons/FileSpreadsheetIcon.vue')['default']
+    FilesUploader: typeof import('./src/components/FilesUploader/FilesUploader.vue')['default']
+    FilesUploaderArea: typeof import('./src/components/FilesUploader/FilesUploaderArea.vue')['default']
+    FileTextIcon: typeof import('./src/components/Icons/FileTextIcon.vue')['default']
+    FileTypeIcon: typeof import('./src/components/Icons/FileTypeIcon.vue')['default']
+    FileVideoIcon: typeof import('./src/components/Icons/FileVideoIcon.vue')['default']
+    Filter: typeof import('./src/components/Filter.vue')['default']
+    FilterIcon: typeof import('./src/components/Icons/FilterIcon.vue')['default']
+    FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
+    GenderIcon: typeof import('./src/components/Icons/GenderIcon.vue')['default']
+    GeneralSettings: typeof import('./src/components/Settings/GeneralSettings.vue')['default']
+    GoogleIcon: typeof import('./src/components/Icons/GoogleIcon.vue')['default']
+    Grid: typeof import('./src/components/Controls/Grid.vue')['default']
+    GridFieldsEditorModal: typeof import('./src/components/Controls/GridFieldsEditorModal.vue')['default']
+    GridRowFieldsModal: typeof import('./src/components/Controls/GridRowFieldsModal.vue')['default']
+    GridRowModal: typeof import('./src/components/Controls/GridRowModal.vue')['default']
+    GroupBy: typeof import('./src/components/GroupBy.vue')['default']
+    GroupByIcon: typeof import('./src/components/Icons/GroupByIcon.vue')['default']
+    HeartIcon: typeof import('./src/components/Icons/HeartIcon.vue')['default']
+    HelpIcon: typeof import('./src/components/Icons/HelpIcon.vue')['default']
+    Icon: typeof import('./src/components/Icon.vue')['default']
+    IconPicker: typeof import('./src/components/IconPicker.vue')['default']
+    ImageUploader: typeof import('./src/components/Controls/ImageUploader.vue')['default']
+    InboundCallIcon: typeof import('./src/components/Icons/InboundCallIcon.vue')['default']
+    InboxIcon: typeof import('./src/components/Icons/InboxIcon.vue')['default']
+    IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
+    InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
+    InviteMemberPage: typeof import('./src/components/Settings/InviteMemberPage.vue')['default']
+    KanbanIcon: typeof import('./src/components/Icons/KanbanIcon.vue')['default']
+    KanbanSettings: typeof import('./src/components/Kanban/KanbanSettings.vue')['default']
+    KanbanView: typeof import('./src/components/Kanban/KanbanView.vue')['default']
+    LayoutHeader: typeof import('./src/components/LayoutHeader.vue')['default']
+    LeadModal: typeof import('./src/components/Modals/LeadModal.vue')['default']
+    LeadsIcon: typeof import('./src/components/Icons/LeadsIcon.vue')['default']
+    LeadsListView: typeof import('./src/components/ListViews/LeadsListView.vue')['default']
+    LightningIcon: typeof import('./src/components/Icons/LightningIcon.vue')['default']
+    Link: typeof import('./src/components/Controls/Link.vue')['default']
+    LinkIcon: typeof import('./src/components/Icons/LinkIcon.vue')['default']
+    ListBulkActions: typeof import('./src/components/ListBulkActions.vue')['default']
+    ListIcon: typeof import('./src/components/Icons/ListIcon.vue')['default']
+    ListRows: typeof import('./src/components/ListViews/ListRows.vue')['default']
+    LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
+    MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
+    MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
+    MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']
+    MinimizeIcon: typeof import('./src/components/Icons/MinimizeIcon.vue')['default']
+    MissedCallIcon: typeof import('./src/components/Icons/MissedCallIcon.vue')['default']
+    MobileAppHeader: typeof import('./src/components/Mobile/MobileAppHeader.vue')['default']
+    MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
+    MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
+    MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
+    MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
+    MultiselectInput: typeof import('./src/components/Controls/MultiselectInput.vue')['default']
+    MultiValueInput: typeof import('./src/components/Controls/MultiValueInput.vue')['default']
+    MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
+    NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
+    NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']
+    NoteIcon: typeof import('./src/components/Icons/NoteIcon.vue')['default']
+    NoteModal: typeof import('./src/components/Modals/NoteModal.vue')['default']
+    Notifications: typeof import('./src/components/Notifications.vue')['default']
+    NotificationsIcon: typeof import('./src/components/Icons/NotificationsIcon.vue')['default']
+    OrganizationModal: typeof import('./src/components/Modals/OrganizationModal.vue')['default']
+    OrganizationsIcon: typeof import('./src/components/Icons/OrganizationsIcon.vue')['default']
+    OrganizationsListView: typeof import('./src/components/ListViews/OrganizationsListView.vue')['default']
+    OutboundCallIcon: typeof import('./src/components/Icons/OutboundCallIcon.vue')['default']
+    PauseIcon: typeof import('./src/components/Icons/PauseIcon.vue')['default']
+    PhoneIcon: typeof import('./src/components/Icons/PhoneIcon.vue')['default']
+    PinIcon: typeof import('./src/components/Icons/PinIcon.vue')['default']
+    PlaybackSpeedIcon: typeof import('./src/components/Icons/PlaybackSpeedIcon.vue')['default']
+    PlaybackSpeedOption: typeof import('./src/components/Activities/PlaybackSpeedOption.vue')['default']
+    PlayIcon: typeof import('./src/components/Icons/PlayIcon.vue')['default']
+    Popover: typeof import('./src/components/frappe-ui/Popover.vue')['default']
+    ProfileImageEditor: typeof import('./src/components/Settings/ProfileImageEditor.vue')['default']
+    ProfileSettings: typeof import('./src/components/Settings/ProfileSettings.vue')['default']
+    QuickEntryModal: typeof import('./src/components/Modals/QuickEntryModal.vue')['default']
+    QuickFilterField: typeof import('./src/components/QuickFilterField.vue')['default']
+    QuickFilterIcon: typeof import('./src/components/Icons/QuickFilterIcon.vue')['default']
+    ReactIcon: typeof import('./src/components/Icons/ReactIcon.vue')['default']
+    RefreshIcon: typeof import('./src/components/Icons/RefreshIcon.vue')['default']
+    ReloadIcon: typeof import('./src/components/Icons/ReloadIcon.vue')['default']
+    ReplyAllIcon: typeof import('./src/components/Icons/ReplyAllIcon.vue')['default']
+    ReplyIcon: typeof import('./src/components/Icons/ReplyIcon.vue')['default']
+    Resizer: typeof import('./src/components/Resizer.vue')['default']
+    RightSideLayoutIcon: typeof import('./src/components/Icons/RightSideLayoutIcon.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Section: typeof import('./src/components/FieldLayout/Section.vue')['default']
+    SelectIcon: typeof import('./src/components/Icons/SelectIcon.vue')['default']
+    Settings: typeof import('./src/components/Settings/Settings.vue')['default']
+    SettingsIcon: typeof import('./src/components/Icons/SettingsIcon.vue')['default']
+    SettingsPage: typeof import('./src/components/Settings/SettingsPage.vue')['default']
+    SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
+    SidePanelLayout: typeof import('./src/components/SidePanelLayout.vue')['default']
+    SidePanelLayoutEditor: typeof import('./src/components/SidePanelLayoutEditor.vue')['default']
+    SidePanelModal: typeof import('./src/components/Modals/SidePanelModal.vue')['default']
+    SignupBanner: typeof import('./src/components/SignupBanner.vue')['default']
+    SLASection: typeof import('./src/components/SLASection.vue')['default']
+    SmileIcon: typeof import('./src/components/Icons/SmileIcon.vue')['default']
+    SortBy: typeof import('./src/components/SortBy.vue')['default']
+    SortIcon: typeof import('./src/components/Icons/SortIcon.vue')['default']
+    StepsIcon: typeof import('./src/components/Icons/StepsIcon.vue')['default']
+    SuccessIcon: typeof import('./src/components/Icons/SuccessIcon.vue')['default']
+    TableMultiselectInput: typeof import('./src/components/Controls/TableMultiselectInput.vue')['default']
+    TaskArea: typeof import('./src/components/Activities/TaskArea.vue')['default']
+    TaskIcon: typeof import('./src/components/Icons/TaskIcon.vue')['default']
+    TaskModal: typeof import('./src/components/Modals/TaskModal.vue')['default']
+    TaskPanel: typeof import('./src/components/Telephony/TaskPanel.vue')['default']
+    TaskPriorityIcon: typeof import('./src/components/Icons/TaskPriorityIcon.vue')['default']
+    TasksListView: typeof import('./src/components/ListViews/TasksListView.vue')['default']
+    TaskStatusIcon: typeof import('./src/components/Icons/TaskStatusIcon.vue')['default']
+    TelephonySettings: typeof import('./src/components/Settings/TelephonySettings.vue')['default']
+    TerritoryIcon: typeof import('./src/components/Icons/TerritoryIcon.vue')['default']
+    TwilioCallUI: typeof import('./src/components/Telephony/TwilioCallUI.vue')['default']
+    UnpinIcon: typeof import('./src/components/Icons/UnpinIcon.vue')['default']
+    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
+    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
+    ViewBreadcrumbs: typeof import('./src/components/ViewBreadcrumbs.vue')['default']
+    ViewControls: typeof import('./src/components/ViewControls.vue')['default']
+    ViewModal: typeof import('./src/components/Modals/ViewModal.vue')['default']
+    VolumnHighIcon: typeof import('./src/components/Icons/VolumnHighIcon.vue')['default']
+    VolumnLowIcon: typeof import('./src/components/Icons/VolumnLowIcon.vue')['default']
+    WebsiteIcon: typeof import('./src/components/Icons/WebsiteIcon.vue')['default']
+    WhatsAppArea: typeof import('./src/components/Activities/WhatsAppArea.vue')['default']
+    WhatsAppBox: typeof import('./src/components/Activities/WhatsAppBox.vue')['default']
+    WhatsAppIcon: typeof import('./src/components/Icons/WhatsAppIcon.vue')['default']
+    WhatsAppSettings: typeof import('./src/components/Settings/WhatsAppSettings.vue')['default']
+    WhatsappTemplateSelectorModal: typeof import('./src/components/Modals/WhatsappTemplateSelectorModal.vue')['default']
+  }
+}

frontend/package.json

@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.111",
+    "frappe-ui": "^0.1.118",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",

frontend/src/components/CommunicationArea.vue

@@ -4,7 +4,9 @@
       <Button
         ref="sendEmailRef"
         variant="ghost"
-        :class="[showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
+        :class="[
+          showEmailBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+        ]"
         :label="__('Reply')"
         @click="toggleEmailBox()"
       >
@@ -15,7 +17,9 @@
       <Button
         variant="ghost"
         :label="__('Comment')"
-        :class="[showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '']"
+        :class="[
+          showCommentBox ? '!bg-surface-gray-4 hover:!bg-surface-gray-3' : '',
+        ]"
         @click="toggleCommentBox()"
       >
         <template #prefix>
@@ -92,6 +96,7 @@ import { capture } from '@/telemetry'
 import { usersStore } from '@/stores/users'
 import { useStorage } from '@vueuse/core'
 import { call, createResource } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
@@ -107,6 +112,7 @@ const reload = defineModel('reload')
 const emit = defineEmits(['scroll'])
 
 const { getUser } = usersStore()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const showEmailBox = ref(false)
 const showCommentBox = ref(false)
@@ -152,7 +158,7 @@ watch(
       editor.commands.focus()
       setSignature(editor)
     }
-  }
+  },
 )
 
 watch(
@@ -161,7 +167,7 @@ watch(
     if (value) {
       newCommentEditor.value.editor.commands.focus()
     }
-  }
+  },
 )
 
 const commentEmpty = computed(() => {
@@ -221,6 +227,7 @@ async function submitEmail() {
   reload.value = true
   emit('scroll')
   capture('email_sent', { doctype: props.doctype })
+  updateOnboardingStep('send_first_email')
 }
 
 async function submitComment() {
@@ -231,6 +238,7 @@ async function submitComment() {
   reload.value = true
   emit('scroll')
   capture('comment_sent', { doctype: props.doctype })
+  updateOnboardingStep('add_first_comment')
 }
 
 function toggleEmailBox() {

frontend/src/components/Icons/ConvertIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.71639 1.68847C7.20728 1.49315 5.6781 1.84427 4.40534 2.67832C3.50159 3.27056 2.7695 4.07854 2.26943 5.02055C2.13995 5.26445 2.23271 5.56714 2.47662 5.69662C2.72052 5.8261 3.02321 5.73334 3.15269 5.48943C3.57431 4.69521 4.19153 4.01402 4.95345 3.51473C6.02649 2.81155 7.31573 2.51553 8.58803 2.6802C9.86034 2.84487 11.0317 3.45936 11.8904 4.41255C12.5455 5.13978 12.9856 6.02752 13.1713 6.97711L12.0682 6.38995C11.8245 6.2602 11.5217 6.35263 11.3919 6.59639C11.2622 6.84015 11.3546 7.14294 11.5984 7.27269L13.8052 8.44735C14.049 8.5771 14.3518 8.48468 14.4815 8.24091L15.6562 6.03407C15.7859 5.79031 15.6935 5.48752 15.4497 5.35777C15.206 5.22802 14.9032 5.32044 14.7734 5.5642L14.1448 6.74523C13.92 5.63395 13.4012 4.59563 12.6334 3.74325C11.6149 2.61265 10.2255 1.88379 8.71639 1.68847ZM7.51332 14.3501C9.0288 14.4875 10.5434 14.0781 11.7833 13.1959C12.5865 12.6244 13.2401 11.8789 13.7005 11.0233C13.8314 10.7801 13.7404 10.4769 13.4972 10.3461C13.254 10.2152 12.9508 10.3062 12.82 10.5494C12.4317 11.2708 11.8807 11.8993 11.2035 12.3811C10.1582 13.1249 8.88128 13.47 7.6036 13.3542C6.32592 13.2384 5.13186 12.6692 4.23732 11.7496C3.50475 10.9965 3.01266 10.0491 2.81428 9.02749L3.95178 9.68895C4.1905 9.82776 4.49655 9.74677 4.63536 9.50805C4.77417 9.26934 4.69318 8.96329 4.45447 8.82448L2.29329 7.56777C2.05458 7.42895 1.74853 7.50994 1.60972 7.74866L0.353003 9.90983C0.214191 10.1485 0.295179 10.4546 0.533896 10.5934C0.772613 10.7322 1.07866 10.6512 1.21747 10.4125L1.85313 9.31938C2.10072 10.4924 2.67584 11.5786 3.52051 12.4469C4.58154 13.5377 5.99784 14.2128 7.51332 14.3501Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/components/Icons/HelpIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.25 8C14.25 11.4518 11.4518 14.25 8 14.25C4.54822 14.25 1.75 11.4518 1.75 8C1.75 4.54822 4.54822 1.75 8 1.75C11.4518 1.75 14.25 4.54822 14.25 8ZM15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8ZM7.37988 9.37695V9.44531H8.39062V9.37695C8.39062 9.10352 8.41992 8.88542 8.47852 8.72266C8.53711 8.55664 8.62826 8.41504 8.75195 8.29785C8.87891 8.18066 9.04329 8.06185 9.24512 7.94141C9.56087 7.74609 9.8099 7.51009 9.99219 7.2334C10.1745 6.95345 10.2656 6.61328 10.2656 6.21289C10.2656 5.82878 10.1745 5.49186 9.99219 5.20215C9.81315 4.91244 9.56087 4.6862 9.23535 4.52344C8.90983 4.36068 8.52734 4.2793 8.08789 4.2793C7.69401 4.2793 7.33268 4.35579 7.00391 4.50879C6.67513 4.65853 6.41146 4.88151 6.21289 5.17773C6.01432 5.4707 5.90853 5.82878 5.89551 6.25195H6.96973C6.986 6.0013 7.04948 5.79785 7.16016 5.6416C7.27083 5.4821 7.40755 5.36491 7.57031 5.29004C7.73633 5.21517 7.90885 5.17773 8.08789 5.17773C8.28971 5.17773 8.47363 5.22005 8.63965 5.30469C8.80892 5.38932 8.94075 5.50814 9.03516 5.66113C9.13281 5.81413 9.18164 5.99479 9.18164 6.20312C9.18164 6.47005 9.11003 6.69954 8.9668 6.8916C8.82357 7.0804 8.64453 7.23828 8.42969 7.36523C8.21159 7.50195 8.02279 7.64193 7.86328 7.78516C7.70703 7.92513 7.58659 8.11556 7.50195 8.35645C7.42057 8.59408 7.37988 8.93425 7.37988 9.37695ZM7.37988 11.5205C7.51986 11.654 7.69076 11.7207 7.89258 11.7207C8.09766 11.7207 8.26855 11.654 8.40527 11.5205C8.54525 11.3838 8.61523 11.2161 8.61523 11.0176C8.61523 10.8158 8.54525 10.6481 8.40527 10.5146C8.26855 10.3779 8.09766 10.3096 7.89258 10.3096C7.69076 10.3096 7.51986 10.3779 7.37988 10.5146C7.24316 10.6481 7.1748 10.8158 7.1748 11.0176C7.1748 11.2161 7.24316 11.3838 7.37988 11.5205Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/components/Icons/InviteIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M13.5 0C13.7761 0 14 0.223858 14 0.5V2H15.5C15.7761 2 16 2.22386 16 2.5C16 2.77614 15.7761 3 15.5 3H14V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3H11.5C11.2239 3 11 2.77614 11 2.5C11 2.22386 11.2239 2 11.5 2H13V0.5C13 0.223858 13.2239 0 13.5 0ZM7.9998 2C4.6862 2 2 4.6862 2 7.9998C2 9.49431 2.54643 10.8612 3.45041 11.9116C4.18218 10.8499 5.63104 9.51974 7.99595 9.50011L8.0001 9.50008C9.89267 9.50009 11.5613 10.456 12.5506 11.91C13.4537 10.8598 13.9996 9.49355 13.9996 7.9998C13.9996 7.72366 14.2235 7.4998 14.4996 7.4998C14.7757 7.4998 14.9996 7.72366 14.9996 7.9998C14.9996 11.8657 11.8657 14.9996 7.9998 14.9996C4.13392 14.9996 1 11.8657 1 7.9998C1 4.13392 4.13392 1 7.9998 1C8.27594 1 8.4998 1.22386 8.4998 1.5C8.4998 1.77614 8.27594 2 7.9998 2ZM11.8227 12.6242C11.0281 11.3487 9.61378 10.5008 8.00216 10.5001C5.94811 10.518 4.73746 11.7366 4.17676 12.6241C5.21484 13.4833 6.54702 13.9996 7.9998 13.9996C9.45251 13.9996 10.7846 13.4833 11.8227 12.6242ZM8 4.5C7.0335 4.5 6.25 5.2835 6.25 6.25C6.25 7.2165 7.0335 8 8 8C8.9665 8 9.75 7.2165 9.75 6.25C9.75 5.2835 8.9665 4.5 8 4.5ZM5.25 6.25C5.25 4.73122 6.48122 3.5 8 3.5C9.51878 3.5 10.75 4.73122 10.75 6.25C10.75 7.76878 9.51878 9 8 9C6.48122 9 5.25 7.76878 5.25 6.25Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/components/Icons/StepsIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 6.5C9.10457 6.5 10 5.60457 10 4.5C10 3.39543 9.10457 2.5 8 2.5C6.89543 2.5 6 3.39543 6 4.5C6 5.60457 6.89543 6.5 8 6.5ZM8 7.5C9.65685 7.5 11 6.15685 11 4.5C11 2.84315 9.65685 1.5 8 1.5C6.34315 1.5 5 2.84315 5 4.5C5 6.15685 6.34315 7.5 8 7.5ZM12 13.5C13.1046 13.5 14 12.6046 14 11.5C14 10.3954 13.1046 9.5 12 9.5C10.8954 9.5 10 10.3954 10 11.5C10 12.6046 10.8954 13.5 12 13.5ZM12 14.5C13.6569 14.5 15 13.1569 15 11.5C15 9.84315 13.6569 8.5 12 8.5C10.3431 8.5 9 9.84315 9 11.5C9 13.1569 10.3431 14.5 12 14.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM7 11.5C7 13.1569 5.65685 14.5 4 14.5C2.34315 14.5 1 13.1569 1 11.5C1 9.84315 2.34315 8.5 4 8.5C5.65685 8.5 7 9.84315 7 11.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/components/Layouts/AppSidebar.vue

@@ -73,7 +73,26 @@
     </div>
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
-      <TrialBanner v-if="isFCSite" />
+      <TrialBanner v-if="isFCSite" :isSidebarCollapsed="isSidebarCollapsed" />
+      <GettingStartedBanner
+        v-if="!isOnboardingStepsCompleted"
+        :isSidebarCollapsed="isSidebarCollapsed"
+      />
+      <SidebarLink
+        v-else
+        :label="__('Help')"
+        :isCollapsed="isSidebarCollapsed"
+        @click="
+          () => {
+            showHelpModal = minimize ? true : !showHelpModal
+            minimize = !showHelpModal
+          }
+        "
+      >
+        <template #icon>
+          <HelpIcon class="h-4 w-4" />
+        </template>
+      </SidebarLink>
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -81,9 +100,9 @@
         class=""
       >
         <template #icon>
-          <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
+          <span class="grid h-4 w-4 flex-shrink-0 place-items-center">
             <CollapseSidebar
-              class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
+              class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
               :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
             />
           </span>
@@ -92,10 +111,26 @@
     </div>
     <Notifications />
     <Settings />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      v-model:articles="articles"
+      :logo="CRMLogo"
+      :afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
+      :afterSkipAll="() => capture('onboarding_steps_skipped')"
+      :afterReset="() => capture('onboarding_steps_reset')"
+      docsLink="https://docs.frappe.io/crm"
+    />
   </div>
 </template>
 
 <script setup>
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import InviteIcon from '@/components/Icons/InviteIcon.vue'
+import ConvertIcon from '@/components/Icons/ConvertIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import Section from '@/components/Section.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import PinIcon from '@/components/Icons/PinIcon.vue'
@@ -109,6 +144,7 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
+import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
@@ -118,9 +154,20 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { FeatherIcon, TrialBanner } from 'frappe-ui'
+import { showSettings, activeSettingsPage } from '@/composables/settings'
+import { FeatherIcon, call } from 'frappe-ui'
+import {
+  TrialBanner,
+  HelpModal,
+  GettingStartedBanner,
+  useOnboarding,
+  showHelpModal,
+  minimize,
+} from 'frappe-ui/frappe'
+import { capture } from '@/telemetry'
+import router from '@/router'
 import { useStorage } from '@vueuse/core'
-import { ref, computed, h } from 'vue'
+import { ref, reactive, computed, h, markRaw, onMounted } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
@@ -233,4 +280,248 @@ function getIcon(routeName, icon) {
       return PinIcon
   }
 }
+
+// onboarding
+const { isOnboardingStepsCompleted, setUp } = useOnboarding('frappecrm')
+
+const firstLead = ref('')
+const firstDeal = ref('')
+
+async function getFirstLead() {
+  if (firstLead.value) return firstLead.value
+  return await call('crm.api.onboarding.get_first_lead')
+}
+
+async function getFirstDeal() {
+  if (firstDeal.value) return firstDeal.value
+  return await call('crm.api.onboarding.get_first_deal')
+}
+
+const steps = reactive([
+  {
+    name: 'create_first_lead',
+    title: __('Create your first lead'),
+    icon: markRaw(LeadsIcon),
+    completed: false,
+    onClick: () => {
+      minimize.value = true
+      router.push({ name: 'Leads' })
+    },
+  },
+  {
+    name: 'invite_your_team',
+    title: __('Invite your team'),
+    icon: markRaw(InviteIcon),
+    completed: false,
+    onClick: () => {
+      minimize.value = true
+      showSettings.value = true
+      activeSettingsPage.value = 'Invite Members'
+    },
+  },
+  {
+    name: 'convert_lead_to_deal',
+    title: __('Convert lead to deal'),
+    icon: markRaw(ConvertIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+
+      let lead = await getFirstLead()
+
+      if (lead) {
+        router.push({ name: 'Lead', params: { leadId: lead } })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
+  },
+  {
+    name: 'create_first_task',
+    title: __('Create your first task'),
+    icon: markRaw(TaskIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let deal = await getFirstDeal()
+
+      if (deal) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: deal },
+          hash: '#tasks',
+        })
+      } else {
+        router.push({ name: 'Tasks' })
+      }
+    },
+  },
+  {
+    name: 'create_first_note',
+    title: __('Create your first note'),
+    icon: markRaw(NoteIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let deal = await getFirstDeal()
+
+      if (deal) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: deal },
+          hash: '#notes',
+        })
+      } else {
+        router.push({ name: 'Notes' })
+      }
+    },
+  },
+  {
+    name: 'add_first_comment',
+    title: __('Add your first comment'),
+    icon: markRaw(CommentIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let deal = await getFirstDeal()
+
+      if (deal) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: deal },
+          hash: '#comments',
+        })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
+  },
+  {
+    name: 'send_first_email',
+    title: __('Send email'),
+    icon: markRaw(EmailIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let deal = await getFirstDeal()
+
+      if (deal) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: deal },
+          hash: '#emails',
+        })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
+  },
+  {
+    name: 'change_deal_status',
+    title: __('Change deal status'),
+    icon: markRaw(StepsIcon),
+    completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let deal = await getFirstDeal()
+
+      if (deal) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: deal },
+          hash: '#activity',
+        })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
+  },
+])
+
+onMounted(() => setUp(steps))
+
+// help center
+const articles = ref([
+  {
+    title: __('Introduction'),
+    opened: false,
+    subArticles: [
+      { name: 'introduction', title: __('Introduction') },
+      { name: 'setting-up', title: __('Setting up') },
+    ],
+  },
+  {
+    title: __('Settings'),
+    opened: false,
+    subArticles: [
+      { name: 'profile', title: __('Profile') },
+      { name: 'custom-branding', title: __('Custom branding') },
+      { name: 'home-actions', title: __('Home actions') },
+      { name: 'invite-members', title: __('Invite members') },
+    ],
+  },
+  {
+    title: __('Masters'),
+    opened: false,
+    subArticles: [
+      { name: 'lead', title: __('Lead') },
+      { name: 'deal', title: __('Deal') },
+      { name: 'contact', title: __('Contact') },
+      { name: 'organization', title: __('Organization') },
+      { name: 'note', title: __('Note') },
+      { name: 'task', title: __('Task') },
+      { name: 'call-log', title: __('Call log') },
+      { name: 'email-template', title: __('Email template') },
+    ],
+  },
+  {
+    title: __('Views'),
+    opened: false,
+    subArticles: [
+      { name: 'view', title: __('Saved view') },
+      { name: 'public-view', title: __('Public view') },
+      { name: 'pinned-view', title: __('Pinned view') },
+    ],
+  },
+  {
+    title: __('Other features'),
+    opened: false,
+    subArticles: [
+      { name: 'email-communication', title: __('Email communication') },
+      { name: 'comment', title: __('Comment') },
+      { name: 'data', title: __('Data') },
+      { name: 'service-level-agreement', title: __('Service level agreement') },
+      { name: 'assignment-rule', title: __('Assignment rule') },
+      { name: 'notification', title: __('Notification') },
+    ],
+  },
+  {
+    title: __('Customization'),
+    opened: false,
+    subArticles: [
+      { name: 'custom-fields', title: __('Custom fields') },
+      { name: 'custom-actions', title: __('Custom actions') },
+      { name: 'custom-statuses', title: __('Custom statuses') },
+      { name: 'custom-list-actions', title: __('Custom list actions') },
+      { name: 'quick-entry-layout', title: __('Quick entry layout') },
+    ],
+  },
+  {
+    title: __('Integration'),
+    opened: false,
+    subArticles: [
+      { name: 'twilio', title: __('Twilio') },
+      { name: 'exotel', title: __('Exotel') },
+      { name: 'whatsapp', title: __('WhatsApp') },
+      { name: 'erpnext', title: __('ERPNext') },
+    ],
+  },
+  {
+    title: __('Frappe CRM mobile'),
+    opened: false,
+    subArticles: [
+      { name: 'mobile-app-installation', title: __('Mobile app installation') },
+    ],
+  },
+])
 </script>

frontend/src/components/Modals/LeadModal.vue

@@ -49,6 +49,7 @@ import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -58,6 +59,7 @@ const props = defineProps({
 
 const { getUser, isManager } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const show = defineModel()
 const router = useRouter()
@@ -122,7 +124,7 @@ const createLead = createResource({
 const leadStatuses = computed(() => {
   let statuses = statusOptions('lead')
   if (!lead.status) {
-    lead.status = statuses[0].value
+    lead.status = statuses?.[0]?.value
   }
   return statuses
 })
@@ -166,6 +168,7 @@ function createNewLead() {
       isLeadCreating.value = false
       show.value = false
       router.push({ name: 'Lead', params: { leadId: data.name } })
+      updateOnboardingStep('create_first_lead')
     },
     onError(err) {
       isLeadCreating.value = false
@@ -192,7 +195,7 @@ onMounted(() => {
   if (!lead.lead_owner) {
     lead.lead_owner = getUser().name
   }
-  if (!lead.status && leadStatuses.value[0].value) {
+  if (!lead.status && leadStatuses.value[0]?.value) {
     lead.status = leadStatuses.value[0].value
   }
 })

frontend/src/components/Modals/NoteModal.vue

@@ -66,6 +66,7 @@
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { capture } from '@/telemetry'
 import { TextEditor, call } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -91,6 +92,8 @@ const emit = defineEmits(['after'])
 
 const router = useRouter()
 
+const { updateOnboardingStep } = useOnboarding('frappecrm')
+
 const title = ref(null)
 const editMode = ref(false)
 let _note = ref({})
@@ -123,6 +126,7 @@ async function updateNote() {
       },
     })
     if (d.name) {
+      updateOnboardingStep('create_first_note')
       capture('note_created')
       notes.value?.reload()
       emit('after', d, true)

frontend/src/components/Modals/TaskModal.vue

@@ -119,6 +119,7 @@ import { taskStatusOptions, taskPriorityOptions, getFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
 import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, watch, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -144,6 +145,7 @@ const emit = defineEmits(['updateTask', 'after'])
 
 const router = useRouter()
 const { getUser } = usersStore()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const title = ref(null)
 const editMode = ref(false)
@@ -200,6 +202,7 @@ async function updateTask() {
       },
     })
     if (d.name) {
+      updateOnboardingStep('create_first_task')
       capture('task_created')
       tasks.value?.reload()
       emit('after', d, true)

frontend/src/components/Settings/InviteMemberPage.vue

@@ -87,8 +87,11 @@ import {
   FormControl,
   Tooltip,
 } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed } from 'vue'
 
+const { updateOnboardingStep } = useOnboarding('frappecrm')
+
 const invitees = ref([])
 const role = ref('Sales User')
 const error = ref(null)
@@ -120,6 +123,7 @@ const inviteByEmail = createResource({
     role.value = 'Sales User'
     error.value = null
     pendingInvitations.reload()
+    updateOnboardingStep('invite_your_team')
   },
   onError(err) {
     error.value = err?.messages?.[0]

frontend/src/components/Settings/Settings.vue

@@ -52,6 +52,7 @@
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import InviteIcon from '@/components/Icons/InviteIcon.vue'
 import GeneralSettings from '@/components/Settings/GeneralSettings.vue'
 import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
@@ -96,7 +97,7 @@ const tabs = computed(() => {
         },
         {
           label: __('Invite Members'),
-          icon: 'user-plus',
+          icon: InviteIcon,
           component: markRaw(InviteMemberPage),
           condition: () => isManager(),
         },

frontend/src/pages/Deal.vue

@@ -341,6 +341,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
@@ -349,6 +350,10 @@ const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Deal')
+
+const { updateOnboardingStep, isOnboardingStepsCompleted } =
+  useOnboarding('frappecrm')
+
 const route = useRoute()
 const router = useRouter()
 
@@ -699,6 +704,10 @@ function triggerCall() {
 }
 
 function updateField(name, value, callback) {
+  if (name == 'status' && !isOnboardingStepsCompleted.value) {
+    updateOnboardingStep('change_deal_status')
+  }
+
   updateDeal(name, value, () => {
     deal.data[name] = value
     callback?.()

frontend/src/pages/Lead.vue

@@ -361,6 +361,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
@@ -370,6 +371,9 @@ const { isManager } = usersStore()
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getLeadStatus, getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Lead')
+
+const { updateOnboardingStep } = useOnboarding('frappecrm')
+
 const route = useRoute()
 const router = useRouter()
 
@@ -645,6 +649,7 @@ async function convertToDeal() {
     existingOrganizationChecked.value = false
     existingContact.value = ''
     existingOrganization.value = ''
+    updateOnboardingStep('convert_lead_to_deal')
     capture('convert_lead_to_deal')
     router.push({ name: 'Deal', params: { dealId: _deal } })
   }

frontend/src/pages/Welcome.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex flex-col gap-5 justify-center items-center h-full">
+    <div class="font-semibold text-2xl text-ink-gray-8 mb-3">
+      {{ __('Welcome {0}, lets add your first lead', [name]) }}
+    </div>
+    <div class="flex gap-3">
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <div class="flex -space-x-2">
+            <div
+              v-for="i in 3"
+              :key="i"
+              class="bg-surface-gray-3 ring-2 ring-outline-white p-2.5 rounded-full"
+            >
+              <AvatarIcon />
+            </div>
+          </div>
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Start with sample 10 leads') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Add sample data')" />
+      </div>
+      <div
+        class="flex flex-col px-6 pt-13 pb-7 justify-between bg-surface-gray-1 rounded-2xl items-center space-y-2 size-56"
+      >
+        <div class="flex flex-col items-center gap-2.5">
+          <GoogleIcon class="" />
+          <div class="text-p-base text-ink-gray-8 text-center">
+            {{ __('Sync your contacts,email and calenders') }}
+          </div>
+        </div>
+        <Button variant="outline" :label="__('Connect your email')" />
+      </div>
+    </div>
+    <Button
+      variant="ghost"
+      :label="__('Or create leads manually')"
+      @click="showLeadModal = true"
+    />
+  </div>
+  <LeadModal
+    v-if="showLeadModal"
+    v-model="showLeadModal"
+    v-model:quickEntry="showQuickEntryModal"
+  />
+  <QuickEntryModal v-if="showQuickEntryModal" v-model="showQuickEntryModal" />
+</template>
+<script setup>
+import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
+import GoogleIcon from '@/components/Icons/GoogleIcon.vue'
+import LeadModal from '@/components/Modals/LeadModal.vue'
+import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
+import { ref } from 'vue'
+
+const name = ref('John Doe')
+const showLeadModal = ref(false)
+const showQuickEntryModal = ref(false)
+</script>

frontend/src/router.js

@@ -91,6 +91,11 @@ const routes = [
     component: () => import('@/pages/EmailTemplate.vue'),
     props: true,
   },
+  {
+    path: '/welcome',
+    name: 'Welcome',
+    component: () => import('@/pages/Welcome.vue'),
+  },
   {
     path: '/:invalidpath',
     name: 'Invalid Page',

frontend/tailwind.config.js

@@ -3,8 +3,10 @@ module.exports = {
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
-    './node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
-    '../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}',
+    '../node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/frappe-ui/frappe/**/*.{vue,js,ts,jsx,tsx}',
+    '../node_modules/frappe-ui/frappe/**/*.{vue,js,ts,jsx,tsx}',
   ],
   safelist: [{ pattern: /!(text|bg)-/, variants: ['hover', 'active'] }],
   theme: {

frontend/vite.config.js

@@ -8,12 +8,17 @@ import { VitePWA } from 'vite-plugin-pwa'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    frappeui(),
+    frappeui({
-    vue({
+      frappeProxy: true,
-      script: {
+      lucideIcons: true,
-        propsDestructure: true,
+      jinjaBootData: true,
+      buildConfig: {
+        indexHtmlPath: '../crm/www/crm.html',
+        emptyOutDir: true,
+        sourcemap: true,
       },
     }),
+    vue(),
     vueJsx(),
     VitePWA({
       registerType: 'autoUpdate',
@@ -55,39 +60,12 @@ export default defineConfig({
         ],
       },
     }),
-    {
-      name: 'transform-index.html',
-      transformIndexHtml(html, context) {
-        if (!context.server) {
-          return html.replace(
-            /<\/body>/,
-            `
-            <script>
-                {% for key in boot %}
-                window["{{ key }}"] = {{ boot[key] | tojson }};
-                {% endfor %}
-            </script>
-            </body>
-            `
-          )
-        }
-        return html
-      },
-    },
   ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
     },
   },
-  build: {
-    outDir: '../crm/public/frontend',
-    emptyOutDir: true,
-    commonjsOptions: {
-      include: [/tailwind.config.js/, /node_modules/],
-    },
-    sourcemap: true,
-  },
   optimizeDeps: {
     include: [
       'feather-icons',

yarn.lock

@@ -15,6 +15,19 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
+"@antfu/install-pkg@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@antfu/install-pkg/-/install-pkg-1.0.0.tgz#2912a150fc8b35ec912f583f90074ee98f64d66a"
+  integrity sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==
+  dependencies:
+    package-manager-detector "^0.2.8"
+    tinyexec "^0.3.2"
+
+"@antfu/utils@^8.1.0":
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-8.1.1.tgz#95b1947d292a9a2efffba2081796dcaa05ecedfb"
+  integrity sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==
+
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
@@ -947,11 +960,24 @@
     "@floating-ui/core" "^1.6.0"
     "@floating-ui/utils" "^0.2.8"
 
+"@floating-ui/dom@^1.6.13":
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34"
+  integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.9"
+
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@floating-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
+  integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
+
 "@floating-ui/vue@^1.1.0":
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.1.5.tgz#dcbb5d7a2f9035b0c96a9c30cdf794977d360809"
@@ -961,6 +987,15 @@
     "@floating-ui/utils" "^0.2.8"
     vue-demi ">=0.13.0"
 
+"@floating-ui/vue@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.1.6.tgz#1c7e8f257fae5b71a72d10c1746e6b0ba338399c"
+  integrity sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+    "@floating-ui/utils" "^0.2.9"
+    vue-demi ">=0.13.0"
+
 "@headlessui/vue@^1.7.14":
   version "1.7.23"
   resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.23.tgz#7fe19dbeca35de9e6270c82c78c4864e6a6f7391"
@@ -968,6 +1003,32 @@
   dependencies:
     "@tanstack/vue-virtual" "^3.0.0-beta.60"
 
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/utils@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@iconify/utils/-/utils-2.3.0.tgz#1bbbf8c477ebe9a7cacaea78b1b7e8937f9cbfba"
+  integrity sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==
+  dependencies:
+    "@antfu/install-pkg" "^1.0.0"
+    "@antfu/utils" "^8.1.0"
+    "@iconify/types" "^2.0.0"
+    debug "^4.4.0"
+    globals "^15.14.0"
+    kolorist "^1.8.0"
+    local-pkg "^1.0.0"
+    mlly "^1.7.4"
+
+"@internationalized/date@^3.5.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.7.0.tgz#23a4956308ee108e308517a7137c69ab8f5f2ad9"
+  integrity sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
 "@internationalized/date@^3.5.4":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.6.0.tgz#b30d43030bfed1855f20c9503606926d75bfdf64"
@@ -975,7 +1036,7 @@
   dependencies:
     "@swc/helpers" "^0.5.0"
 
-"@internationalized/number@^3.5.3":
+"@internationalized/number@^3.5.0", "@internationalized/number@^3.5.3":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.6.0.tgz#dc6ba20c41b25eb605f1d5cac7d8668e9022c224"
   integrity sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==
@@ -1151,6 +1212,11 @@
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
   integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
 
+"@tanstack/virtual-core@3.13.4":
+  version "3.13.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.4.tgz#31ac7710d102ed59463f922ab088dde5a9e62010"
+  integrity sha512-fNGO9fjjSLns87tlcto106enQQLycCKR4DPNpgq3djP5IdcPFdPAmaKjsgzIeRhH7hWrELgW12hYnRthS5kLUw==
+
 "@tanstack/vue-virtual@^3.0.0-beta.60", "@tanstack/vue-virtual@^3.8.1":
   version "3.11.2"
   resolved "https://registry.yarnpkg.com/@tanstack/vue-virtual/-/vue-virtual-3.11.2.tgz#c1a7f1a3e20cb1eee7a81c58b5b21f6a381cbaab"
@@ -1158,6 +1224,13 @@
   dependencies:
     "@tanstack/virtual-core" "3.11.2"
 
+"@tanstack/vue-virtual@^3.12.0":
+  version "3.13.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/vue-virtual/-/vue-virtual-3.13.4.tgz#0e5e8b6ba03a9a5f27793b2b4325bc4a80b60ad3"
+  integrity sha512-1fPrd3hE1SS4R/9JbX1AlzueY4duCK7ixuLcMW5GMnk9N6WbLo9MioNKiv22V+UaXKOLNy8tLdzT8NYerOFTOQ==
+  dependencies:
+    "@tanstack/virtual-core" "3.13.4"
+
 "@tiptap/core@^2.10.3":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.10.3.tgz#7744abd4a954f35265af351f1be9b545e819c66d"
@@ -1185,6 +1258,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.10.3.tgz#0a17343aaf64679327de87785918bcdb04744edf"
   integrity sha512-PTkwJOVlHi4RR4Wrs044tKMceweXwNmWA6EoQ93hPUVtQcwQL990Es5Izp+i88twTPLuGD9dH+o9QDyH9SkWdA==
 
+"@tiptap/extension-code-block-lowlight@^2.11.5":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block-lowlight/-/extension-code-block-lowlight-2.11.5.tgz#62c05a70ec1f0b47e257a9345253031650ab014b"
+  integrity sha512-EIE+mAGsp8C69dI0Yyg+VH1x36rgyPJc93SfA7h4xFF6Oth18z4YhJtiLaZcwCMyOOVs2efApZ0R3/Fnz2VlqA==
+
 "@tiptap/extension-code-block@^2.10.3":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.10.3.tgz#5ff1b1e563c4eda44677df444c523de1e5258fa4"
@@ -1420,6 +1498,13 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/hast@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
+  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/linkify-it@^5":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
@@ -1462,11 +1547,21 @@
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
+"@types/unist@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
+  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
+
 "@types/web-bluetooth@^0.0.20":
   version "0.0.20"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
   integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
+"@types/web-bluetooth@^0.0.21":
+  version "0.0.21"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz#525433c784aed9b457aaa0ee3d92aeb71f346b63"
+  integrity sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==
+
 "@vitejs/plugin-vue-jsx@^3.0.1":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz#9953fd9456539e1f0f253bf0fcd1289e66c67cd1"
@@ -1608,6 +1703,16 @@
     "@vueuse/shared" "10.11.1"
     vue-demi ">=0.14.8"
 
+"@vueuse/core@^12.5.0":
+  version "12.8.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-12.8.2.tgz#007c6dd29a7d1f6933e916e7a2f8ef3c3f968eaa"
+  integrity sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.21"
+    "@vueuse/metadata" "12.8.2"
+    "@vueuse/shared" "12.8.2"
+    vue "^3.5.13"
+
 "@vueuse/integrations@^10.3.0":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.11.1.tgz#e4af23b871773c5ef5b8fb939f959f2fc728557e"
@@ -1622,6 +1727,11 @@
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.1.tgz#209db7bb5915aa172a87510b6de2ca01cadbd2a7"
   integrity sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==
 
+"@vueuse/metadata@12.8.2":
+  version "12.8.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-12.8.2.tgz#6cb3a4e97cdcf528329eebc1bda73cd7f64318d3"
+  integrity sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==
+
 "@vueuse/shared@10.11.1", "@vueuse/shared@^10.11.0":
   version "10.11.1"
   resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.1.tgz#62b84e3118ae6e1f3ff38f4fbe71b0c5d0f10938"
@@ -1629,6 +1739,18 @@
   dependencies:
     vue-demi ">=0.14.8"
 
+"@vueuse/shared@12.8.2", "@vueuse/shared@^12.5.0":
+  version "12.8.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-12.8.2.tgz#b9e4611d0603629c8e151f982459da394e22f930"
+  integrity sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==
+  dependencies:
+    vue "^3.5.13"
+
+acorn@^8.14.0:
+  version "8.14.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.1.tgz#721d5dc10f7d5b5609a891773d47731796935dfb"
+  integrity sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==
+
 acorn@^8.8.2:
   version "8.14.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
@@ -1967,6 +2089,16 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+confbox@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.8.tgz#820d73d3b3c82d9bd910652c5d4d599ef8ff8b06"
+  integrity sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
+
+confbox@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.1.tgz#ae39f2c99699afa451d00206479f15f9a1208a8b"
+  integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -2050,7 +2182,7 @@ dayjs@^1.11.13:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
   integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4, debug@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
   integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
@@ -2099,6 +2231,18 @@ defu@^6.1.4:
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
   integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
 
+dequal@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+devlop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -2313,6 +2457,11 @@ events@3.3.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
+exsolve@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.4.tgz#7de5c75af82ecd15998328fbf5f2295883be3a39"
+  integrity sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==
+
 fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -2346,6 +2495,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fdir@^6.4.3:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.3.tgz#011cdacf837eca9b811c89dbb902df714273db72"
+  integrity sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==
+
 feather-icons@^4.28.0:
   version "4.29.2"
   resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.29.2.tgz#b03a47588a1c400f215e884504db1c18860d89f8"
@@ -2388,15 +2542,16 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-frappe-ui@^0.1.111:
+frappe-ui@^0.1.118:
-  version "0.1.111"
+  version "0.1.118"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.111.tgz#c7615aa8f02da9af0596074352150d813d0f4b3d"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.118.tgz#36fb108d63194fe9b06078a84576e32af54d06b8"
-  integrity sha512-JCh/SQwcbsQQxTZIFFzEULPgp2QAQZe+vwrM2jqekIx4dBgYW2H1KgXSlf+uO2ng2vqk4Q1MiStA3svHQEXsLQ==
+  integrity sha512-t29fYu22jfPoi/pFAbPX4//bh5XEgqbECHttjsOsPboC8BsnyYUtQSA/pY6PP/M/hMAW74QslnTK6iU/1OuSaQ==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"
     "@tailwindcss/forms" "^0.5.3"
     "@tailwindcss/typography" "^0.5.16"
+    "@tiptap/extension-code-block-lowlight" "^2.11.5"
     "@tiptap/extension-color" "^2.0.3"
     "@tiptap/extension-highlight" "^2.0.3"
     "@tiptap/extension-image" "^2.0.3"
@@ -2418,13 +2573,18 @@ frappe-ui@^0.1.111:
     dayjs "^1.11.13"
     feather-icons "^4.28.0"
     idb-keyval "^6.2.0"
+    lowlight "^3.3.0"
+    lucide-static "^0.479.0"
     ora "5.4.1"
     prettier "^3.3.2"
     radix-vue "^1.5.3"
+    reka-ui "^2.0.2"
     showdown "^2.1.0"
     socket.io-client "^4.5.1"
     tippy.js "^6.3.7"
     typescript "^5.0.2"
+    unplugin-icons "^22.1.0"
+    unplugin-vue-components "^28.4.1"
 
 fs-extra@^9.0.1:
   version "9.1.0"
@@ -2550,6 +2710,11 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+globals@^15.14.0:
+  version "15.15.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.15.0.tgz#7c4761299d41c32b075715a4ce1ede7897ff72a8"
+  integrity sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==
+
 globalthis@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
@@ -2611,6 +2776,11 @@ hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+highlight.js@~11.11.0:
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
+  integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
+
 html-tags@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
@@ -2962,6 +3132,11 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
+kolorist@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -2989,6 +3164,15 @@ linkifyjs@^4.1.0:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.2.0.tgz#9dd30222b9cbabec9c950e725ec00031c7fa3f08"
   integrity sha512-pCj3PrQyATaoTYKHrgWRF3SJwsm61udVh+vuls/Rl6SptiDhgE7ziUIudAedRY9QEfynmM7/RmLEfPUyw1HPCw==
 
+local-pkg@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-1.1.1.tgz#f5fe74a97a3bd3c165788ee08ca9fbe998dc58dd"
+  integrity sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==
+  dependencies:
+    mlly "^1.7.4"
+    pkg-types "^2.0.1"
+    quansync "^0.2.8"
+
 lodash.castarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
@@ -3032,6 +3216,15 @@ loglevel@1.6.7:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
   integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
 
+lowlight@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.3.0.tgz#007b8a5bfcfd27cc65b96246d2de3e9dd4e23c6c"
+  integrity sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    highlight.js "~11.11.0"
+
 lru-cache@^10.2.0:
   version "10.4.3"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
@@ -3044,6 +3237,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-static@^0.479.0:
+  version "0.479.0"
+  resolved "https://registry.yarnpkg.com/lucide-static/-/lucide-static-0.479.0.tgz#820318a03ab207a6242520aaf2156ff3384fd3e2"
+  integrity sha512-E+w3/8lKFpey3lZNKZfzHQGX+t/CH/afpPDdQxjBgStZ2bXY+CxI5KFX9TW818gYndLjV43fZJ7FqAO9kTCK4A==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -3051,7 +3249,7 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.30.11:
+magic-string@^0.30.11, magic-string@^0.30.17:
   version "0.30.17"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
   integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
@@ -3148,6 +3346,16 @@ minimatch@^9.0.4:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
+mlly@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.7.4.tgz#3d7295ea2358ec7a271eaa5d000a0f84febe100f"
+  integrity sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==
+  dependencies:
+    acorn "^8.14.0"
+    pathe "^2.0.1"
+    pkg-types "^1.3.0"
+    ufo "^1.5.4"
+
 ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -3219,6 +3427,11 @@ object.assign@^4.1.5:
     has-symbols "^1.1.0"
     object-keys "^1.1.1"
 
+ohash@^1.1.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ohash/-/ohash-1.1.6.tgz#9ff7b0271d7076290794537d68ec2b40a60d133e"
+  integrity sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -3258,6 +3471,13 @@ package-json-from-dist@^1.0.0:
   resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
   integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
 
+package-manager-detector@^0.2.8:
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.11.tgz#3af0b34f99d86d24af0a0620603d2e1180d05c9c"
+  integrity sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==
+  dependencies:
+    quansync "^0.2.7"
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -3281,6 +3501,11 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
+pathe@^2.0.1, pathe@^2.0.2, pathe@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
+  integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
+
 picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
@@ -3291,6 +3516,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -3309,6 +3539,24 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
+pkg-types@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.3.1.tgz#bd7cc70881192777eef5326c19deb46e890917df"
+  integrity sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==
+  dependencies:
+    confbox "^0.1.8"
+    mlly "^1.7.4"
+    pathe "^2.0.1"
+
+pkg-types@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-2.1.0.tgz#70c9e1b9c74b63fdde749876ee0aa007ea9edead"
+  integrity sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==
+  dependencies:
+    confbox "^0.2.1"
+    exsolve "^1.0.1"
+    pathe "^2.0.3"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -3554,6 +3802,11 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
+quansync@^0.2.7, quansync@^0.2.8:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.8.tgz#2e893d17bb754ba0988ea399ff0bc5f2a8467793"
+  integrity sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -3678,6 +3931,22 @@ regjsparser@^0.12.0:
   dependencies:
     jsesc "~3.0.2"
 
+reka-ui@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/reka-ui/-/reka-ui-2.1.0.tgz#ad298840b582f388d281cf0e1a46ad8775915d82"
+  integrity sha512-w4kEDEyXhIqv4QeFJeiuBc4mQP37hH/UTRpEb9dMbPdR49JG5TcV/s0+ntNRONUUW4LDLX7E1ZPcwBw5hnu0yw==
+  dependencies:
+    "@floating-ui/dom" "^1.6.13"
+    "@floating-ui/vue" "^1.1.6"
+    "@internationalized/date" "^3.5.0"
+    "@internationalized/number" "^3.5.0"
+    "@tanstack/vue-virtual" "^3.12.0"
+    "@vueuse/core" "^12.5.0"
+    "@vueuse/shared" "^12.5.0"
+    aria-hidden "^1.2.4"
+    defu "^6.1.4"
+    ohash "^1.1.4"
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
@@ -3939,7 +4208,16 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4023,7 +4301,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4139,6 +4424,19 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+tinyexec@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
+tinyglobby@^0.2.12:
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.12.tgz#ac941a42e0c5773bd0b5d08f32de82e74a1a61b5"
+  integrity sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==
+  dependencies:
+    fdir "^6.4.3"
+    picomatch "^4.0.2"
+
 tippy.js@^6.3.7:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
@@ -4230,6 +4528,11 @@ uc.micro@^2.0.0, uc.micro@^2.1.0:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
   integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
 
+ufo@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"
+  integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
+
 unbox-primitive@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
@@ -4280,6 +4583,47 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
+unplugin-icons@^22.1.0:
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/unplugin-icons/-/unplugin-icons-22.1.0.tgz#5a6fe3d751e50f1c937e289857b0418e6855d92a"
+  integrity sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==
+  dependencies:
+    "@antfu/install-pkg" "^1.0.0"
+    "@iconify/utils" "^2.3.0"
+    debug "^4.4.0"
+    local-pkg "^1.0.0"
+    unplugin "^2.2.0"
+
+unplugin-utils@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/unplugin-utils/-/unplugin-utils-0.2.4.tgz#56e4029a6906645a10644f8befc404b06d5d24d0"
+  integrity sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==
+  dependencies:
+    pathe "^2.0.2"
+    picomatch "^4.0.2"
+
+unplugin-vue-components@^28.4.1:
+  version "28.4.1"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-28.4.1.tgz#9d6d9555bbe98ea41d673b886e1e638f36200501"
+  integrity sha512-niGSc0vJD9ueAnsqcfAldmtpkppZ09B6p2G1dL7X5S8KPdgbk1P+txPwaaDCe7N+eZh2VG1aAypLXkuJs3OSUg==
+  dependencies:
+    chokidar "^3.6.0"
+    debug "^4.4.0"
+    local-pkg "^1.0.0"
+    magic-string "^0.30.17"
+    mlly "^1.7.4"
+    tinyglobby "^0.2.12"
+    unplugin "^2.2.0"
+    unplugin-utils "^0.2.4"
+
+unplugin@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-2.2.0.tgz#2659dee5c6b3de9b7ea671228c18263886ae58b6"
+  integrity sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==
+  dependencies:
+    acorn "^8.14.0"
+    webpack-virtual-modules "^0.6.2"
+
 upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
@@ -4367,6 +4711,11 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-virtual-modules@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
+  integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"