From 4c1fb3bda65e190b179b6382a60af250476999ec Mon Sep 17 00:00:00 2001
From: jChenvan <188939308+jChenvan@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:26:06 -0400
Subject: [PATCH] Rearrange create transaction page

---
 docker/ploughshares/templates/base.html       |   3 +-
 .../templates/transaction_form.html           | 320 ++++++++++--------
 2 files changed, 188 insertions(+), 135 deletions(-)
diff --git a/docker/ploughshares/templates/base.html b/docker/ploughshares/templates/base.html
index 93dd087..0991dfb 100644
--- a/docker/ploughshares/templates/base.html
+++ b/docker/ploughshares/templates/base.html
@@ -21,6 +21,7 @@
             flex: 1;
         }
     </style>
+    {% block styles %}{% endblock %}
 </head>
 <body>
     <!-- Skip link for keyboard accessibility -->
@@ -94,9 +95,9 @@
         </footer>
     </div>
 
+    {% block scripts %}{% endblock %}
     <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/hotkeys.js') }}"></script>
-    {% block scripts %}{% endblock %}
     <script nonce="{{ csp_nonce() }}">
         // Add ARIA attributes to dynamically created elements
         document.addEventListener('DOMContentLoaded', function() {
diff --git a/docker/ploughshares/templates/transaction_form.html b/docker/ploughshares/templates/transaction_form.html
index 38b765e..c6f2079 100644
--- a/docker/ploughshares/templates/transaction_form.html
+++ b/docker/ploughshares/templates/transaction_form.html
@@ -2,6 +2,27 @@
 
 {% block title %}{% if transaction %}Edit{% else %}New{% endif %} Transaction - Project Ploughshares{% endblock %}
 
+{% block styles %}
+<style>
+    #sources {
+        background-color: gray;
+        padding: 10px;
+        border-radius: 10px;
+    }
+
+    .empty-message {
+        background-color: white;
+        border-radius: 5px;
+        padding: 40px;
+    }
+
+    .empty-message > * {
+        margin: auto;
+        width: fit-content;
+    }
+</style>
+{% endblock %}
+
 {% block content %}
 <div class="container mt-5">
     <div class="card">
@@ -11,146 +32,165 @@
         <div class="card-body">
             <form action="{{ url_for('create_transaction') if not transaction else url_for('update_transaction', id=transaction.id) }}" method="post" class="needs-validation" novalidate>
                 <div class="row">
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label for="transaction_type">Transaction Type</label>
-                            <input type="text" class="form-control" id="transaction_type" name="transaction_type" value="{{ transaction.transaction_type if transaction else '' }}" list="transaction_type_options" required>
-                            <datalist id="transaction_type_options">
-                                <option value="Grant">
-                                <option value="Contract">
-                                <option value="Donation">
-                                <option value="Investment">
-                                <option value="Loan">
-                                <option value="Subsidy">
-                                <option value="Tax Credit">
-                                <option value="Rebate">
-                            </datalist>
-                            <div class="invalid-feedback">Please enter a transaction type.</div>
-                        </div>
-                        <div class="form-group">
-                            <label for="company_division">Company Division</label>
-                            <input type="text" class="form-control" id="company_division" name="company_division" value="{{ transaction.company_division if transaction else '' }}" required>
-                            <div class="invalid-feedback">Please enter a company division.</div>
-                        </div>
-                        <div class="form-group">
-                            <label for="address_1">Address 1</label>
-                            <input type="text" class="form-control" id="address_1" name="address_1" value="{{ transaction.address_1 if transaction else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="address_2">Address 2</label>
-                            <input type="text" class="form-control" id="address_2" name="address_2" value="{{ transaction.address_2 if transaction else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="city">City</label>
-                            <input type="text" class="form-control" id="city" name="city" value="{{ transaction.city if transaction else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="province">Province</label>
-                            <select class="form-select" id="province" name="province">
-                                <option value="" {% if not transaction or not transaction.province %}selected{% endif %}>Select a province</option>
-                                <option value="AB" {% if transaction and transaction.province == 'AB' %}selected{% endif %}>Alberta</option>
-                                <option value="BC" {% if transaction and transaction.province == 'BC' %}selected{% endif %}>British Columbia</option>
-                                <option value="MB" {% if transaction and transaction.province == 'MB' %}selected{% endif %}>Manitoba</option>
-                                <option value="NB" {% if transaction and transaction.province == 'NB' %}selected{% endif %}>New Brunswick</option>
-                                <option value="NL" {% if transaction and transaction.province == 'NL' %}selected{% endif %}>Newfoundland and Labrador</option>
-                                <option value="NS" {% if transaction and transaction.province == 'NS' %}selected{% endif %}>Nova Scotia</option>
-                                <option value="NT" {% if transaction and transaction.province == 'NT' %}selected{% endif %}>Northwest Territories</option>
-                                <option value="NU" {% if transaction and transaction.province == 'NU' %}selected{% endif %}>Nunavut</option>
-                                <option value="ON" {% if transaction and transaction.province == 'ON' %}selected{% endif %}>Ontario</option>
-                                <option value="PE" {% if transaction and transaction.province == 'PE' %}selected{% endif %}>Prince Edward Island</option>
-                                <option value="QC" {% if transaction and transaction.province == 'QC' %}selected{% endif %}>Quebec</option>
-                                <option value="SK" {% if transaction and transaction.province == 'SK' %}selected{% endif %}>Saskatchewan</option>
-                                <option value="YT" {% if transaction and transaction.province == 'YT' %}selected{% endif %}>Yukon</option>
-                                <option value="Other" {% if transaction and transaction.province == 'Other' %}selected{% endif %}>Other</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="region">Region</label>
-                            <input type="text" class="form-control" id="region" name="region" value="{{ transaction.region if transaction else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="postal_code">Postal Code</label>
-                            <input type="text" class="form-control" id="postal_code" name="postal_code" value="{{ transaction.postal_code if transaction else '' }}">
-                        </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="is_primary" name="is_primary" {% if transaction and transaction.is_primary %}checked{% endif %}>
-                            <label class="form-check-label" for="is_primary">Is Primary</label>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="form-group">
-                            <label for="source_date">Source Date</label>
-                            <input type="date" class="form-control" id="source_date" name="source_date" value="{{ transaction.source_date.strftime('%Y-%m-%d') if transaction and transaction.source_date else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="source_description">Source Description</label>
-                            <textarea class="form-control" id="source_description" name="source_description" rows="3">{{ transaction.source_description if transaction else '' }}</textarea>
-                        </div>
-                        <div class="form-group">
-                            <label for="grant_type">Grant Type</label>
-                            <input type="text" class="form-control" id="grant_type" name="grant_type" value="{{ transaction.grant_type if transaction else '' }}" list="grant_type_options">
-                            <datalist id="grant_type_options">
-                                <option value="Research">
-                                <option value="Development">
-                                <option value="Innovation">
-                                <option value="Education">
-                                <option value="Infrastructure">
-                                <option value="Healthcare">
-                                <option value="Environmental">
-                                <option value="Social">
-                                <option value="Cultural">
-                                <option value="Economic">
-                            </datalist>
-                        </div>
-                        <div class="form-group">
-                            <label for="description">Description</label>
-                            <textarea class="form-control" id="description" name="description" rows="3">{{ transaction.description if transaction else '' }}</textarea>
-                        </div>
-                        <div class="form-group">
-                            <label for="amount">Amount</label>
-                            <div class="input-group">
-                                <span class="input-group-text">$</span>
-                                <input type="number" step="0.01" min="0" class="form-control" id="amount" name="amount" value="{{ transaction.amount if transaction else '' }}" placeholder="0.00">
+                    <div>
+                        <h4>Transaction Info</h4>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                <label for="transaction_type">Transaction Type</label>
+                                <input type="text" class="form-control" id="transaction_type" name="transaction_type" value="{{ transaction.transaction_type if transaction else '' }}" list="transaction_type_options" required>
+                                <datalist id="transaction_type_options">
+                                    <option value="Grant">
+                                    <option value="Contract">
+                                    <option value="Donation">
+                                    <option value="Investment">
+                                    <option value="Loan">
+                                    <option value="Subsidy">
+                                    <option value="Tax Credit">
+                                    <option value="Rebate">
+                                </datalist>
+                                <div class="invalid-feedback">Please enter a transaction type.</div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="is_primary" name="is_primary" {% if transaction and transaction.is_primary %}checked{% endif %}>
+                                    <label class="form-check-label" for="is_primary">Is Primary</label>
+                                </div>
+                                <div class="form-group">
+                                    <label for="amount">Amount</label>
+                                    <div class="input-group">
+                                        <span class="input-group-text">$</span>
+                                        <input type="number" step="0.01" min="0" class="form-control" id="amount" name="amount" value="{{ transaction.amount if transaction else '' }}" placeholder="0.00">
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="recipient">Recipient</label>
+                                    <input type="text" class="form-control" id="recipient" name="recipient" value="{{ transaction.recipient if transaction else '' }}">
+                                </div>
+                                <div class="form-group">
+                                    <label for="commodity_class">Commodity Class</label>
+                                    <input type="text" class="form-control" id="commodity_class" name="commodity_class" value="{{ transaction.commodity_class if transaction else '' }}" list="commodity_class_options">
+                                    <datalist id="commodity_class_options">
+                                        <option value="Agricultural">
+                                        <option value="Automotive">
+                                        <option value="Chemical">
+                                        <option value="Construction">
+                                        <option value="Defense">
+                                        <option value="Electronics">
+                                        <option value="Energy">
+                                        <option value="Financial">
+                                        <option value="Food">
+                                        <option value="Healthcare">
+                                        <option value="Industrial">
+                                        <option value="Information Technology">
+                                        <option value="Manufacturing">
+                                        <option value="Mining">
+                                        <option value="Pharmaceutical">
+                                        <option value="Retail">
+                                        <option value="Telecommunications">
+                                        <option value="Transportation">
+                                        <option value="Utilities">
+                                    </datalist>
+                                </div>
+                                <div class="form-group">
+                                    <label for="contract_number">Contract Number</label>
+                                    <input type="text" class="form-control" id="contract_number" name="contract_number" value="{{ transaction.contract_number if transaction else '' }}">
+                                </div>
+                            </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="source_date">Source Date</label>
+                                    <input type="date" class="form-control" id="source_date" name="source_date" value="{{ transaction.source_date.strftime('%Y-%m-%d') if transaction and transaction.source_date else '' }}">
+                                </div>
+                                <div class="form-group">
+                                    <label for="source_description">Source Description</label>
+                                    <textarea class="form-control" id="source_description" name="source_description" rows="3">{{ transaction.source_description if transaction else '' }}</textarea>
+                                </div>
+                                <div class="form-group">
+                                    <label for="grant_type">Grant Type</label>
+                                    <input type="text" class="form-control" id="grant_type" name="grant_type" value="{{ transaction.grant_type if transaction else '' }}" list="grant_type_options">
+                                    <datalist id="grant_type_options">
+                                        <option value="Research">
+                                        <option value="Development">
+                                        <option value="Innovation">
+                                        <option value="Education">
+                                        <option value="Infrastructure">
+                                        <option value="Healthcare">
+                                        <option value="Environmental">
+                                        <option value="Social">
+                                        <option value="Cultural">
+                                        <option value="Economic">
+                                    </datalist>
+                                </div>
+                                <div class="form-group">
+                                    <label for="description">Description</label>
+                                    <textarea class="form-control" id="description" name="description" rows="3">{{ transaction.description if transaction else '' }}</textarea>
+                                </div>
                             </div>
-                        </div>
-                        <div class="form-group">
-                            <label for="recipient">Recipient</label>
-                            <input type="text" class="form-control" id="recipient" name="recipient" value="{{ transaction.recipient if transaction else '' }}">
-                        </div>
-                        <div class="form-group">
-                            <label for="commodity_class">Commodity Class</label>
-                            <input type="text" class="form-control" id="commodity_class" name="commodity_class" value="{{ transaction.commodity_class if transaction else '' }}" list="commodity_class_options">
-                            <datalist id="commodity_class_options">
-                                <option value="Agricultural">
-                                <option value="Automotive">
-                                <option value="Chemical">
-                                <option value="Construction">
-                                <option value="Defense">
-                                <option value="Electronics">
-                                <option value="Energy">
-                                <option value="Financial">
-                                <option value="Food">
-                                <option value="Healthcare">
-                                <option value="Industrial">
-                                <option value="Information Technology">
-                                <option value="Manufacturing">
-                                <option value="Mining">
-                                <option value="Pharmaceutical">
-                                <option value="Retail">
-                                <option value="Telecommunications">
-                                <option value="Transportation">
-                                <option value="Utilities">
-                            </datalist>
-                        </div>
-                        <div class="form-group">
-                            <label for="contract_number">Contract Number</label>
-                            <input type="text" class="form-control" id="contract_number" name="contract_number" value="{{ transaction.contract_number if transaction else '' }}">
                         </div>
                         <div class="form-group">
                             <label for="comments">Comments</label>
                             <textarea class="form-control" id="comments" name="comments" rows="3">{{ transaction.comments if transaction else '' }}</textarea>
                         </div>
                     </div>
+                    <div>
+                        <h4>Seller Info</h4>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="company_division">Company/Division</label>
+                                    <input type="text" class="form-control" id="company_division" name="company_division" value="{{ transaction.company_division if transaction else '' }}" required>
+                                    <div class="invalid-feedback">Please enter a company division.</div>
+                                </div>
+                                <div class="form-group">
+                                    <label for="address_1">Address 1</label>
+                                    <input type="text" class="form-control" id="address_1" name="address_1" value="{{ transaction.address_1 if transaction else '' }}">
+                                </div>
+                                <div class="form-group">
+                                    <label for="address_2">Address 2</label>
+                                    <input type="text" class="form-control" id="address_2" name="address_2" value="{{ transaction.address_2 if transaction else '' }}">
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="form-group">
+                                    <label for="province">Province</label>
+                                    <select class="form-select" id="province" name="province">
+                                        <option value="" {% if not transaction or not transaction.province %}selected{% endif %}>Select a province</option>
+                                        <option value="AB" {% if transaction and transaction.province == 'AB' %}selected{% endif %}>Alberta</option>
+                                        <option value="BC" {% if transaction and transaction.province == 'BC' %}selected{% endif %}>British Columbia</option>
+                                        <option value="MB" {% if transaction and transaction.province == 'MB' %}selected{% endif %}>Manitoba</option>
+                                        <option value="NB" {% if transaction and transaction.province == 'NB' %}selected{% endif %}>New Brunswick</option>
+                                        <option value="NL" {% if transaction and transaction.province == 'NL' %}selected{% endif %}>Newfoundland and Labrador</option>
+                                        <option value="NS" {% if transaction and transaction.province == 'NS' %}selected{% endif %}>Nova Scotia</option>
+                                        <option value="NT" {% if transaction and transaction.province == 'NT' %}selected{% endif %}>Northwest Territories</option>
+                                        <option value="NU" {% if transaction and transaction.province == 'NU' %}selected{% endif %}>Nunavut</option>
+                                        <option value="ON" {% if transaction and transaction.province == 'ON' %}selected{% endif %}>Ontario</option>
+                                        <option value="PE" {% if transaction and transaction.province == 'PE' %}selected{% endif %}>Prince Edward Island</option>
+                                        <option value="QC" {% if transaction and transaction.province == 'QC' %}selected{% endif %}>Quebec</option>
+                                        <option value="SK" {% if transaction and transaction.province == 'SK' %}selected{% endif %}>Saskatchewan</option>
+                                        <option value="YT" {% if transaction and transaction.province == 'YT' %}selected{% endif %}>Yukon</option>
+                                        <option value="Other" {% if transaction and transaction.province == 'Other' %}selected{% endif %}>Other</option>
+                                    </select>
+                                </div>
+                                <div class="form-group">
+                                    <label for="city">City</label>
+                                    <input type="text" class="form-control" id="city" name="city" value="{{ transaction.city if transaction else '' }}">
+                                </div>
+                                <div class="form-group">
+                                    <label for="postal_code">Postal Code</label>
+                                    <input type="text" class="form-control" id="postal_code" name="postal_code" value="{{ transaction.postal_code if transaction else '' }}">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <h4>Sources <button type="button" class="btn btn-primary new-source">+</button></h4>
+                        <div id="sources">
+                            <div class="empty-message">
+                                <h3>No Documents</h3>
+                                <p>Press "+" to add some</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <button type="submit" class="btn btn-primary mt-3">Submit</button>
                 <a href="{{ url_for('index') }}" class="btn btn-secondary mt-3">Cancel</a>
@@ -158,4 +198,16 @@
         </div>
     </div>
 </div>
-{% endblock %} 
\ No newline at end of file
+{% endblock %} 
+
+{% block scripts %}
+<script nonce="{{ csp_nonce }}">
+    console.log("COOL");
+    const newSourceButton = document.querySelector(".new-source");
+    const emptyMessage = document.querySelector(".empty-message");
+
+    newSourceButton.addEventListener("click", () => {
+        emptyMessage.style.display = "none";
+    });
+</script>
+{% endblock %}
\ No newline at end of file
