fix: made detail section toggle using toggler

frontend/src/pages/Lead.vue

@@ -85,16 +85,18 @@
           :key="section.label"
           class="flex flex-col"
         >
+          <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
             <div
               class="flex items-center gap-1 text-base font-semibold leading-5 cursor-pointer"
+              @click="toggle()"
             >
               {{ section.label }}
               <FeatherIcon
-              name="chevron-up"
+                :name="opened ? 'chevron-up' : 'chevron-down'"
                 class="h-4 text-gray-600"
               />
             </div>
-          <div class="flex flex-col gap-3">
+              <div v-if="opened" class="flex flex-col gap-3">
                 <div
                   v-for="field in section.fields"
                   :key="field.label"
@@ -104,6 +106,7 @@
                   <div class="text-gray-900">{{ field.value }}</div>
                 </div>
               </div>
+          </Toggler>
         </div>
       </div>
     </TabPanels>
@@ -117,6 +120,7 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
+import Toggler from '@/components/Toggler.vue'
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
 import {
   createDocumentResource,