১৪.১০, ১৪.১১ : ট্রান্সেকশন টেম্পলেট পার্ট ১ & ২

templates/transactions/loan_request.html

{% extends 'base.html' %} 
{% block head_title %}{{ title }}{% endblock %} 
{% block content %}
<div class="my-10 py-3 px-4 bg-white rounded-xl shadow-md">
  <h1 class="font-bold text-3xl text-center pb-5 pt-2">Loan Report</h1>
  <hr />
  <table
    class="table-auto mx-auto w-full px-5 rounded-xl mt-8 border dark:border-neutral-500"
  >
    <thead class="bg-purple-900 text-white text-left">
      <tr
        class="bg-gradient-to-tr from-indigo-600 to-purple-600 rounded-md py-2 px-4 text-white font-bold"
      >
        <th class="px-4 py-2">LOAN ID</th>
        <th class="px-4 py-2">Loan Amount</th>
        <th class="px-4 py-2">Loan Approved</th>
        <th class="px-4 py-2">Action</th>
      </tr>
    </thead>
    <tbody>
      {% for loan in loans %}
      <tr class="border-b dark:border-neutral-500">
        <td class="px-4 py-2">
         {{ loan.id }}
        </td>
        <td class="px-4 py-3 text-s border">
          <span
            class="px-2 py-1 font-bold leading-tight rounded-sm text-green-700 bg-green-100"
          >
            {{ loan.amount }}
          </span>
        </td>
        <td class="px-4 py-2">
          {{ loan.loan_approve }}
        </td>
        <td class="px-4 py-2">
          {% if loan.loan_approve %}
          <a class="font-bold bg-red-900 text-white hover:text-blue-900 hover:bg-white border border-blue-900 font-bold px-4 py-2 rounded-lg" href='{% url "pay" loan.id %}'>Pay</a>
          {% else %}
          <p class="font-bold text-red-700 bg-red-100">Loan Pending</p>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}

templates/transactions/transaction_form.html

{% extends 'base.html' %} {% block head_title %}{{ title }}{% endblock %} {% block content %}

<div class="w-full flex mt-5 justify-center ">
    <div class="bg-white w-5/12 rounded-lg">
        {% if title == 'Request For Loan' %}
<div><a class="font-bold text-blue text-center pb-5 pt-10 px-5" href="{% url 'loan_list' %}">View All Loan List</a></div>
        {% endif %}
        
        <h1 class="font-bold text-3xl text-center pb-5 pt-10 px-5">{{ title }}</h1>
        <form method="post" class="px-8 pt-6 pb-8 mb-4">
            {% csrf_token %}

            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="amount">
                    Amount
                </label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight border rounded-md border-gray-500 focus:outline-none focus:shadow-outline" name="amount" id="amount" type="number" required placeholder="Amount">
            </div>
            {% if form.amount.errors %} {% for error in form.amount.errors %}
            <p class="text-red-600 text-sm italic pb-2">{{ error }}</p>
            {% endfor %} {% endif %}
            <div class="flex w-full justify-center">
                <button class="bg-blue-900 text-white hover:text-blue-900 hover:bg-white border border-blue-900 font-bold px-4 py-2 rounded-lg" type="submit">
                Submit
            </button>
            </div>
        </form>
    </div>
    
</div>
{% endblock %}

templates/transactions/transaction_report.html

{% extends 'base.html' %} 
{% load static %}
{% load humanize %}
{% block head_title %} Transaction Report{% endblock %} {% block content %}


<div class="my-10 py-3 px-4 bg-white rounded-xl shadow-md">
  <h1 class="font-bold text-3xl text-center pb-5 pt-2">Transaction Report</h1>
  <hr />
  <form method="get" action="{% url 'transaction_report' %}">
    <div class="flex justify-center">
      <div
        class="mt-10 pl-3 pr-2 bg-white border rounded-md border-gray-500 flex justify-between items-center relative w-4/12 mx-2"
      >
        <label for="start_date">From:</label>
        <input
          class="appearance-none w-full outline-none focus:outline-none active:outline-none"
          type="date"
          id="start_date"
          name="start_date"
        />
      </div>
 
      <div
        class="mt-10 pl-3 pr-2 bg-white border rounded-md border-gray-500 flex justify-between items-center relative w-4/12"
      >
        <label for="end_date">To:</label>
        <input
          class="appearance-none w-full outline-none focus:outline-none active:outline-none"
          type="date"
          id="end_date"
          name="end_date"
        />
      </div>
      <div class="mt-10 pl-3 pr-2 flex justify-between items-center relative w-4/12">
        <button
          class="bg-blue-900 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          type="submit"
        >
          Filter
        </button>
      </div>
    </div>
  </form>
  <table
    class="table-auto mx-auto w-full px-5 rounded-xl mt-8 border dark:border-neutral-500"
  >
    <thead class="bg-purple-900 text-white text-left">
      <tr
        class="bg-gradient-to-tr from-indigo-600 to-purple-600 rounded-md py-2 px-4 text-white font-bold"
      >
        <th class="px-4 py-2">Date</th>
        <th class="px-4 py-2">Transaction Type</th>
        <th class="px-4 py-2">Amount</th>
        <th class="px-4 py-2">Balance After Transaction</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in object_list %}
      <tr class="border-b dark:border-neutral-500">
        <td class="px-4 py-2">
          {{ transaction.timestamp|date:"F d, Y h:i A" }}
        </td>
        <td class="px-4 py-3 text-s border">
          <span
            class="px-2 py-1 font-bold leading-tight rounded-sm {% if transaction.get_transaction_type_display == 'Withdrawal' %} text-red-700 bg-red-100 {% else %} text-green-700 bg-green-100 {% endif %}"
          >
            {{ transaction.get_transaction_type_display }}
          </span>
        </td>
        <td class="px-4 py-2">
          $ {{ transaction.amount|floatformat:2|intcomma }}
        </td>
        <td class="px-4 py-2">
          $ {{ transaction.balance_after_transaction|floatformat:2|intcomma }}
        </td>
      </tr>
      {% endfor %}
      <tr class="bg-gray-800 text-white">
        <th class="px-4 py-2 text-right" colspan="3">Current Balance</th>
        <th class="px-4 py-2 text-left">
          $ {{ account.balance|floatformat:2|intcomma }}
        </th>
      </tr>
    </tbody>
  </table>
</div>
{% endblock %}