add cards

src/dashboard/views.py

@@ -1,7 +1,11 @@
 from django.shortcuts import render
 from django.contrib.auth.decorators import login_required
+from subscriptions.models import UserSubscription
 
 # Create your views here.
 @login_required
 def dashboard_view(request):
-    return render(request, "dashboard/main.html", {})
+    user_sub_obj, created = UserSubscription.objects.get_or_create(user=request.user)
+    return render(request, "dashboard/main.html", {
+        "subscription": user_sub_obj
+    })

src/templates/dashboard/info-card.html

@@ -1,6 +1,6 @@
 {% load static %}
 <a href="#" class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 h-full w-full">
-    <img class="object-cover w-full rounded-lg h-full md:h-auto md:w-48 md:rounded-none md:rounded-s-lg" src="{% static 'images/payment.jpg' %}" alt="">
+    <img class="object-cover w-full p-2 rounded-lg h-full md:h-auto md:w-48 md:rounded-lg" src="{% static 'images/info-card.jpg' %}" alt="">
     <div class="flex flex-col justify-between p-4 leading-normal h-full">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
         <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>

src/templates/dashboard/main.html

@@ -1,11 +1,19 @@
 {% extends "dashboard/base.html" %}
 
 {% block head_title %} {{ block.super }} | Dashboard{% endblock head_title %}
-
 {% block content %}
-<div id="" class="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4">
-
+<div id="" class="grid grid-cols-1 md:grid-cols-2 gap-4 p-6 bg-white border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-auto mb-4 shadow-md">
+  {% include "dashboard/user-card.html" %}
+  <div class="col-span-1 flex flex-col space-y-4">
+    <p class="text-lg text-gray-600"><span class="font-semibold">Plan name:</span> {{ subscription.plan_name }}</p>
+    <p class="text-lg text-gray-600"><span class="font-semibold">Status:</span> {{ subscription.status|title }}</p>
+    <p class="text-lg text-gray-600"><span class="font-semibold">Membership age:</span> {{ subscription.original_period_start|timesince }}</p>
+    <p class="text-lg text-gray-600"><span class="font-semibold">Start:</span> {{ subscription.current_period_start }}</p>
+    <p class="text-lg text-gray-600"><span class="font-semibold">Ending in:</span> {{ subscription.current_period_end|timeuntil }} - ({{ subscription.current_period_end }})</p>
+  </div>
 </div>
+
+
 <div class="grid grid-cols-2 gap-4 mb-4 h-72">
   <div id="" class="rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
     {% include "dashboard/info-card.html" %}
@@ -17,5 +25,4 @@
 </div>
 {% include "dashboard/footer.html" %}
 
-{% endblock content %}
-
+{% endblock content %}

src/templates/dashboard/user-card.html

@@ -0,0 +1,14 @@
+{% load static %}
+
+<div class="col-span-1 flex flex-col justify-center items-center">
+    <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+      <div class="flex flex-col items-center pb-10">
+          <div class="flex-shrink-0 mb-3">
+              <img class="w-1/2 h-auto rounded-full shadow-lg" src="{% static "images/avatars/3.webp" %}" alt="user img"/>
+          </div>
+          <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{{ request.user.username }}</h5>
+          <span class="text-sm py-2 text-gray-500 dark:text-gray-400">{{ request.user.email }}</span>
+      </div>
+    </div>
+  </div>
+