new fom of MAT credit add in table formate and update show

2026-01-07 16:26:59 +05:30
parent 9c2486fdd6
commit 68511b7558
6 changed files with 595 additions and 6 deletions
--- a/static/css/mat_credit.css
+++ b/static/css/mat_credit.css
@@ -0,0 +1,146 @@
+/* ===== CONTAINER ===== */
+.container {
+    max-width: 1200px;
+    margin: 30px auto;
+    padding: 25px;
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
+}
+
+/* ===== TABLE ===== */
+#matTable {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+    text-align: center;
+}
+
+/* ===== HEADER ===== */
+#matTable thead th {
+    background: linear-gradient(135deg, #0d6efd, #0a58ca);
+    color: #ffffff;
+    padding: 12px 8px;
+    border: 1px solid #0a58ca;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+/* ===== BODY CELLS ===== */
+#matTable tbody td {
+    padding: 8px;
+    border: 1px solid #dcdcdc;
+    background-color: #ffffff;
+}
+
+/* ===== FY COLUMN ===== */
+#matTable tbody td:first-child {
+    font-weight: 600;
+    background-color: #f5f8ff;
+}
+
+/* ===== INPUT FIELDS ===== */
+#matTable input {
+    width: 100%;
+    padding: 6px 6px;
+    border: 1px solid #cfd8dc;
+    border-radius: 4px;
+    font-size: 13px;
+    text-align: right;
+    box-sizing: border-box;
+}
+
+/* TEXT INPUT (Unutilized) */
+#matTable input[type="text"] {
+    text-align: center;
+}
+
+/* INPUT FOCUS */
+#matTable input:focus {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
+    outline: none;
+}
+
+/* ===== ACTION BUTTON ===== */
+#matTable button {
+    background-color: #198754;
+    border: none;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: 0.2s;
+}
+
+#matTable button:hover {
+    background-color: #157347;
+}
+
+/* ===== SAVE ALL BUTTON ===== */
+button[onclick="saveAll()"] {
+    display: block;
+    width: 300px;
+    margin: 25px auto 0;
+    background-color: #28a745;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    padding: 12px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+}
+
+button[onclick="saveAll()"]:hover {
+    background-color: #218838;
+}
+
+/* ===== ROW HOVER ===== */
+#matTable tbody tr:hover {
+    background-color: #f1f6ff;
+}
+
+/* ===== ERROR HIGHLIGHT ===== */
+.input-error {
+    border-color: #dc3545 !important;
+    background-color: #fff5f5;
+}
+
+/* ===== SUCCESS HIGHLIGHT ===== */
+.row-saved {
+    background-color: #e9f7ef !important;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 768px) {
+    #matTable {
+        font-size: 12px;
+    }
+
+    #matTable thead {
+        display: none;
+    }
+
+    #matTable tbody tr {
+        display: block;
+        margin-bottom: 15px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        padding: 10px;
+    }
+
+    #matTable tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 8px;
+        border: none;
+    }
+
+    #matTable tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        color: #0d6efd;
+    }
+}