account card

GoldenThrust · Dec 30, 2023 · 3b7613c · 3b7613c
1 parent 43ee6a9
commit 3b7613c
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 9 deletions.
diff --git a/clients/users/static/users/images/cardarrow.png b/clients/users/static/users/images/cardarrow.png
diff --git a/clients/users/static/users/scripts/chart.js b/clients/users/static/users/scripts/chart.js
@@ -0,0 +1,89 @@
+var ctxPie = document.getElementById('transactionTypePieChart').getContext('2d')
+var ctxLine = document.getElementById('transactionLineChart').getContext('2d')
+
+var depositData = JSON.parse('{{ deposit_data|safe }}')
+var transferData = JSON.parse('{{ transfer_data|safe }}')
+var debitCardData = JSON.parse('{{ debit_card_data|safe }}')
+
+// Transaction Type Pie Chart
+var typePieChartData = {
+  labels: ['Deposit', 'Transfer', 'Debit Card'],
+  datasets: [
+    {
+      label: 'Transaction Type',
+      backgroundColor: ['blue', 'green', 'red'],
+      data: [depositData.length, transferData.length, debitCardData.length]
+    }
+  ]
+}
+
+var typePieChart = new Chart(ctxPie, {
+  type: 'pie',
+  data: typePieChartData,
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'right'
+      },
+      title: {
+        display: true,
+        text: 'Transaction Type Distribution',
+        padding: 20
+      }
+    }
+  }
+})
+
+var depositDates = depositData.map(function (entry) {
+  return entry.date
+})
+var depositAmounts = depositData.map(function (entry) {
+  return entry.amount
+})
+
+var transferDates = transferData.map(function (entry) {
+  return entry.date
+})
+var transferAmounts = transferData.map(function (entry) {
+  return entry.amount
+})
+
+var debitCardDates = debitCardData.map(function (entry) {
+  return entry.date
+})
+var debitCardAmounts = debitCardData.map(function (entry) {
+  return entry.amount
+})
+
+var myChart = new Chart(ctxLine, {
+  type: 'line',
+  data: {
+    labels: depositDates,
+    datasets: [
+      {
+        label: 'Deposit',
+        data: depositAmounts,
+        borderColor: 'rgba(75, 192, 192, 1)',
+        fill: false
+      },
+      {
+        label: 'Transfer',
+        data: transferAmounts,
+        borderColor: 'rgba(255, 99, 132, 1)',
+        fill: false
+      },
+      {
+        label: 'Debit Card',
+        data: debitCardAmounts,
+        borderColor: 'rgba(255, 205, 86, 1)',
+        fill: false
+      }
+    ]
+  },
+  options: {
+    animation: {
+      easing: 'easeInOutQuad'
+    }
+  }
+})
diff --git a/clients/users/static/users/scripts/dashboard.js b/clients/users/static/users/scripts/dashboard.js
@@ -1,6 +1,8 @@
 const addAccount = document.querySelectorAll('.add-account');
 const WelcomeCreateAccountBtn = document.querySelector('#welcome-create-account-btn');
 
-WelcomeCreateAccountBtn.addEventListener('click', () => {
-    addAccount[1].focus()
-})
+if (WelcomeCreateAccountBtn) {
+    WelcomeCreateAccountBtn.addEventListener('click', () => {
+        addAccount[1].focus()
+    })
+}
diff --git a/clients/users/static/users/styles/body.css b/clients/users/static/users/styles/body.css
@@ -38,5 +38,16 @@ main {
 }
 
 .quick-transaction .deposit {
-    background-color: #F4F4FE;
+    background-color: #F4F0FD;
+}
+
+.account-cards {
+    width: 370px;
+    aspect-ratio: 7/4;
+    background: url("../images/cardarrow.png") 85% 80% no-repeat;
+}
+
+.account-cards .account-balance {
+    font-family: "DM Serif";
+    color: #5E3FBE;
 }
diff --git a/clients/users/templates/users/base.html b/clients/users/templates/users/base.html
@@ -56,6 +56,14 @@
     <link rel="stylesheet" href="{% static 'users/styles/background.css' %}" />
     <link rel="stylesheet" href="{% static 'users/styles/body.css' %}" />
     <link rel="stylesheet" href="{% static 'users/styles/footer.css' %}" />
+
+    <!-- load font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
+
+    <!-- load chart.js -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
   <body>
       {% block content %}

diff --git a/clients/users/templates/users/dashboard.html b/clients/users/templates/users/dashboard.html
@@ -9,11 +9,21 @@
         <div class="dashboard">
           <div>
             <div class="quick-transaction">
-              <button class="transfer rounded-1 p-2 fw-semibold">Quick Transfer</button>
-              <button class="deposit rounded-1 p-2 fw-semibold">Quick deposit</button>
+              <button class="transfer rounded-1 p-2 fw-semibold shadow-sm">Quick Transfer</button>
+              <button class="deposit rounded-1 p-2 fw-semibold shadow-sm">Quick deposit</button>
+            </div>
+            <div class="account-cards border border-black w-73 bg-white rounded-4 shadow mt-5 d-flex flex-column justify-content-evenly">
+              <div class="mx-5 d-flex justify-content-between">
+                <span class="text-secondary fs-6 fw-light">Available balance</span>
+                <span class="fs-6">{{ request.session.account.account_type }}</span>
+              </div>
+              <div class="mx-5 fs-2 account-balance">{{ request.session.account.currency|currency_to_unicode|safe }}{{ request.session.account.balance }}</div>
+              <div class="mx-5 account-number">{{ request.session.account.number }}</div>
+            </div>
+            <div class="transaction-chart">
+              <canvas id="transactionLineChart" width="800" height="400"></canvas>
+              <canvas id="transactionTypePieChart" width="400" height="400"></canvas>
             </div>
-            <div class="account-cards"></div>
-            <div class="transaction-chart"></div>
           </div>
           <div>
             <div>
@@ -34,5 +44,9 @@
     </div>
   </main>
   {% include 'users/includes/footer.html' %}
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+
+  </script>
   <script type="module" src="{% static 'users/scripts/dashboard.js' %}"></script>
 {% endblock %}
diff --git a/clients/users/views.py b/clients/users/views.py
@@ -10,6 +10,7 @@
 from notifications.utils import process_notifications
 from transactions.models import Transaction
 from django.db.models import Q
+import json
 
 
 class LoginView(auth_views.LoginView):
@@ -67,10 +68,28 @@ def get(self, request):
         else:
             recent_transactions = None
 
+        deposit_transactions = Transaction.objects.filter(transaction_type='DEPOSIT', account=request.session.get('account')['pk'])
+        transfer_transactions = Transaction.objects.filter(transaction_type='TRANSFER', account=request.session.get('account')['pk'])
+        debit_card_transactions = Transaction.objects.filter(transaction_type='DEBIT_CARD', account=request.session.get('account')['pk'])
+
+       # Processing data for the chart
+        deposit_data = [{'date': transaction.date.strftime('%Y-%m-%d'), 'amount': float(transaction.amount)} for transaction in deposit_transactions]
+        transfer_data = [{'date': transaction.date.strftime('%Y-%m-%d'), 'amount': float(transaction.amount)} for transaction in transfer_transactions]
+        debit_card_data = [{'date': transaction.date.strftime('%Y-%m-%d'), 'amount': float(transaction.amount)} for transaction in debit_card_transactions]
+
+        # Convert data to JSON format
+        deposit_json = json.dumps(deposit_data)
+        transfer_json = json.dumps(transfer_data)
+        debit_card_json = json.dumps(debit_card_data)
+
+
 
         context = {
             "title": "Dashboard",
-            "recent_transactions": recent_transactions
+            "recent_transactions": recent_transactions,
+            'deposit_data': deposit_json,
+            'transfer_data': transfer_json,
+            'debit_card_data': debit_card_json,
         }