feat: add basic subscription metrics

add total subs, total cancelling, per bundle and script subs and cancelling numbers

src/routes/dashboard/Table.svelte

@@ -16,7 +16,13 @@
 	export let schema: BundleArraySchema | NewBundleSchema | ScriptArraySchema | NewScriptArraySchema
 	export let data: SuperValidated<typeof schema>
 	export let headers: string[]
-	export let subscriptions: number | undefined = undefined
+	interface Subscriptions {
+		count: number
+		cancelling: number
+	}
+
+	export let subscriptions: Subscriptions[] | undefined = undefined
+
 	export let action: string
 
 	const { form, errors, enhance, allErrors } = superForm(data, {
@@ -60,7 +66,10 @@
 							/>
 						</TableCell>
 
-						{#if subscriptions !== undefined}<TableCell>{subscriptions}</TableCell>{/if}
+						{#if subscriptions !== undefined}
+							<TableCell>{subscriptions[i].count}</TableCell>
+							<TableCell>{subscriptions[i].cancelling}</TableCell>
+						{/if}
 
 						<TableCell padding={0}>
 							<button
@@ -98,7 +107,10 @@
 							/>
 						</TableCell>
 
-						{#if subscriptions !== undefined}<TableCell>{subscriptions}</TableCell>{/if}
+						{#if subscriptions !== undefined}
+							<TableCell>{subscriptions[i].count}</TableCell>
+							<TableCell>{subscriptions[i].cancelling}</TableCell>
+						{/if}
 
 						<TableCell padding={0}>
 							<button

src/routes/dashboard/[slug]/+page.svelte

@@ -64,10 +64,6 @@
 	$: if (payoutContainer && stripeConnectInstance)
 		payoutContainer.appendChild(stripeConnectInstance.create("payouts"))
 
-	let totalSubs = 0
-
-	data.subscriptions.subscriptions.forEach((sub) => (totalSubs += sub.count ?? 0))
-
 	onMount(async () => {
 		if (browser && document) {
 			const connectJS = await import("@stripe/connect-js")
@@ -208,7 +204,8 @@
 					"Premium scripts",
 					"Monthly downloads",
 					"Premium monthly downloads",
-					"Subscribers"
+					"Subscribers",
+					"Cancelling"
 				]}
 			/>
 			<tr class="table-row">
@@ -218,7 +215,8 @@
 				<TableCell>
 					{stats.month_premium_user_downloads} / {stats.month_premium_downloads}
 				</TableCell>
-				<TableCell>{totalSubs}</TableCell>
+				<TableCell>{data.subscriptions.total.subscribers}</TableCell>
+				<TableCell>{data.subscriptions.total.cancelling}</TableCell>
 			</tr>
 			<tbody />
 		</table>
@@ -323,8 +321,15 @@
 							id="bundleEdit"
 							schema={bundleArraySchema}
 							data={data.bundlesForm}
-							headers={["Title", "Price (Week/Month/Year)", "Subscribers", "Scripts", "Action"]}
-							subscriptions={0}
+							headers={[
+								"Title",
+								"Price (Week/Month/Year)",
+								"Subscribers",
+								"Cancelling",
+								"Scripts",
+								"Action"
+							]}
+							subscriptions={data.subscriptions.bundles}
 							action={"bundleEdit&product"}
 						/>
 
@@ -340,8 +345,8 @@
 							id="scriptEdit"
 							schema={scriptArraySchema}
 							data={data.scriptsForm}
-							headers={["Title", "Price (Week/Month/Year)", "Subscribers", "Action"]}
-							subscriptions={0}
+							headers={["Title", "Price (Week/Month/Year)", "Subscribers", "Cancelling", "Action"]}
+							subscriptions={data.subscriptions.scripts}
 							action={"scriptEdit&product"}
 						/>
 

src/routes/dashboard/[slug]/+page.ts

@@ -26,7 +26,7 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 		} = await supabaseClient
 			.schema("profiles")
 			.from("subscription")
-			.select("id, price, cancel", { count: "estimated" })
+			.select("id, product, price, cancel", { count: "estimated" })
 			.eq("product", product)
 
 		if (err) {
@@ -41,7 +41,12 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 			)
 		}
 
-		return { data, count }
+		let cancelling = 0
+		data.forEach((sub) => {
+			if (sub.cancel) cancelling += 1
+		})
+
+		return { product: product, data, count: count ?? 0, cancelling }
 	}
 
 	async function getPrices() {
@@ -191,11 +196,11 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 		bundlesForm.data.bundles = []
 		scriptsForm.data.scripts = []
 
-		const subscriptionsPromises = []
+		const bundleSubsPromises = []
+		const scriptSubsPromises = []
 
 		for (let index = 0; index < products.length; index++) {
 			const product = products[index]
-			subscriptionsPromises.push(getSubscriptions(product.id))
 
 			const productPrices = [...prices].reduce<Prices[]>((acc, price, i) => {
 				if (acc.length > 2) return acc
@@ -232,6 +237,7 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 			}
 
 			if (product.bundle) {
+				bundleSubsPromises.push(getSubscriptions(product.id))
 				const i = bundles.findIndex((bundle) => bundle.product === product.id)
 				bundlesForm.data.bundles.push({
 					id: product.id,
@@ -251,6 +257,7 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 				})
 				bundles.splice(i, 1)
 			} else if (product.script) {
+				scriptSubsPromises.push(getSubscriptions(product.id))
 				const i = tmpScripts.findIndex((script) => script.id === product.script)
 				if (i > -1) {
 					scriptsForm.data.scripts.push({
@@ -291,7 +298,28 @@ export const load = async ({ parent, data, depends, url, params: { slug } }) =>
 			}
 		})
 
-		return { subscriptions: await Promise.all(subscriptionsPromises) }
+		const awaitedSubs = await Promise.all([
+			Promise.all(bundleSubsPromises),
+			Promise.all(scriptSubsPromises)
+		])
+
+		const totalSubs = { subscribers: 0, cancelling: 0 }
+
+		awaitedSubs[0].forEach((sub) => {
+			totalSubs.subscribers += sub.count
+			totalSubs.cancelling += sub.cancelling
+		})
+
+		awaitedSubs[1].forEach((sub) => {
+			totalSubs.subscribers += sub.count
+			totalSubs.cancelling += sub.cancelling
+		})
+
+		return {
+			total: totalSubs,
+			bundles: awaitedSubs[0],
+			scripts: awaitedSubs[1]
+		}
 	}
 
 	const promises = await Promise.all([