Modified styles for the app to look better

views/index.twig

@@ -11,22 +11,28 @@
   </div>
 </header>
 
-<section class="row">
+<section id="record-actions" class="row">
   <div class="columns six">
     <a href="/item/add">
-      <i class="fa-solid fa-plus"></i>
-      <p>Add Item</p>
+      <p><i class="fa-solid fa-plus"></i> Add Item</p>
     </a>
   </div>
 
   <div class="columns six">
     <a href="/item/search">
-      <i class="fa-solid fa-search"></i>
-      <p>Search</p>
+      <p><i class="fa-solid fa-search"></i> Search</p>
     </a>
   </div>
 </section>
 
+<hr>
+
+<section class="row">
+  <div class="columns twelve">
+    <h3>Recently updated records:</h3>
+  </div>
+</section>
+
 <section class="row">
   <table class="columns twelve">
     <thead>

views/item/add.twig

@@ -1,6 +1,6 @@
 {% extends 'layout.twig' %}
 
-{% block title %}Create Item{% endblock %}
+{% block title %}Add New Item{% endblock %}
 
 {% block content %}
 
@@ -17,7 +17,7 @@
       <div class="row">
         <div class="columns twelve">
           <label for="item_name">Item name:</label>
-          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name">
+          <input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" required>
         </div>
       </div>
 
@@ -65,7 +65,7 @@
         </div>
       </div>
 
-      <input class="button-primary" type="submit" value="Submit">
+      <input class="button-primary u-full-width" type="submit" value="Submit">
     </form>
   </div>
 </section>

views/item/view.twig

@@ -5,9 +5,11 @@
 {% block content %}
 
 <!-- page header -->
-<header class="row">
+<header id="item-header" class="row">
   <div class="columns twelve">
     <h1>{{ item.name }}</h1>
+    <h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
+    <h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
   </div>
 </header>
 
@@ -16,18 +18,24 @@
   <table class="columns twelve">
     <thead>
       <tr>
-        <th>Name</th>
+        <th>Product name</th>
+        <th>Serial number</th>
+        <th>SKU Number</th>
         <th>Manufacturer</th>
         <th>Type</th>
-        <th>Created date</th>
+        <th>Seller</th>
+        <th>Purchase date</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>{{ item.name }}</td>
-        <td>{{ item.manufacturer }}</td>
+        <td>{{ item.serialNumber ? item.serialNumber : 'N/a' }}</td>
+        <td>{{ item.skuNumber ? item.skuNumber : 'N/a' }}</td>
+        <td>{{ item.manufacturer ? item.manufacturer : 'N/a' }}</td>
         <td>{{ item.type }}</td>
-        <td>{{ item.createdAt | date("m/d/Y h:i:s A") }}</td>
+        <td>{{ item.purchasedFrom ? item.purchasedFrom : 'N/a' }}</td>
+        <td>{{ item.purchasedAt | date("m/d/Y h:i:s A") }}</td>
       </tr>
     </tbody>
   </table>

views/layout.twig

@@ -25,7 +25,7 @@
   </nav>
 
   <!-- main content -->
-  <div id="main-content" class="container">
+  <div id="main-content" class="container fluid">
     {% block content %}{% endblock %}
   </div>
 </body>