From 098b616db2039efa51654c1879aefd4148f4433b Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Thu, 4 Jul 2024 23:37:28 -0400
Subject: [PATCH] <div></div>

---
 .../CalibrationDeviceForm.vue                 |   2 +
 .../NewCalibrationDeviceForm.vue              |  44 ++--
 benchtop-fe/src/components/CustomerForm.vue   |  76 ++++---
 .../src/components/EnvironmentForm.vue        |  68 +++---
 .../components/Instrument/InstrumentForm.vue  |  54 ++---
 .../Instrument/NewInstrumentForm.vue          | 196 ++++++++--------
 benchtop-fe/src/components/PDF/PDF.vue        | 214 +++++++++---------
 .../src/components/PDF/ReadingTable.vue       | 192 ++++++++--------
 benchtop-fe/src/components/Sheet.vue          |   2 +-
 benchtop-fe/src/components/UploadForm.vue     | 166 +++++++-------
 10 files changed, 516 insertions(+), 498 deletions(-)

diff --git a/benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue b/benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue
index a9eac7c..7769e87 100644
--- a/benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue
+++ b/benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
   <div class="card-header">
     Primary Cal Device
     <button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
@@ -27,6 +28,7 @@
       </p>
     </div>
   </div>
+  </div>
 </template>
 <script setup>
 import { ref, defineEmits, watchEffect } from "vue";
diff --git a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
index b2dc45c..f5b2f0f 100644
--- a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
+++ b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
@@ -1,28 +1,30 @@
 <template>
-  <div class="card-header">Calibration Devices</div>
-  <div class="card-body">
-    <h3>Primary Device</h3>
-    <select name="primary_device" v-model="primary_device" required id="id_report_type">
-      <option value="-" selected>----Primary-----</option>
-      <option value="Menzer1">Menzer1</option>
-      <option value="Blackbelt">Blackbelt</option>
-    </select>
+  <div>
+    <div class="card-header">Calibration Devices</div>
+    <div class="card-body">
+      <h3>Primary Device</h3>
+      <select name="primary_device" v-model="primary_device" required id="id_report_type">
+        <option value="-" selected>----Primary-----</option>
+        <option value="Menzer1">Menzer1</option>
+        <option value="Blackbelt">Blackbelt</option>
+      </select>
+        <h3>Calibration Date</h3>
+        <div class="date-picker">
+          <VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
+        </div>
+      <hr />
+      <h3>Secondary Device</h3>
+
+      <select name="secondary_device" v-model="secondary_device" required id="id_report_type">
+        <option value="-" selected>----Secondary-----</option>
+        <option value="Menzer1">Menzer1</option>
+        <option value="Blackbelt">Blackbelt</option>
+      </select>
+
       <h3>Calibration Date</h3>
       <div class="date-picker">
-        <VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
+        <VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
       </div>
-    <hr />
-    <h3>Secondary Device</h3>
-
-    <select name="secondary_device" v-model="secondary_device" required id="id_report_type">
-      <option value="-" selected>----Secondary-----</option>
-      <option value="Menzer1">Menzer1</option>
-      <option value="Blackbelt">Blackbelt</option>
-    </select>
-
-    <h3>Calibration Date</h3>
-    <div class="date-picker">
-      <VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
     </div>
   </div>
 </template>
diff --git a/benchtop-fe/src/components/CustomerForm.vue b/benchtop-fe/src/components/CustomerForm.vue
index 1a9bcd1..18e2f72 100644
--- a/benchtop-fe/src/components/CustomerForm.vue
+++ b/benchtop-fe/src/components/CustomerForm.vue
@@ -1,41 +1,43 @@
 <template>
-  <div class="card-header">Customer</div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-      <tr>
-        <td>Customer Name</td>
-        <td>
-          <input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
-                 id="id_customer_name">
-        </td>
-      </tr>
-      <tr>
-        <td>On Site Calibration</td>
-        <td>
-          <div class="checkbox-wrapper-55">
-          <label class="rocker rocker-small">
-            <input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
-            <span class="switch-left">Yes</span>
-            <span class="switch-right">No</span>
-          </label>
-</div>
-        </td>
-      </tr>
-      <tr>
-        <td>Control Doc#</td>
-        <td>
-          <input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
-        </td>
-      </tr>
-      <tr>
-        <td>Technician</td>
-        <td>
-          <input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
-        </td>
-      </tr>
-      </tbody>
-    </table>
+  <div>
+    <div class="card-header">Customer</div>
+    <div class="card-body">
+      <table class="table">
+        <tbody>
+        <tr>
+          <td>Customer Name</td>
+          <td>
+            <input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
+                   id="id_customer_name">
+          </td>
+        </tr>
+        <tr>
+          <td>On Site Calibration</td>
+          <td>
+            <div class="checkbox-wrapper-55">
+            <label class="rocker rocker-small">
+              <input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
+              <span class="switch-left">Yes</span>
+              <span class="switch-right">No</span>
+            </label>
+  </div>
+          </td>
+        </tr>
+        <tr>
+          <td>Control Doc#</td>
+          <td>
+            <input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
+          </td>
+        </tr>
+        <tr>
+          <td>Technician</td>
+          <td>
+            <input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
diff --git a/benchtop-fe/src/components/EnvironmentForm.vue b/benchtop-fe/src/components/EnvironmentForm.vue
index 1339682..2b6b284 100644
--- a/benchtop-fe/src/components/EnvironmentForm.vue
+++ b/benchtop-fe/src/components/EnvironmentForm.vue
@@ -1,37 +1,39 @@
 <template>
-  <div class="card-header">Environment</div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-      <tr>
-        <td>Accuracy</td>
-        <td>
-          <input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
-        </td>
-      </tr>
-      <tr>
-        <td>Pressure (psi)</td>
-        <td>
-          <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
-                 required id="id_pressure">
-        </td>
-      </tr>
-      <tr>
-        <td>Temperature (&deg;F)</td>
-        <td>
-          <input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
-                 id="id_temperature">
-        </td>
-      </tr>
-      <tr>
-        <td>Humidity (%RH)</td>
-        <td>
-          <input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
-                 id="id_humidity">
-        </td>
-      </tr>
-      </tbody>
-    </table>
+  <div>
+    <div class="card-header">Environment</div>
+    <div class="card-body">
+      <table class="table">
+        <tbody>
+        <tr>
+          <td>Accuracy</td>
+          <td>
+            <input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
+          </td>
+        </tr>
+        <tr>
+          <td>Pressure (psi)</td>
+          <td>
+            <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
+                   required id="id_pressure">
+          </td>
+        </tr>
+        <tr>
+          <td>Temperature (&deg;F)</td>
+          <td>
+            <input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
+                   id="id_temperature">
+          </td>
+        </tr>
+        <tr>
+          <td>Humidity (%RH)</td>
+          <td>
+            <input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
+                   id="id_humidity">
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script setup>
diff --git a/benchtop-fe/src/components/Instrument/InstrumentForm.vue b/benchtop-fe/src/components/Instrument/InstrumentForm.vue
index b974fcc..4be971b 100644
--- a/benchtop-fe/src/components/Instrument/InstrumentForm.vue
+++ b/benchtop-fe/src/components/Instrument/InstrumentForm.vue
@@ -1,30 +1,32 @@
 <template>
-  <div class="card-header">
-    Instrument
-    <button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
-  </div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-        <tr>
-          <td>Serial #</td>
-          <td>
-            <input
-              type="text"
-              name="serial"
-              maxlength="100"
-              v-model="serial"
-              required
-              id="id_serial"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="summary">
-      <p>Enter a serial number to search for an existing <br/>
-      Primary Calibration Device, or press New to log a new device.
-      </p>
+  <div>
+    <div class="card-header">
+      Instrument
+      <button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
+    </div>
+    <div class="card-body">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>Serial #</td>
+            <td>
+              <input
+                type="text"
+                name="serial"
+                maxlength="100"
+                v-model="serial"
+                required
+                id="id_serial"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="summary">
+        <p>Enter a serial number to search for an existing <br/>
+        Primary Calibration Device, or press New to log a new device.
+        </p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue b/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
index b5ba557..48f6bec 100644
--- a/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
+++ b/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
@@ -1,101 +1,103 @@
 <template>
-  <div class="card-header">Instrument</div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-        <tr>
-          <td colspan="2">
-            <h3>Calibration Date</h3>
-            <div class="date-picker">
-              <VueDatePicker
-                v-model="date"
-                auto-apply
-                :enableTimePicker="false"
-                :flow="flow"
-              ></VueDatePicker>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <h3>Calibration Due Date</h3>
-            <div class="date-picker">
-              <VueDatePicker
-                v-model="due_date"
-                :enableTimePicker="false"
-                auto-apply
-                :flow="flow"
-              ></VueDatePicker>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>Model</td>
-          <td>
-            <input
-              type="text"
-              name="model"
-              maxlength="256"
-              v-model="model"
-              required
-              id="id_model"
-            />
-          </td>
-        </tr>
-        <tr>
-          <td>Serial Number</td>
-          <td>
-            <input
-              type="text"
-              name="serial_number"
-              maxlength="256"
-              v-model="serial_number"
-              required
-              id="id_serial_number"
-            />
-          </td>
-        </tr>
-        <tr>
-          <td>Channel</td>
-          <td>
-            <input
-              type="text"
-              name="channel"
-              maxlength="256"
-              v-model="channel"
-              required
-              id="id_channel"
-            />
-          </td>
-        </tr>
-        <tr>
-          <td>Transducer Model</td>
-          <td>
-            <input
-              type="text"
-              name="transducer_model"
-              maxlength="256"
-              v-model="transducer_model"
-              required
-              id="id_transducer_model"
-            />
-          </td>
-        </tr>
-        <tr>
-          <td>Transducer Span (psia)</td>
-          <td>
-            <input
-              type="text"
-              name="transducer_span"
-              maxlength="256"
-              v-model="transducer_span"
-              required
-              id="id_transducer_span"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div>
+    <div class="card-header">Instrument</div>
+    <div class="card-body">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td colspan="2">
+              <h3>Calibration Date</h3>
+              <div class="date-picker">
+                <VueDatePicker
+                  v-model="date"
+                  auto-apply
+                  :enableTimePicker="false"
+                  :flow="flow"
+                ></VueDatePicker>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <h3>Calibration Due Date</h3>
+              <div class="date-picker">
+                <VueDatePicker
+                  v-model="due_date"
+                  :enableTimePicker="false"
+                  auto-apply
+                  :flow="flow"
+                ></VueDatePicker>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>Model</td>
+            <td>
+              <input
+                type="text"
+                name="model"
+                maxlength="256"
+                v-model="model"
+                required
+                id="id_model"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Serial Number</td>
+            <td>
+              <input
+                type="text"
+                name="serial_number"
+                maxlength="256"
+                v-model="serial_number"
+                required
+                id="id_serial_number"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Channel</td>
+            <td>
+              <input
+                type="text"
+                name="channel"
+                maxlength="256"
+                v-model="channel"
+                required
+                id="id_channel"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Transducer Model</td>
+            <td>
+              <input
+                type="text"
+                name="transducer_model"
+                maxlength="256"
+                v-model="transducer_model"
+                required
+                id="id_transducer_model"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Transducer Span (psia)</td>
+            <td>
+              <input
+                type="text"
+                name="transducer_span"
+                maxlength="256"
+                v-model="transducer_span"
+                required
+                id="id_transducer_span"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script setup>
diff --git a/benchtop-fe/src/components/PDF/PDF.vue b/benchtop-fe/src/components/PDF/PDF.vue
index 7ecd547..512a5f4 100644
--- a/benchtop-fe/src/components/PDF/PDF.vue
+++ b/benchtop-fe/src/components/PDF/PDF.vue
@@ -1,122 +1,124 @@
 <template>
-  <div class="card-header">Finished?</div>
-  <div class="card-body">
-    <button class="custom-button" @click="exportToPDF">
-      Generate PDF and Label
-    </button>
-    <br>
-    <br>
-    <div :class="{ hide: hide }" class="px666 scroll-pdf">
-      <div id="pdf" ref="document">
-        <div v-for="table of tables">
-          <div class="header">
-            <div class="flex-container">
-              <div class="column pct-25">
-                <img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
-              </div>
-              <div class="column pct-50">
-                <div>Customer: {{ props.customer?.customer_name }}</div>
-                <div>Onsite cal (yes/no): {{ onsite() }}</div>
-                <div>Control Doc#: {{ props.customer?.control_doc }}</div>
-                <div>Technician: {{ props.customer?.technician }}</div>
-              </div>
-              <div class="column pct-25">
-                <img :src="Al2pCertUrl"/>
+  <div>
+    <div class="card-header">Finished?</div>
+    <div class="card-body">
+      <button class="custom-button" @click="exportToPDF">
+        Generate PDF and Label
+      </button>
+      <br>
+      <br>
+      <div :class="{ hide: hide }" class="px666 scroll-pdf">
+        <div id="pdf" ref="document">
+          <div v-for="table of tables">
+            <div class="header">
+              <div class="flex-container">
+                <div class="column pct-25">
+                  <img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
+                </div>
+                <div class="column pct-50">
+                  <div>Customer: {{ props.customer?.customer_name }}</div>
+                  <div>Onsite cal (yes/no): {{ onsite() }}</div>
+                  <div>Control Doc#: {{ props.customer?.control_doc }}</div>
+                  <div>Technician: {{ props.customer?.technician }}</div>
+                </div>
+                <div class="column pct-25">
+                  <img :src="Al2pCertUrl"/>
+                </div>
               </div>
             </div>
-          </div>
-          <!-- EndHeader -->
-          <h1>Calibration Certificate</h1>
+            <!-- EndHeader -->
+            <h1>Calibration Certificate</h1>
 
-          <!-- Instrument Info -->
-          <div class="instrument-information">
-            <div class="flex-container">
-              <div class="column pct-33">
-                <div><span class="ul">Instrument</span></div>
-                <div>
-                  <span class="label">Model :</span>{{ props.instrument?.model }}
+            <!-- Instrument Info -->
+            <div class="instrument-information">
+              <div class="flex-container">
+                <div class="column pct-33">
+                  <div><span class="ul">Instrument</span></div>
+                  <div>
+                    <span class="label">Model :</span>{{ props.instrument?.model }}
+                  </div>
+                  <div>
+                  <span class="label">Serial# :</span
+                  >{{ props.instrument?.serial_number }}
+                  </div>
+                  <div>
+                  <span class="label">Channel :</span
+                  >{{ props.instrument?.channel }}
+                  </div>
+                  <div>
+                  <span class="label">Transducer Model :</span
+                  >{{ props.instrument?.transducer_model }}
+                  </div>
+                  <div>
+                  <span class="label">Transducer Span :</span
+                  >{{ props.instrument?.transducer_span }}
+                  </div>
                 </div>
-                <div>
-                <span class="label">Serial# :</span
-                >{{ props.instrument?.serial_number }}
+                <div class="column pct-33">
+                  <div><span class="ul">Primary Cal Device</span></div>
+                  <div>
+                    <span class="label">Model :</span>{{ props.calibration?.model }}
+                  </div>
+                  <div>
+                  <span class="label">Serial# :</span
+                  >{{ props.calibration?.serial }}
+                  </div>
+                  <div><span class="label">Cal Date :</span>{{ c_date() }}</div>
+                  <div>
+                    <span class="label">Cal Due Date :</span>{{ c_due_date() }}
+                  </div>
+                  <div>
+                  <span class="label">Cert ID :</span
+                  >{{ props.calibration?.cert_id }}
+                  </div>
                 </div>
-                <div>
-                <span class="label">Channel :</span
-                >{{ props.instrument?.channel }}
-                </div>
-                <div>
-                <span class="label">Transducer Model :</span
-                >{{ props.instrument?.transducer_model }}
-                </div>
-                <div>
-                <span class="label">Transducer Span :</span
-                >{{ props.instrument?.transducer_span }}
-                </div>
-              </div>
-              <div class="column pct-33">
-                <div><span class="ul">Primary Cal Device</span></div>
-                <div>
-                  <span class="label">Model :</span>{{ props.calibration?.model }}
-                </div>
-                <div>
-                <span class="label">Serial# :</span
-                >{{ props.calibration?.serial }}
-                </div>
-                <div><span class="label">Cal Date :</span>{{ c_date() }}</div>
-                <div>
-                  <span class="label">Cal Due Date :</span>{{ c_due_date() }}
-                </div>
-                <div>
-                <span class="label">Cert ID :</span
-                >{{ props.calibration?.cert_id }}
-                </div>
-              </div>
-              <div class="column pct-33">
-                <div><span class="label">Cal Date :</span>{{ i_date() }}</div>
-                <div>
-                  <span class="label">Cal Due Date :</span>{{ i_due_date() }}
-                </div>
-                <div><span class="ul">Environmental Data</span></div>
-                <div>
-                <span class="label">Baro (Psi) :</span
-                >{{ props.environment?.pressure }}
-                </div>
-                <div>
-                <span class="label">Temp (&deg;F):</span
-                >{{ props.environment?.temperature }}
-                </div>
-                <div>
-                <span class="label">Humidity (%RH):</span
-                >{{ props.environment?.humidity }}
+                <div class="column pct-33">
+                  <div><span class="label">Cal Date :</span>{{ i_date() }}</div>
+                  <div>
+                    <span class="label">Cal Due Date :</span>{{ i_due_date() }}
+                  </div>
+                  <div><span class="ul">Environmental Data</span></div>
+                  <div>
+                  <span class="label">Baro (Psi) :</span
+                  >{{ props.environment?.pressure }}
+                  </div>
+                  <div>
+                  <span class="label">Temp (&deg;F):</span
+                  >{{ props.environment?.temperature }}
+                  </div>
+                  <div>
+                  <span class="label">Humidity (%RH):</span
+                  >{{ props.environment?.humidity }}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <br/>
-          <!-- End InstrumentInfo -->
-          <!-- As Found -->
-          <ReadingTable :as_found="table.as_found" />
-          <br/>
-          <!-- As Left -->
-          <ReadingTable :as_left="table.as_left" />
-          <!-- End Instruments-->
-          <div class="box">
-            <p>
-              Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
-              Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
-            </p>
-            <p>
-              Uncertainty Statement: The accuracy of measurement is determined by
-              the standards uncertainty, with a coverage factor of k=2 (confidence
-              of roughly 95%).
-            </p>
+            <br/>
+            <!-- End InstrumentInfo -->
+            <!-- As Found -->
+            <ReadingTable :as_found="table.as_found" />
+            <br/>
+            <!-- As Left -->
+            <ReadingTable :as_left="table.as_left" />
+            <!-- End Instruments-->
+            <div class="box">
+              <p>
+                Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
+                Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
+              </p>
+              <p>
+                Uncertainty Statement: The accuracy of measurement is determined by
+                the standards uncertainty, with a coverage factor of k=2 (confidence
+                of roughly 95%).
+              </p>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div>
-    {{ output() }}
+    <div>
+      {{ output() }}
+    </div>
   </div>
 </template>
 
diff --git a/benchtop-fe/src/components/PDF/ReadingTable.vue b/benchtop-fe/src/components/PDF/ReadingTable.vue
index c32aa71..eefbcf1 100644
--- a/benchtop-fe/src/components/PDF/ReadingTable.vue
+++ b/benchtop-fe/src/components/PDF/ReadingTable.vue
@@ -1,99 +1,101 @@
 <template>
-  <div class="readings">
-    <table class="table table-striped">
-      <thead>
-      <tr>
-        <th>Gauge Reading</th>
-        <th>Accuracy (+/- FS)</th>
-        <th>Low Limit</th>
-        <th>High Limit</th>
-        <th>As Found (units)</th>
-        <th>OOT</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-      </tr>
-      <tr>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-      </tr>
-      <tr>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-      </tr>
-      <tr>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-        <td>TBD</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-        <td>&nbsp;</td>
-      </tr>
-      </tbody>
-    </table>
+  <div>
+    <div class="readings">
+      <table class="table table-striped">
+        <thead>
+        <tr>
+          <th>Gauge Reading</th>
+          <th>Accuracy (+/- FS)</th>
+          <th>Low Limit</th>
+          <th>High Limit</th>
+          <th>As Found (units)</th>
+          <th>OOT</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+        </tr>
+        <tr>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+        </tr>
+        <tr>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+        </tr>
+        <tr>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+          <td>TBD</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 <script setup>
diff --git a/benchtop-fe/src/components/Sheet.vue b/benchtop-fe/src/components/Sheet.vue
index 26043ad..3fe7e98 100644
--- a/benchtop-fe/src/components/Sheet.vue
+++ b/benchtop-fe/src/components/Sheet.vue
@@ -110,7 +110,7 @@ const showNewCalibration = (val) => {
   show_new_calibration.value = val;
 };
 
-const emit = defineEmits([
+const emits = defineEmits([
   "uploadForm",
   "customerForm",
   "environmentForm",
diff --git a/benchtop-fe/src/components/UploadForm.vue b/benchtop-fe/src/components/UploadForm.vue
index aed6653..fc44536 100644
--- a/benchtop-fe/src/components/UploadForm.vue
+++ b/benchtop-fe/src/components/UploadForm.vue
@@ -1,86 +1,88 @@
 <template>
-  <div class="card-header">Report Uploads</div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-        <tr>
-          <td>
-            Report Type
-            <select
-              name="report_type"
-              v-model="report_type"
-              required
-              id="id_report_type"
-            >
-              <option value="-" selected>----Select-----</option>
-              <option value="Transducer Verify">Transducer Verify</option>
-              <option value="Hardware Calibration">Hardware Calibration</option>
-            </select>
-          </td>
-        </tr>
-        <tr v-if="report_type != '-' || showUpload">
-          <td>
-            <button
-              class="custom-button"
-              @click="openFileInput"
-              v-if="showUpload"
-            >
-              Select {{ report_type }} File
-            </button>
-          </td>
-        </tr>
-        <tr v-if="files.length > 0">
-          <td>
-            <ul>
-              <li v-for="(file, index) in files" :key="index" class="file-list">
-                <button class="custom-button red" @click="removeUpload(index)">
-                  X
-                </button>
-                <span>{{ file.name }}</span>
-                <div class="kind btn-group">
-                  <input
-                    type="radio"
-                    class="btn-check"
-                    :id="'both_kind_' + index"
-                    :name="'kind_' + index"
-                    value="both"
-                    @change="kindChange('both', file)"
-                  />
-                  <label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
+  <div>
+    <div class="card-header">Report Uploads</div>
+    <div class="card-body">
+      <table class="table">
+        <tbody>
+          <tr>
+            <td>
+              Report Type
+              <select
+                name="report_type"
+                v-model="report_type"
+                required
+                id="id_report_type"
+              >
+                <option value="-" selected>----Select-----</option>
+                <option value="Transducer Verify">Transducer Verify</option>
+                <option value="Hardware Calibration">Hardware Calibration</option>
+              </select>
+            </td>
+          </tr>
+          <tr v-if="report_type != '-' || showUpload">
+            <td>
+              <button
+                class="custom-button"
+                @click="openFileInput"
+                v-if="showUpload"
+              >
+                Select {{ report_type }} File
+              </button>
+            </td>
+          </tr>
+          <tr v-if="files.length > 0">
+            <td>
+              <ul>
+                <li v-for="(file, index) in files" :key="index" class="file-list">
+                  <button class="custom-button red" @click="removeUpload(index)">
+                    X
+                  </button>
+                  <span>{{ file.name }}</span>
+                  <div class="kind btn-group">
+                    <input
+                      type="radio"
+                      class="btn-check"
+                      :id="'both_kind_' + index"
+                      :name="'kind_' + index"
+                      value="both"
+                      @change="kindChange('both', file)"
+                    />
+                    <label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
 
-                  <input
-                    type="radio"
-                    class="btn-check"
-                    :id="'af_kind_' + index"
-                    :name="'kind_' + index"
-                    value="found"
-                    @change="kindChange('found', file)"
-                  />
-                  <label class="btn btn-primary" :for="'af_kind_' + index">
-                    As Found
-                  </label>
-                  <input
-                    type="radio"
-                    class="btn-check"
-                    :id="'al_kind_' + index"
-                    :name="'kind_' + index"
-                    value="left"
-                    @change="kindChange('left', file)"
-                  />
-                  <label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
-                </div>
-              </li>
-            </ul>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <input
-      ref="doc"
-      type="file"
-      style="display: none"
-      @change="readFile($event)"
-    />
+                    <input
+                      type="radio"
+                      class="btn-check"
+                      :id="'af_kind_' + index"
+                      :name="'kind_' + index"
+                      value="found"
+                      @change="kindChange('found', file)"
+                    />
+                    <label class="btn btn-primary" :for="'af_kind_' + index">
+                      As Found
+                    </label>
+                    <input
+                      type="radio"
+                      class="btn-check"
+                      :id="'al_kind_' + index"
+                      :name="'kind_' + index"
+                      value="left"
+                      @change="kindChange('left', file)"
+                    />
+                    <label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
+                  </div>
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <input
+        ref="doc"
+        type="file"
+        style="display: none"
+        @change="readFile($event)"
+      />
+    </div>
   </div>
 </template>
 
@@ -152,7 +154,7 @@ const readFile = ($event) => {
 
 const emit = defineEmits();
 watchEffect(() => {
-  emit("upload-form", {
+  emit("uploadForm", {
     report_type,
     files,
   });