fixed crud list

fixed payments
upload -a

static/images/k-depot-logo.svg

@@ -44,5 +44,5 @@
   <text x="100" y="200" font-family="monospace" font-size="20" text-anchor="middle" fill="#5B2C06" font-weight="bold">K-DepoT</text>
 
   <!-- Slogan -->
-  <text x="100" y="220" font-family="monospace" font-size="12" text-anchor="middle" fill="#5B2C06" letter-spacing="2">SAFE AND READY</text>
+  <text x="100" y="220" font-family="monospace" font-size="20" text-anchor="middle" fill="#5B2C06" letter-spacing="2">SAFE AND READY</text>
 </svg>

static/js/container_validation.js

@@ -0,0 +1,35 @@
+function validateContainerNumber(input) {
+    const containerNumber = input.value.trim();
+    const feedbackElement = input.nextElementSibling;
+
+    if (!containerNumber) {
+        input.classList.remove('invalid-container', 'incomplete-container');
+        if (feedbackElement) feedbackElement.remove();
+        return;
+    }
+
+    if (containerNumber.length > 0 && containerNumber.length < 11) {
+        input.classList.remove('invalid-container');
+        input.classList.add('incomplete-container');
+        if (feedbackElement) feedbackElement.remove();
+        return;
+    }
+
+    fetch(`${validateContainerUrl}${containerNumber}/`)
+        .then(response => response.json())
+        .then(data => {
+            input.classList.remove('incomplete-container');
+            if (!data.valid) {
+                input.classList.add('invalid-container');
+                if (!feedbackElement) {
+                    const feedback = document.createElement('div');
+                    feedback.className = 'validation-feedback';
+                    feedback.textContent = 'Invalid container number';
+                    input.parentNode.insertBefore(feedback, input.nextSibling);
+                }
+            } else {
+                input.classList.remove('invalid-container');
+                if (feedbackElement) feedbackElement.remove();
+            }
+        });
+}

static/js/crud-list.js

@@ -12,12 +12,10 @@ document.addEventListener('DOMContentLoaded', function() {
     table.addEventListener('click', function(e) {
         const row = e.target.closest('.selectable-row');
         if (!row) return;
-
         const checkbox = row.querySelector('input[type="checkbox"]');
         if (!checkbox) return;
 
         if (selectionMode === 'single') {
-            // Deselect all other rows
             table.querySelectorAll('.selected-row').forEach(selectedRow => {
                 if (selectedRow !== row) {
                     selectedRow.classList.remove('selected-row');
@@ -25,22 +23,15 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             });
         }
-
-        // Toggle current row
         row.classList.toggle('selected-row');
         checkbox.checked = !checkbox.checked;
-
-        // Update buttons state
         const selectedRows = table.querySelectorAll('.selected-row');
         document.querySelectorAll('[data-requires-selection]').forEach(button => {
             button.disabled = selectedRows.length === 0;
         });
-
-        // Handle edit/delete buttons from original crud-list.js
         const objectId = row.dataset.id;
         const editBtn = document.getElementById('editBtn');
         const deleteBtn = document.getElementById('deleteBtn');
-
         if (editBtn) {
             editBtn.removeAttribute('disabled');
             editBtn.href = editBtn.dataset.url?.replace('0', objectId);
@@ -54,19 +45,14 @@ document.addEventListener('DOMContentLoaded', function() {
     toggleSelectAllBtn.addEventListener('click', function() {
         const rows = table.querySelectorAll('.selectable-row');
         allSelected = !allSelected;
-
         rows.forEach(row => {
             const checkbox = row.querySelector('input[type="checkbox"]');
             checkbox.checked = allSelected;
             row.classList.toggle('selected-row', allSelected);
         });
-
-        // Update other buttons state
         document.querySelectorAll('[data-requires-selection]').forEach(button => {
             button.disabled = !allSelected;
         });
-
-        // Update button text
         this.textContent = allSelected ? 'Unselect All' : 'Select All';
     });
 

static/styles/forms.css

@@ -36,8 +36,7 @@ input[type="email"],
 input[type="password"],
 input[type="date"],
 input[type="number"],
-select,
-textarea {
+select {
     width: 100%;
     padding: 8px;
     margin-bottom: 0px;
@@ -54,19 +53,43 @@ textarea {
     "wdth" 100;
 }
 
-/* Submit button styling */
-button[type="submit"] {
-    background-color: #a57d52;
-    color: white;
-    padding: 10px 20px;
-    border: none;
+textarea {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 0px;
+    border: 1px solid #a57d52;
     border-radius: 4px;
-    cursor: pointer;
-    /*margin-top: 20px;*/
+    box-sizing: border-box;
+
+  font-family: "Noto Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+    font-size: 1.1rem;
+  font-variation-settings:
+    "wdth" 100;
+    height: 100px; /* Adjust height as needed */
+    min-height: 100px; /* Minimum height */
+    resize: vertical; /* Allow vertical resizing */
 }
 
-button[type="submit"]:hover {
-    background-color: #a67744;
+
+
+/* Submit button styling */
+button[type="submit"],
+button.btn-primary,
+button.btn-secondary {
+    background-color: #F2E8DB;
+    padding: 10px 20px;
+    border: 1px solid #a57d52;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button[type="submit"]:hover,
+button.btn-primary:hover,
+button.btn-secondary:hover{
+    background-color: #EDDECB;
 }
 
 /* Error messages */
@@ -89,7 +112,7 @@ button[type="submit"]:hover {
 
 .card {
     margin-top: 24px;
-    background-color: white;
+    background-color: #EDDECB;
     border-radius: 8px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
@@ -278,4 +301,34 @@ button[type="submit"]:hover {
     display: flex;
     align-items: center;
     width: 100%;
+}
+
+@media print {
+    /* Hide sidebar */
+    .sidebar {
+        display: none !important;
+    }
+
+    /* Make main content full width */
+    .main-content {
+        margin-left: 0 !important;
+        width: 100% !important;
+    }
+
+    /* Hide other non-printable elements if needed */
+    .no-print {
+        display: none !important;
+    }
+
+    /* Ensure white background and black text */
+    body {
+        background: white !important;
+        color: black !important;
+    }
+
+    /* Remove shadows and borders */
+    * {
+        box-shadow: none !important;
+        border: none !important;
+    }
 }

static/styles/styles.css

@@ -7,6 +7,7 @@ body {
     align-items: center;
     justify-content: center;
     padding: 1rem;
+    background-color: #ead9cb;
 }
 
 .wave {
@@ -22,7 +23,7 @@ body {
 }
 
 .login-container {
-    background-color: white;
+    background-color: #ead9cb;
     border-radius: 0.75rem;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     overflow: hidden;
@@ -31,6 +32,8 @@ body {
     display: flex;
     flex-direction: column;
     animation: fadeIn 0.8s ease-in-out;
+    margin: 2rem; /* Add margin to see the background */
+
 }
 
 @media (min-width: 768px) {

static/styles/tables.css

@@ -1,76 +1,3 @@
-/*.table {*/
-/*    width: 100%;*/
-/*    border-collapse: separate;*/
-/*    border-spacing: 0;*/
-/*    margin: 10px auto;*/
-/*    border: 1px solid #a57d52;*/
-/*    border-radius: 10px;*/
-/*    overflow: hidden;*/
-/*}*/
-
-/*.table th {*/
-/*    text-align: left;*/
-/*    padding: 0.75rem;*/
-/*    font-size: 0.75rem;*/
-/*    text-transform: uppercase;*/
-/*    font-weight: 600;*/
-/*    border-bottom: 1px solid #a57d52;*/
-/*    background-color: #F2E8DB;*/
-/*}*/
-
-/*.table td {*/
-/*    padding: 0.75rem;*/
-/*    font-size: 0.875rem;*/
-/*    border-bottom: 1px solid #a57d52;*/
-/*}*/
-
-/*!* Last row shouldn't have bottom border *!*/
-/*.table tr:last-child td {*/
-/*    border-bottom: none;*/
-/*}*/
-
-/*!* Selection styles *!*/
-/*.selectable-row {*/
-/*    cursor: pointer;*/
-/*}*/
-
-/*.selected-row {*/
-/*    background-color: rgba(165, 125, 82, 0.1);*/
-/*}*/
-
-/*.status-received {*/
-/*    background-color: #e8f5e9;*/
-/*    color: #2e7d32;*/
-/*}*/
-
-/*.status-pending {*/
-/*    background-color: #fff3e0;*/
-/*    color: #ef6c00;*/
-/*}*/
-
-/*.status-overdue {*/
-/*    background-color: #ffebee;*/
-/*    color: #c62828;*/
-/*}*/
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 table {
     width: 100%;
     border-collapse: collapse;
@@ -208,4 +135,33 @@ table tr:last-child td {
     color: #990000;
 }
 
+.status-ok {
+    color: #afddc0;  /* green */
+    font-weight: 600;
+}
+.status-deleted {
+    color: #e49486;  /* green */
+    font-weight: 600;
+}
+.status-inactive {
+    color: #b2b5b3;  /* green */
+    font-weight: 600;
+}
+.invalid-container {
+    color: #df6161;  /* red */
+    font-weight: 600;
+}
+.validation-feedback {
+    color: #dc2626;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}
 
+input.invalid-container {
+    border-color: #dc2626;
+    background-color: #fee2e2;
+}
+input.incomplete-container {
+    background-color: #fbf3a2;  /* red */
+    border-color: #dc2626;
+}