From 44d46a2cc572f7e27b8eba14d8758f8c198fc311 Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Sun, 15 Jun 2025 15:06:53 -0400
Subject: [PATCH] UI Overhaul to invoice Details Page

---
 invoice.php | 105 ++++++++++++++++++++++++----------------------------
 1 file changed, 49 insertions(+), 56 deletions(-)

diff --git a/invoice.php b/invoice.php
index 88435116..24b8321b 100644
--- a/invoice.php
+++ b/invoice.php
@@ -310,80 +310,73 @@ if (isset($_GET['invoice_id'])) {
 
         <div class="card-body">
 
-            <div class="row mb-4">
+            <div class="row mb-3">
                 <div class="col-sm-2">
                     <img class="img-fluid" src="<?php echo "uploads/settings/$company_logo"; ?>" alt="Company logo">
                 </div>
-                <div class="col-sm-10">
-                    <div class="ribbon-wrapper">
-                        <div class="ribbon bg-<?php echo $invoice_badge_color; ?>">
-                            <?php echo "$invoice_status"; ?>
-                        </div>
-                    </div>
-                    <h3 class="text-right mt-5"><strong>Invoice</strong><br><small class="text-secondary"><?php echo "$invoice_prefix$invoice_number"; ?></small></h3>
-                </div>
-
-            </div>
-            <div class="row mb-4">
-                <div class="col">
+                <div class="col-sm-6">
                     <ul class="list-unstyled">
                         <li><h4><strong><?php echo $company_name; ?></strong></h4></li>
                         <li><?php echo $company_address; ?></li>
-                        <li><?php echo "$company_city $company_state $company_zip"; ?></li>
-                        <li><small><?php echo $company_country; ?></small></li>
-                        <li><?php echo $company_phone; ?></li>
-                        <li><?php echo $company_email; ?></li>
+                        <li><?php echo "$company_city $company_state $company_zip, $company_country"; ?></li>
+                        <li><?php echo "$company_email | $company_phone"; ?></li>
                         <li><?php echo $company_website; ?></li>
                         <?php if ($company_tax_id_display) { ?>
                         <li><?php echo $company_tax_id_display; ?></li>
                         <?php } ?>
                     </ul>
                 </div>
-                <div class="col">
-                    <ul class="list-unstyled text-right">
-                        <li><h4><strong><?php echo $client_name; ?></strong></h4></li>
-                        <li><?php echo $location_address; ?></li>
-                        <li><?php echo "$location_city $location_state $location_zip"; ?></li>
-                        <li><small><?php echo $location_country; ?></small></li>
-                        <li><?php echo "$contact_phone $contact_extension"; ?></li>
-                        <li><?php echo $contact_mobile; ?></li>
-                        <li><?php echo $contact_email; ?></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="row mb-4">
-                <div class="col-sm-8">
-                </div>
+
                 <div class="col-sm-4">
-                    <table class="table">
+                    <h3 class="text-right"><strong>INVOICE</strong></h3>
+                    <h5 class="badge badge-<?php echo $invoice_badge_color; ?> p-2 float-right">
+                        <?php echo "$invoice_status"; ?>
+                    </h5>
+                    <table class="table table-sm table-borderless">
                         <tr>
-                            <td>Date</td>
+                            <th>Invoice #:</th>
+                            <td class="text-right"><?php echo "$invoice_prefix$invoice_number"; ?></td>
+                        </tr>
+                        <tr>
+                            <th>Date:</th>
                             <td class="text-right"><?php echo $invoice_date; ?></td>
                         </tr>
-                        <tr class="text-bold">
-                            <td>Due</td>
+                        <tr>
+                            <th>Due:</th>
                             <td class="text-right"><?php echo $invoice_due; ?></td>
                         </tr>
                     </table>
                 </div>
+
+            </div>
+            <div class="row mb-3 bg-light p-3">
+                <div class="col">
+                    <h6><strong>Bill To:</strong></h6>
+                    <ul class="list-unstyled mb-0">
+                        <li><?php echo $client_name; ?></li>
+                        <li><?php echo $location_address; ?></li>
+                        <li><?php echo "$location_city $location_state $location_zip, $location_country"; ?></li>
+                        <li><?php echo "$contact_email | $contact_phone $contact_extension"; ?></li>
+                    </ul>
+                </div>
             </div>
 
             <?php $sql_invoice_items = mysqli_query($mysqli, "SELECT * FROM invoice_items WHERE item_invoice_id = $invoice_id ORDER BY item_order ASC"); ?>
 
-            <div class="row mb-4">
+            <div class="row mb-3">
                 <div class="col-md-12">
                     <div class="card">
                         <div class="table-responsive">
-                            <table class="table" id="items">
-                                <thead>
+                            <table class="table table-borderless" id="items">
+                                <thead class="bg-light">
                                 <tr>
                                     <th class="d-print-none"></th>
                                     <th>Item</th>
                                     <th>Description</th>
-                                    <th class="text-center">Quantity</th>
-                                    <th class="text-right">Price</th>
+                                    <th class="text-center">Qty</th>
+                                    <th class="text-right">Unit Price</th>
                                     <th class="text-right">Tax</th>
-                                    <th class="text-right">Total</th>
+                                    <th class="text-right">Amount</th>
                                 </tr>
                                 </thead>
                                 <tbody>
@@ -490,11 +483,11 @@ if (isset($_GET['invoice_id'])) {
                     </div>
                 </div>
             </div>
-            <div class="row mb-4">
+            <div class="row mb-3">
                 <div class="col-sm-7">
                     <div class="card">
                         <div class="card-header text-bold">
-                            Notes
+                            Notes:
                             <div class="card-tools d-print-none">
                                 <a href="#" class="btn btn-light btn-tool" data-toggle="modal" data-target="#invoiceNoteModal">
                                     <i class="fas fa-edit"></i>
@@ -510,40 +503,40 @@ if (isset($_GET['invoice_id'])) {
                     <table class="table table-borderless">
                         <tbody>
 
-                        <tr class="border-bottom">
-                            <td>Subtotal</td>
+                        <tr>
+                            <td>Subtotal:</td>
                             <td class="text-right"><?php echo numfmt_format_currency($currency_format, $sub_total, $invoice_currency_code); ?></td>
                         </tr>
                         <?php
                         if ($invoice_discount > 0) {
                             ?>
-                            <tr class="border-bottom">
-                                <td>Discount</td>
+                            <tr>
+                                <td>Discount:</td>
                                 <td class="text-right">-<?php echo numfmt_format_currency($currency_format, $invoice_discount, $invoice_currency_code); ?></td>
                             </tr>
                         <?php
                         }
                         ?>
                         <?php if ($total_tax > 0) { ?>
-                            <tr class="border-bottom">
-                                <td>Tax</td>
+                            <tr>
+                                <td>Tax:</td>
                                 <td class="text-right"><?php echo numfmt_format_currency($currency_format, $total_tax, $invoice_currency_code); ?></td>
                             </tr>
                         <?php } ?>
-                        <tr class="border-bottom">
-                            <td>Total</td>
+                        <tr>
+                            <td>Total:</td>
                             <td class="text-right"><?php echo numfmt_format_currency($currency_format, $invoice_amount, $invoice_currency_code); ?></td>
                         </tr>
                         <?php
                         if ($amount_paid > 0) { ?>
-                            <tr class="border-bottom">
-                                <td><div class="text-success">Paid</div></td>
+                            <tr>
+                                <td><div class="text-success">Paid:</div></td>
                                 <td class="text-right text-success"><?php echo numfmt_format_currency($currency_format, $amount_paid, $invoice_currency_code); ?></td>
                             </tr>
                         <?php } ?>
 
-                        <tr class="border-bottom">
-                            <td><strong>Balance</strong></td>
+                        <tr class="h5 border-top">
+                            <td><strong>Balance:</strong></td>
                             <td class="text-right"><strong><?php echo numfmt_format_currency($currency_format, $balance, $invoice_currency_code); ?></strong></td>
                         </tr>
                         </tbody>