The cards separator can be turned into a progress bar as below. However the start date of the subscriptions is not known and using createdAt doesn't make sense in this case.
<div className='flex w-full h-0.5'>
<div className='w-[40%] bg-orange-500'></div>
<div className='w-[60%] bg-border'></div>
</div>
The progress bar calculation can be the progress in a year for infinite subscriptions (when untilDate is null) and can be calculated based on untilDate. The calcuation is already available under SubscriptionPaymentCount -> getPaymentCount which needs some improvements based on the algorithm.
The cards separator can be turned into a progress bar as below. However the start date of the subscriptions is not known and using createdAt doesn't make sense in this case.
The progress bar calculation can be the progress in a year for infinite subscriptions (when untilDate is null) and can be calculated based on untilDate. The calcuation is already available under
SubscriptionPaymentCount -> getPaymentCountwhich needs some improvements based on the algorithm.