added stub of document upload section and fixed some styling that didn't match between dark and light

static/css/styles.css

@@ -106,7 +106,7 @@ html {
 }
 
 .content {
-  background-color: white;
+  background-color: #f9fafb;
   padding: 1.5rem;
   border-radius: 0.5rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -188,6 +188,50 @@ html {
   /* similar to focus:shadow-outline */
 }
 
+/* Inline input group for horizontal layout */
+.inline-input-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  /* Spacing between inputs */
+}
+
+.inline-input-group .input-group {
+  flex: 1;
+  /* Distribute space evenly */
+  min-width: 150px;
+  /* Minimum width for smaller screens */
+}
+
+.card-input {
+  width: 100%;
+  /* Adjust size as needed */
+  padding: 0.25rem 0.5rem;
+  /* Smaller padding */
+  border: 1px solid #cbd5e0;
+  /* Light border */
+  border-radius: 0.375rem;
+  /* Slightly rounded corners */
+  background-color: #ffffff;
+  /* White background */
+  color: #4a5568;
+  /* Text color matching theme */
+  font-size: 0.875rem;
+  /* Slightly smaller font size */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  /* Subtle shadow */
+  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+.card-input:focus {
+  outline: none;
+  border-color: #4299e1;
+  /* Focused blue border */
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  /* Blue shadow */
+}
+
+
 /* Form Footer */
 .form-footer {
   display: flex;
@@ -611,6 +655,7 @@ html {
   .content {
     background-color: #2e2e42;
     /* Dark content background */
+    border: none;
     padding: 1.5rem;
     border-radius: 0.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -679,6 +724,24 @@ html {
     /* Blue focus */
   }
 
+  .card-input {
+    background-color: #2e2e42;
+    /* Dark background */
+    border: 1px solid #4b5563;
+    /* Darker border */
+    color: #e5e7eb;
+    /* Light text color */
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    /* Stronger shadow */
+  }
+
+  .card-input:focus {
+    border-color: #4299e1;
+    /* Focused blue border */
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    /* Blue shadow */
+  }
+
   /* Form Footer */
   .form-footer {
     display: flex;

templates/dashboard.html

@@ -4,12 +4,10 @@
 
 <div class="dashboard-grid">
   <div class="dashboard-item">
-    <h3>Invoices</h3>
     {{template "invoice_search" .}}
   </div>
   <div class="dashboard-item">
-    <h3>Manage Jobs</h3>
+    {{template "document_upload" .}}
-    <a href="/jobs" hx-get="/jobs" hx-target="#content">View Jobs</a>
   </div>
   <div class="dashboard-item">
     <h3>Manage Companies</h3>

templates/partials/document_upload.html

@@ -0,0 +1,60 @@
+{{define "document_upload"}}
+<h2>Document Uploads</h2>
+<div class="content">
+    <h3 class="submenu-header">Filter Jobs</h3>
+    <form id="filter-form" class="submenu-grid" hx-post="/filter-jobs" hx-target="#job-results" hx-swap="innerHTML">
+
+        <!-- Inline Group: Job Name and Company -->
+        <div class="inline-input-group">
+            <div class="input-group">
+                <label for="job_name">Job Name</label>
+                <input id="job_name" name="job_name" class="card-input" type="text" placeholder="Enter Job Name">
+            </div>
+            <div class="input-group">
+                <label for="company">Company</label>
+                <input id="company" name="company" class="card-input" type="text" placeholder="Enter Company Name">
+            </div>
+        </div>
+
+        <!-- Inline Group: Status and Tags -->
+        <div class="inline-input-group">
+            <div class="input-group">
+                <label for="status">Status</label>
+                <select id="status" name="status" class="card-input">
+                    <option value="">Select Status</option>
+                    <option value="open">Open</option>
+                    <option value="closed">Closed</option>
+                </select>
+            </div>
+            <div class="input-group">
+                <label for="tags">Tags</label>
+                <input id="tags" name="tags" class="card-input" type="text" placeholder="Enter Tags">
+            </div>
+            <div class="input-group">
+                <label for="schedule_from">Schedule From</label>
+                <input id="schedule_from" name="schedule_from" class="card-input" type="date">
+            </div>
+            <div class="input-group">
+                <label for="schedule_to">Schedule To</label>
+                <input id="schedule_to" name="schedule_to" class="card-input" type="date">
+            </div>
+        </div>
+
+        <!-- Inline Group: Date Range -->
+        <div class="inline-input-group">
+
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="form-footer">
+            <button type="submit" class="btn-primary">Search</button>
+            <button type="reset" class="warning-button">Reset</button>
+        </div>
+    </form>
+
+    <!-- Results -->
+    <div id="job-results" class="submenu-container">
+        <!-- Search results will be dynamically loaded here -->
+    </div>
+</div>
+{{end}}

templates/partials/invoice_search.html

@@ -1,21 +1,18 @@
 {{define "invoice_search"}}
-<div id="search-container">
+<h2>Invoices</h2>
-  <input
+<div class="content">
-    type="text"
+  <div id="search-container">
-    name="search"
+    <input type="text" name="search" placeholder="Enter invoice number or id" hx-get="/invoices"
-    placeholder="Enter invoice number or id"
+      hx-trigger="keyup changed delay:500ms" hx-target="#invoice-search-results" hx-indicator="#loading-indicator" />
-    hx-get="/invoices"
-    hx-trigger="keyup changed delay:500ms"
-    hx-target="#invoice-search-results"
-    hx-indicator="#loading-indicator" />
 
     <div id="loading-indicator" class="htmx-indicator">
       <span>Searching...</span>
       <div class="loading-indicator"></div>
     </div>
-</div>
+  </div>
-<br />
+  <br />
-<div id="invoice-search-results" class="fade-me-out">
+  <div id="invoice-search-results" class="fade-me-out">
     <!-- This is where the invoice details will be loaded -->
+  </div>
 </div>
 {{end}}