feat: Begins po detail.

Resources/Views/navbar.leaf

@@ -1,6 +1,6 @@
 <div class="sidepanel" id="sidepanel">
   <a href="javscript:void(0)" class="closebtn" onclick="closeSidepanel()">&times;</a>
-  <a hx-get="/purchase-orders"
+  <a hx-get="/purchase-orders?page=1&limit=50"
      hx-target="body"
      hx-push-url="true"
      >

Resources/Views/purchaseOrders/detail.leaf

@@ -0,0 +1,46 @@
+<div id="po-detail" class="container">
+  <table>
+    <tbody>
+      <tr>
+        <td class="label"><h3>Purchase Order:</h3></td>
+        <td><h3>#(purchaseOrder.id)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Work Order:</h3></td>
+        <td><h3>#(purchaseOrder.workOrder)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Customer:</h3></td>
+        <td><h3>#(purchaseOrder.customer)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Vendor:</h3></td>
+        <td><h3>#capitalized(purchaseOrder.vendorBranch.vendor.name) - #capitalized(purchaseOrder.vendorBranch.name)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Materials:</h3></td>
+        <td><h3>#(purchaseOrder.materials)<h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Created For:</h3></td>
+        <td><h3>#capitalized(purchaseOrder.createdFor.firstName) #capitalized(purchaseOrder.createdFor.lastName)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Truck Stock:</h3></td>
+        <td><h3>#capitalized(purchaseOrder.truckStock)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Created By:</h3></td>
+        <td><h3>#(purchaseOrder.createdBy.username)</h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Date:</h3></td>
+        <td><h3>#date(purchaseOrder.createdAt)<h3></td>
+      </tr>
+      <tr>
+        <td class="label"><h3>Updated:</h3></td>
+        <td><h3>#date(purchaseOrder.updatedAt)<h3></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

Resources/Views/purchaseOrders/index.leaf

@@ -8,6 +8,28 @@
     #extend("form-container"): #export("formContent"):
       #extend("purchaseOrders/form", form)
     #endexport #endextend
+    <div class="btn-row">
+      #if(hasPrevious):
+      <button hx-get="/purchase-orders?page=#(page - 1)&limit=#(limit)"
+              hx-target="body"
+              hx-swap="outerHTML"
+              hx-push-url="true"
+              style="float: left;"
+              >
+        &lsaquo; Previous
+      </button>
+      #endif
+      #if(hasNext):
+      <button hx-get="/purchase-orders?page=#(page + 1)&limit=#(limit)"
+              hx-target="body"
+              hx-swap="outerHTML"
+              hx-push-url="true"
+              style="float: right;"
+              >
+        Next &rsaquo;
+      </button>
+      #endif
+    </div>
     #extend("purchaseOrders/table")
   </div>
   #endexport

Resources/Views/purchaseOrders/table-row.leaf

@@ -7,7 +7,14 @@
   <td>#capitalized(createdFor.firstName) #capitalized(createdFor.lastName)</td>
   <td>#(createdBy.username)</td>
   <td>#capitalized(truckStock)</td>
-  <td>
+  <td style="text-align: center;">
     <!-- TODO: add buttons here -->
+    <button class="btn btn-detail"
+            hx-get="/purchase-orders/#(id)"
+            hx-target="#home-content"
+            hx-push-url="true"
+            >
+      &rsaquo;
+    </button>
   </td>
 </tr>