hook up server cards and implement updated styles

apps/frontend/src/pages/settings/billing/index.vue

@@ -233,6 +233,7 @@
 								v-if="subscription.serverInfo"
 								v-bind="subscription.serverInfo"
 								:pending-change="getPendingChange(subscription)"
+								:cancellation-date="getCancellationDate(subscription)"
 							/>
 							<div v-else class="w-fit">
 								<p>
@@ -919,6 +920,13 @@ const getPyroCharge = (subscription) => {
 	)
 }
 
+const getCancellationDate = (subscription) => {
+	const charge = getPyroCharge(subscription)
+	if (!charge) return null
+	if (charge.status === 'cancelled') return charge.due
+	return null
+}
+
 const getProductSize = (product) => {
 	if (!product || !product.metadata) return 'Unknown'
 	const ramSize = product.metadata.ram