Option to add installment to contract/account to increace balance amount same as payment and can be deleted which will reduce balance amount by new amount of the installment deleted, call later added badge to show active call laters

resources/js/Layouts/AppLayout.vue

@@ -28,6 +28,7 @@ import { SmartphoneIcon } from "lucide-vue-next";
 import { TabletSmartphoneIcon } from "lucide-vue-next";
 import { PhoneCallIcon } from "lucide-vue-next";
 import { PackageIcon } from "lucide-vue-next";
+import { Badge } from "@/Components/ui/badge";
 
 const props = defineProps({
   title: String,
@@ -284,6 +285,14 @@ function isActive(patterns) {
     return false;
   }
 }
+
+function getBadge(item) {
+  if (item.key === "call-laters") {
+    return page.props.callLaterCount || 0;
+  }
+
+  return 0;
+}
 </script>
 
 <template>
@@ -357,11 +366,18 @@ function isActive(patterns) {
                     <!-- Title -->
                     <span
                       v-if="!sidebarCollapsed"
-                      class="truncate transition-opacity"
+                      class="flex-1 truncate transition-opacity"
                       :class="{ 'font-medium': isActive(item.active) }"
                     >
                       {{ item.title }}
                     </span>
+                    <Badge
+                      v-if="!sidebarCollapsed && getBadge(item) > 0"
+                      variant="destructive"
+                      class="ml-auto shrink-0 px-1.5 py-0.5 text-xs font-mono text-amber-50"
+                    >
+                      {{ getBadge(item) }}
+                    </Badge>
                   </Link>
                 </li>
               </ul>