feat: Billing & Plans settings page

frontend/src/components/Icons/UpgradeIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-circle-fading-arrow-up"
+  >
+    <path d="M12 2a10 10 0 0 1 7.38 16.75" />
+    <path d="m16 12-4-4-4 4" />
+    <path d="M12 16V8" />
+    <path d="M2.5 8.875a10 10 0 0 0-.5 3" />
+    <path d="M2.83 16a10 10 0 0 0 2.43 3.4" />
+    <path d="M4.636 5.235a10 10 0 0 1 .891-.857" />
+    <path d="M8.644 21.42a10 10 0 0 0 7.631-.38" />
+  </svg>
+</template>

frontend/src/components/Icons/WalletsIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-wallet-cards"
+  >
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2" />
+    <path
+      d="M3 11h3c.8 0 1.6.3 2.1.9l1.1.9c1.6 1.6 4.1 1.6 5.7 0l1.1-.9c.5-.5 1.3-.9 2.1-.9H21"
+    />
+  </svg>
+</template>

frontend/src/components/Settings/SettingsModal.vue

@@ -41,15 +41,17 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import UpgradeIcon from '@/components/Icons/UpgradeIcon.vue'
+import WalletsIcon from '@/components/Icons/WalletsIcon.vue'
 import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
 import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { isWhatsappInstalled } from '@/composables/settings'
-import { Dialog } from 'frappe-ui'
-import { ref, markRaw, computed, h } from 'vue'
+import { Dialog, Plans, Billing } from 'frappe-ui'
+import { ref, markRaw, computed } from 'vue'
 
 const show = defineModel()
 
@@ -71,6 +73,21 @@ const tabs = computed(() => {
         },
       ],
     },
+    {
+      label: __('Subscription'),
+      items: [
+        {
+          label: 'Plans',
+          icon: UpgradeIcon,
+          component: markRaw(Plans),
+        },
+        {
+          label: 'Billing',
+          icon: WalletsIcon,
+          component: markRaw(Billing),
+        },
+      ],
+    },
     {
       label: __('Integrations'),
       items: [