From 0d64f293bf3524ffd45bcebbb269a3745dcde023 Mon Sep 17 00:00:00 2001
From: nic <npatterson@marmicfire.com>
Date: Wed, 18 Dec 2024 17:10:47 -0500
Subject: [PATCH] added stub of document upload section and fixed some styling
 that didn't match between dark and light

---
 static/css/styles.css                   | 65 ++++++++++++++++++++++++-
 templates/dashboard.html                |  6 +--
 templates/partials/document_upload.html | 60 +++++++++++++++++++++++
 templates/partials/invoice_search.html  | 31 ++++++------
 4 files changed, 140 insertions(+), 22 deletions(-)
 create mode 100644 templates/partials/document_upload.html

diff --git a/static/css/styles.css b/static/css/styles.css
index e17595f..7dfb4ee 100644
--- a/static/css/styles.css
+++ b/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;
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 9ba99e6..f805aa7 100644
--- a/templates/dashboard.html
+++ b/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>
-    <a href="/jobs" hx-get="/jobs" hx-target="#content">View Jobs</a>
+    {{template "document_upload" .}}
   </div>
   <div class="dashboard-item">
     <h3>Manage Companies</h3>
@@ -17,4 +15,4 @@
   </div>
   <!-- Add more dashboard items as needed -->
 </div>
-{{end}}
+{{end}}
\ No newline at end of file
diff --git a/templates/partials/document_upload.html b/templates/partials/document_upload.html
new file mode 100644
index 0000000..a4aa53c
--- /dev/null
+++ b/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}}
\ No newline at end of file
diff --git a/templates/partials/invoice_search.html b/templates/partials/invoice_search.html
index 1af7169..5702e56 100644
--- a/templates/partials/invoice_search.html
+++ b/templates/partials/invoice_search.html
@@ -1,21 +1,18 @@
 {{define "invoice_search"}}
-<div id="search-container">
-  <input
-    type="text"
-    name="search"
-    placeholder="Enter invoice number or id"
-    hx-get="/invoices"
-    hx-trigger="keyup changed delay:500ms"
-    hx-target="#invoice-search-results"
-    hx-indicator="#loading-indicator" />
+<h2>Invoices</h2>
+<div class="content">
+  <div id="search-container">
+    <input type="text" name="search" placeholder="Enter invoice number or id" 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 id="loading-indicator" class="htmx-indicator">
+      <span>Searching...</span>
+      <div class="loading-indicator"></div>
+    </div>
+  </div>
+  <br />
+  <div id="invoice-search-results" class="fade-me-out">
+    <!-- This is where the invoice details will be loaded -->
   </div>
 </div>
-<br />
-<div id="invoice-search-results" class="fade-me-out">
-  <!-- This is where the invoice details will be loaded -->
-</div>
-{{end}}
+{{end}}
\ No newline at end of file