Update table styles in profile, damage, inventory, staff, and customers pages

Author: HashJProgramming

.gitignore

@@ -0,0 +1,2 @@
+test.html
+test.drawio

assets/js/main.js

@@ -14,6 +14,7 @@ $('#dataTable').DataTable( {
             visible: false,
             searchable: false
         }],
+        
     buttons: [
         { 
             extend: 'excel', 
@@ -33,9 +34,6 @@ $('#dataTable').DataTable( {
             text: '<i class="fa fa-print"></i> Print',
             title: 'RMMFB - Rental Management and Monitoring for a Fashion Boutique', 
             autoPrint: true,
-            exportOptions: {
-                columns: ':visible',
-            },
             customize: function (win) {
                 $(win.document.body).find('table').addClass('display').css('font-size', '9px');
                 $(win.document.body).find('tr:nth-child(odd) td').each(function(index){

customers.php

@@ -49,7 +49,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
-                        <table class="table table-hover my-0 w-100" id="dataTable">
+                        <table class="table table-hover table-bordered my-0 w-100" id="dataTable">
                             <thead>
                                 <tr>
                                     <th>ID</th>

damage.php

@@ -45,7 +45,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" role="grid" aria-describedby="dataTable_info">
-                    <table class="table table-hover my-0 w-100" id="dataTable">
+                    <table class="table table-hover table-bordered my-0 w-100" id="dataTable">
                             <thead>
                                 <tr>
                                     <th>ID</th>

functions/view/datatable.php

@@ -173,7 +173,7 @@ function transaction_item_list($id)
 function get_rent_list()
 {
     global $db;
-    $sql = "SELECT r.id, i.name, r.qty, r.price, r.returned, r.penalty, r.item_return, r.created_at, t.status, c.fullname, c.phone, c.address, c.id as customer_id, t.id as transact_id, t.event
+    $sql = "SELECT r.id, i.name, r.qty, (i.price * r.qty) AS price, r.returned, r.penalty, r.item_return, r.created_at, t.status, c.fullname, c.phone, c.address, c.id as customer_id, t.id as transact_id, t.event
     FROM rentals r
     JOIN transactions t ON r.transact_id = t.id
     JOIN customers c ON t.customer_id = c.id
@@ -210,7 +210,7 @@ function get_rent_list()
             <td><?php echo $row['item_return'] ?></td>
             <td><?php echo $row['created_at'] ?></td>
             <td><?php echo $row['returned'] ?></td>
-            <td>₱<?php echo $row['price'] ?></td>
+            <td>₱<?php echo number_format($row['price'], 2) ?></td>
             <td><?php echo $row['event'] ?></td>
             <td><?php echo $status ?> | <?php echo $daysOverdue ?> Days</td>
             <td class="text-center">
@@ -244,17 +244,37 @@ function get_transaction_list()
             <td><?php echo $row['address'] ?></td>
             <td><?php echo $row['qty'] ?></td>
             <td><?php echo $row['qty'] - $row['item_damage'] ?></td>
-            <td><?php echo $row['item_damage'] ?></td>
-            <td><?php echo $row['item_repaired'] ?></td>
-            <td><?php echo $row['item_beyond_repair'] ?></td>
             <td><?php echo $row['created_at'] ?></td>
             <td><?php echo $row['returned'] ?></td>
             <td>₱<?php echo number_format($row['penalty'] , 2) ?></td>
-            <td>₱<?php echo number_format($row['price'] ,) ?></td>
+            <td>₱<?php echo number_format($row['price'] , 2) ?></td>
+            <td class="text-center">Damage</td>
+            <td class="text-center">Repaired</td>
+            <td class="text-center">UnRepaired</td>
+            <!-- <td class="text-center"><span class="badge bg-primary">Damage</span></td>
+            <td class="text-center"><span class="badge bg-success">Repaired</span></td>
+            <td class="text-center"><span class="badge bg-danger">UnRepaired</span></td> -->
             <td class="text-center">
                 <a data-bss-tooltip="" class="mx-1" href="profile.php?id=<?php echo $row['customer_id'] ?>" title="Here you can see the customer transactions."><i class="far fa-eye text-primary" style="font-size: 20px;"></i></a>
             </td>
         </tr>
+        <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td class="text-center"><?php echo $row['item_damage'] ?></td>
+            <td class="text-center"><?php echo $row['item_repaired'] ?></td>
+            <td class="text-center"><?php echo $row['item_beyond_repair'] ?></td>
+            <td></td>
+        </tr>
     <?php
     }
 }
@@ -296,7 +316,7 @@ function get_damage_transaction_list()
 function get_customer_transaction_list()
 {
     global $db;
-    $sql = "SELECT r.id, i.name, r.qty, r.price, r.returned, r.penalty, r.conditions, r.created_at, t.status, c.fullname, c.phone, c.address, c.id as customer_id, t.id as transact_id
+    $sql = "SELECT r.id, i.name, r.qty, i.price , (i.price * r.qty) AS total_price, r.returned, r.penalty, r.conditions, r.created_at, t.status, c.fullname, c.phone, c.address, c.id as customer_id, t.id as transact_id
     FROM rentals r
     JOIN transactions t ON r.transact_id = t.id
     JOIN customers c ON t.customer_id = c.id
@@ -319,6 +339,7 @@ function get_customer_transaction_list()
             <td><?php echo $row['created_at'] ?></td>
             <td><?php echo $row['returned'] ?></td>
             <td>₱<?php echo number_format($row['price'], 2) ?></td>
+            <td>₱<?php echo number_format($row['total_price'], 2) ?></td>
         </tr>
 <?php
     }

inventory.php

@@ -45,7 +45,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" role="grid" aria-describedby="dataTable_info">
-                        <table class="table table-striped my-0 w-100" id="dataTable">
+                        <table class="table table-striped table-bordered my-0 w-100" id="dataTable">
                             <thead>
                                 <tr>
                                     <th>ID #</th>

profile.php

@@ -110,6 +110,7 @@
                                     <th>Borrowed Date</th>
                                     <th>Returned Date</th>
                                     <th>Rent Price</th>
+                                    <th>Total Price</th>
                                 </tr>
                             </thead>
                             <tbody>

rents.php

@@ -38,7 +38,7 @@
         </nav>
         <div class="container-fluid">
             <div class="d-sm-flex justify-content-between align-items-center mb-4">
-                <h3 class="text-dark mb-0">Rental Management</h3><button class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bss-tooltip="" data-bs-placement="left" type="button" data-bs-target="#create" title="Here you can create new transaction."><i class="fas fa-user-check fa-sm text-white-50"></i>&nbsp;Create Transaction</button>
+                <h3 class="text-dark mb-0">Rental Management</h3><button class="btn btn-dark btn-sm" data-bs-toggle="modal" data-bss-tooltip="" data-bs-placement="left" type="button" data-bs-target="#create" title="Here you can create new transaction."><i class="fas fa-user-check fa-sm text-white-50"></i>&nbsp;Create Rental</button>
             </div>
 
             <div class="row">
@@ -76,7 +76,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
-                        <table class="table table-hover my-0 w-100" id="dataTable">
+                        <table class="table table-hover table-bordered my-0 w-100" id="dataTable">
                             <thead>
                                 <tr>
                                     <th>ID</th>
@@ -107,7 +107,7 @@
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h4 class="modal-title">Create Transaction</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
+                    <h4 class="modal-title">Create Rental</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <form action="functions/transaction-create.php" method="post">

sales.php

@@ -25,7 +25,7 @@
 
 <body id="page-top">
     <div id="content">
-    <nav class="navbar navbar-expand-lg mb-4 shadow navbar-light">
+        <nav class="navbar navbar-expand-lg mb-4 shadow navbar-light">
             <div class="container-fluid"><img src="assets/img/boutique.png" width="60em"><a class="navbar-brand d-flex align-items-center" href="/"><span>RMMFB</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                 <div id="navcol-1" class="collapse navbar-collapse">
                     <ul class="navbar-nav mx-auto">
@@ -43,7 +43,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
-                        <table class="table table-hover my-0 w-100" id="dataTable">
+                        <table class="table table-hover table-bordered my-0 w-100" id="dataTable" class="display" cellspacing="0" width="100%">
                             <thead>
                                 <tr>
                                     <th>ID</th>
@@ -53,13 +53,11 @@
                                     <th>Address</th>
                                     <th>Qty</th>
                                     <th>Returned</th>
-                                    <th>Damage</th>
-                                    <th>Repaired</th>
-                                    <th>Beyond Repair</th>
                                     <th>Borrowed Date</th>
                                     <th>Returned Date</th>
                                     <th>Penalty</th>
                                     <th>Rent Price</th>
+                                    <th colspan="3" class="text-center">Damages</th>
                                     <th class="text-center">Option</th>
                                 </tr>
                             </thead>
@@ -89,7 +87,49 @@
     <script src="assets/js/vanta.birds.min.js"></script>
     <script src="assets/js/vanta.waves.min.js"></script>
     <script src="assets/js/sweetalert2.all.min.js"></script>
-    <script src="assets/js/main.js"></script>
+    <script>
+        $('#dataTable').DataTable({
+            // dom: 'Blfrtip',
+            dom: 'Bfrtip',
+            aaSorting: [
+                [0, 'desc']
+            ],
+            "ordering": false,
+            columnDefs: [{
+                target: 0,
+                visible: false,
+                searchable: false
+            }],
+
+            buttons: [{
+                    extend: 'excel',
+                    title: 'RMMFB - Rental Management and Monitoring for a Fashion Boutique',
+                    className: 'btn btn-primary',
+                    text: '<i class="fa fa-file-excel"></i> EXCEL'
+                },
+                {
+                    extend: 'pdf',
+                    title: 'RMMFB - Rental Management and Monitoring for a Fashion Boutique',
+                    className: 'btn btn-primary',
+                    text: '<i class="fa fa-file-pdf"></i> PDF'
+                },
+                {
+                    extend: 'print',
+                    className: 'btn btn-primary',
+                    text: '<i class="fa fa-print"></i> Print',
+                    title: 'RMMFB - Rental Management and Monitoring for a Fashion Boutique',
+                    autoPrint: true,
+                    customize: function(win) {
+                        $(win.document.body).find('table').addClass('display').css('font-size', '9px');
+                        $(win.document.body).find('tr:nth-child(odd) td').each(function(index) {
+                            $(this).css('background-color', '#D0D0D0');
+                        });
+                        $(win.document.body).find('h1').css('text-align', 'center');
+                    }
+                }
+            ]
+        });
+    </script>
 </body>
 
 </html>

staff.php

@@ -46,7 +46,7 @@
                 </div>
                 <div class="card-body">
                     <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
-                        <table class="table table-hover my-0 w-100" id="dataTable">
+                        <table class="table table-hover table-bordered my-0 w-100" id="dataTable">
                             <thead>
                                 <tr>
                                     <th>User ID</th>