Skip to content

Commit

Permalink
Transactions Partners
Browse files Browse the repository at this point in the history
  • Loading branch information
GoldenThrust committed Jan 29, 2024
1 parent c9d4d1a commit 29143b2
Show file tree
Hide file tree
Showing 11 changed files with 197 additions and 100 deletions.
File renamed without changes.
2 changes: 1 addition & 1 deletion api/transactions/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ def perform_create(self, serializer):
self.transaction_partner_account_number = card.account.number

if card.account.balance >= transaction_amount:
transaction_partner_account_name = f'{card.account.user.first_name} {card.acount.user.last_name}'
transaction_partner_account_name = f'{card.account.user.first_name} {card.account.user.last_name}'
serializer.save(transaction_type="DEBIT_CARD", account=account)

# Update Account Balances
Expand Down
4 changes: 2 additions & 2 deletions api/virtual_bank/settings.py
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
SECRET_KEY = os.getenv('SECRET_KEY')

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
DEBUG = True

ALLOWED_HOSTS = ['*']

Expand Down Expand Up @@ -173,4 +173,4 @@
'Accept',
'Authorization',
'Content-Type',
]
]
123 changes: 61 additions & 62 deletions clients/index.html
Original file line number Diff line number Diff line change
@@ -1,70 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banking App - Recent Transactions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.transaction-list {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.transaction-list th, .transaction-list td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.transaction-list th {
background-color: #f9f9f9;
}
.transaction-list tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Transactions</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.transaction-container {
background-color: #5E3FBE;
color: #fff;
width: 300px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}

.transaction-container:hover {
transform: scale(1.05);
}

<div class="header">
<h1>Banking App - Recent Transactions</h1>
</div>
.transaction-item {
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.1);
}

<table class="transaction-list">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
<th>Transaction Type</th>
</tr>
</thead>
<tbody>
<!-- This section will be populated dynamically with transaction data from the backend -->
<!-- Example static data -->
<tr>
<td>2023-12-25</td>
<td>Shopping at ABC Store</td>
<td>$50.00</td>
<td>Debit</td>
</tr>
<tr>
<td>2023-12-24</td>
<td>Online Subscription</td>
<td>$20.00</td>
<td>Debit</td>
</tr>
<!-- More transaction rows will be added dynamically -->
</tbody>
</table>
.transaction-item:last-child {
margin-bottom: 0;
}

.transaction-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}

.transaction-details {
font-size: 14px;
}
</style>
</head>
<body>
<div class="transaction-container">
<div class="transaction-item">
<div class="transaction-title">Transaction 1</div>
<div class="transaction-details">Amount: $100</div>
<div class="transaction-details">Date: 2024-01-29</div>
</div>
<div class="transaction-item">
<div class="transaction-title">Transaction 2</div>
<div class="transaction-details">Amount: $50</div>
<div class="transaction-details">Date: 2024-01-28</div>
</div>
<!-- Add more transaction items as needed -->
</div>
</body>
</html>
23 changes: 19 additions & 4 deletions clients/users/static/users/styles/body.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ main {

.dashboard {
display: grid;
grid-template-columns: 50% 50%;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-top: 2px;
column-rule: #5E3FBE;
column-width: 3px;
}

.quick-transaction {
Expand Down Expand Up @@ -55,8 +53,10 @@ main {
}

.financial-overviews span {
width: 180px;
width: 150px;
aspect-ratio: 5/2;
font-size: 13px;
font-weight: 500;
}

.financial-overviews #spending {
Expand All @@ -78,3 +78,18 @@ main {
.financial-overviews span:hover>.no_deposit {
display: block;
}

.transaction-partners {
font-size: 13px;
}

.transaction-partners img {
width: 50px;
}

.transaction-partners .partners {
column-gap: 150px;
row-gap: 20px;
flex-wrap: wrap;
cursor: pointer;
}
4 changes: 4 additions & 0 deletions clients/users/static/users/styles/headers.css
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,10 @@ aside.account-form form {
transform: translate(-50%, -50%);
}

header .searchbar {
border: 1px solid #5E3FBE;
}

header .notification-count {
top: 12px;
right: -6px;
Expand Down
10 changes: 10 additions & 0 deletions clients/users/static/users/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,14 @@
::-webkit-scrollbar-thumb {
background: #110f0f;
border-radius: 5px;
}

.profile-glow {
border: 1px solid #5E3FBE;
box-shadow: 0 0 5px #5E3FBE;
}

.profile-glow:hover {
border: 1px solid #b70202;
box-shadow: 0 0 5px #b70202;
}
8 changes: 2 additions & 6 deletions clients/users/templates/users/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<!-- 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=Agbalumo&family=Flow+Circular&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Agbalumo&family=Flow+Circular&family=DM+Serif+Display&display=swap" rel="stylesheet" />

<!-- load bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
Expand All @@ -56,11 +56,7 @@
<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">
<!-- TODO: Dynamically switch between light and dark mode using js -->

<!-- load chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Expand Down
61 changes: 46 additions & 15 deletions clients/users/templates/users/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,58 @@
<div>
<div class="financial-overviews d-flex gap-5">
<span id="income" class="rounded-2 shadow bg-white d-flex flex-column justify-content-evenly ps-3">
<div class="fw-semibold">Income</div>
<div class="no_deposit fw-bold fs-5">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.incoming }}</div>
<div class="deposit fw-bold fs-5">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.incoming_2 }}</div>
<div>Income</div>
<div class="no_deposit fw-semibold fs-6">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.incoming }}</div>
<div class="deposit fw-semibold fs-6">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.incoming_2 }}</div>
</span>
<span id="spending" class=" rounded-2 shadow bg-white d-flex flex-column justify-content-evenly ps-3">
<div class="fw-semibold">Spending</div>
<div class="fw-bold fs-5">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.outgoing }}</div>
<div>Expenses</div>
<div class="fw-semibold fs-6">{{ request.session.account.currency|currency_to_unicode|safe }}{{ financial.outgoing }}</div>
</span>
</div>
<div class="transaction-partners">
<div>
<span><img src="/media/profile.png" alt="" /></span>
<span>
<div>Adeniji Olajide</div>
<div>
Account Number: <span>{{ request.session.account.number }}</span>
</div>
</span>
<div class="transaction-partners mt-4">
<h2>Send money to</h2>
<div class="partners d-flex my-3">
{% for partner in top_partners %}
<span class="center justify-content-start" >
<img src="{{ partner.transaction_partner_account.user.profile_picture.url }}" alt="{{ partner.transaction_partner_account.user.get_full_name }} profile image" class="rounded-pill overflow-hidden profile-glow me-2">
<span>
<div class="fw-bold fs-6">{{ partner.transaction_partner_account.user.get_full_name }}</div>
<div><span class="fw-semibold">Acct No.: </span>{{ partner.transaction_partner_account.number }}</div>
</span>
</span>
{% endfor %}
</div>
</div>
<div class="recent-transactions">
<h2>Recent Transactions</h2>
<div class="transactions">
<div>
<img src="/static/users/images/deposits.png" alt="">
<span>
<span>JJon Klenn</span>
<span>15min ago</span>
</span>
<span>
<div>$900</div>
<div>
<span>ID: </span> 58h3488ht83h8t834hg48g5ybbgr
</div>
</span>
</div>
{% comment %} {% for transaction in recent_transactions %}
{% if transaction.transaction_type == 'TRANSFER' %}
{{ transaction.transaction_type }}
{{ transaction.transfer.transaction_partner_account }} <br>
{% elif transaction.transaction_type == 'DEBIT_CARD' %}
{{ transaction.transaction_type }}
{{ transaction.debit_card.transaction_partner_account }} <br>
{% else %}
{{ transaction.transaction_type }} <br>
{% endif %}
{% endfor %} {% endcomment %}
</div>
</div>
<div class="recent-transactions"></div>
</div>
</div>
{% else %}
Expand Down
4 changes: 2 additions & 2 deletions clients/users/templates/users/includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
</span>

</div>
<div class="searchbar border border-success rounded-pill p-2 h-75 w-50 d-flex align-items-center">
<div class="searchbar rounded-pill p-2 h-75 w-50 d-flex align-items-center">
<img src="{% static 'users/images/searchicon.png' %}" alt="search icon" class="search" />
<input type="text" class="rounded-end-pill w-100 border-none bg-transparent" /> <!-- search bar -->
</div>
Expand Down Expand Up @@ -115,7 +115,7 @@
</span>
{% endif %}
</div>
<a href="#" class="shadow-sm bg-body-tertiary border border-success rounded-pill overflow-hidden profile"><img
<a href="#" class="bg-body-tertiary rounded-pill overflow-hidden profile profile-glow"><img
src="{{ request.user.profile_picture.url }}" alt="profile" class="profile-image" title="profile" /></a>
<!-- profile -->
</div>
Expand Down
Loading

0 comments on commit 29143b2

Please sign in to comment.