fix reactivity

dashboard/components/settings/General.vue

@@ -32,6 +32,36 @@ async function changeProjectName() {
     location.reload();
 }
 
+async function deleteProject() {
+    if (!activeProject.value) return;
+    const sure = confirm(`Are you sure to delete the project ${activeProject.value.name} ?`);
+    if (!sure) return;
+
+    try {
+
+        await $fetch('/api/project/delete', {
+            method: 'DELETE',
+            ...signHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ project_id: activeProject.value._id.toString() })
+        });
+
+        const projectsList = useProjectsList()
+        await projectsList.refresh();
+        
+        const firstProjectId = projectsList.data.value?.[0]?._id.toString();
+        if (firstProjectId) {
+            await setActiveProject(firstProjectId);
+        }
+
+
+    } catch (ex: any) {
+        alert(ex.message);
+    }
+
+
+}
+
+
 
 </script>
 
@@ -62,7 +92,7 @@ async function changeProjectName() {
         </template>
         <template #pdelete>
             <div class="flex justify-end">
-                <LyxUiButton type="danger">
+                <LyxUiButton type="danger" @click="deleteProject()">
                     Delete project
                 </LyxUiButton>
             </div>

dashboard/components/settings/billing.vue

@@ -6,7 +6,10 @@ const activeProject = useActiveProject();
 
 definePageMeta({ layout: 'dashboard' });
 
-const { data: planData } = useFetch('/api/project/plan', signHeaders());
+const { data: planData, refresh: planRefresh, pending: planPending } = useFetch('/api/project/plan', {
+    ...signHeaders(),
+    lazy: true
+});
 
 const percent = computed(() => {
     if (!planData.value) return '-';
@@ -38,7 +41,10 @@ const prettyExpireDate = computed(() => {
 });
 
 
-const { data: invoices } = await useFetch(`/api/pay/${activeProject.value?._id.toString()}/invoices`, signHeaders())
+const { data: invoices, refresh: invoicesRefresh, pending: invoicesPending } = useFetch(`/api/pay/${activeProject.value?._id.toString()}/invoices`, {
+    ...signHeaders(),
+    lazy: true
+})
 
 const showPricingDrawer = ref<boolean>(false);
 function onPlanUpgradeClick() {
@@ -58,6 +64,12 @@ function getPremiumName(type: number) {
 }
 
 
+watch(activeProject, () => {
+    invoicesRefresh();
+    planRefresh();
+})
+
+
 const entries: SettingsTemplateEntry[] = [
     { id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
     { id: 'usage', title: 'Usage', text: 'Show usage of current project' },
@@ -77,7 +89,12 @@ const entries: SettingsTemplateEntry[] = [
             </PricingDrawer>
         </Transition>
 
-        <SettingsTemplate :entries="entries">
+        <div v-if="invoicesPending || planPending"
+            class="backdrop-blur-[1px] z-[20] mt-20 w-full h-full flex items-center justify-center font-bold">
+            <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
+        </div>
+
+        <SettingsTemplate v-if="!invoicesPending && !planPending" :entries="entries">
             <template #plan>
                 <LyxUiCard v-if="planData" class="flex flex-col w-full">
                     <div class="flex flex-col gap-6 px-8 grow">

dashboard/components/settings/members.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SettingsTemplateEntry } from './Template.vue';
 
+const activeProject = useActiveProject();
 
 definePageMeta({ layout: 'dashboard' });
 
@@ -14,7 +15,7 @@ const columns = [
     // { key: 'pending', label: 'Pending' },
 ]
 
-const { data: members, refresh: refreshMembers } = useFetch('/api/project/members/list', signHeaders());
+const { data: members, refresh: refreshMembers, pending: pendingMembers } = useFetch('/api/project/members/list', signHeaders());
 
 const showAddMember = ref<boolean>(false);
 
@@ -70,6 +71,10 @@ async function addMember() {
 
 }
 
+watch(activeProject, () => {
+    refreshMembers();
+})
+
 const entries: SettingsTemplateEntry[] = [
     { id: 'add', title: 'Add member', text: 'Add new member to project' },
     { id: 'members', title: 'Members', text: 'Manage members of current project' },