From c8421d8c08d3e93fe57ec46d0fb64e7a2259be73 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 8 Mar 2025 15:22:53 +0530
Subject: [PATCH 01/43] feat: added welcome page

---
 frontend/src/components/Icons/GoogleIcon.vue | 29 ++++++++++
 frontend/src/components/Modals/LeadModal.vue |  4 +-
 frontend/src/pages/Welcome.vue               | 61 ++++++++++++++++++++
 frontend/src/router.js                       |  5 ++
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Icons/GoogleIcon.vue
 create mode 100644 frontend/src/pages/Welcome.vue

diff --git a/frontend/src/components/Icons/GoogleIcon.vue b/frontend/src/components/Icons/GoogleIcon.vue
new file mode 100644
index 00000000..5e0d8aa5
--- /dev/null
+++ b/frontend/src/components/Icons/GoogleIcon.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <rect width="40" height="40" rx="20" fill="url(#pattern0_6527_335840)" />
+    <defs>
+      <pattern
+        id="pattern0_6527_335840"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use xlink:href="#image0_6527_335840" transform="scale(0.003125)" />
+      </pattern>
+      <image
+        id="image0_6527_335840"
+        width="320"
+        height="320"
+        preserveAspectRatio="none"
+        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAYAAADNkKWqAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABXBSURBVHgB7d17bJ7lecfxy8c4fp04IbETIGACWYAsLcfWbCWDopaECKZR0g2prN2Abuo2WEv/6Ni6PwaFThPdGEirtgqYUCuBypi0TE3YunQsASkQCoUoadJsOQAlB4fYiV/H8XHP9TgvcezX9nt4Dvf9XN+P9MjGzT99IT9f133d9/3UjAYEAAyqFQAwigAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhFAAIwiwAEYBYBCMAsAhCAWQQgALMIQABmEYAAzCIAAZhVL0DEBg8fDJ+RfG/4DB7+IPy5fj8cPNOpy7VIbfCohvZzw+/1aWhfHD5AlAhAVEQD7uT2t8Jw0+8H9u4Jw60QdnHRUNQg1FCctXRZ8PyK1Af/3BR8D5SrZjQgwDT6g3DTgOvb/mb4dSAIuZEZKrk0NK+86nQoLpPGIBgJRcyEAMQkGngng7DLb90SfP8LJ8OuFFolaijOXnll8FxFIGISAhBhwPUGYacVXu/Wzd4G3ky0ddYgbOlcFQTjlR+tNcIuAtAoDbmeTRvCKk+DzyINwpbO68OvhKFNBKAhGnp9weCie/0PzYbeVObedMtHgQg7CEADNPTyQWurFV9W29uoFNrkBXf+PttuDCAAM0zX9aj2KqcDlLk3rQmrQ2QTAZgxWuEdC0JPH6q9aGglqBUhQZg9BGBGEHzx0yDUENSH9jgbCEDPEXzJIwizgwD0FMGXPlpj/xGAHtLQO/rcMwSfIwhCfxGAHtHtLB8GwcdU1016Bvm8Bx+lLfYIAegBrfS04tPKD+6bd9vnZX7wEITuIwAdR7vrJ9piPxCAjtI79g498W3aXc9pAHKqxF0EoIOo+rKFatBdBKBDNPA+CKo+PbeL7NG1wYVBEHLzjDsIQEfohPfgE4/KUND6Iru0GlzyrSdoiR1BADpAW94jTz0psKPtnvvCSTHSRQCmSFvew0HwHd+0QWCPtsTtQRAiPQRgSnTK++4376flNU7fanfeg4/QEqeEAEyBvnTovSD8mPJCsS6YHgIwYdruHgwmvcB4OhlefP+D4bX8SA4BmCDd26cPMBWGI8mqFSSC8EMpdDcAp3+SUy+Inf5HzUUGKIWeGNF3kSAZBGDMdL2PbS4oha4BclwuWbTAMSL8UCrCLx1UgDEh/FCK2twcab/nTwi/lBCAMTjC6Q6UQMNvybf+XpqWLhOkgxY4YtzcjFIQfm6gAowQW11Qiob2c8Pw4+RH+qgAI1K4xBSYDuHnFgIwAnq2l+usMBPCzz0EYJX0VpdffvvPBZgO4ecmzgJXQW9z2fe1u7nSCtMi/NzFEKQKuuZH+GE6et/fBUH48R4QN9ECV4jtLpgJ4ec+ArACuu7HxBfT0QsNCD/30QKXSdf99Cp7zEw3+zYG6171waNB0HD6a13w82KG8yfCz1cf/SWjX3XCPhL83Cd6rE3P9sJ9BGCZ9CVGrPtNpgv9s1deGbR9y8Lvx75Gs+hfCMJTe38hJ7e/FX7+/cH3LiL8/MIUuAxcZ3+GVnctndeHrZ4GX9ITTq0QTwWh2Lt1c/hO5aHDH0ja9C4/feAPArBEvMVtLPRab1ojuc5VQfBdKS7RENRfUGmFIeHnJwKwRJavt9Iq75zwpmK3Qm8qhTBM6t8X4ecvArAEFltfrfbm37YufEGPr5NMrdq71/9QTmzdEltVSPj5jQCcgbXWNwvBV4z+Eut67p8jDULCz38E4AystL5ZDb6JdP9mz6aNVQchV9hnAwE4Da3+9v7Bb0vWaehpJWNl025hI3ulv9gIv+wgAKfxf0H4Zbn11aNa+iJuX4YbURtb3vjTkqtB3t+RPQTgFLI8+NC/yAvu/L2w8kNpN3lzhX02EYBTyGr1p1XfoqCF4y/y2aarBgm/7OIyhCK0+sti+GnFdwF/kYvSkywX/9Pzk6piPdbX8XdP8ZllFGeBJ9BKoCtjN73Q8pZO10T18gZ9xQEXmWYfAThB1qo//Ut87oOPUMGUQX9R6PlmvbWG8Ms2AnCckf6DcvKdjZIVVDCVawrWSpF9rAGOM3joJWm9uUvm/Fqd+E6HHbp2RfgBUyMAxxk8+B/h15bramXe6jqpnSVe4ip2oDQE4GmDB1+S0f4za3+zV9TKwrvqpW5ujfiE8ANKRwCedmr/s5N+puGnIZi7yo+WmPADykMAyuTqbzxtg+feWOv8uqAOPM4Lpr2EH1A6AlDGhh8z0XXB9nvcbImZ9gKVMR+AuvVluPtnJf1ZDb8Fn6+TpmVufWyEH1AZ8wE4sO/Zsv68huD82+qcaYn15ALhB1TGfAAO9ZRW/U2kLfH830y3JdYTCxxvAypnOgCHul6ZcvhRiqZLxlriNEJQ1/20+gNQOdMBqNPfamn46XAk6a0yuu4HoDpmA3B0qFeGjr4iUdGtMnNvTOb0iF5fz7ofUD2zAajtb9RyV8V/ekRbX95EBkSDAIxY4fSIHqWLA60vEB2TARh1+zuRtsF6mULUW2X0ZTy0vkB0TAZgqRufq6VbZaJqiWl9geiZDMC42t9iGtrGtso0XlDdRz33pjVUf0DEbAZgTzIVYEF4hG5d5S2xVn+8ixaInrkAHOndU9Xm52pUenqE6g+Ih7kAHOpOtvqbqNzTI1R/QHzMBeBwygGoyjk9om8no/oD4mEvAHvSD8CCUk6PMPkF4mMqAMP1v6Feccl0p0daOldR/QExMhWAw73/Ky6a6vSIDj8AxMdYAO4RV008PaLDD60AAcSnXgwZybtZAY6nW2VmBZPikd4rBUC8TAWgCxPgUujpkebPrBULtu4ekK27BgXp6ry0QTqXN4o1ZgJwxOH2d6Ka+hapm3eFWLD30LD85J1TgpQFMziLAWhmDXCk/5D4oq7VRvjBHfn+UbHITAC6PACZqH7hpwRI0pGeYbHITgXo6BaYYqy0v3AHFWDGjQ67tQF6KrVNi8MHSNLhnhGxiArQMbW5SwRIQ77fXgjaqQAdOwI3FdpfpCVvcBhvIgBHUrr/rxJ1LcsESEP+lL11QALQMbUttMBIh8VBiI0WeCgvPtAN0PoAaWANMKN8Wf+rYfqLFFEBZpQvLXDtrEUCIDkm3wrnqpoG2l+kx+JeQFpgh9RQAQKJMjIE8SQAGYAAiaIFdggBCCSLAARgFgEIINTHSRAAVvWyDxCAVS1NNWINAQgg1DyLAESKfNmvCGSFjQD0ZHsJAQgky0QA+rK/bvSUP2+uA7KAFtgho4NUgECSTASgLy8ZGqECRIraW+3VQ7TADhn16OZqIAuMVIB+3LKiQxCfru9HtrTPqxNrmAI7xqcXuAO+Yw3QMVSASEuOkyDZVTPLk0FIngoQ6WifSwBmli/XzQ93/0yANOSamAJnVl3uYvGBtsC0wUiaxfZXmQnA2pZl4guqQCTN4h5AZacF9mgSPNxDACJZOYM3wSg7LfC8K8QXQ12vCJCkpYvrxSI7LXDTYn9OhAz10gYjUW20wNlX48l+wF2nZsnGA28JkBTWAA2oa/24uO6/8i3y2IcL5MU9rwqQFIvH4JStAHR4Etw3Wiv/cOwcee743PCf8wN9suPwTgGSYHETtLIVgI4OQt4dbJCHj7TJm/1NZ/38he3/KkDcli6qM7kJWpka/RQGIS5dPa8t77/1zpG+kcm/gbUC7Bvsk+aGZsmqzuWNQfuVzb98+f5Refo/+8R1VrfAKHOz77rWK2ToaPrbTLTlXX9ijvw4n5v2z/1o10uybuXtklVafeiTRVt3D4gPrG6BUebqXhfa4KPD9fLY0QUzhp/asHtjWAXCP695EoC/eiEBaEZ9ygGoW1we6moL1/1KocMQrQLhn627B8UHVifAylwA6pngtDZEa8urW1yKrfdNhyrQP5vePhWuAbpOL0FY2k4AmlK/4NclSWMt78Jw2FEJqkD//CQIQB9YDj9lMwAXXi9J0ZZX1/t2DTRKNagC/XG4e0S2HxgSH1gegCiTAaiDkCTa4MKpjq7h6n/LahX4wjsvCtz3/BZ/flFZHoAokwGo4VfbconERbe4PNM976NTHVH50e6XOB3iOK3+Nr3tx/RXrSQAbWpYtFrioOt9eqrj1ZPxbF5+9s3vC9zlU/Vn+QRIgdn/9/ULPxV5G/xqX3O4xSWKlncq+44d4Iico7yr/jpK24qVZWYDMOo2+PnjrfJMz7yyt7hU4oXtL8q+7v0Ct/hU/Snr63/KdP07q+NLUi1tebXqK+VUR5S+s/lxpsIO8a36U9bX/5TpAKx2GlzuqY4oHcl3MRV2yF/+4Lj4RMPP+vqfMv8JNJz/OalEpac6oqRTYX2Qruc2n5TDPSPik09/fJaAAJSGYBhSDt3iUs2pjqj9C+uBqdLW9/kgAH3DAGSM+QDUs8Gl3hBTuLi02lMdUdIN0roeqC0xkudb66t0+4vVd4BMxKcgpQ1D9FRH3FtcKqXh99CmRxiKJEwvO/Wt9VW0v2cQgHJ6GDLFG+PiOtURNUIwWetf65f1r/eLj/QWbowhAE9rWHTzpJ/FfaojarpJmhCM395Dw/L0j/38jHX6S/t7Bp/EaY1L7jhrS0wSpzriQAjGS4cef/3CCfEV7e/ZCMDTNPwKW2KSPNURB0IwHhp+OvTwcd2voHM509/xCMBxtAr87skViZ/qiIOG4Dc2/gXT4YhkIfy0+mPz89n4NMbRKvDiJZ+WrCgMRgjB6mQh/NRNtL+TEIATrF2+RnIN/leABRp+963/GidGKqQDjwee7vE+/HTvH2d/JyMAJ2hubJZbLr1ZsubZn34/fFA6fbGRVn4+vNxoJrd+okkwGQFYhFaBbbk2yRqtArUapCWemW5yfvLf85kIP932QvtbHAFYhFaB61beLllUaIm5VLU4Xe974Kkebzc5F/M7q2YLiiMAp3DD0lWyov0yySq9VJVq8Gx6ukPX+3TdLyu0+uPig6nVjAYERekLiB7a9KhknYb9upWfC9r+hWKR/nt+4e2N8vbOy2T4RKdkyZ1B9UcFODUCcAY6OLAwQdXwu2Hpb8jaS1dLc4MfR/+qFQZfsBQw/k17Q8fWyPCxWyQLtPp7+K65HH2bBgE4g76BvqBVfEDyg3mxQINQq8EV7ZdntiIsFnzjjZ46XwYP3SujQ+eIz6j+ZkYAlmDbe2/IY1seF0s0/DQEs9Ia67HAHYd2lvxuZQ2/Wd1flhPHzxMfadX3j388TzA9ArBEj21+XLa9/4ZYdO2Sa+TGYJ3w2vOvEd9o2O04/HPZsGtjUMWXfzba15b4vltzbH0pAQFYImutcDGFqnBsQn65uEpfEbDtvZ+eDr+Zq72ZNA1cJ8cPrvamJab6Kx0BWAaLrfBUCmFYeNJsk7W9ff29bbK/+0Dw9Y1YtvZo+A3+8j4vQvBv722Vpe1+XeOWFgKwTFamwuXSAOyY3yEr2i6Xi+ZfGDwdsUyTNez2Hdsf3nazP6j0tMJLci/j0NHbZbjnRnGV3vhy/63ZOcseNwKwTNoKf+OlbwZ/6Y4IppcLArCtZaEszLWNfR+EZHNDTnKNZyaTucbcWUFZ+FzzAyeDsMuH4aZrd13Bz4/0dlW0jhe1oZ4bZPhoZa9TjRPbXspHAFZAq4+HNz1qej3QOhdbYgYf5eNXRQW0xbvjY9k8K4zS1NR/KA3nPSlzFmwXF2jrS/iVjwCs0Nrlq8MHdmkIDrR+T+rmb5A0act7JxueK0IAVkE3CV80r0NgW/38jdJw7pNhIKZBT3uw7lcZPrUq6LVZX1/11UzeHYjy1M7eE7bEtY3vS5Ju+2QTrW8VCMAq6WTz69d/NVPX6KMy4brgkr9JrCXWqu/uz9i4uCIuBGAEdCjyxau/IIDSlri+7QdSU3tS4lLY8oLqEIAR0eNhX7z6LgFU3ZzXwmowrnXBuz/bzLpfBPgEI6RT4axepY/yafg1akvc+t8SJZ34di5vFFSPjdAx0OvmeecGxovq9IgOPVj3iw4VYAx0ewx7BDFefevL0njhX1XVEut7fQm/aBGAMdH1QF0XBAoKp0fqmt+RcumLzf9s3RxBtGiBY0Y7jGLKuWiVSw7iQwAmgBBEMSMnl8nQkS9Me6EC4RcvAjAhhCCK0fAbOnivjAycP+l/I/ziRwAmiBDEVCa2xIRfMgjAhOm1+t/d+j3uEsQkwyc+GW6VuaitJRx4EH7xIwBToLccP7TpUW6VxiTXLP6s/NF1vyu5phpB/AjAlBCCmEj3j3KSKFkEYMp4yRL0JiG9TIN9o8kjAB2gAahBCHv0Lkm9Tk1vFELyCEBH0BLboxXfl66+K5bXh6I0BKBD9JWbulWGljjbtOW942O/JWuXrxGkiwB00Mt7N4f7BakGs2dF+2Xylc4/DG8SR/oIQEdpS6zVoIYhskEnvDrphTsIQMdRDfqPqs9dBKAHtBrcsGsja4OeYa3PfQSgRzQIv7P5cdnXvV/gtrWXrg7bXSa8biMAPURb7C5tdzX4VrRfLnAfAegxgtAduqH5K51fJvg8QwB6Ttvil/f+T/BsIQhToMGn012OsfmJAMwIgjBZBF82EIAZRGscH9b4soUAzDANQq0Kdxz+uaA61y65OtzOQvBlCwFoQOFUiQYhVWHpdOOytrhrL13DdpaMIgCN0Sv5X3//DY7YTUE3L99w8fVy7fnXUO0ZQAAa1TfYJ69rGAbPtiAQLdPQ0xZXq72L5ndQ7RlCACIMwx2HdoaVoZU2WdvbTyy5Jqz0CD27CEBMsu/YgSAId4bPziAQs/AGu0KV1zGvIww+LiaAIgAxIw3E/d37w2ffseDrsXedDkUNu7bcAlmx6PIg8C4M1vJWEHgoigBERTQUu4JWWS9m0Cmzts1jX7skKRpquaB17QhaWK3sco2zCTuUhQBE5AqBOPb9kY9CUdca8wN9Rf78mTXH5qB6yzWeWY8rhNmZr23ho3+GdTtUiwAEYFatAIBRBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwCwCEIBZBCAAswhAAGYRgADMIgABmEUAAjCLAARgFgEIwKz/BxwpTYNofGaMAAAAAElFTkSuQmCC"
+      />
+    </defs>
+  </svg>
+</template>
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index dbe21ba6..b7e4f99e 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -122,7 +122,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
 })
@@ -192,7 +192,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
   }
 })
diff --git a/frontend/src/pages/Welcome.vue b/frontend/src/pages/Welcome.vue
new file mode 100644
index 00000000..d03f8aeb
--- /dev/null
+++ b/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>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 06e5ce79..e5665630 100644
--- a/frontend/src/router.js
+++ b/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',

From e055c479424a5905a8bafa2895ef7aa36e2c9290 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 8 Mar 2025 16:13:05 +0530
Subject: [PATCH 02/43] feat: added help modal with minimize & maximize
 functionality and added in sidebar

---
 frontend/src/components/Icons/HelpIcon.vue    | 16 ++++++++++
 .../src/components/Layouts/AppSidebar.vue     | 18 ++++++++++--
 frontend/src/components/Modals/HelpModal.vue  | 29 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Icons/HelpIcon.vue
 create mode 100644 frontend/src/components/Modals/HelpModal.vue

diff --git a/frontend/src/components/Icons/HelpIcon.vue b/frontend/src/components/Icons/HelpIcon.vue
new file mode 100644
index 00000000..97c09698
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index cf9ea854..360c5a9a 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -74,6 +74,15 @@
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <TrialBanner v-if="isFCSite" />
+      <SidebarLink
+        :label="__('Help')"
+        :isCollapsed="isSidebarCollapsed"
+        @click="showHelpModal = !showHelpModal"
+      >
+        <template #icon>
+          <HelpIcon class="h-4 w-4" />
+        </template>
+      </SidebarLink>
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -81,9 +90,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,6 +101,7 @@
     </div>
     <Notifications />
     <Settings />
+    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
   </div>
 </template>
 
@@ -109,10 +119,12 @@ 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'
 import SignupBanner from '@/components/SignupBanner.vue'
+import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
   unreadNotificationsCount,
@@ -233,4 +245,6 @@ function getIcon(routeName, icon) {
       return PinIcon
   }
 }
+
+const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
new file mode 100644
index 00000000..21eddbe6
--- /dev/null
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-show="show"
+    class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col rounded-lg bg-surface-modal shadow-2xl"
+    :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
+    @click.stop
+  >
+    <div class="flex justify-between">
+      <div></div>
+      <div>
+        <Button @click="minimize = !minimize" variant="ghost">
+          <MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
+          <MinimizeIcon v-else class="h-3.5 w-3.5" />
+        </Button>
+        <Button variant="ghost" @click="show = false">
+          <FeatherIcon name="x" class="h-3.5" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
+import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
+import { ref } from 'vue'
+
+const show = defineModel()
+const minimize = ref(false)
+</script>

From 56c3692a041f4d236fa35ccae99284e2a51ef3f7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 8 Mar 2025 16:48:24 +0530
Subject: [PATCH 03/43] fix: show getting started banner in sidebar if not
 completed

---
 .../src/components/GettingStartedBanner.vue   | 33 +++++++++++++++++++
 frontend/src/components/Icons/StepsIcon.vue   | 16 +++++++++
 .../src/components/Layouts/AppSidebar.vue     | 17 +++++++++-
 frontend/src/components/Modals/HelpModal.vue  |  4 +++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/GettingStartedBanner.vue
 create mode 100644 frontend/src/components/Icons/StepsIcon.vue

diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
new file mode 100644
index 00000000..fd06f678
--- /dev/null
+++ b/frontend/src/components/GettingStartedBanner.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+  >
+    <div class="inline-flex gap-2">
+      <StepsIcon class="h-4 my-0.5" />
+      <div class="flex flex-col text-p-sm gap-0.5">
+        <div class="text-ink-gray-9 font-medium">
+          {{ __('Gettings started') }}
+        </div>
+        <div class="text-ink-gray-7">{{ __('4/10 steps') }}</div>
+      </div>
+    </div>
+    <Button
+      :label="__('Complete now')"
+      theme="blue"
+      @click="emit('completeNow')"
+    />
+  </div>
+</template>
+<script setup>
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
+
+const props = defineProps({
+  isSidebarCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['completeNow'])
+</script>
diff --git a/frontend/src/components/Icons/StepsIcon.vue b/frontend/src/components/Icons/StepsIcon.vue
new file mode 100644
index 00000000..94d2efab
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 360c5a9a..c685fd77 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -74,7 +74,13 @@
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <TrialBanner v-if="isFCSite" />
+      <GettingStartedBanner
+        v-if="!isOnboardingStepsCompleted"
+        :isSidebarCollapsed="isSidebarCollapsed"
+        @completeNow="showHelpModal = true"
+      />
       <SidebarLink
+        v-else
         :label="__('Help')"
         :isCollapsed="isSidebarCollapsed"
         @click="showHelpModal = !showHelpModal"
@@ -101,7 +107,11 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      :isOnboardingStepsCompleted="isOnboardingStepsCompleted"
+    />
   </div>
 </template>
 
@@ -124,6 +134,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
 import SignupBanner from '@/components/SignupBanner.vue'
+import GettingStartedBanner from '@/components/GettingStartedBanner.vue'
 import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
@@ -246,5 +257,9 @@ function getIcon(routeName, icon) {
   }
 }
 
+const isOnboardingStepsCompleted = useStorage(
+  'isOnboardingStepsCompleted',
+  false,
+)
 const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 21eddbe6..9bf0f9bb 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -24,6 +24,10 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import { ref } from 'vue'
 
+const props = defineProps({
+  isOnboardingStepsCompleted: Boolean,
+})
+
 const show = defineModel()
 const minimize = ref(false)
 </script>

From b5add306c3859fd389d7cedaa35e06edc9c6553a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 13:43:42 +0530
Subject: [PATCH 04/43] fix: added steps with icon in help modal

---
 .../src/components/GettingStartedBanner.vue   |  7 +-
 frontend/src/components/Icons/ConvertIcon.vue | 16 ++++
 frontend/src/components/Icons/InviteIcon.vue  | 16 ++++
 frontend/src/components/Modals/HelpModal.vue  | 72 ++++++++++++++---
 frontend/src/components/Settings/Settings.vue |  3 +-
 frontend/src/composables/onboarding.js        | 80 +++++++++++++++++++
 6 files changed, 181 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/Icons/ConvertIcon.vue
 create mode 100644 frontend/src/components/Icons/InviteIcon.vue
 create mode 100644 frontend/src/composables/onboarding.js

diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
index fd06f678..a5aaa263 100644
--- a/frontend/src/components/GettingStartedBanner.vue
+++ b/frontend/src/components/GettingStartedBanner.vue
@@ -9,7 +9,9 @@
         <div class="text-ink-gray-9 font-medium">
           {{ __('Gettings started') }}
         </div>
-        <div class="text-ink-gray-7">{{ __('4/10 steps') }}</div>
+        <div class="text-ink-gray-7">
+          {{ __('{0}/{1} steps', [stepsCompleted, totalSteps]) }}
+        </div>
       </div>
     </div>
     <Button
@@ -21,6 +23,7 @@
 </template>
 <script setup>
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
+import { useOnboarding } from '@/composables/onboarding'
 
 const props = defineProps({
   isSidebarCollapsed: {
@@ -30,4 +33,6 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['completeNow'])
+
+const { stepsCompleted, totalSteps } = useOnboarding()
 </script>
diff --git a/frontend/src/components/Icons/ConvertIcon.vue b/frontend/src/components/Icons/ConvertIcon.vue
new file mode 100644
index 00000000..e25a8eaf
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Icons/InviteIcon.vue b/frontend/src/components/Icons/InviteIcon.vue
new file mode 100644
index 00000000..7a3a4e7d
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 9bf0f9bb..a2ea75b4 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -1,20 +1,64 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
     :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
     @click.stop
   >
-    <div class="flex justify-between">
-      <div></div>
-      <div>
-        <Button @click="minimize = !minimize" variant="ghost">
-          <MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
-          <MinimizeIcon v-else class="h-3.5 w-3.5" />
-        </Button>
-        <Button variant="ghost" @click="show = false">
-          <FeatherIcon name="x" class="h-3.5" />
-        </Button>
+    <div class="overflow-hidden flex flex-col gap-4">
+      <div class="flex justify-between">
+        <div></div>
+        <div>
+          <Button @click="minimize = !minimize" variant="ghost">
+            <MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
+            <MinimizeIcon v-else class="h-3.5 w-3.5" />
+          </Button>
+          <Button variant="ghost" @click="show = false">
+            <FeatherIcon name="x" class="h-3.5" />
+          </Button>
+        </div>
+      </div>
+      <div class="flex flex-col justify-center items-center gap-1 mb-3">
+        <CRMLogo class="size-10 shrink-0 rounded mb-4" />
+        <div class="text-base font-medium">
+          {{ __('Welcome to Frappe CRM') }}
+        </div>
+        <div class="text-p-base font-normal">
+          {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
+        </div>
+      </div>
+      <div class="flex flex-col gap-2.5 overflow-hidden">
+        <div class="flex justify-between items-center py-0.5">
+          <div class="text-base font-medium">{{ __('Getting started') }}</div>
+          <Badge
+            :label="__('{0}% completed', [completedPercentage])"
+            theme="orange"
+            size="lg"
+          />
+        </div>
+        <div class="flex flex-col gap-1.5 overflow-y-auto">
+          <div
+            v-for="step in steps"
+            :key="step.title"
+            class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
+            :class="[
+              step.completed
+                ? 'text-ink-gray-5 line-through'
+                : 'text-ink-gray-8',
+            ]"
+          >
+            <component :is="step.icon" class="h-4" />
+            <div class="text-base">{{ step.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-1.5">
+      <div
+        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+      >
+        <HelpIcon class="h-4" />
+        <div class="text-base">{{ __('Help centre') }}</div>
       </div>
     </div>
   </div>
@@ -22,6 +66,9 @@
 <script setup>
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
+import HelpIcon from '@/components/Icons/HelpIcon.vue'
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import { useOnboarding } from '@/composables/onboarding'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -30,4 +77,7 @@ const props = defineProps({
 
 const show = defineModel()
 const minimize = ref(false)
+
+const { steps, stepsCompleted, totalSteps, completedPercentage } =
+  useOnboarding()
 </script>
diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index e805dc3b..5eb093cc 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/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(),
         },
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
new file mode 100644
index 00000000..c54c14c3
--- /dev/null
+++ b/frontend/src/composables/onboarding.js
@@ -0,0 +1,80 @@
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
+import InviteIcon from '@/components/Icons/InviteIcon.vue'
+import ConvertIcon from '@/components/Icons/ConvertIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
+import CommentIcon from '@/components/Icons/CommentIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
+import { ref, reactive, computed, markRaw } from 'vue'
+
+const steps = reactive([
+  {
+    title: 'Create your first lead',
+    icon: markRaw(LeadsIcon),
+    completed: true,
+  },
+  {
+    title: 'Invite your team',
+    icon: markRaw(InviteIcon),
+    completed: false,
+  },
+  {
+    title: 'Convert lead to deal',
+    icon: markRaw(ConvertIcon),
+    completed: false,
+  },
+  {
+    title: 'Create your first note',
+    icon: markRaw(NoteIcon),
+    completed: false,
+  },
+  {
+    title: 'Create your first task',
+    icon: markRaw(TaskIcon),
+    completed: false,
+  },
+  {
+    title: 'Add your first comment',
+    icon: markRaw(CommentIcon),
+    completed: false,
+  },
+  {
+    title: 'Send email',
+    icon: markRaw(EmailIcon),
+    completed: false,
+  },
+  {
+    title: 'Change deal status',
+    icon: markRaw(StepsIcon),
+    completed: false,
+  },
+])
+
+const stepsCompleted = computed(
+  () => steps.filter((step) => step.completed).length,
+)
+const totalSteps = ref(steps.length)
+
+const completedPercentage = computed(() =>
+  Math.floor((stepsCompleted.value / totalSteps.value) * 100),
+)
+
+export function useOnboarding() {
+  const incrementStep = () => {
+    stepsCompleted.value++
+  }
+
+  const decrementStep = () => {
+    stepsCompleted.value--
+  }
+
+  return {
+    steps,
+    stepsCompleted,
+    totalSteps,
+    completedPercentage,
+    incrementStep,
+    decrementStep,
+  }
+}

From 30807d37d9531df0e696be7266b6905215915d6b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 13:49:43 +0530
Subject: [PATCH 05/43] fix: show title in header if minimized

---
 frontend/src/components/Modals/HelpModal.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index a2ea75b4..9491cffa 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -6,12 +6,18 @@
     @click.stop
   >
     <div class="overflow-hidden flex flex-col gap-4">
-      <div class="flex justify-between">
-        <div></div>
+      <div class="flex items-center justify-between">
+        <div>
+          <div v-if="minimize" class="text-base font-medium ml-1">
+            {{ __('Getting started') }}
+          </div>
+        </div>
         <div>
           <Button @click="minimize = !minimize" variant="ghost">
-            <MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
-            <MinimizeIcon v-else class="h-3.5 w-3.5" />
+            <component
+              :is="minimize ? MaximizeIcon : MinimizeIcon"
+              class="h-3.5"
+            />
           </Button>
           <Button variant="ghost" @click="show = false">
             <FeatherIcon name="x" class="h-3.5" />

From 65425a325f8c0e67a6279440df10cfbb0075992a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 15:56:21 +0530
Subject: [PATCH 06/43] fix: get onboarding status of user from boot

---
 crm/www/crm.py | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/crm/www/crm.py b/crm/www/crm.py
index c630506f..0b971cc6 100644
--- a/crm/www/crm.py
+++ b/crm/www/crm.py
@@ -38,6 +38,7 @@ def get_boot():
 			"sysdefaults": frappe.defaults.get_defaults(),
 			"is_demo_site": frappe.conf.get("is_demo_site"),
 			"is_fc_site": is_fc_site(),
+			"user": get_user(),
 			"timezone": {
 				"system": get_system_timezone(),
 				"user": frappe.db.get_value("User", frappe.session.user, "time_zone")
@@ -49,3 +50,25 @@ def get_boot():
 
 def get_default_route():
 	return "/crm"
+
+
+def get_user():
+	"""get user info"""
+	user = frappe.db.get_value(
+		"User",
+		frappe.session.user,
+		[
+			"creation",
+			"email",
+			"email_signature",
+			"first_name",
+			"language",
+			"last_name",
+			"user_type",
+			"onboarding_status",
+		],
+		as_dict=True,
+	)
+	user.onboarding_status = frappe.parse_json(user.onboarding_status)
+
+	return user

From f877a53918371dd57749d78e06c50351a5974214 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 15:59:50 +0530
Subject: [PATCH 07/43] fix: check onboarding status from boot to show/hide
 getting started banner

---
 .../src/components/Layouts/AppSidebar.vue     |  4 ++-
 frontend/src/composables/onboarding.js        | 28 +++++++++++++------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index c685fd77..e5f6b0fb 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -141,12 +141,14 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
+import { useOnboarding } from '@/composables/onboarding'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { ref, computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
+const { checkOnboardingStatus } = useOnboarding()
 
 const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
@@ -259,7 +261,7 @@ function getIcon(routeName, icon) {
 
 const isOnboardingStepsCompleted = useStorage(
   'isOnboardingStepsCompleted',
-  false,
+  checkOnboardingStatus(),
 )
 const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index c54c14c3..8ebea072 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -10,41 +10,49 @@ import { ref, reactive, computed, markRaw } from 'vue'
 
 const steps = reactive([
   {
+    name: 'create_first_lead',
     title: 'Create your first lead',
     icon: markRaw(LeadsIcon),
-    completed: true,
+    completed: false,
   },
   {
+    name: 'invite_your_team',
     title: 'Invite your team',
     icon: markRaw(InviteIcon),
     completed: false,
   },
   {
+    name: 'convert_lead_to_deal',
     title: 'Convert lead to deal',
     icon: markRaw(ConvertIcon),
     completed: false,
   },
   {
+    name: 'create_first_note',
     title: 'Create your first note',
     icon: markRaw(NoteIcon),
     completed: false,
   },
   {
+    name: 'create_first_task',
     title: 'Create your first task',
     icon: markRaw(TaskIcon),
     completed: false,
   },
   {
+    name: 'add_first_comment',
     title: 'Add your first comment',
     icon: markRaw(CommentIcon),
     completed: false,
   },
   {
+    name: 'send_email',
     title: 'Send email',
     icon: markRaw(EmailIcon),
     completed: false,
   },
   {
+    name: 'change_deal_status',
     title: 'Change deal status',
     icon: markRaw(StepsIcon),
     completed: false,
@@ -61,12 +69,15 @@ const completedPercentage = computed(() =>
 )
 
 export function useOnboarding() {
-  const incrementStep = () => {
-    stepsCompleted.value++
-  }
-
-  const decrementStep = () => {
-    stepsCompleted.value--
+  function checkOnboardingStatus() {
+    let user = window.user
+    if (!user) return false
+    if (user.onboarding_status['frappe_crm_onboarding_status']) {
+      return user.onboarding_status['frappe_crm_onboarding_status'].every(
+        (step) => step.completed,
+      )
+    }
+    return false
   }
 
   return {
@@ -74,7 +85,6 @@ export function useOnboarding() {
     stepsCompleted,
     totalSteps,
     completedPercentage,
-    incrementStep,
-    decrementStep,
+    checkOnboardingStatus,
   }
 }

From 472a93f22bdc5cb7db5db44d503e31611d6d4d0c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:01:05 +0530
Subject: [PATCH 08/43] fix: moved minimize to onboarding composable

---
 frontend/src/components/Modals/HelpModal.vue | 3 +--
 frontend/src/composables/onboarding.js       | 3 +++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 9491cffa..432a2e5f 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -82,8 +82,7 @@ const props = defineProps({
 })
 
 const show = defineModel()
-const minimize = ref(false)
 
-const { steps, stepsCompleted, totalSteps, completedPercentage } =
+const { steps, stepsCompleted, totalSteps, completedPercentage, minimize } =
   useOnboarding()
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 8ebea072..d8b17111 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -8,6 +8,8 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import { ref, reactive, computed, markRaw } from 'vue'
 
+const minimize = ref(false)
+
 const steps = reactive([
   {
     name: 'create_first_lead',
@@ -81,6 +83,7 @@ export function useOnboarding() {
   }
 
   return {
+    minimize,
     steps,
     stepsCompleted,
     totalSteps,

From 6ab8d8ded1d9a039bb6dd73ab05096286bef9f04 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:03:26 +0530
Subject: [PATCH 09/43] fix: route to leads when create first lead step is
 clicked

---
 frontend/src/components/Modals/HelpModal.vue |  1 +
 frontend/src/composables/onboarding.js       | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 432a2e5f..067c357b 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -52,6 +52,7 @@
                 ? 'text-ink-gray-5 line-through'
                 : 'text-ink-gray-8',
             ]"
+            @click="step.onClick"
           >
             <component :is="step.icon" class="h-4" />
             <div class="text-base">{{ step.title }}</div>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index d8b17111..a8ff7ea3 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -6,8 +6,11 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
+import { useRouter } from 'vue-router'
 import { ref, reactive, computed, markRaw } from 'vue'
 
+let router
+
 const minimize = ref(false)
 
 const steps = reactive([
@@ -16,6 +19,12 @@ const steps = reactive([
     title: 'Create your first lead',
     icon: markRaw(LeadsIcon),
     completed: false,
+    onClick: () => {
+      if (steps[0].completed) return
+      minimize.value = true
+
+      router.push({ name: 'Leads' })
+    },
   },
   {
     name: 'invite_your_team',
@@ -71,6 +80,8 @@ const completedPercentage = computed(() =>
 )
 
 export function useOnboarding() {
+  router = useRouter()
+
   function checkOnboardingStatus() {
     let user = window.user
     if (!user) return false

From 2a75dbc45d0f6273b0e3e07385b3fc9bfb278de4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:08:27 +0530
Subject: [PATCH 10/43] fix: update onboarding status when lead is created

---
 crm/api/onboarding.py                        | 19 ++++++++++
 frontend/src/components/Modals/LeadModal.vue |  3 ++
 frontend/src/composables/onboarding.js       | 40 ++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 crm/api/onboarding.py

diff --git a/crm/api/onboarding.py b/crm/api/onboarding.py
new file mode 100644
index 00000000..1ac09477
--- /dev/null
+++ b/crm/api/onboarding.py
@@ -0,0 +1,19 @@
+import json
+
+import frappe
+
+
+@frappe.whitelist()
+def update_user_onboarding_status(steps: str):
+	steps = json.loads(steps)
+
+	# get the current onboarding status
+	onboarding_status = frappe.db.get_value("User", frappe.session.user, "onboarding_status")
+	onboarding_status = frappe.parse_json(onboarding_status)
+
+	# update the onboarding status
+	onboarding_status["frappe_crm_onboarding_status"] = steps
+
+	frappe.db.set_value(
+		"User", frappe.session.user, "onboarding_status", json.dumps(onboarding_status), update_modified=False
+	)
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index b7e4f99e..aa158658 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -47,6 +47,7 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
+import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
 import { createResource } from 'frappe-ui'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
@@ -58,6 +59,7 @@ const props = defineProps({
 
 const { getUser, isManager } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
+const { updateOnboardingStep } = useOnboarding()
 
 const show = defineModel()
 const router = useRouter()
@@ -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
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index a8ff7ea3..d188e2c2 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -6,6 +6,9 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
+import { capture } from '@/telemetry'
+import { showSettings, activeSettingsPage } from '@/composables/settings'
+import { call } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, reactive, computed, markRaw } from 'vue'
 
@@ -31,6 +34,13 @@ const steps = reactive([
     title: 'Invite your team',
     icon: markRaw(InviteIcon),
     completed: false,
+    onClick: () => {
+      if (steps[1].completed) return
+      minimize.value = true
+
+      showSettings.value = true
+      activeSettingsPage.value = 'Invite Members'
+    },
   },
   {
     name: 'convert_lead_to_deal',
@@ -93,6 +103,35 @@ export function useOnboarding() {
     return false
   }
 
+  function updateOnboardingStep(step) {
+    if (stepsCompleted.value) return
+    let user = window.user
+    if (!user) return false
+
+    if (!user.onboarding_status['frappe_crm_onboarding_status']) {
+      user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
+        (s) => {
+          return { name: s.name, completed: false }
+        },
+      )
+    }
+
+    let _steps = user.onboarding_status['frappe_crm_onboarding_status']
+    let index = _steps.findIndex((s) => s.name === step)
+    if (index !== -1) {
+      _steps[index].completed = true
+      steps[index].completed = true
+    }
+
+    window.user = user
+
+    capture('onboarding_' + step)
+
+    call('crm.api.onboarding.update_user_onboarding_status', {
+      steps: JSON.stringify(_steps),
+    })
+  }
+
   return {
     minimize,
     steps,
@@ -100,5 +139,6 @@ export function useOnboarding() {
     totalSteps,
     completedPercentage,
     checkOnboardingStatus,
+    updateOnboardingStep,
   }
 }

From ac2df7a94be306d2bb2e7bb800635c5cd02411d3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:09:17 +0530
Subject: [PATCH 11/43] fix: sync status

---
 frontend/src/composables/onboarding.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index d188e2c2..ef9ca30d 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -92,6 +92,8 @@ const completedPercentage = computed(() =>
 export function useOnboarding() {
   router = useRouter()
 
+  syncStatus()
+
   function checkOnboardingStatus() {
     let user = window.user
     if (!user) return false
@@ -132,6 +134,18 @@ export function useOnboarding() {
     })
   }
 
+  function syncStatus() {
+    let user = window.user
+    if (!user) return false
+
+    if (user.onboarding_status['frappe_crm_onboarding_status']) {
+      let _steps = user.onboarding_status['frappe_crm_onboarding_status']
+      _steps.forEach((step, index) => {
+        steps[index].completed = step.completed
+      })
+    }
+  }
+
   return {
     minimize,
     steps,

From 0fb19212e5f67eea4e14c29c985fda5ee507b29a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 16:24:00 +0530
Subject: [PATCH 12/43] fix: moved isOnboardingStepsCompleted in composable and
 moved minimized out of useOnboarding

---
 .../src/components/Layouts/AppSidebar.vue     |  7 +----
 frontend/src/components/Modals/HelpModal.vue  |  5 ++--
 frontend/src/composables/onboarding.js        | 27 +++++++++----------
 3 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index e5f6b0fb..ec9def61 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -141,14 +141,13 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { useOnboarding } from '@/composables/onboarding'
+import { isOnboardingStepsCompleted } from '@/composables/onboarding'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { ref, computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
-const { checkOnboardingStatus } = useOnboarding()
 
 const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
@@ -259,9 +258,5 @@ function getIcon(routeName, icon) {
   }
 }
 
-const isOnboardingStepsCompleted = useStorage(
-  'isOnboardingStepsCompleted',
-  checkOnboardingStatus(),
-)
 const showHelpModal = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 067c357b..6c205815 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -75,8 +75,7 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
-import { useOnboarding } from '@/composables/onboarding'
-import { ref } from 'vue'
+import { useOnboarding, minimize } from '@/composables/onboarding'
 
 const props = defineProps({
   isOnboardingStepsCompleted: Boolean,
@@ -84,6 +83,6 @@ const props = defineProps({
 
 const show = defineModel()
 
-const { steps, stepsCompleted, totalSteps, completedPercentage, minimize } =
+const { steps, stepsCompleted, totalSteps, completedPercentage } =
   useOnboarding()
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index ef9ca30d..63309189 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -8,13 +8,19 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import { capture } from '@/telemetry'
 import { showSettings, activeSettingsPage } from '@/composables/settings'
+import { useStorage } from '@vueuse/core'
 import { call } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { ref, reactive, computed, markRaw } from 'vue'
 
 let router
 
-const minimize = ref(false)
+export const minimize = ref(false)
+
+export const isOnboardingStepsCompleted = useStorage(
+  'isOnboardingStepsCompleted',
+  false,
+)
 
 const steps = reactive([
   {
@@ -94,19 +100,8 @@ export function useOnboarding() {
 
   syncStatus()
 
-  function checkOnboardingStatus() {
-    let user = window.user
-    if (!user) return false
-    if (user.onboarding_status['frappe_crm_onboarding_status']) {
-      return user.onboarding_status['frappe_crm_onboarding_status'].every(
-        (step) => step.completed,
-      )
-    }
-    return false
-  }
-
   function updateOnboardingStep(step) {
-    if (stepsCompleted.value) return
+    if (isOnboardingStepsCompleted.value) return
     let user = window.user
     if (!user) return false
 
@@ -135,6 +130,7 @@ export function useOnboarding() {
   }
 
   function syncStatus() {
+    if (isOnboardingStepsCompleted.value) return
     let user = window.user
     if (!user) return false
 
@@ -143,16 +139,17 @@ export function useOnboarding() {
       _steps.forEach((step, index) => {
         steps[index].completed = step.completed
       })
+      isOnboardingStepsCompleted.value = _steps.every((step) => step.completed)
+    } else {
+      isOnboardingStepsCompleted.value = false
     }
   }
 
   return {
-    minimize,
     steps,
     stepsCompleted,
     totalSteps,
     completedPercentage,
-    checkOnboardingStatus,
     updateOnboardingStep,
   }
 }

From b91521df5aa6097aed948c04123d7f42973bd602 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:03:54 +0530
Subject: [PATCH 13/43] fix: update onboarding status when invite is sent

---
 frontend/src/components/Settings/InviteMemberPage.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index 5ce5d2bb..24b17438 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -79,6 +79,7 @@
 </template>
 <script setup>
 import MultiValueInput from '@/components/Controls/MultiValueInput.vue'
+import { useOnboarding } from '@/composables/onboarding'
 import { validateEmail, convertArrayToString } from '@/utils'
 import {
   createListResource,
@@ -88,6 +89,8 @@ import {
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
+const { updateOnboardingStep } = useOnboarding()
+
 const invitees = ref([])
 const role = ref('Sales User')
 const error = ref(null)
@@ -119,6 +122,7 @@ const inviteByEmail = createResource({
     role.value = 'Sales User'
     error.value = null
     pendingInvitations.reload()
+    updateOnboardingStep('invite_your_team')
   },
   onError(error) {
     error.value = error

From 73bb4bd9f80d414a881e0f682f9814c5f151cb71 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:08:42 +0530
Subject: [PATCH 14/43] fix: maximize if complete now is clicked

---
 frontend/src/components/Layouts/AppSidebar.vue | 9 +++++++--
 frontend/src/components/Modals/HelpModal.vue   | 2 +-
 frontend/src/composables/onboarding.js         | 4 ----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index ec9def61..98f5644e 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -77,7 +77,12 @@
       <GettingStartedBanner
         v-if="!isOnboardingStepsCompleted"
         :isSidebarCollapsed="isSidebarCollapsed"
-        @completeNow="showHelpModal = true"
+        @completeNow="
+          () => {
+            minimize = false
+            showHelpModal = true
+          }
+        "
       />
       <SidebarLink
         v-else
@@ -141,7 +146,7 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { isOnboardingStepsCompleted } from '@/composables/onboarding'
+import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { ref, computed, h } from 'vue'
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 6c205815..ec4419d1 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -52,7 +52,7 @@
                 ? 'text-ink-gray-5 line-through'
                 : 'text-ink-gray-8',
             ]"
-            @click="step.onClick"
+            @click="() => !step.completed && step.onClick()"
           >
             <component :is="step.icon" class="h-4" />
             <div class="text-base">{{ step.title }}</div>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 63309189..737f5911 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -29,9 +29,7 @@ const steps = reactive([
     icon: markRaw(LeadsIcon),
     completed: false,
     onClick: () => {
-      if (steps[0].completed) return
       minimize.value = true
-
       router.push({ name: 'Leads' })
     },
   },
@@ -41,9 +39,7 @@ const steps = reactive([
     icon: markRaw(InviteIcon),
     completed: false,
     onClick: () => {
-      if (steps[1].completed) return
       minimize.value = true
-
       showSettings.value = true
       activeSettingsPage.value = 'Invite Members'
     },

From 4d74943ebc4a503659c7fb4220150f9e5118dfac Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:20:21 +0530
Subject: [PATCH 15/43] fix: update onboarding status when lead is converted to
 deal

---
 crm/api/onboarding.py                  | 12 ++++++++++++
 frontend/src/composables/onboarding.js | 12 ++++++++++++
 frontend/src/pages/Lead.vue            |  3 +++
 3 files changed, 27 insertions(+)

diff --git a/crm/api/onboarding.py b/crm/api/onboarding.py
index 1ac09477..fc66756f 100644
--- a/crm/api/onboarding.py
+++ b/crm/api/onboarding.py
@@ -17,3 +17,15 @@ def update_user_onboarding_status(steps: str):
 	frappe.db.set_value(
 		"User", frappe.session.user, "onboarding_status", json.dumps(onboarding_status), update_modified=False
 	)
+
+
+@frappe.whitelist()
+def get_first_non_converted_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
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 737f5911..4729b902 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -49,6 +49,18 @@ const steps = reactive([
     title: 'Convert lead to deal',
     icon: markRaw(ConvertIcon),
     completed: false,
+    onClick: async () => {
+      minimize.value = true
+
+      let leadName = await call(
+        'crm.api.onboarding.get_first_non_converted_lead',
+      )
+      if (leadName) {
+        router.push({ name: 'Lead', params: { leadId: leadName } })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
   },
   {
     name: 'create_first_note',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 1e8d728b..19841493 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -348,6 +348,7 @@ import {
   callEnabled,
   isMobileView,
 } from '@/composables/settings'
+import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
 import {
   createResource,
@@ -370,6 +371,7 @@ const { isManager } = usersStore()
 const { $dialog, $socket, makeCall } = globalStore()
 const { getContactByName, contacts } = contactsStore()
 const { statusOptions, getLeadStatus, getDealStatus } = statusesStore()
+const { updateOnboardingStep } = useOnboarding()
 const route = useRoute()
 const router = useRouter()
 
@@ -658,6 +660,7 @@ async function convertToDeal(updated) {
       })
     })
     if (_deal) {
+      updateOnboardingStep('convert_lead_to_deal')
       capture('convert_lead_to_deal')
       if (updated) {
         await contacts.reload()

From c07aa03c47780398cb70b66d2b439bd25d3f3838 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:28:29 +0530
Subject: [PATCH 16/43] fix: update onboarding status when first task is
 created

---
 crm/api/onboarding.py                        | 11 +++++++++
 frontend/src/components/Modals/TaskModal.vue |  3 +++
 frontend/src/composables/onboarding.js       | 25 +++++++++++++++-----
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/crm/api/onboarding.py b/crm/api/onboarding.py
index fc66756f..4ad1ab3b 100644
--- a/crm/api/onboarding.py
+++ b/crm/api/onboarding.py
@@ -29,3 +29,14 @@ def get_first_non_converted_lead():
 		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
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 46436420..7068cfe6 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -117,6 +117,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions, getFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
+import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
 import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
 import { ref, watch, nextTick, onMounted } from 'vue'
@@ -144,6 +145,7 @@ const emit = defineEmits(['updateTask', 'after'])
 
 const router = useRouter()
 const { getUser } = usersStore()
+const { updateOnboardingStep } = useOnboarding()
 
 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)
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 4729b902..095f9d85 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -62,17 +62,30 @@ const steps = reactive([
       }
     },
   },
-  {
-    name: 'create_first_note',
-    title: 'Create your first note',
-    icon: markRaw(NoteIcon),
-    completed: false,
-  },
   {
     name: 'create_first_task',
     title: 'Create your first task',
     icon: markRaw(TaskIcon),
     completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let dealName = await call('crm.api.onboarding.get_first_deal')
+      if (dealName) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: dealName },
+          hash: '#tasks',
+        })
+      } else {
+        router.push({ name: 'Tasks' })
+      }
+    },
+  },
+  {
+    name: 'create_first_note',
+    title: 'Create your first note',
+    icon: markRaw(NoteIcon),
+    completed: false,
   },
   {
     name: 'add_first_comment',

From 11790586dacb10b863f952d6089524dffde0d1d2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:31:06 +0530
Subject: [PATCH 17/43] fix: update onboarding status when first note is
 created

---
 frontend/src/components/Modals/NoteModal.vue |  4 ++++
 frontend/src/composables/onboarding.js       | 13 +++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 44c489ba..30a74154 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -65,6 +65,7 @@
 <script setup>
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { capture } from '@/telemetry'
+import { useOnboarding } from '@/composables/onboarding'
 import { TextEditor, call } from 'frappe-ui'
 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()
+
 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)
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 095f9d85..1bae3150 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -86,6 +86,19 @@ const steps = reactive([
     title: 'Create your first note',
     icon: markRaw(NoteIcon),
     completed: false,
+    onClick: async () => {
+      minimize.value = true
+      let dealName = await call('crm.api.onboarding.get_first_deal')
+      if (dealName) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: dealName },
+          hash: '#notes',
+        })
+      } else {
+        router.push({ name: 'Notes' })
+      }
+    },
   },
   {
     name: 'add_first_comment',

From a1e6504740d375f28fbaa45e2b7d3dbc57a87439 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 17:39:31 +0530
Subject: [PATCH 18/43] fix: update onboarding status when first comment is
 added

---
 frontend/src/components/CommunicationArea.vue | 15 +++++--
 frontend/src/composables/onboarding.js        | 45 ++++++++++++++-----
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 2bfb77ab..203d11eb 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/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>
@@ -90,6 +94,7 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import { capture } from '@/telemetry'
 import { usersStore } from '@/stores/users'
+import { useOnboarding } from '@/composables/onboarding'
 import { useStorage } from '@vueuse/core'
 import { call, createResource } from 'frappe-ui'
 import { ref, watch, computed } from 'vue'
@@ -107,6 +112,7 @@ const reload = defineModel('reload')
 const emit = defineEmits(['scroll'])
 
 const { getUser } = usersStore()
+const { updateOnboardingStep } = useOnboarding()
 
 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(() => {
@@ -231,6 +237,7 @@ async function submitComment() {
   reload.value = true
   emit('scroll')
   capture('comment_sent', { doctype: props.doctype })
+  updateOnboardingStep('add_first_comment')
 }
 
 function toggleEmailBox() {
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 1bae3150..129f938f 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -22,6 +22,9 @@ export const isOnboardingStepsCompleted = useStorage(
   false,
 )
 
+const firstLead = ref('')
+const firstDeal = ref('')
+
 const steps = reactive([
   {
     name: 'create_first_lead',
@@ -52,11 +55,12 @@ const steps = reactive([
     onClick: async () => {
       minimize.value = true
 
-      let leadName = await call(
-        'crm.api.onboarding.get_first_non_converted_lead',
-      )
-      if (leadName) {
-        router.push({ name: 'Lead', params: { leadId: leadName } })
+      firstLead.value =
+        !firstLead.value &&
+        (await call('crm.api.onboarding.get_first_non_converted_lead'))
+
+      if (firstLead.value) {
+        router.push({ name: 'Lead', params: { leadId: firstLead.value } })
       } else {
         router.push({ name: 'Leads' })
       }
@@ -69,11 +73,13 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      let dealName = await call('crm.api.onboarding.get_first_deal')
-      if (dealName) {
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
         router.push({
           name: 'Deal',
-          params: { dealId: dealName },
+          params: { dealId: firstDeal.value },
           hash: '#tasks',
         })
       } else {
@@ -88,11 +94,13 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      let dealName = await call('crm.api.onboarding.get_first_deal')
-      if (dealName) {
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
         router.push({
           name: 'Deal',
-          params: { dealId: dealName },
+          params: { dealId: firstDeal.value },
           hash: '#notes',
         })
       } else {
@@ -105,6 +113,21 @@ const steps = reactive([
     title: 'Add your first comment',
     icon: markRaw(CommentIcon),
     completed: false,
+    onClick: async () => {
+      minimize.value = true
+      firstDeal.value =
+        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+
+      if (firstDeal.value) {
+        router.push({
+          name: 'Deal',
+          params: { dealId: firstDeal.value },
+          hash: '#comments',
+        })
+      } else {
+        router.push({ name: 'Leads' })
+      }
+    },
   },
   {
     name: 'send_email',

From 41c65eb77763782eb5e74a791f071e71598d4d72 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 18:13:57 +0530
Subject: [PATCH 19/43] fix: update onboarding status when first email is sent

---
 crm/api/onboarding.py                         |  2 +-
 frontend/src/components/CommunicationArea.vue |  1 +
 frontend/src/composables/onboarding.js        | 55 +++++++++++++------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/crm/api/onboarding.py b/crm/api/onboarding.py
index 4ad1ab3b..088000e3 100644
--- a/crm/api/onboarding.py
+++ b/crm/api/onboarding.py
@@ -20,7 +20,7 @@ def update_user_onboarding_status(steps: str):
 
 
 @frappe.whitelist()
-def get_first_non_converted_lead():
+def get_first_lead():
 	lead = frappe.get_all(
 		"CRM Lead",
 		filters={"converted": 0},
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 203d11eb..4052a3b8 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -227,6 +227,7 @@ async function submitEmail() {
   reload.value = true
   emit('scroll')
   capture('email_sent', { doctype: props.doctype })
+  updateOnboardingStep('send_first_email')
 }
 
 async function submitComment() {
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 129f938f..9250f9ab 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -55,12 +55,10 @@ const steps = reactive([
     onClick: async () => {
       minimize.value = true
 
-      firstLead.value =
-        !firstLead.value &&
-        (await call('crm.api.onboarding.get_first_non_converted_lead'))
+      let lead = await getFirstLead()
 
-      if (firstLead.value) {
-        router.push({ name: 'Lead', params: { leadId: firstLead.value } })
+      if (lead) {
+        router.push({ name: 'Lead', params: { leadId: lead } })
       } else {
         router.push({ name: 'Leads' })
       }
@@ -73,13 +71,12 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      firstDeal.value =
-        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+      let deal = await getFirstDeal()
 
-      if (firstDeal.value) {
+      if (deal) {
         router.push({
           name: 'Deal',
-          params: { dealId: firstDeal.value },
+          params: { dealId: deal },
           hash: '#tasks',
         })
       } else {
@@ -94,13 +91,12 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      firstDeal.value =
-        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+      let deal = await getFirstDeal()
 
-      if (firstDeal.value) {
+      if (deal) {
         router.push({
           name: 'Deal',
-          params: { dealId: firstDeal.value },
+          params: { dealId: deal },
           hash: '#notes',
         })
       } else {
@@ -115,13 +111,12 @@ const steps = reactive([
     completed: false,
     onClick: async () => {
       minimize.value = true
-      firstDeal.value =
-        !firstDeal.value && (await call('crm.api.onboarding.get_first_deal'))
+      let deal = await getFirstDeal()
 
-      if (firstDeal.value) {
+      if (deal) {
         router.push({
           name: 'Deal',
-          params: { dealId: firstDeal.value },
+          params: { dealId: deal },
           hash: '#comments',
         })
       } else {
@@ -130,10 +125,24 @@ const steps = reactive([
     },
   },
   {
-    name: 'send_email',
+    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',
@@ -143,6 +152,16 @@ const steps = reactive([
   },
 ])
 
+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 stepsCompleted = computed(
   () => steps.filter((step) => step.completed).length,
 )

From 5862745253db2c6f9a2b30e60883882b345cdf09 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 18:17:05 +0530
Subject: [PATCH 20/43] fix: update onboarding status when deal status is
 changed

---
 frontend/src/composables/onboarding.js | 14 ++++++++++++++
 frontend/src/pages/Deal.vue            | 10 ++++++++++
 2 files changed, 24 insertions(+)

diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 9250f9ab..03ab2a25 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -149,6 +149,20 @@ const steps = reactive([
     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' })
+      }
+    },
   },
 ])
 
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index cd83158a..f3a8d17b 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -330,6 +330,10 @@ import { getSettings } from '@/stores/settings'
 import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
+import {
+  isOnboardingStepsCompleted,
+  useOnboarding,
+} from '@/composables/onboarding'
 import {
   createResource,
   Dropdown,
@@ -347,6 +351,8 @@ import { useActiveTabManager } from '@/composables/useActiveTabManager'
 const { brand } = getSettings()
 const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
+const { updateOnboardingStep } = useOnboarding()
+
 const route = useRoute()
 const router = useRouter()
 
@@ -690,6 +696,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?.()

From d673e88baaec6668fae5991a394428462fcc65b8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 18:17:36 +0530
Subject: [PATCH 21/43] fix: show all steps completed in banner

---
 .../src/components/GettingStartedBanner.vue   | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
index a5aaa263..b520d0a0 100644
--- a/frontend/src/components/GettingStartedBanner.vue
+++ b/frontend/src/components/GettingStartedBanner.vue
@@ -3,8 +3,8 @@
     v-if="!isSidebarCollapsed"
     class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
   >
-    <div class="inline-flex gap-2">
-      <StepsIcon class="h-4 my-0.5" />
+    <div v-if="stepsCompleted != totalSteps" class="inline-flex gap-2">
+      <StepsIcon class="h-4 my-0.5 shrink-0" />
       <div class="flex flex-col text-p-sm gap-0.5">
         <div class="text-ink-gray-9 font-medium">
           {{ __('Gettings started') }}
@@ -14,7 +14,26 @@
         </div>
       </div>
     </div>
+    <div v-else class="flex flex-col gap-1">
+      <div class="flex items-center justify-between gap-1">
+        <div class="flex items-center gap-2 shrink-0">
+          <StepsIcon class="h-4 my-0.5" />
+          <div class="text-ink-gray-9 font-medium">
+            {{ __('You are all set!') }}
+          </div>
+        </div>
+        <FeatherIcon
+          name="x"
+          class="h-4 cursor-pointer"
+          @click="isOnboardingStepsCompleted = true"
+        />
+      </div>
+      <div class="text-p-sm text-ink-gray-7">
+        {{ __('All steps are completed successfully!') }}
+      </div>
+    </div>
     <Button
+      v-if="stepsCompleted != totalSteps"
       :label="__('Complete now')"
       theme="blue"
       @click="emit('completeNow')"
@@ -23,7 +42,11 @@
 </template>
 <script setup>
 import StepsIcon from '@/components/Icons/StepsIcon.vue'
-import { useOnboarding } from '@/composables/onboarding'
+import {
+  isOnboardingStepsCompleted,
+  useOnboarding,
+} from '@/composables/onboarding'
+import FeatherIcon from 'frappe-ui/src/components/FeatherIcon.vue'
 
 const props = defineProps({
   isSidebarCollapsed: {

From bd6aa943a2b9002233e5613d52b37ce02d195a16 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 19:27:27 +0530
Subject: [PATCH 22/43] fix: moved onboarding related ui and code in separate
 component

---
 .../src/components/Layouts/AppSidebar.vue     |  6 +-
 frontend/src/components/Modals/HelpModal.vue  | 79 +++++--------------
 frontend/src/components/OnboardingSteps.vue   | 44 +++++++++++
 3 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/components/OnboardingSteps.vue

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 98f5644e..6235d733 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -112,11 +112,7 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal
-      v-if="showHelpModal"
-      v-model="showHelpModal"
-      :isOnboardingStepsCompleted="isOnboardingStepsCompleted"
-    />
+    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
   </div>
 </template>
 
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index ec4419d1..fd5e902d 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -5,63 +5,33 @@
     :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
     @click.stop
   >
-    <div class="overflow-hidden flex flex-col gap-4">
-      <div class="flex items-center justify-between">
-        <div>
-          <div v-if="minimize" class="text-base font-medium ml-1">
-            {{ __('Getting started') }}
-          </div>
+    <div class="flex items-center justify-between">
+      <div class="text-base font-medium ml-1">
+        <div v-if="minimize && !isOnboardingStepsCompleted">
+          {{ __('Getting started') }}
         </div>
-        <div>
-          <Button @click="minimize = !minimize" variant="ghost">
-            <component
-              :is="minimize ? MaximizeIcon : MinimizeIcon"
-              class="h-3.5"
-            />
-          </Button>
-          <Button variant="ghost" @click="show = false">
-            <FeatherIcon name="x" class="h-3.5" />
-          </Button>
+        <div v-else>
+          {{ __('Help center') }}
         </div>
       </div>
-      <div class="flex flex-col justify-center items-center gap-1 mb-3">
-        <CRMLogo class="size-10 shrink-0 rounded mb-4" />
-        <div class="text-base font-medium">
-          {{ __('Welcome to Frappe CRM') }}
-        </div>
-        <div class="text-p-base font-normal">
-          {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
-        </div>
-      </div>
-      <div class="flex flex-col gap-2.5 overflow-hidden">
-        <div class="flex justify-between items-center py-0.5">
-          <div class="text-base font-medium">{{ __('Getting started') }}</div>
-          <Badge
-            :label="__('{0}% completed', [completedPercentage])"
-            theme="orange"
-            size="lg"
+      <div>
+        <Button @click="minimize = !minimize" variant="ghost">
+          <component
+            :is="minimize ? MaximizeIcon : MinimizeIcon"
+            class="h-3.5"
           />
-        </div>
-        <div class="flex flex-col gap-1.5 overflow-y-auto">
-          <div
-            v-for="step in steps"
-            :key="step.title"
-            class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-            :class="[
-              step.completed
-                ? 'text-ink-gray-5 line-through'
-                : 'text-ink-gray-8',
-            ]"
-            @click="() => !step.completed && step.onClick()"
-          >
-            <component :is="step.icon" class="h-4" />
-            <div class="text-base">{{ step.title }}</div>
-          </div>
-        </div>
+        </Button>
+        <Button variant="ghost" @click="show = false">
+          <FeatherIcon name="x" class="h-3.5" />
+        </Button>
       </div>
     </div>
+    <div class="h-full overflow-hidden flex flex-col">
+      <OnboardingSteps v-if="!isOnboardingStepsCompleted" />
+    </div>
     <div class="flex flex-col gap-1.5">
       <div
+        v-if="!isOnboardingStepsCompleted"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
       >
         <HelpIcon class="h-4" />
@@ -74,15 +44,8 @@
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
-import CRMLogo from '@/components/Icons/CRMLogo.vue'
-import { useOnboarding, minimize } from '@/composables/onboarding'
-
-const props = defineProps({
-  isOnboardingStepsCompleted: Boolean,
-})
+import OnboardingSteps from '@/components/OnboardingSteps.vue'
+import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
 
 const show = defineModel()
-
-const { steps, stepsCompleted, totalSteps, completedPercentage } =
-  useOnboarding()
 </script>
diff --git a/frontend/src/components/OnboardingSteps.vue b/frontend/src/components/OnboardingSteps.vue
new file mode 100644
index 00000000..90dc7011
--- /dev/null
+++ b/frontend/src/components/OnboardingSteps.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col justify-center items-center gap-1 mb-3">
+    <CRMLogo class="size-10 shrink-0 rounded mb-4" />
+    <div class="text-base font-medium">
+      {{ __('Welcome to Frappe CRM') }}
+    </div>
+    <div class="text-p-base font-normal">
+      {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
+    </div>
+  </div>
+  <div class="flex flex-col gap-2.5 overflow-hidden">
+    <div class="flex justify-between items-center py-0.5">
+      <div class="text-base font-medium">{{ __('Getting started') }}</div>
+      <Badge
+        :label="__('{0}% completed', [completedPercentage])"
+        theme="orange"
+        size="lg"
+      />
+    </div>
+    <div class="flex flex-col gap-1.5 overflow-y-auto">
+      <div
+        v-for="step in steps"
+        :key="step.title"
+        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
+        :class="[
+          step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
+        ]"
+        @click="() => !step.completed && step.onClick()"
+      >
+        <component :is="step.icon" class="h-4" />
+        <div class="text-base">{{ step.title }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import { useOnboarding } from '@/composables/onboarding'
+
+const emit = defineEmits(['close'])
+
+const { steps, stepsCompleted, totalSteps, completedPercentage } =
+  useOnboarding()
+</script>

From 2131b048d9c54d0933e46aaca23d116773760139 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 19:49:35 +0530
Subject: [PATCH 23/43] fix: show/hide help center

---
 frontend/src/components/Modals/HelpModal.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index fd5e902d..3fc239f4 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -7,10 +7,10 @@
   >
     <div class="flex items-center justify-between">
       <div class="text-base font-medium ml-1">
-        <div v-if="minimize && !isOnboardingStepsCompleted">
+        <div v-if="minimize && !isOnboardingStepsCompleted && !showHelpCenter">
           {{ __('Getting started') }}
         </div>
-        <div v-else>
+        <div v-else-if="showHelpCenter">
           {{ __('Help center') }}
         </div>
       </div>
@@ -27,25 +27,37 @@
       </div>
     </div>
     <div class="h-full overflow-hidden flex flex-col">
-      <OnboardingSteps v-if="!isOnboardingStepsCompleted" />
+      <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
     </div>
     <div class="flex flex-col gap-1.5">
       <div
-        v-if="!isOnboardingStepsCompleted"
+        v-if="!isOnboardingStepsCompleted && !showHelpCenter"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+        @click="showHelpCenter = !showHelpCenter"
       >
         <HelpIcon class="h-4" />
         <div class="text-base">{{ __('Help centre') }}</div>
       </div>
+      <div
+        v-if="showHelpCenter && !isOnboardingStepsCompleted"
+        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
+        @click="showHelpCenter = !showHelpCenter"
+      >
+        <StepsIcon class="h-4" />
+        <div class="text-base">{{ __('Getting started') }}</div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import OnboardingSteps from '@/components/OnboardingSteps.vue'
 import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
+import { ref } from 'vue'
 
 const show = defineModel()
+const showHelpCenter = ref(false)
 </script>

From a42eb6b99e596e9649ae085c5f6cde18341a8a97 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 19:56:16 +0530
Subject: [PATCH 24/43] fix: skip onboarding step

---
 frontend/src/components/OnboardingSteps.vue | 26 ++++++++++++++-------
 frontend/src/composables/onboarding.js      | 13 +++++++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/OnboardingSteps.vue b/frontend/src/components/OnboardingSteps.vue
index 90dc7011..dca983f8 100644
--- a/frontend/src/components/OnboardingSteps.vue
+++ b/frontend/src/components/OnboardingSteps.vue
@@ -21,14 +21,24 @@
       <div
         v-for="step in steps"
         :key="step.title"
-        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-        :class="[
-          step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
-        ]"
-        @click="() => !step.completed && step.onClick()"
+        class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
+        @click.stop="() => !step.completed && step.onClick()"
       >
-        <component :is="step.icon" class="h-4" />
-        <div class="text-base">{{ step.title }}</div>
+        <div
+          class="flex gap-2 items-center"
+          :class="[step.completed ? 'text-ink-gray-5' : 'text-ink-gray-8']"
+        >
+          <component :is="step.icon" class="h-4" />
+          <div class="text-base" :class="{ 'line-through': step.completed }">
+            {{ step.title }}
+          </div>
+        </div>
+        <Button
+          v-if="!step.completed"
+          :label="__('Skip')"
+          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
+          @click="() => skip(step.name)"
+        />
       </div>
     </div>
   </div>
@@ -39,6 +49,6 @@ import { useOnboarding } from '@/composables/onboarding'
 
 const emit = defineEmits(['close'])
 
-const { steps, stepsCompleted, totalSteps, completedPercentage } =
+const { steps, stepsCompleted, totalSteps, completedPercentage, skip } =
   useOnboarding()
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 03ab2a25..dc6874c1 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -190,7 +190,7 @@ export function useOnboarding() {
 
   syncStatus()
 
-  function updateOnboardingStep(step) {
+  function updateOnboardingStep(step, skipped = false) {
     if (isOnboardingStepsCompleted.value) return
     let user = window.user
     if (!user) return false
@@ -212,13 +212,21 @@ export function useOnboarding() {
 
     window.user = user
 
-    capture('onboarding_' + step)
+    if (skipped) {
+      capture('onboarding_skipped_' + step)
+    } else {
+      capture('onboarding_' + step)
+    }
 
     call('crm.api.onboarding.update_user_onboarding_status', {
       steps: JSON.stringify(_steps),
     })
   }
 
+  function skip(step) {
+    updateOnboardingStep(step, true)
+  }
+
   function syncStatus() {
     if (isOnboardingStepsCompleted.value) return
     let user = window.user
@@ -241,5 +249,6 @@ export function useOnboarding() {
     totalSteps,
     completedPercentage,
     updateOnboardingStep,
+    skip,
   }
 }

From b5baaf3cb17f98b5c8ce1e49479de958f21ab860 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 20:24:19 +0530
Subject: [PATCH 25/43] fix: skip all and reset

---
 frontend/src/components/Modals/HelpModal.vue |  2 +-
 frontend/src/components/OnboardingSteps.vue  | 28 ++++++++++--
 frontend/src/composables/onboarding.js       | 47 +++++++++++++++++++-
 3 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 3fc239f4..61b6a43e 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -7,7 +7,7 @@
   >
     <div class="flex items-center justify-between">
       <div class="text-base font-medium ml-1">
-        <div v-if="minimize && !isOnboardingStepsCompleted && !showHelpCenter">
+        <div v-if="!isOnboardingStepsCompleted && !showHelpCenter">
           {{ __('Getting started') }}
         </div>
         <div v-else-if="showHelpCenter">
diff --git a/frontend/src/components/OnboardingSteps.vue b/frontend/src/components/OnboardingSteps.vue
index dca983f8..a1887240 100644
--- a/frontend/src/components/OnboardingSteps.vue
+++ b/frontend/src/components/OnboardingSteps.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col justify-center items-center gap-1 mb-3">
+  <div class="flex flex-col justify-center items-center gap-1 mt-4 mb-7">
     <CRMLogo class="size-10 shrink-0 rounded mb-4" />
     <div class="text-base font-medium">
       {{ __('Welcome to Frappe CRM') }}
@@ -10,12 +10,25 @@
   </div>
   <div class="flex flex-col gap-2.5 overflow-hidden">
     <div class="flex justify-between items-center py-0.5">
-      <div class="text-base font-medium">{{ __('Getting started') }}</div>
       <Badge
         :label="__('{0}% completed', [completedPercentage])"
         theme="orange"
         size="lg"
       />
+      <div class="flex">
+        <Button
+          v-if="completedPercentage != 0"
+          variant="ghost"
+          :label="__('Reset')"
+          @click="reset"
+        />
+        <Button
+          v-if="completedPercentage != 100"
+          variant="ghost"
+          :label="__('Skip all')"
+          @click="skipAll"
+        />
+      </div>
     </div>
     <div class="flex flex-col gap-1.5 overflow-y-auto">
       <div
@@ -49,6 +62,13 @@ import { useOnboarding } from '@/composables/onboarding'
 
 const emit = defineEmits(['close'])
 
-const { steps, stepsCompleted, totalSteps, completedPercentage, skip } =
-  useOnboarding()
+const {
+  steps,
+  stepsCompleted,
+  totalSteps,
+  completedPercentage,
+  skip,
+  skipAll,
+  reset,
+} = useOnboarding()
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index dc6874c1..99bbd753 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -190,6 +190,18 @@ export function useOnboarding() {
 
   syncStatus()
 
+  function skip(step) {
+    updateOnboardingStep(step, true)
+  }
+
+  function skipAll() {
+    updateAll(true)
+  }
+
+  function reset() {
+    updateAll(false)
+  }
+
   function updateOnboardingStep(step, skipped = false) {
     if (isOnboardingStepsCompleted.value) return
     let user = window.user
@@ -223,8 +235,37 @@ export function useOnboarding() {
     })
   }
 
-  function skip(step) {
-    updateOnboardingStep(step, true)
+  function updateAll(value) {
+    if (isOnboardingStepsCompleted.value) return
+    let user = window.user
+    if (!user) return false
+
+    let _steps
+
+    if (!user.onboarding_status['frappe_crm_onboarding_status']) {
+      user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
+        (s) => {
+          return { name: s.name, completed: value }
+        },
+      )
+    } else {
+      _steps = user.onboarding_status['frappe_crm_onboarding_status']
+      _steps.forEach((step) => {
+        step.completed = value
+      })
+    }
+
+    steps.forEach((step) => {
+      step.completed = value
+    })
+
+    window.user = user
+
+    capture(value ? 'onboarding_skipped_all' : 'onboarding_reset_steps')
+
+    call('crm.api.onboarding.update_user_onboarding_status', {
+      steps: JSON.stringify(_steps),
+    })
   }
 
   function syncStatus() {
@@ -250,5 +291,7 @@ export function useOnboarding() {
     completedPercentage,
     updateOnboardingStep,
     skip,
+    skipAll,
+    reset,
   }
 }

From dce61b1033071f2a86575a055a7fe5e222ed4f90 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 21:52:07 +0530
Subject: [PATCH 26/43] fix: reset not working

refactored code
---
 frontend/src/components/Modals/HelpModal.vue | 80 +++++++++++++++-----
 frontend/src/composables/onboarding.js       |  6 +-
 2 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 61b6a43e..141e3e97 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -7,12 +7,7 @@
   >
     <div class="flex items-center justify-between">
       <div class="text-base font-medium ml-1">
-        <div v-if="!isOnboardingStepsCompleted && !showHelpCenter">
-          {{ __('Getting started') }}
-        </div>
-        <div v-else-if="showHelpCenter">
-          {{ __('Help center') }}
-        </div>
+        {{ __(title) }}
       </div>
       <div>
         <Button @click="minimize = !minimize" variant="ghost">
@@ -29,22 +24,13 @@
     <div class="h-full overflow-hidden flex flex-col">
       <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
     </div>
-    <div class="flex flex-col gap-1.5">
+    <div v-for="item in footerItems" class="flex flex-col gap-1.5">
       <div
-        v-if="!isOnboardingStepsCompleted && !showHelpCenter"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
-        @click="showHelpCenter = !showHelpCenter"
+        @click="item.onClick"
       >
-        <HelpIcon class="h-4" />
-        <div class="text-base">{{ __('Help centre') }}</div>
-      </div>
-      <div
-        v-if="showHelpCenter && !isOnboardingStepsCompleted"
-        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
-        @click="showHelpCenter = !showHelpCenter"
-      >
-        <StepsIcon class="h-4" />
-        <div class="text-base">{{ __('Getting started') }}</div>
+        <component :is="item.icon" class="h-4" />
+        <div class="text-base">{{ __(item.label) }}</div>
       </div>
     </div>
   </div>
@@ -55,9 +41,61 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import OnboardingSteps from '@/components/OnboardingSteps.vue'
-import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
-import { ref } from 'vue'
+import {
+  isOnboardingStepsCompleted,
+  minimize,
+  useOnboarding,
+} from '@/composables/onboarding'
+import { onMounted, computed } from 'vue'
 
 const show = defineModel()
 const showHelpCenter = ref(false)
+
+const title = computed(() => {
+  if (!isOnboardingStepsCompleted.value && !showHelpCenter.value) {
+    return __('Getting started')
+  } else if (showHelpCenter.value) {
+    return __('Help center')
+  }
+})
+
+const footerItems = computed(() => {
+  let items = [
+    {
+      icon: HelpIcon,
+      label: __('Help centre'),
+      onClick: () => {
+        showHelpCenter.value = true
+      },
+      condition: !isOnboardingStepsCompleted.value && !showHelpCenter.value,
+    },
+    {
+      icon: StepsIcon,
+      label: __('Getting started'),
+      onClick: () => (showHelpCenter.value = false),
+      condition: showHelpCenter.value && !isOnboardingStepsCompleted.value,
+    },
+    {
+      icon: StepsIcon,
+      label: __('Reset onboarding steps'),
+      onClick: resetOnboardingSteps,
+      condition: showHelpCenter.value && isOnboardingStepsCompleted.value,
+    },
+  ]
+
+  return items.filter((item) => item.condition)
+})
+
+function resetOnboardingSteps() {
+  const { reset } = useOnboarding()
+  reset()
+  isOnboardingStepsCompleted.value = false
+  showHelpCenter.value = false
+}
+
+onMounted(() => {
+  if (isOnboardingStepsCompleted.value) {
+    showHelpCenter.value = true
+  }
+})
 </script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 99bbd753..f78c6a44 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -199,7 +199,7 @@ export function useOnboarding() {
   }
 
   function reset() {
-    updateAll(false)
+    updateAll(false, true)
   }
 
   function updateOnboardingStep(step, skipped = false) {
@@ -235,8 +235,8 @@ export function useOnboarding() {
     })
   }
 
-  function updateAll(value) {
-    if (isOnboardingStepsCompleted.value) return
+  function updateAll(value, reset = false) {
+    if (isOnboardingStepsCompleted.value && !reset) return
     let user = window.user
     if (!user) return false
 

From a1705c10f0333f2ad6b17ef865e10fba5514235d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 21:53:26 +0530
Subject: [PATCH 27/43] fix: sync status after skip all

---
 frontend/src/components/GettingStartedBanner.vue | 10 +++++++---
 frontend/src/components/Layouts/AppSidebar.vue   |  8 +++++++-
 frontend/src/components/Modals/HelpModal.vue     |  6 +++---
 frontend/src/composables/onboarding.js           |  1 +
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
index b520d0a0..7660b73b 100644
--- a/frontend/src/components/GettingStartedBanner.vue
+++ b/frontend/src/components/GettingStartedBanner.vue
@@ -25,7 +25,12 @@
         <FeatherIcon
           name="x"
           class="h-4 cursor-pointer"
-          @click="isOnboardingStepsCompleted = true"
+          @click="
+            () => {
+              emit('showHelpCenter')
+              isOnboardingStepsCompleted = true
+            }
+          "
         />
       </div>
       <div class="text-p-sm text-ink-gray-7">
@@ -46,7 +51,6 @@ import {
   isOnboardingStepsCompleted,
   useOnboarding,
 } from '@/composables/onboarding'
-import FeatherIcon from 'frappe-ui/src/components/FeatherIcon.vue'
 
 const props = defineProps({
   isSidebarCollapsed: {
@@ -55,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['completeNow'])
+const emit = defineEmits(['completeNow', 'showHelpCenter'])
 
 const { stepsCompleted, totalSteps } = useOnboarding()
 </script>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 6235d733..119f16be 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -83,6 +83,7 @@
             showHelpModal = true
           }
         "
+        @showHelpCenter="showHelpCenter = true"
       />
       <SidebarLink
         v-else
@@ -112,7 +113,11 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      v-model:showHelpCenter="showHelpCenter"
+    />
   </div>
 </template>
 
@@ -260,4 +265,5 @@ function getIcon(routeName, icon) {
 }
 
 const showHelpModal = ref(false)
+const showHelpCenter = ref(false)
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
index 141e3e97..d2edefb7 100644
--- a/frontend/src/components/Modals/HelpModal.vue
+++ b/frontend/src/components/Modals/HelpModal.vue
@@ -49,7 +49,7 @@ import {
 import { onMounted, computed } from 'vue'
 
 const show = defineModel()
-const showHelpCenter = ref(false)
+const showHelpCenter = defineModel('showHelpCenter')
 
 const title = computed(() => {
   if (!isOnboardingStepsCompleted.value && !showHelpCenter.value) {
@@ -65,6 +65,7 @@ const footerItems = computed(() => {
       icon: HelpIcon,
       label: __('Help centre'),
       onClick: () => {
+        useOnboarding().syncStatus()
         showHelpCenter.value = true
       },
       condition: !isOnboardingStepsCompleted.value && !showHelpCenter.value,
@@ -87,8 +88,7 @@ const footerItems = computed(() => {
 })
 
 function resetOnboardingSteps() {
-  const { reset } = useOnboarding()
-  reset()
+  useOnboarding().reset()
   isOnboardingStepsCompleted.value = false
   showHelpCenter.value = false
 }
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index f78c6a44..22d12a08 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -293,5 +293,6 @@ export function useOnboarding() {
     skip,
     skipAll,
     reset,
+    syncStatus,
   }
 }

From fb3a0cbf425baf283659554bf6bbcfbb0acab403 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 12 Mar 2025 21:53:51 +0530
Subject: [PATCH 28/43] fix: use router directly instead of vue-router

---
 frontend/src/composables/onboarding.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
index 22d12a08..a5698164 100644
--- a/frontend/src/composables/onboarding.js
+++ b/frontend/src/composables/onboarding.js
@@ -9,12 +9,10 @@ import StepsIcon from '@/components/Icons/StepsIcon.vue'
 import { capture } from '@/telemetry'
 import { showSettings, activeSettingsPage } from '@/composables/settings'
 import { useStorage } from '@vueuse/core'
+import router from '@/router'
 import { call } from 'frappe-ui'
-import { useRouter } from 'vue-router'
 import { ref, reactive, computed, markRaw } from 'vue'
 
-let router
-
 export const minimize = ref(false)
 
 export const isOnboardingStepsCompleted = useStorage(
@@ -186,8 +184,6 @@ const completedPercentage = computed(() =>
 )
 
 export function useOnboarding() {
-  router = useRouter()
-
   syncStatus()
 
   function skip(step) {

From 4326582c5b689c35f9a01b72f39ded2fc0bda93f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 12:55:34 +0530
Subject: [PATCH 29/43] fix: use onboarding/help components & composable from
 frappe ui

---
 .../src/components/GettingStartedBanner.vue   |  65 ----
 .../src/components/Layouts/AppSidebar.vue     | 196 ++++++++++--
 frontend/src/components/Modals/HelpModal.vue  | 101 ------
 frontend/src/components/OnboardingSteps.vue   |  74 -----
 frontend/src/composables/onboarding.js        | 294 ------------------
 5 files changed, 177 insertions(+), 553 deletions(-)
 delete mode 100644 frontend/src/components/GettingStartedBanner.vue
 delete mode 100644 frontend/src/components/Modals/HelpModal.vue
 delete mode 100644 frontend/src/components/OnboardingSteps.vue
 delete mode 100644 frontend/src/composables/onboarding.js

diff --git a/frontend/src/components/GettingStartedBanner.vue b/frontend/src/components/GettingStartedBanner.vue
deleted file mode 100644
index 7660b73b..00000000
--- a/frontend/src/components/GettingStartedBanner.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div
-    v-if="!isSidebarCollapsed"
-    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
-  >
-    <div v-if="stepsCompleted != totalSteps" class="inline-flex gap-2">
-      <StepsIcon class="h-4 my-0.5 shrink-0" />
-      <div class="flex flex-col text-p-sm gap-0.5">
-        <div class="text-ink-gray-9 font-medium">
-          {{ __('Gettings started') }}
-        </div>
-        <div class="text-ink-gray-7">
-          {{ __('{0}/{1} steps', [stepsCompleted, totalSteps]) }}
-        </div>
-      </div>
-    </div>
-    <div v-else class="flex flex-col gap-1">
-      <div class="flex items-center justify-between gap-1">
-        <div class="flex items-center gap-2 shrink-0">
-          <StepsIcon class="h-4 my-0.5" />
-          <div class="text-ink-gray-9 font-medium">
-            {{ __('You are all set!') }}
-          </div>
-        </div>
-        <FeatherIcon
-          name="x"
-          class="h-4 cursor-pointer"
-          @click="
-            () => {
-              emit('showHelpCenter')
-              isOnboardingStepsCompleted = true
-            }
-          "
-        />
-      </div>
-      <div class="text-p-sm text-ink-gray-7">
-        {{ __('All steps are completed successfully!') }}
-      </div>
-    </div>
-    <Button
-      v-if="stepsCompleted != totalSteps"
-      :label="__('Complete now')"
-      theme="blue"
-      @click="emit('completeNow')"
-    />
-  </div>
-</template>
-<script setup>
-import StepsIcon from '@/components/Icons/StepsIcon.vue'
-import {
-  isOnboardingStepsCompleted,
-  useOnboarding,
-} from '@/composables/onboarding'
-
-const props = defineProps({
-  isSidebarCollapsed: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['completeNow', 'showHelpCenter'])
-
-const { stepsCompleted, totalSteps } = useOnboarding()
-</script>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 119f16be..1931ba30 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -77,13 +77,6 @@
       <GettingStartedBanner
         v-if="!isOnboardingStepsCompleted"
         :isSidebarCollapsed="isSidebarCollapsed"
-        @completeNow="
-          () => {
-            minimize = false
-            showHelpModal = true
-          }
-        "
-        @showHelpCenter="showHelpCenter = true"
       />
       <SidebarLink
         v-else
@@ -113,15 +106,17 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal
-      v-if="showHelpModal"
-      v-model="showHelpModal"
-      v-model:showHelpCenter="showHelpCenter"
-    />
+    <HelpModal v-if="showHelpModal" v-model="showHelpModal" :logo="CRMLogo" />
   </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'
@@ -140,17 +135,24 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
 import SignupBanner from '@/components/SignupBanner.vue'
-import GettingStartedBanner from '@/components/GettingStartedBanner.vue'
-import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
-import { FeatherIcon, TrialBanner } from 'frappe-ui'
+import { showSettings, activeSettingsPage } from '@/composables/settings'
+import {
+  FeatherIcon,
+  TrialBanner,
+  HelpModal,
+  GettingStartedBanner,
+  useOnboarding,
+  showHelpModal,
+  minimize,
+} from 'frappe-ui'
+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()
@@ -264,6 +266,162 @@ function getIcon(routeName, icon) {
   }
 }
 
-const showHelpModal = ref(false)
-const showHelpCenter = ref(false)
+// 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: true,
+    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))
 </script>
diff --git a/frontend/src/components/Modals/HelpModal.vue b/frontend/src/components/Modals/HelpModal.vue
deleted file mode 100644
index d2edefb7..00000000
--- a/frontend/src/components/Modals/HelpModal.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-  <div
-    v-show="show"
-    class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
-    :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
-    @click.stop
-  >
-    <div class="flex items-center justify-between">
-      <div class="text-base font-medium ml-1">
-        {{ __(title) }}
-      </div>
-      <div>
-        <Button @click="minimize = !minimize" variant="ghost">
-          <component
-            :is="minimize ? MaximizeIcon : MinimizeIcon"
-            class="h-3.5"
-          />
-        </Button>
-        <Button variant="ghost" @click="show = false">
-          <FeatherIcon name="x" class="h-3.5" />
-        </Button>
-      </div>
-    </div>
-    <div class="h-full overflow-hidden flex flex-col">
-      <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
-    </div>
-    <div v-for="item in footerItems" class="flex flex-col gap-1.5">
-      <div
-        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
-        @click="item.onClick"
-      >
-        <component :is="item.icon" class="h-4" />
-        <div class="text-base">{{ __(item.label) }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import StepsIcon from '@/components/Icons/StepsIcon.vue'
-import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
-import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
-import HelpIcon from '@/components/Icons/HelpIcon.vue'
-import OnboardingSteps from '@/components/OnboardingSteps.vue'
-import {
-  isOnboardingStepsCompleted,
-  minimize,
-  useOnboarding,
-} from '@/composables/onboarding'
-import { onMounted, computed } from 'vue'
-
-const show = defineModel()
-const showHelpCenter = defineModel('showHelpCenter')
-
-const title = computed(() => {
-  if (!isOnboardingStepsCompleted.value && !showHelpCenter.value) {
-    return __('Getting started')
-  } else if (showHelpCenter.value) {
-    return __('Help center')
-  }
-})
-
-const footerItems = computed(() => {
-  let items = [
-    {
-      icon: HelpIcon,
-      label: __('Help centre'),
-      onClick: () => {
-        useOnboarding().syncStatus()
-        showHelpCenter.value = true
-      },
-      condition: !isOnboardingStepsCompleted.value && !showHelpCenter.value,
-    },
-    {
-      icon: StepsIcon,
-      label: __('Getting started'),
-      onClick: () => (showHelpCenter.value = false),
-      condition: showHelpCenter.value && !isOnboardingStepsCompleted.value,
-    },
-    {
-      icon: StepsIcon,
-      label: __('Reset onboarding steps'),
-      onClick: resetOnboardingSteps,
-      condition: showHelpCenter.value && isOnboardingStepsCompleted.value,
-    },
-  ]
-
-  return items.filter((item) => item.condition)
-})
-
-function resetOnboardingSteps() {
-  useOnboarding().reset()
-  isOnboardingStepsCompleted.value = false
-  showHelpCenter.value = false
-}
-
-onMounted(() => {
-  if (isOnboardingStepsCompleted.value) {
-    showHelpCenter.value = true
-  }
-})
-</script>
diff --git a/frontend/src/components/OnboardingSteps.vue b/frontend/src/components/OnboardingSteps.vue
deleted file mode 100644
index a1887240..00000000
--- a/frontend/src/components/OnboardingSteps.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="flex flex-col justify-center items-center gap-1 mt-4 mb-7">
-    <CRMLogo class="size-10 shrink-0 rounded mb-4" />
-    <div class="text-base font-medium">
-      {{ __('Welcome to Frappe CRM') }}
-    </div>
-    <div class="text-p-base font-normal">
-      {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
-    </div>
-  </div>
-  <div class="flex flex-col gap-2.5 overflow-hidden">
-    <div class="flex justify-between items-center py-0.5">
-      <Badge
-        :label="__('{0}% completed', [completedPercentage])"
-        theme="orange"
-        size="lg"
-      />
-      <div class="flex">
-        <Button
-          v-if="completedPercentage != 0"
-          variant="ghost"
-          :label="__('Reset')"
-          @click="reset"
-        />
-        <Button
-          v-if="completedPercentage != 100"
-          variant="ghost"
-          :label="__('Skip all')"
-          @click="skipAll"
-        />
-      </div>
-    </div>
-    <div class="flex flex-col gap-1.5 overflow-y-auto">
-      <div
-        v-for="step in steps"
-        :key="step.title"
-        class="group w-full flex gap-2 justify-between items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-        @click.stop="() => !step.completed && step.onClick()"
-      >
-        <div
-          class="flex gap-2 items-center"
-          :class="[step.completed ? 'text-ink-gray-5' : 'text-ink-gray-8']"
-        >
-          <component :is="step.icon" class="h-4" />
-          <div class="text-base" :class="{ 'line-through': step.completed }">
-            {{ step.title }}
-          </div>
-        </div>
-        <Button
-          v-if="!step.completed"
-          :label="__('Skip')"
-          class="!h-4 text-xs !text-ink-gray-6 hidden group-hover:flex"
-          @click="() => skip(step.name)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import CRMLogo from '@/components/Icons/CRMLogo.vue'
-import { useOnboarding } from '@/composables/onboarding'
-
-const emit = defineEmits(['close'])
-
-const {
-  steps,
-  stepsCompleted,
-  totalSteps,
-  completedPercentage,
-  skip,
-  skipAll,
-  reset,
-} = useOnboarding()
-</script>
diff --git a/frontend/src/composables/onboarding.js b/frontend/src/composables/onboarding.js
deleted file mode 100644
index a5698164..00000000
--- a/frontend/src/composables/onboarding.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
-import InviteIcon from '@/components/Icons/InviteIcon.vue'
-import ConvertIcon from '@/components/Icons/ConvertIcon.vue'
-import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import CommentIcon from '@/components/Icons/CommentIcon.vue'
-import EmailIcon from '@/components/Icons/EmailIcon.vue'
-import TaskIcon from '@/components/Icons/TaskIcon.vue'
-import StepsIcon from '@/components/Icons/StepsIcon.vue'
-import { capture } from '@/telemetry'
-import { showSettings, activeSettingsPage } from '@/composables/settings'
-import { useStorage } from '@vueuse/core'
-import router from '@/router'
-import { call } from 'frappe-ui'
-import { ref, reactive, computed, markRaw } from 'vue'
-
-export const minimize = ref(false)
-
-export const isOnboardingStepsCompleted = useStorage(
-  'isOnboardingStepsCompleted',
-  false,
-)
-
-const firstLead = ref('')
-const firstDeal = ref('')
-
-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' })
-      }
-    },
-  },
-])
-
-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 stepsCompleted = computed(
-  () => steps.filter((step) => step.completed).length,
-)
-const totalSteps = ref(steps.length)
-
-const completedPercentage = computed(() =>
-  Math.floor((stepsCompleted.value / totalSteps.value) * 100),
-)
-
-export function useOnboarding() {
-  syncStatus()
-
-  function skip(step) {
-    updateOnboardingStep(step, true)
-  }
-
-  function skipAll() {
-    updateAll(true)
-  }
-
-  function reset() {
-    updateAll(false, true)
-  }
-
-  function updateOnboardingStep(step, skipped = false) {
-    if (isOnboardingStepsCompleted.value) return
-    let user = window.user
-    if (!user) return false
-
-    if (!user.onboarding_status['frappe_crm_onboarding_status']) {
-      user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
-        (s) => {
-          return { name: s.name, completed: false }
-        },
-      )
-    }
-
-    let _steps = user.onboarding_status['frappe_crm_onboarding_status']
-    let index = _steps.findIndex((s) => s.name === step)
-    if (index !== -1) {
-      _steps[index].completed = true
-      steps[index].completed = true
-    }
-
-    window.user = user
-
-    if (skipped) {
-      capture('onboarding_skipped_' + step)
-    } else {
-      capture('onboarding_' + step)
-    }
-
-    call('crm.api.onboarding.update_user_onboarding_status', {
-      steps: JSON.stringify(_steps),
-    })
-  }
-
-  function updateAll(value, reset = false) {
-    if (isOnboardingStepsCompleted.value && !reset) return
-    let user = window.user
-    if (!user) return false
-
-    let _steps
-
-    if (!user.onboarding_status['frappe_crm_onboarding_status']) {
-      user.onboarding_status['frappe_crm_onboarding_status'] = steps.map(
-        (s) => {
-          return { name: s.name, completed: value }
-        },
-      )
-    } else {
-      _steps = user.onboarding_status['frappe_crm_onboarding_status']
-      _steps.forEach((step) => {
-        step.completed = value
-      })
-    }
-
-    steps.forEach((step) => {
-      step.completed = value
-    })
-
-    window.user = user
-
-    capture(value ? 'onboarding_skipped_all' : 'onboarding_reset_steps')
-
-    call('crm.api.onboarding.update_user_onboarding_status', {
-      steps: JSON.stringify(_steps),
-    })
-  }
-
-  function syncStatus() {
-    if (isOnboardingStepsCompleted.value) return
-    let user = window.user
-    if (!user) return false
-
-    if (user.onboarding_status['frappe_crm_onboarding_status']) {
-      let _steps = user.onboarding_status['frappe_crm_onboarding_status']
-      _steps.forEach((step, index) => {
-        steps[index].completed = step.completed
-      })
-      isOnboardingStepsCompleted.value = _steps.every((step) => step.completed)
-    } else {
-      isOnboardingStepsCompleted.value = false
-    }
-  }
-
-  return {
-    steps,
-    stepsCompleted,
-    totalSteps,
-    completedPercentage,
-    updateOnboardingStep,
-    skip,
-    skipAll,
-    reset,
-    syncStatus,
-  }
-}

From c1e0ace84bfcda7f62553057483e8a025a533dc9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 13:33:46 +0530
Subject: [PATCH 30/43] fix: use useOnboading composable from frappe-ui

---
 frontend/src/components/CommunicationArea.vue        |  5 ++---
 frontend/src/components/Layouts/AppSidebar.vue       |  1 +
 frontend/src/components/Modals/LeadModal.vue         |  5 ++---
 frontend/src/components/Modals/NoteModal.vue         |  5 ++---
 frontend/src/components/Modals/TaskModal.vue         | 12 +++++++++---
 .../src/components/Settings/InviteMemberPage.vue     |  4 ++--
 frontend/src/pages/Deal.vue                          |  8 +++-----
 frontend/src/pages/Lead.vue                          |  4 ++--
 8 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 4052a3b8..d306086d 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -94,9 +94,8 @@ import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import { capture } from '@/telemetry'
 import { usersStore } from '@/stores/users'
-import { useOnboarding } from '@/composables/onboarding'
 import { useStorage } from '@vueuse/core'
-import { call, createResource } from 'frappe-ui'
+import { call, createResource, useOnboarding } from 'frappe-ui'
 import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
@@ -112,7 +111,7 @@ const reload = defineModel('reload')
 const emit = defineEmits(['scroll'])
 
 const { getUser } = usersStore()
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const showEmailBox = ref(false)
 const showCommentBox = ref(false)
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 1931ba30..da913dcd 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -149,6 +149,7 @@ import {
   useOnboarding,
   showHelpModal,
   minimize,
+  call,
 } from 'frappe-ui'
 import router from '@/router'
 import { useStorage } from '@vueuse/core'
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index aa158658..397897f4 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -47,9 +47,8 @@ import FieldLayout from '@/components/FieldLayout/FieldLayout.vue'
 import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
-import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
-import { createResource } from 'frappe-ui'
+import { createResource, useOnboarding } from 'frappe-ui'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -59,7 +58,7 @@ const props = defineProps({
 
 const { getUser, isManager } = usersStore()
 const { getLeadStatus, statusOptions } = statusesStore()
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const show = defineModel()
 const router = useRouter()
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 30a74154..bfbf7a76 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -65,8 +65,7 @@
 <script setup>
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { capture } from '@/telemetry'
-import { useOnboarding } from '@/composables/onboarding'
-import { TextEditor, call } from 'frappe-ui'
+import { TextEditor, call, useOnboarding } from 'frappe-ui'
 import { ref, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -92,7 +91,7 @@ const emit = defineEmits(['after'])
 
 const router = useRouter()
 
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const title = ref(null)
 const editMode = ref(false)
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 7068cfe6..073a5315 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -117,9 +117,15 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions, getFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
-import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
-import { TextEditor, Dropdown, Tooltip, call, DateTimePicker } from 'frappe-ui'
+import {
+  TextEditor,
+  Dropdown,
+  Tooltip,
+  call,
+  DateTimePicker,
+  useOnboarding,
+} from 'frappe-ui'
 import { ref, watch, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -145,7 +151,7 @@ const emit = defineEmits(['updateTask', 'after'])
 
 const router = useRouter()
 const { getUser } = usersStore()
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const title = ref(null)
 const editMode = ref(false)
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index 276a8ff0..a2365bd0 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -80,17 +80,17 @@
 </template>
 <script setup>
 import MultiValueInput from '@/components/Controls/MultiValueInput.vue'
-import { useOnboarding } from '@/composables/onboarding'
 import { validateEmail, convertArrayToString } from '@/utils'
 import {
   createListResource,
   createResource,
   FormControl,
   Tooltip,
+  useOnboarding,
 } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const invitees = ref([])
 const role = ref('Sales User')
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 3d5cfe30..88e2dc90 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -331,10 +331,6 @@ import { globalStore } from '@/stores/global'
 import { statusesStore } from '@/stores/statuses'
 import { getMeta } from '@/stores/meta'
 import { whatsappEnabled, callEnabled } from '@/composables/settings'
-import {
-  isOnboardingStepsCompleted,
-  useOnboarding,
-} from '@/composables/onboarding'
 import {
   createResource,
   Dropdown,
@@ -344,6 +340,8 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  isOnboardingStepsCompleted,
+  useOnboarding,
 } from 'frappe-ui'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -354,7 +352,7 @@ const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Deal')
 
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const route = useRoute()
 const router = useRouter()
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 6d6704d7..3d5247c6 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -348,7 +348,6 @@ import {
   callEnabled,
   isMobileView,
 } from '@/composables/settings'
-import { useOnboarding } from '@/composables/onboarding'
 import { capture } from '@/telemetry'
 import {
   createResource,
@@ -361,6 +360,7 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
+  useOnboarding,
 } from 'frappe-ui'
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -372,7 +372,7 @@ const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getLeadStatus, getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Lead')
 
-const { updateOnboardingStep } = useOnboarding()
+const { updateOnboardingStep } = useOnboarding('frappecrm')
 
 const route = useRoute()
 const router = useRouter()

From 5b7da5decbc87a06bded332cdd1a84977750635c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 13:59:30 +0530
Subject: [PATCH 31/43] fix: capture telemetry event for skip, skipAll & reset

---
 frontend/src/components/Layouts/AppSidebar.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index da913dcd..1174698d 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -106,7 +106,14 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal v-if="showHelpModal" v-model="showHelpModal" :logo="CRMLogo" />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      :logo="CRMLogo"
+      :afterSkip="(step) => capture('onboarding_step_skipped_' + step)"
+      :afterSkipAll="() => capture('onboarding_steps_skipped')"
+      :afterReset="() => capture('onboarding_steps_reset')"
+    />
   </div>
 </template>
 
@@ -151,6 +158,7 @@ import {
   minimize,
   call,
 } from 'frappe-ui'
+import { capture } from '@/telemetry'
 import router from '@/router'
 import { useStorage } from '@vueuse/core'
 import { ref, reactive, computed, h, markRaw, onMounted } from 'vue'

From df91cfb8175f4e9b0da53d41686dc5c14b48e16b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 14:12:48 +0530
Subject: [PATCH 32/43] fix: removed api to update onboarding status

---
 crm/api/onboarding.py                          | 18 ------------------
 frontend/src/components/Layouts/AppSidebar.vue |  2 +-
 frontend/src/pages/Deal.vue                    |  4 ++--
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/crm/api/onboarding.py b/crm/api/onboarding.py
index 088000e3..00d27b07 100644
--- a/crm/api/onboarding.py
+++ b/crm/api/onboarding.py
@@ -1,24 +1,6 @@
-import json
-
 import frappe
 
 
-@frappe.whitelist()
-def update_user_onboarding_status(steps: str):
-	steps = json.loads(steps)
-
-	# get the current onboarding status
-	onboarding_status = frappe.db.get_value("User", frappe.session.user, "onboarding_status")
-	onboarding_status = frappe.parse_json(onboarding_status)
-
-	# update the onboarding status
-	onboarding_status["frappe_crm_onboarding_status"] = steps
-
-	frappe.db.set_value(
-		"User", frappe.session.user, "onboarding_status", json.dumps(onboarding_status), update_modified=False
-	)
-
-
 @frappe.whitelist()
 def get_first_lead():
 	lead = frappe.get_all(
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 1174698d..56df60a0 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -296,7 +296,7 @@ const steps = reactive([
     name: 'create_first_lead',
     title: 'Create your first lead',
     icon: markRaw(LeadsIcon),
-    completed: true,
+    completed: false,
     onClick: () => {
       minimize.value = true
       router.push({ name: 'Leads' })
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 88e2dc90..96d84c15 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -340,7 +340,6 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
-  isOnboardingStepsCompleted,
   useOnboarding,
 } from 'frappe-ui'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
@@ -352,7 +351,8 @@ const { $dialog, $socket, makeCall } = globalStore()
 const { statusOptions, getDealStatus } = statusesStore()
 const { doctypeMeta } = getMeta('CRM Deal')
 
-const { updateOnboardingStep } = useOnboarding('frappecrm')
+const { updateOnboardingStep, isOnboardingStepsCompleted } =
+  useOnboarding('frappecrm')
 
 const route = useRoute()
 const router = useRouter()

From 765d0bbf82e29262df867397ae1cf94e8030c6ca Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 20:04:46 +0530
Subject: [PATCH 33/43] fix: removed userinfo from boot

---
 crm/www/crm.py | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/crm/www/crm.py b/crm/www/crm.py
index 0b971cc6..c630506f 100644
--- a/crm/www/crm.py
+++ b/crm/www/crm.py
@@ -38,7 +38,6 @@ def get_boot():
 			"sysdefaults": frappe.defaults.get_defaults(),
 			"is_demo_site": frappe.conf.get("is_demo_site"),
 			"is_fc_site": is_fc_site(),
-			"user": get_user(),
 			"timezone": {
 				"system": get_system_timezone(),
 				"user": frappe.db.get_value("User", frappe.session.user, "time_zone")
@@ -50,25 +49,3 @@ def get_boot():
 
 def get_default_route():
 	return "/crm"
-
-
-def get_user():
-	"""get user info"""
-	user = frappe.db.get_value(
-		"User",
-		frappe.session.user,
-		[
-			"creation",
-			"email",
-			"email_signature",
-			"first_name",
-			"language",
-			"last_name",
-			"user_type",
-			"onboarding_status",
-		],
-		as_dict=True,
-	)
-	user.onboarding_status = frappe.parse_json(user.onboarding_status)
-
-	return user

From d76b0e4df3fb1460800c71cf2c904d0a6f9f0b6c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 20:16:40 +0530
Subject: [PATCH 34/43] build(deps): bump frappeui to 0.1.116

---
 frappe-ui             |   2 +-
 frontend/package.json |   2 +-
 yarn.lock             | 367 ++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 360 insertions(+), 11 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 33c9907a..f0f82b0c 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 33c9907aa9163d8d3b84f23dc2a2c829e4d8c6f1
+Subproject commit f0f82b0cb7f29ac8a07a8e2ee67b88f1f04115bc
diff --git a/frontend/package.json b/frontend/package.json
index bb53389b..ef320a9b 100644
--- a/frontend/package.json
+++ b/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.116",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 77758d1f..4fa34d33 100644
--- a/yarn.lock
+++ b/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:
-  version "0.1.111"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.111.tgz#c7615aa8f02da9af0596074352150d813d0f4b3d"
-  integrity sha512-JCh/SQwcbsQQxTZIFFzEULPgp2QAQZe+vwrM2jqekIx4dBgYW2H1KgXSlf+uO2ng2vqk4Q1MiStA3svHQEXsLQ==
+frappe-ui@^0.1.116:
+  version "0.1.116"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.116.tgz#39b36c313b845305a1b27cb92a8f0e37a435ddc9"
+  integrity sha512-qoXL/FJuEUH6p8LuUJIF8ttQon7Z24uuPTbZ69ErbKc77MeAOY0HOtWARXng65jX5mhyoceChtVmXuqCq7bBaA==
   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"

From 46eb2395d14f4d8cdd37c5d2fe9f31f0895349cd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 18 Mar 2025 20:37:28 +0530
Subject: [PATCH 35/43] fix: import onboarding components & composables from
 frappe-ui/frappe

---
 frappe-ui                                             |  2 +-
 frontend/src/components/CommunicationArea.vue         |  3 ++-
 frontend/src/components/Layouts/AppSidebar.vue        |  6 ++----
 frontend/src/components/Modals/LeadModal.vue          |  3 ++-
 frontend/src/components/Modals/NoteModal.vue          |  3 ++-
 frontend/src/components/Modals/TaskModal.vue          | 10 ++--------
 frontend/src/components/Settings/InviteMemberPage.vue |  2 +-
 frontend/src/pages/Deal.vue                           |  2 +-
 frontend/src/pages/Lead.vue                           |  2 +-
 9 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index f0f82b0c..e84d7088 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit f0f82b0cb7f29ac8a07a8e2ee67b88f1f04115bc
+Subproject commit e84d708832eefb5c79d38a98d4479dff4a3f505f
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index d306086d..d262a3de 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -95,7 +95,8 @@ import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import { capture } from '@/telemetry'
 import { usersStore } from '@/stores/users'
 import { useStorage } from '@vueuse/core'
-import { call, createResource, useOnboarding } from 'frappe-ui'
+import { call, createResource } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 56df60a0..3e013ca7 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -148,16 +148,14 @@ import {
   notificationsStore,
 } from '@/stores/notifications'
 import { showSettings, activeSettingsPage } from '@/composables/settings'
+import { FeatherIcon, TrialBanner, call } from 'frappe-ui'
 import {
-  FeatherIcon,
-  TrialBanner,
   HelpModal,
   GettingStartedBanner,
   useOnboarding,
   showHelpModal,
   minimize,
-  call,
-} from 'frappe-ui'
+} from 'frappe-ui/frappe'
 import { capture } from '@/telemetry'
 import router from '@/router'
 import { useStorage } from '@vueuse/core'
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 397897f4..2d5de02d 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -48,7 +48,8 @@ import { usersStore } from '@/stores/users'
 import { statusesStore } from '@/stores/statuses'
 import { isMobileView } from '@/composables/settings'
 import { capture } from '@/telemetry'
-import { createResource, useOnboarding } from 'frappe-ui'
+import { createResource } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index bfbf7a76..32e6b01d 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -65,7 +65,8 @@
 <script setup>
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { capture } from '@/telemetry'
-import { TextEditor, call, useOnboarding } from 'frappe-ui'
+import { TextEditor, call } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 073a5315..826ed386 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -118,14 +118,8 @@ import Link from '@/components/Controls/Link.vue'
 import { taskStatusOptions, taskPriorityOptions, getFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { capture } from '@/telemetry'
-import {
-  TextEditor,
-  Dropdown,
-  Tooltip,
-  call,
-  DateTimePicker,
-  useOnboarding,
-} from 'frappe-ui'
+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'
 
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index a2365bd0..cb57e53c 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -86,8 +86,8 @@ import {
   createResource,
   FormControl,
   Tooltip,
-  useOnboarding,
 } from 'frappe-ui'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed } from 'vue'
 
 const { updateOnboardingStep } = useOnboarding('frappecrm')
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 96d84c15..5341bda1 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -340,8 +340,8 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
-  useOnboarding,
 } 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'
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 3d5247c6..8d6b7a08 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -360,8 +360,8 @@ import {
   Breadcrumbs,
   call,
   usePageMeta,
-  useOnboarding,
 } 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'

From 041fef9b0973567dacce2776e8e6657a8c12edac Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 00:50:55 +0530
Subject: [PATCH 36/43] fix: import onboarding components & composables from
 frappe-ui/src/frappe

---
 frontend/src/components/CommunicationArea.vue         | 2 +-
 frontend/src/components/Layouts/AppSidebar.vue        | 2 +-
 frontend/src/components/Modals/LeadModal.vue          | 2 +-
 frontend/src/components/Modals/NoteModal.vue          | 2 +-
 frontend/src/components/Modals/TaskModal.vue          | 2 +-
 frontend/src/components/Settings/InviteMemberPage.vue | 2 +-
 frontend/src/pages/Deal.vue                           | 2 +-
 frontend/src/pages/Lead.vue                           | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index d262a3de..c083a269 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -96,7 +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 { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 3e013ca7..545acc7b 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -155,7 +155,7 @@ import {
   useOnboarding,
   showHelpModal,
   minimize,
-} from 'frappe-ui/frappe'
+} from 'frappe-ui/src/frappe'
 import { capture } from '@/telemetry'
 import router from '@/router'
 import { useStorage } from '@vueuse/core'
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index 2d5de02d..ff8be96a 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -49,7 +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 { useOnboarding } from 'frappe-ui/src/frappe'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index 32e6b01d..b1ae6505 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -66,7 +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 { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 826ed386..640c7414 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -119,7 +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 { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, watch, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index cb57e53c..4416af9c 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -87,7 +87,7 @@ import {
   FormControl,
   Tooltip,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, computed } from 'vue'
 
 const { updateOnboardingStep } = useOnboarding('frappecrm')
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 5341bda1..d556b80b 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -341,7 +341,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 8d6b7a08..4a75e4f5 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -361,7 +361,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/frappe'
+import { useOnboarding } from 'frappe-ui/src/frappe'
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useActiveTabManager } from '@/composables/useActiveTabManager'

From 7713acc3f1ebae0d01edaa28760b64dd9b72b4e1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 00:51:27 +0530
Subject: [PATCH 37/43] fix: pass articles for help center

---
 frappe-ui                                     |   2 +-
 .../src/components/Layouts/AppSidebar.vue     | 110 ++++++++++++++++--
 2 files changed, 102 insertions(+), 10 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index e84d7088..f70ac1c5 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit e84d708832eefb5c79d38a98d4479dff4a3f505f
+Subproject commit f70ac1c5cd6aed29eb2a4c449b0fe3a7213c74e7
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 545acc7b..4c3894c1 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -82,7 +82,12 @@
         v-else
         :label="__('Help')"
         :isCollapsed="isSidebarCollapsed"
-        @click="showHelpModal = !showHelpModal"
+        @click="
+          () => {
+            showHelpModal = minimize ? true : !showHelpModal
+            minimize = !showHelpModal
+          }
+        "
       >
         <template #icon>
           <HelpIcon class="h-4 w-4" />
@@ -109,10 +114,12 @@
     <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>
@@ -292,7 +299,7 @@ async function getFirstDeal() {
 const steps = reactive([
   {
     name: 'create_first_lead',
-    title: 'Create your first lead',
+    title: __('Create your first lead'),
     icon: markRaw(LeadsIcon),
     completed: false,
     onClick: () => {
@@ -302,7 +309,7 @@ const steps = reactive([
   },
   {
     name: 'invite_your_team',
-    title: 'Invite your team',
+    title: __('Invite your team'),
     icon: markRaw(InviteIcon),
     completed: false,
     onClick: () => {
@@ -313,7 +320,7 @@ const steps = reactive([
   },
   {
     name: 'convert_lead_to_deal',
-    title: 'Convert lead to deal',
+    title: __('Convert lead to deal'),
     icon: markRaw(ConvertIcon),
     completed: false,
     onClick: async () => {
@@ -330,7 +337,7 @@ const steps = reactive([
   },
   {
     name: 'create_first_task',
-    title: 'Create your first task',
+    title: __('Create your first task'),
     icon: markRaw(TaskIcon),
     completed: false,
     onClick: async () => {
@@ -350,7 +357,7 @@ const steps = reactive([
   },
   {
     name: 'create_first_note',
-    title: 'Create your first note',
+    title: __('Create your first note'),
     icon: markRaw(NoteIcon),
     completed: false,
     onClick: async () => {
@@ -370,7 +377,7 @@ const steps = reactive([
   },
   {
     name: 'add_first_comment',
-    title: 'Add your first comment',
+    title: __('Add your first comment'),
     icon: markRaw(CommentIcon),
     completed: false,
     onClick: async () => {
@@ -390,7 +397,7 @@ const steps = reactive([
   },
   {
     name: 'send_first_email',
-    title: 'Send email',
+    title: __('Send email'),
     icon: markRaw(EmailIcon),
     completed: false,
     onClick: async () => {
@@ -410,7 +417,7 @@ const steps = reactive([
   },
   {
     name: 'change_deal_status',
-    title: 'Change deal status',
+    title: __('Change deal status'),
     icon: markRaw(StepsIcon),
     completed: false,
     onClick: async () => {
@@ -431,4 +438,89 @@ const steps = reactive([
 ])
 
 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>

From 2a9b744d5a7460f71fa11e80688de3746814208e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 01:47:09 +0530
Subject: [PATCH 38/43] fix: use vite plugins for frappe-ui

---
 frontend/components.d.ts | 229 +++++++++++++++++++++++++++++++++++++++
 frontend/vite.config.js  |  40 ++-----
 2 files changed, 238 insertions(+), 31 deletions(-)
 create mode 100644 frontend/components.d.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
new file mode 100644
index 00000000..081f1074
--- /dev/null
+++ b/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']
+  }
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 292f13fe..9a92e0fe 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -8,12 +8,17 @@ import { VitePWA } from 'vite-plugin-pwa'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    frappeui(),
-    vue({
-      script: {
-        propsDestructure: true,
+    frappeui({
+      frappeProxy: true,
+      lucideIcons: 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',

From c592aac6eadd78bf1794985f0362c495a523be48 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 01:57:26 +0530
Subject: [PATCH 39/43] fix: show trial banner button if sidebar is collapsed

---
 frappe-ui                                      | 2 +-
 frontend/src/components/Layouts/AppSidebar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index f70ac1c5..178c0a76 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit f70ac1c5cd6aed29eb2a4c449b0fe3a7213c74e7
+Subproject commit 178c0a76ad3fa8bbff60e52aba04de9602c11fae
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 4c3894c1..55e68c27 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -73,7 +73,7 @@
     </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"

From 09881cc5251ddfff9f1814e8a3c80b6ae5088b60 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 02:43:58 +0530
Subject: [PATCH 40/43] fix: updated tailwind config to include all vue files

---
 frappe-ui                   | 2 +-
 frontend/tailwind.config.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 178c0a76..4c01c299 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 178c0a76ad3fa8bbff60e52aba04de9602c11fae
+Subproject commit 4c01c299d3b1b7200cfba8b36d572df459989460
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d1a7f3af..63ccd26e 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,8 +3,8 @@ 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/components/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
+    '../node_modules/frappe-ui/src/**/*.{vue,js,ts,jsx,tsx}',
   ],
   safelist: [{ pattern: /!(text|bg)-/, variants: ['hover', 'active'] }],
   theme: {

From 87bed3890ba9d1b00122caaa178ce7496fb17d92 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 14:49:44 +0530
Subject: [PATCH 41/43] fix: use onboarding/help components & composable from
 frappe-ui/frappe

---
 frappe-ui                                             | 2 +-
 frontend/src/components/CommunicationArea.vue         | 2 +-
 frontend/src/components/Layouts/AppSidebar.vue        | 5 +++--
 frontend/src/components/Modals/LeadModal.vue          | 2 +-
 frontend/src/components/Modals/NoteModal.vue          | 2 +-
 frontend/src/components/Modals/TaskModal.vue          | 2 +-
 frontend/src/components/Settings/InviteMemberPage.vue | 2 +-
 frontend/src/pages/Deal.vue                           | 2 +-
 frontend/src/pages/Lead.vue                           | 2 +-
 frontend/tailwind.config.js                           | 2 ++
 10 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 4c01c299..096d9d95 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 4c01c299d3b1b7200cfba8b36d572df459989460
+Subproject commit 096d9d95e8693ff3245c93510b6fa85a84fee4d1
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index c083a269..d262a3de 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -96,7 +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/src/frappe'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 55e68c27..7da30eb2 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -155,14 +155,15 @@ import {
   notificationsStore,
 } from '@/stores/notifications'
 import { showSettings, activeSettingsPage } from '@/composables/settings'
-import { FeatherIcon, TrialBanner, call } from 'frappe-ui'
+import { FeatherIcon, call } from 'frappe-ui'
 import {
+  TrialBanner,
   HelpModal,
   GettingStartedBanner,
   useOnboarding,
   showHelpModal,
   minimize,
-} from 'frappe-ui/src/frappe'
+} from 'frappe-ui/frappe'
 import { capture } from '@/telemetry'
 import router from '@/router'
 import { useStorage } from '@vueuse/core'
diff --git a/frontend/src/components/Modals/LeadModal.vue b/frontend/src/components/Modals/LeadModal.vue
index ff8be96a..2d5de02d 100644
--- a/frontend/src/components/Modals/LeadModal.vue
+++ b/frontend/src/components/Modals/LeadModal.vue
@@ -49,7 +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/src/frappe'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { computed, onMounted, ref, reactive, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/NoteModal.vue b/frontend/src/components/Modals/NoteModal.vue
index b1ae6505..32e6b01d 100644
--- a/frontend/src/components/Modals/NoteModal.vue
+++ b/frontend/src/components/Modals/NoteModal.vue
@@ -66,7 +66,7 @@
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import { capture } from '@/telemetry'
 import { TextEditor, call } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/src/frappe'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Modals/TaskModal.vue b/frontend/src/components/Modals/TaskModal.vue
index 640c7414..826ed386 100644
--- a/frontend/src/components/Modals/TaskModal.vue
+++ b/frontend/src/components/Modals/TaskModal.vue
@@ -119,7 +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/src/frappe'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, watch, nextTick, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/frontend/src/components/Settings/InviteMemberPage.vue b/frontend/src/components/Settings/InviteMemberPage.vue
index 4416af9c..cb57e53c 100644
--- a/frontend/src/components/Settings/InviteMemberPage.vue
+++ b/frontend/src/components/Settings/InviteMemberPage.vue
@@ -87,7 +87,7 @@ import {
   FormControl,
   Tooltip,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/src/frappe'
+import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed } from 'vue'
 
 const { updateOnboardingStep } = useOnboarding('frappecrm')
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index d556b80b..5341bda1 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -341,7 +341,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/src/frappe'
+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'
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 4a75e4f5..8d6b7a08 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -361,7 +361,7 @@ import {
   call,
   usePageMeta,
 } from 'frappe-ui'
-import { useOnboarding } from 'frappe-ui/src/frappe'
+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'
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 63ccd26e..cdd9cc9a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,6 +5,8 @@ module.exports = {
     './src/**/*.{vue,js,ts,jsx,tsx}',
     './node_modules/frappe-ui/src/**/*.{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: {

From dea894defb2f2957f2b6f9e063e5815c78ce3127 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 14:54:04 +0530
Subject: [PATCH 42/43] build(deps): bump frappeui to 0.1.117

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 yarn.lock             | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 096d9d95..337cf253 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 096d9d95e8693ff3245c93510b6fa85a84fee4d1
+Subproject commit 337cf25362c332a9a2354eef56546aaa28013312
diff --git a/frontend/package.json b/frontend/package.json
index ef320a9b..b883ce6d 100644
--- a/frontend/package.json
+++ b/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.116",
+    "frappe-ui": "^0.1.117",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 4fa34d33..35356604 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2542,10 +2542,10 @@ 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.116:
-  version "0.1.116"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.116.tgz#39b36c313b845305a1b27cb92a8f0e37a435ddc9"
-  integrity sha512-qoXL/FJuEUH6p8LuUJIF8ttQon7Z24uuPTbZ69ErbKc77MeAOY0HOtWARXng65jX5mhyoceChtVmXuqCq7bBaA==
+frappe-ui@^0.1.117:
+  version "0.1.117"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.117.tgz#bd1ce8936cc5ab007be6bdb72686098a9a48a14b"
+  integrity sha512-AIlyFKGSiCMEY89P9+53FlpmBRnl12pjz+C9im1Z0ahYwCMPNjhceMpT7tdIY4k+tgn/Lj0PnUkEeZD+fi5+dQ==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"

From bda448bf3ce826367e090318a756b815782f4cbf Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Mar 2025 15:10:26 +0530
Subject: [PATCH 43/43] build(deps): bump frappeui to 0.1.118

---
 frappe-ui             | 2 +-
 frontend/package.json | 2 +-
 yarn.lock             | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frappe-ui b/frappe-ui
index 337cf253..b6efd25b 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 337cf25362c332a9a2354eef56546aaa28013312
+Subproject commit b6efd25b2122c2c1f3beeea1702788c5e6e5555f
diff --git a/frontend/package.json b/frontend/package.json
index b883ce6d..37c2025e 100644
--- a/frontend/package.json
+++ b/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.117",
+    "frappe-ui": "^0.1.118",
     "gemoji": "^8.1.0",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 35356604..068b7907 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2542,10 +2542,10 @@ 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.117:
-  version "0.1.117"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.117.tgz#bd1ce8936cc5ab007be6bdb72686098a9a48a14b"
-  integrity sha512-AIlyFKGSiCMEY89P9+53FlpmBRnl12pjz+C9im1Z0ahYwCMPNjhceMpT7tdIY4k+tgn/Lj0PnUkEeZD+fi5+dQ==
+frappe-ui@^0.1.118:
+  version "0.1.118"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.118.tgz#36fb108d63194fe9b06078a84576e32af54d06b8"
+  integrity sha512-t29fYu22jfPoi/pFAbPX4//bh5XEgqbECHttjsOsPboC8BsnyYUtQSA/pY6PP/M/hMAW74QslnTK6iU/1OuSaQ==
   dependencies:
     "@headlessui/vue" "^1.7.14"
     "@popperjs/core" "^2.11.2"