transmitters original texts and opinions better appearance in admin panel

apps/account/templates/account/json_editor_field.html

@@ -1,13 +1,12 @@
 {% load i18n %}
 <div class="json-editor-container">
-    <textarea style="display: none" name="{{ widget.name }}" id="{{ widget.attrs.id }}"
-            {% include "django/forms/widgets/attrs.html" %}
-    >{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
+    <textarea style="display: none" name="{{ widget.name }}" id="{{ widget.attrs.id }}" {%
+        include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
     <div class="json-view-editor" id='date-view-editor-{{ widget.attrs.id }}'></div>
 </div>
 
 <script defer="defer">
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         function initJsonEditor() {
             let editor_ = document.getElementById("{{ widget.attrs.id }}");
             if (!editor_) {
@@ -31,7 +30,7 @@
             }
 
             // Custom template for add button
-            JSONEditor.defaults.templates.button = function(text, icon, title) {
+            JSONEditor.defaults.templates.button = function (text, icon, title) {
                 let el = document.createElement('button');
                 el.type = 'button';
                 el.classList.add('json-editor-btn-modern');
@@ -57,8 +56,8 @@
 
             // Custom icons
             JSONEditor.defaults.iconlib = {
-                getIcon: function(key) {
-                    switch(key) {
+                getIcon: function (key) {
+                    switch (key) {
                         case 'add':
                             return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>';
                         case 'delete':
@@ -78,233 +77,233 @@
             try {
                 let jsonEditor = new JSONEditor(
                     jsonViewerDiv, {
-                        theme: 'bootstrap4',
-                        schema: {{ widget.attrs.schema|safe }},
-                        disable_edit_json: true,
-                        disable_properties: true,
-                        disable_array_delete_all_rows: false,
+                    theme: 'bootstrap4',
+                    schema: {{ widget.attrs.schema | safe }},
+            disable_edit_json: true,
+                disable_properties: true,
+                    disable_array_delete_all_rows: false,
                         disable_array_delete_last_row: true, // Disable delete last row button
-                        disable_array_reorder: true, // Disable array reordering
-                        grid_columns: 12,
-                        prompt_before_delete: true,
-                        disable_collapse: false, // Enable collapse to show button sections
-                        show_errors: 'always',
-                        startval: startValue,
-                        iconlib: 'custom',
-                        object_layout: 'normal', // Changed from grid to normal for better layout
-                        enable_array_copy: false, // Disable copy functionality
-                        show_opt_in: false,
-                        compact: false,
-                        array_controls_top: false, // Move array controls to bottom
-                        show_button_bar: true, // Show button bar
-                        form_name_root: 'root' // Add a root name for better structure
-                    }
+                            disable_array_reorder: true, // Disable array reordering
+                                grid_columns: 12,
+                                    prompt_before_delete: true,
+                                        disable_collapse: false, // Enable collapse to show button sections
+                                            show_errors: 'always',
+                                                startval: startValue,
+                                                    iconlib: 'custom',
+                                                        object_layout: 'normal', // Changed from grid to normal for better layout
+                                                            enable_array_copy: false, // Disable copy functionality
+                                                                show_opt_in: false,
+                                                                    compact: false,
+                                                                        array_controls_top: false, // Move array controls to bottom
+                                                                            show_button_bar: true, // Show button bar
+                                                                                form_name_root: 'root' // Add a root name for better structure
+        }
                 );
 
-                // Store the editor instance on the textarea
-                editor_.editor = jsonEditor;
-
-                // Update the textarea when the editor changes
-                jsonEditor.on('change', function() {
-                    editor_.value = JSON.stringify(jsonEditor.getValue());
-
-                    // Trigger a change event on the textarea
-                    let event = new Event('change', { bubbles: true });
-                    editor_.dispatchEvent(event);
-
-                    // Apply styling to newly added elements
-                    applyCustomStyling();
-                });
-
-                // Function to apply custom styling to all elements
-                function applyCustomStyling() {
-                    // Add modern styling to buttons
-                    const allButtons = jsonViewerDiv.querySelectorAll('button');
-                    allButtons.forEach(button => {
-                        if (!button.classList.contains('json-editor-btn-modern')) {
-                            button.classList.add('json-editor-btn-modern');
-
-                            // Add specific styling based on button type
-                            if (button.classList.contains('json-editor-btntype-add')) {
-                                button.classList.add('json-editor-btn-add');
-                            } else if (button.classList.contains('json-editor-btntype-delete') ||
-                                      button.classList.contains('json-editor-btntype-deleteall') ||
-                                      button.classList.contains('json-editor-btntype-deletelast')) {
-                                button.classList.add('json-editor-btn-delete');
-                            }
-                        }
-                    });
-
-                    // Style form controls
-                    const formControls = jsonViewerDiv.querySelectorAll('input, select, textarea');
-                    formControls.forEach(control => {
-                        control.classList.add('modern-form-control');
-                    });
-
-                    // Style table headers
-                    const tableHeaders = jsonViewerDiv.querySelectorAll('th');
-                    tableHeaders.forEach(header => {
-                        header.classList.add('modern-table-header');
-                    });
-
-                    // Style table rows
-                    const tableRows = jsonViewerDiv.querySelectorAll('tr');
-                    tableRows.forEach(row => {
-                        row.classList.add('modern-table-row');
-                    });
-
-                    // Make table full width
-                    const tables = jsonViewerDiv.querySelectorAll('table');
-                    tables.forEach(table => {
-                        table.classList.add('full-width-table');
-                    });
-
-                    // Make table cells take equal space
-                    const tableCells = jsonViewerDiv.querySelectorAll('td');
-                    tableCells.forEach(cell => {
-                        if (!cell.classList.contains('table-controls-cell')) {
-                            cell.classList.add('equal-width-cell');
-                        }
-                    });
-
-                    // Add special styling to control cells
-                    const controlCells = jsonViewerDiv.querySelectorAll('td:last-child');
-                    controlCells.forEach(cell => {
-                        cell.classList.add('table-controls-cell');
-                    });
-
-                    // Fix button group styling
-                    const buttonGroups = jsonViewerDiv.querySelectorAll('.btn-group, .json-editor-btngroup');
-                    buttonGroups.forEach(group => {
-                        group.classList.add('modern-btn-group');
-                    });
-
-                    // Fix card styling
-                    const cards = jsonViewerDiv.querySelectorAll('.card');
-                    cards.forEach(card => {
-                        card.classList.add('modern-card');
-                    });
-
-                    // Ensure button sections are visible
-                    const buttonSections = jsonViewerDiv.querySelectorAll('.json-editor-btngroup');
-                    buttonSections.forEach(section => {
-                        section.style.display = 'flex';
-                        section.style.visibility = 'visible';
-                    });
-
-                    // Style button bars
-                    const buttonBars = jsonViewerDiv.querySelectorAll('.json-editor-btn-bar');
-                    buttonBars.forEach(bar => {
-                        bar.style.display = 'flex';
-                        bar.style.flexWrap = 'wrap';
-                        bar.style.gap = '0.5rem';
-                        bar.style.marginTop = '1rem';
-                        bar.style.marginBottom = '0';
-                        bar.style.padding = '0.75rem';
-                        bar.style.backgroundColor = 'rgba(1, 53, 59, 0.05)';
-                        bar.style.borderRadius = '0.5rem';
-                        bar.style.width = '100%';
-                        bar.style.justifyContent = 'flex-end';
-
-                        // Move button bar to the end of its parent container
-                        const parent = bar.parentElement;
-                        if (parent) {
-                            parent.style.display = 'flex';
-                            parent.style.flexDirection = 'column';
-                            parent.appendChild(bar);
-                        }
-                    });
-
-                    // Hide specific buttons (Copy, Move up, Move down, Delete Last)
-                    const buttonsToHide = jsonViewerDiv.querySelectorAll('.json-editor-btntype-copy, .json-editor-btntype-move, .json-editor-btntype-deletelast');
-                    buttonsToHide.forEach(button => {
-                        button.style.display = 'none';
-                    });
-
-                    // Ensure form fields take full width
-                    const formRows = jsonViewerDiv.querySelectorAll('.row');
-                    formRows.forEach(row => {
-                        row.style.width = '100%';
-                        const cols = row.querySelectorAll('[class*="col-"]');
-                        cols.forEach(col => {
-                            col.style.width = '100%';
-                            col.style.maxWidth = '100%';
-                            col.style.flex = '0 0 100%';
-                        });
-                    });
-                }
+    // Store the editor instance on the textarea
+    editor_.editor = jsonEditor;
 
-                // Apply styling immediately after initialization
-                setTimeout(applyCustomStyling, 100);
-
-                // Process error messages to make them HTML5-like
-                function processErrorMessages() {
-                    const errorElements = jsonViewerDiv.querySelectorAll('.je-error');
-                    errorElements.forEach(error => {
-                        // Get the error message text
-                        const errorText = error.textContent.trim();
-
-                        // Set the data-content attribute for the tooltip
-                        error.setAttribute('data-content', errorText);
-
-                        // Find the parent form group
-                        const formGroup = error.closest('.form-group');
-                        if (formGroup) {
-                            formGroup.classList.add('has-error');
-
-                            // Find the input element
-                            const input = formGroup.querySelector('input, select, textarea');
-                            if (input) {
-                                // Add error class to the input
-                                input.classList.add('is-invalid');
-
-                                // Add title attribute for native tooltip
-                                input.setAttribute('title', errorText);
-                            }
-                        }
-                    });
-                }
+    // Update the textarea when the editor changes
+    jsonEditor.on('change', function () {
+        editor_.value = JSON.stringify(jsonEditor.getValue());
 
-                // Remove "Delete Last Course Features" button if it exists
-                function removeDeleteLastButton() {
-                    const deleteLastButtons = jsonViewerDiv.querySelectorAll('button.json-editor-btntype-deletelast');
-                    deleteLastButtons.forEach(button => {
-                        const buttonText = button.textContent.trim();
-                        if (buttonText.includes('Delete Last') && buttonText.includes('Course Features')) {
-                            button.style.display = 'none';
-                        }
-                    });
+        // Trigger a change event on the textarea
+        let event = new Event('change', { bubbles: true });
+        editor_.dispatchEvent(event);
+
+        // Apply styling to newly added elements
+        applyCustomStyling();
+    });
+
+    // Function to apply custom styling to all elements
+    function applyCustomStyling() {
+        // Add modern styling to buttons
+        const allButtons = jsonViewerDiv.querySelectorAll('button');
+        allButtons.forEach(button => {
+            if (!button.classList.contains('json-editor-btn-modern')) {
+                button.classList.add('json-editor-btn-modern');
+
+                // Add specific styling based on button type
+                if (button.classList.contains('json-editor-btntype-add')) {
+                    button.classList.add('json-editor-btn-add');
+                } else if (button.classList.contains('json-editor-btntype-delete') ||
+                    button.classList.contains('json-editor-btntype-deleteall') ||
+                    button.classList.contains('json-editor-btntype-deletelast')) {
+                    button.classList.add('json-editor-btn-delete');
                 }
+            }
+        });
+
+        // Style form controls
+        const formControls = jsonViewerDiv.querySelectorAll('input, select, textarea');
+        formControls.forEach(control => {
+            control.classList.add('modern-form-control');
+        });
+
+        // Style table headers
+        const tableHeaders = jsonViewerDiv.querySelectorAll('th');
+        tableHeaders.forEach(header => {
+            header.classList.add('modern-table-header');
+        });
+
+        // Style table rows
+        const tableRows = jsonViewerDiv.querySelectorAll('tr');
+        tableRows.forEach(row => {
+            row.classList.add('modern-table-row');
+        });
+
+        // Make table full width
+        const tables = jsonViewerDiv.querySelectorAll('table');
+        tables.forEach(table => {
+            table.classList.add('full-width-table');
+        });
+
+        // Make table cells take equal space
+        const tableCells = jsonViewerDiv.querySelectorAll('td');
+        tableCells.forEach(cell => {
+            if (!cell.classList.contains('table-controls-cell')) {
+                cell.classList.add('equal-width-cell');
+            }
+        });
+
+        // Add special styling to control cells
+        const controlCells = jsonViewerDiv.querySelectorAll('td:last-child');
+        controlCells.forEach(cell => {
+            cell.classList.add('table-controls-cell');
+        });
+
+        // Fix button group styling
+        const buttonGroups = jsonViewerDiv.querySelectorAll('.btn-group, .json-editor-btngroup');
+        buttonGroups.forEach(group => {
+            group.classList.add('modern-btn-group');
+        });
+
+        // Fix card styling
+        const cards = jsonViewerDiv.querySelectorAll('.card');
+        cards.forEach(card => {
+            card.classList.add('modern-card');
+        });
+
+        // Ensure button sections are visible
+        const buttonSections = jsonViewerDiv.querySelectorAll('.json-editor-btngroup');
+        buttonSections.forEach(section => {
+            section.style.display = 'flex';
+            section.style.visibility = 'visible';
+        });
+
+        // Style button bars
+        const buttonBars = jsonViewerDiv.querySelectorAll('.json-editor-btn-bar');
+        buttonBars.forEach(bar => {
+            bar.style.display = 'flex';
+            bar.style.flexWrap = 'wrap';
+            bar.style.gap = '0.5rem';
+            bar.style.marginTop = '1rem';
+            bar.style.marginBottom = '0';
+            bar.style.padding = '0.75rem';
+            bar.style.backgroundColor = 'rgba(1, 53, 59, 0.05)';
+            bar.style.borderRadius = '0.5rem';
+            bar.style.width = '100%';
+            bar.style.justifyContent = 'flex-end';
+
+            // Move button bar to the end of its parent container
+            const parent = bar.parentElement;
+            if (parent) {
+                parent.style.display = 'flex';
+                parent.style.flexDirection = 'column';
+                parent.appendChild(bar);
+            }
+        });
+
+        // Hide specific buttons (Copy, Move up, Move down, Delete Last)
+        const buttonsToHide = jsonViewerDiv.querySelectorAll('.json-editor-btntype-copy, .json-editor-btntype-move, .json-editor-btntype-deletelast');
+        buttonsToHide.forEach(button => {
+            button.style.display = 'none';
+        });
+
+        // Ensure form fields take full width
+        const formRows = jsonViewerDiv.querySelectorAll('.row');
+        formRows.forEach(row => {
+            row.style.width = '100%';
+            const cols = row.querySelectorAll('[class*="col-"]');
+            cols.forEach(col => {
+                col.style.width = '100%';
+                col.style.maxWidth = '100%';
+                col.style.flex = '0 0 100%';
+            });
+        });
+    }
+
+    // Apply styling immediately after initialization
+    setTimeout(applyCustomStyling, 100);
+
+    // Process error messages to make them HTML5-like
+    function processErrorMessages() {
+        const errorElements = jsonViewerDiv.querySelectorAll('.je-error');
+        errorElements.forEach(error => {
+            // Get the error message text
+            const errorText = error.textContent.trim();
+
+            // Set the data-content attribute for the tooltip
+            error.setAttribute('data-content', errorText);
+
+            // Find the parent form group
+            const formGroup = error.closest('.form-group');
+            if (formGroup) {
+                formGroup.classList.add('has-error');
+
+                // Find the input element
+                const input = formGroup.querySelector('input, select, textarea');
+                if (input) {
+                    // Add error class to the input
+                    input.classList.add('is-invalid');
+
+                    // Add title attribute for native tooltip
+                    input.setAttribute('title', errorText);
+                }
+            }
+        });
+    }
 
-                // Add mutation observer to apply styling to dynamically added elements
-                const observer = new MutationObserver(function(mutations) {
-                    applyCustomStyling();
-                    processErrorMessages();
-                    removeDeleteLastButton();
-                });
+    // Remove "Delete Last Course Features" button if it exists
+    function removeDeleteLastButton() {
+        const deleteLastButtons = jsonViewerDiv.querySelectorAll('button.json-editor-btntype-deletelast');
+        deleteLastButtons.forEach(button => {
+            const buttonText = button.textContent.trim();
+            if (buttonText.includes('Delete Last') && buttonText.includes('Course Features')) {
+                button.style.display = 'none';
+            }
+        });
+    }
 
-                observer.observe(jsonViewerDiv, {
-                    childList: true,
-                    subtree: true
-                });
+    // Add mutation observer to apply styling to dynamically added elements
+    const observer = new MutationObserver(function (mutations) {
+        applyCustomStyling();
+        processErrorMessages();
+        removeDeleteLastButton();
+    });
+
+    observer.observe(jsonViewerDiv, {
+        childList: true,
+        subtree: true
+    });
 
-                // Initial processing
-                setTimeout(() => {
-                    processErrorMessages();
-                    removeDeleteLastButton();
-                }, 200);
+    // Initial processing
+    setTimeout(() => {
+        processErrorMessages();
+        removeDeleteLastButton();
+    }, 200);
 
             } catch (e) {
-                console.error("Error initializing JSONEditor:", e);
-            }
+        console.error("Error initializing JSONEditor:", e);
+    }
         }
 
-        // Initialize the editor
-        if (document.readyState === 'complete') {
-            initJsonEditor();
-        } else {
-            window.addEventListener('load', initJsonEditor);
-        }
+    // Initialize the editor
+    if (document.readyState === 'complete') {
+        initJsonEditor();
+    } else {
+        window.addEventListener('load', initJsonEditor);
+    }
     });
 </script>
 
@@ -429,24 +428,28 @@
         align-items: center !important;
         justify-content: center !important;
         gap: 0.375rem !important;
-        background-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
+        background-color: rgb(37, 208, 118) !important;
+        /* Unfold primary-500 */
         color: white !important;
         border: none !important;
         border-radius: 0.375rem !important;
-        padding: 0.5rem 0.875rem !important; /* Smaller padding */
+        padding: 0.5rem 0.875rem !important;
+        /* Smaller padding */
         font-weight: 500 !important;
         cursor: pointer !important;
         transition: all 0.2s ease !important;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
         margin: 0 0.25rem !important;
-        font-size: 0.8125rem !important; /* Smaller font */
+        font-size: 0.8125rem !important;
+        /* Smaller font */
         line-height: 1.4 !important;
         text-transform: none !important;
         letter-spacing: 0.01em !important;
     }
 
     .json-editor-btn-modern:hover {
-        background-color: rgb(29, 166, 94) !important; /* Unfold primary-600 */
+        background-color: rgb(29, 166, 94) !important;
+        /* Unfold primary-600 */
         transform: translateY(-1px) !important;
         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08) !important;
     }
@@ -457,7 +460,8 @@
     }
 
     /* Button sections styling */
-    .json-editor-btngroup, .json-editor-btn-bar {
+    .json-editor-btngroup,
+    .json-editor-btn-bar {
         display: flex !important;
         flex-wrap: wrap !important;
         gap: 0.5rem !important;
@@ -480,29 +484,35 @@
 
     /* Add button styling */
     .json-editor-btn-add {
-        background-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
-        padding: 0.625rem 1rem !important; /* Smaller padding */
-        font-size: 0.875rem !important; /* Smaller font */
+        background-color: rgb(37, 208, 118) !important;
+        /* Unfold primary-500 */
+        padding: 0.625rem 1rem !important;
+        /* Smaller padding */
+        font-size: 0.875rem !important;
+        /* Smaller font */
         font-weight: 600 !important;
         letter-spacing: 0.01em !important;
         border-radius: 0.375rem !important;
-        width: auto !important; /* Not full width */
+        width: auto !important;
+        /* Not full width */
         margin-bottom: 0.75rem !important;
     }
 
     .json-editor-btn-add:hover {
-        background-color: rgb(29, 166, 94) !important; /* Unfold primary-600 */
+        background-color: rgb(29, 166, 94) !important;
+        /* Unfold primary-600 */
     }
 
     /* Modern HTML5-like error styling */
     .je-error-container {
-        display: none !important; /* Hide the default error container */
+        display: none !important;
+        /* Hide the default error container */
     }
 
     /* Style for invalid inputs */
-    .je-error + input,
-    .je-error + select,
-    .je-error + textarea,
+    .je-error+input,
+    .je-error+select,
+    .je-error+textarea,
     .has-error .modern-form-control {
         border-color: rgb(239, 68, 68) !important;
         padding-right: 2.5rem !important;
@@ -545,10 +555,10 @@
     }
 
     /* Show tooltip on hover over the input */
-    .je-error + input:hover + .je-error::after,
-    .je-error + select:hover + .je-error::after,
-    .je-error + textarea:hover + .je-error::after,
-    .has-error .modern-form-control:hover + .je-error::after {
+    .je-error+input:hover+.je-error::after,
+    .je-error+select:hover+.je-error::after,
+    .je-error+textarea:hover+.je-error::after,
+    .has-error .modern-form-control:hover+.je-error::after {
         visibility: visible !important;
         opacity: 1 !important;
     }
@@ -567,21 +577,23 @@
         transition: opacity 0.3s !important;
     }
 
-    .je-error + input:hover + .je-error::before,
-    .je-error + select:hover + .je-error::before,
-    .je-error + textarea:hover + .je-error::before,
-    .has-error .modern-form-control:hover + .je-error::before {
+    .je-error+input:hover+.je-error::before,
+    .je-error+select:hover+.je-error::before,
+    .je-error+textarea:hover+.je-error::before,
+    .has-error .modern-form-control:hover+.je-error::before {
         visibility: visible !important;
         opacity: 1 !important;
     }
 
     /* Delete button styling */
     .json-editor-btn-delete {
-        background-color: rgb(1, 53, 59) !important; /* Unfold secondary-500 */
+        background-color: rgb(1, 53, 59) !important;
+        /* Unfold secondary-500 */
     }
 
     .json-editor-btn-delete:hover {
-        background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
+        background-color: rgb(1, 43, 48) !important;
+        /* Unfold secondary-600 */
     }
 
     /* Hide Delete Last buttons */
@@ -590,29 +602,36 @@
     }
 
     /* Move up/down buttons */
-    .json-editor-btntype-moveup, .json-editor-btntype-movedown {
+    .json-editor-btntype-moveup,
+    .json-editor-btntype-movedown {
         background-color: rgba(1, 53, 59, 0.8) !important;
     }
 
-    .json-editor-btntype-moveup:hover, .json-editor-btntype-movedown:hover {
+    .json-editor-btntype-moveup:hover,
+    .json-editor-btntype-movedown:hover {
         background-color: rgb(1, 53, 59) !important;
     }
 
     /* Button sections styling */
-    .json-editor-btngroup, .json-editor-btn-bar {
+    .json-editor-btngroup,
+    .json-editor-btn-bar {
         display: flex !important;
         flex-wrap: wrap !important;
         gap: 0.375rem !important;
         margin-top: 1rem !important;
         padding: 0.625rem !important;
-        background-color: rgba(1, 53, 59, 0.03) !important; /* More subtle background */
-        border: 1px solid rgba(1, 53, 59, 0.08) !important; /* Subtle border */
+        background-color: rgba(1, 53, 59, 0.03) !important;
+        /* More subtle background */
+        border: 1px solid rgba(1, 53, 59, 0.08) !important;
+        /* Subtle border */
         border-radius: 0.5rem !important;
         visibility: visible !important;
         width: 100% !important;
         justify-content: flex-end !important;
-        order: 999 !important; /* Ensure it appears at the bottom */
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; /* Subtle shadow */
+        order: 999 !important;
+        /* Ensure it appears at the bottom */
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
+        /* Subtle shadow */
     }
 
     /* Modern button group styling */
@@ -649,7 +668,8 @@
     }
 
     /* Form labels */
-    label, .je-label {
+    label,
+    .je-label {
         font-size: 0.875rem !important;
         font-weight: 500 !important;
         color: rgb(1, 53, 59) !important;
@@ -675,7 +695,8 @@
     }
 
     /* Labels */
-    label, .je-label {
+    label,
+    .je-label {
         display: block !important;
         margin-bottom: 0.5rem !important;
         font-weight: 500 !important;
@@ -684,7 +705,8 @@
     }
 
     /* Form groups */
-    .form-group, .je-object__container {
+    .form-group,
+    .je-object__container {
         margin-bottom: 1.5rem !important;
         width: 100% !important;
     }
@@ -714,31 +736,39 @@
     /* Dark mode support - Using Unfold color scheme */
     @media (prefers-color-scheme: dark) {
         .json-editor-container {
-            background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
+            background-color: rgb(1, 43, 48) !important;
+            /* Unfold secondary-600 */
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
 
         .json-view-editor {
-            background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
+            background-color: rgb(1, 43, 48) !important;
+            /* Unfold secondary-600 */
         }
 
         .table-responsive {
-            border-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
-            background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
+            border-color: rgb(1, 36, 40) !important;
+            /* Unfold secondary-700 */
+            background-color: rgb(1, 43, 48) !important;
+            /* Unfold secondary-600 */
         }
 
         .modern-table-header {
-            background-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
+            background-color: rgb(1, 30, 34) !important;
+            /* Unfold secondary-800 */
             color: white !important;
-            border-bottom-color: rgb(0, 26, 29) !important; /* Unfold secondary-900 */
+            border-bottom-color: rgb(0, 26, 29) !important;
+            /* Unfold secondary-900 */
         }
 
         .modern-table-row {
-            border-bottom-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
+            border-bottom-color: rgb(1, 30, 34) !important;
+            /* Unfold secondary-800 */
         }
 
         .modern-table-row:hover {
-            background-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
+            background-color: rgb(1, 36, 40) !important;
+            /* Unfold secondary-700 */
         }
 
         .modern-table-row td {
@@ -746,38 +776,47 @@
         }
 
         .modern-form-control {
-            background-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
-            border-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
+            background-color: rgb(1, 36, 40) !important;
+            /* Unfold secondary-700 */
+            border-color: rgb(1, 30, 34) !important;
+            /* Unfold secondary-800 */
             color: white !important;
         }
 
-        label, .je-label {
+        label,
+        .je-label {
             color: white !important;
         }
 
         /* Button sections in dark mode */
-        .json-editor-btngroup, .json-editor-btn-bar {
-            background-color: rgba(1, 30, 34, 0.25) !important; /* More subtle dark background */
-            border: 1px solid rgba(37, 208, 118, 0.1) !important; /* Subtle primary color border */
+        .json-editor-btngroup,
+        .json-editor-btn-bar {
+            background-color: rgba(1, 30, 34, 0.25) !important;
+            /* More subtle dark background */
+            border: 1px solid rgba(37, 208, 118, 0.1) !important;
+            /* Subtle primary color border */
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
         }
 
         .modern-form-control:focus {
-            border-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
+            border-color: rgb(37, 208, 118) !important;
+            /* Unfold primary-500 */
             box-shadow: 0 0 0 3px rgba(37, 208, 118, 0.2) !important;
         }
 
         /* Error styling in dark mode */
-        .je-error + input,
-        .je-error + select,
-        .je-error + textarea,
+        .je-error+input,
+        .je-error+select,
+        .je-error+textarea,
         .has-error .modern-form-control {
-            border-color: rgb(252, 165, 165) !important; /* Lighter red for dark mode */
+            border-color: rgb(252, 165, 165) !important;
+            /* Lighter red for dark mode */
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
         }
 
         .je-error::after {
-            background-color: rgb(185, 28, 28) !important; /* Darker red background for tooltip */
+            background-color: rgb(185, 28, 28) !important;
+            /* Darker red background for tooltip */
             color: white !important;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
         }
@@ -788,7 +827,8 @@
 
         /* Card styling in dark mode */
         .modern-card {
-            background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
+            background-color: rgb(1, 43, 48) !important;
+            /* Unfold secondary-600 */
         }
 
         /* Error messages in dark mode */
@@ -796,5 +836,4 @@
             color: #f87171 !important;
         }
     }
-</style>
-
+</style>

apps/hadis/admin/hadis.py

@@ -589,8 +589,9 @@ class ReferenceImageInline(TabularInline):
 class HadisReferenceInline(TabularInline):
     """Inline for HadisReference in Hadis admin"""
     model = HadisReference
+    form = HadisReferenceAdminForm
     extra = 0
-    fields = ('book_reference',)
+    fields = ('book_reference', 'description')
     readonly_fields = ('created_at',)
 
 

apps/hadis/admin/reference.py

@@ -415,6 +415,7 @@ class BookAttributeInline(TabularInline):
     Inline for managing Book Attributes (Key-Value pairs) inside BookReference.
     """
     model = BookAttribute
+    form = BookAttributeAdminForm
     extra = 0
     fields = ('title', 'value')
     readonly_fields = ('created_at',)

apps/hadis/admin/transmitter.py

@@ -20,18 +20,7 @@ class HadisTransmitterInline(TabularInline):
     fields = ('hadis', 'order')
 
 
-class TransmitterOpinionInline(TabularInline):
-    """Inline for TransmitterOpinion in Transmitters admin"""
-    model = TransmitterOpinion
-    extra = 0
-    fields = ('scholar_name', 'status')
-
-
-class TransmitterOriginalTextInline(TabularInline):
-    """Inline for TransmitterOriginalText in Transmitters admin"""
-    model = TransmitterOriginalText
-    extra = 0
-    fields = ('title', 'slug')
+# (TransmitterOpinionInline and TransmitterOriginalTextInline moved after their forms)
 
 
 # Custom Forms for JSON Fields
@@ -123,63 +112,7 @@ class TransmittersAdminForm(forms.ModelForm):
         })
 
 
-class TransmittersAdmin(ModelAdmin):
-    """Admin for Transmitters model"""
-    form = TransmittersAdminForm
-    list_display = ('display_header', 'birth_year_hijri', 'death_year_hijri')
-    list_filter = ('birth_year_hijri', 'death_year_hijri')
-    search_fields = ('full_name', 'description')
-    readonly_fields = ('created_at', 'updated_at')
-    inlines = [HadisTransmitterInline, TransmitterOpinionInline, TransmitterOriginalTextInline]
-
-    fieldsets = (
-        (None, {
-            'fields': ('full_name', 'birth_year_hijri', 'death_year_hijri','known_as','nickname')
-        }),
-        (_('Additional Information'), {
-            'fields': ('description','origin','lived_in','died_in','kunya'),
-            # 'classes': ('collapse',)
-        }),
-        (_('Timestamps'), {
-            'fields': ('created_at', 'updated_at'),
-            # 'classes': ('collapse',)
-        }),
-    )
-    @display(description=_('Full Name'), ordering='full_name')
-    def get_full_name_display(self, obj):
-        """
-        Parses the JSON full_name and returns the first item's text.
-        """
-        if obj.full_name and isinstance(obj.full_name, list) and len(obj.full_name) > 0:
-            # Safely get the first item
-            first_item = obj.full_name[0]
-            if isinstance(first_item, dict):
-                return first_item.get('text', '-')
-        return '-'
-
-    @display(description=_("Transmitter"), header=True)
-    def display_header(self, obj):
-        
-        return self.get_full_name_display(obj),
-
-
-class HadisTransmitterAdmin(ModelAdmin):
-    """Admin for HadisTransmitter model"""
-    list_display = ('hadis', 'transmitter', 'order', 'created_at')
-    list_filter = ( 'created_at',)
-    search_fields = ('hadis__title', 'transmitter__full_name')
-    readonly_fields = ('created_at',)
-    ordering = ('hadis', 'order')
-
-    fieldsets = (
-        (None, {
-            'fields': ('hadis', 'transmitter', 'order')
-        }),
-        (_('Timestamps'), {
-            'fields': ('created_at',),
-            'classes': ('collapse',)
-        }),
-    )
+# (Admins moved down to avoid NameError)
 
 
 # Custom Forms for JSON Fields
@@ -513,6 +446,84 @@ class TransmitterOriginalTextAdminForm(forms.ModelForm):
         })
 
 
+class TransmitterOpinionInline(TabularInline):
+    """Inline for TransmitterOpinion in Transmitters admin"""
+    model = TransmitterOpinion
+    form = TransmitterOpinionAdminForm
+    extra = 0
+    fields = ('scholar_name', 'opinion_text', 'status')
+    def has_add_permission(self, request, obj=None):
+        return False
+
+class TransmitterOriginalTextInline(TabularInline):
+    """Inline for TransmitterOriginalText in Transmitters admin"""
+    model = TransmitterOriginalText
+    form = TransmitterOriginalTextAdminForm
+    extra = 0
+    fields = ('title', 'text', 'translation', 'slug')
+    def has_add_permission(self, request, obj=None):
+        return False
+
+
+class TransmittersAdmin(ModelAdmin):
+    """Admin for Transmitters model"""
+    form = TransmittersAdminForm
+    list_display = ('display_header', 'birth_year_hijri', 'death_year_hijri')
+    list_filter = ('birth_year_hijri', 'death_year_hijri')
+    search_fields = ('full_name', 'description')
+    readonly_fields = ('created_at', 'updated_at')
+    inlines = [HadisTransmitterInline, TransmitterOpinionInline, TransmitterOriginalTextInline]
+
+    fieldsets = (
+        (None, {
+            'fields': ('full_name', 'birth_year_hijri', 'death_year_hijri','known_as','nickname')
+        }),
+        (_('Additional Information'), {
+            'fields': ('description','origin','lived_in','died_in','kunya'),
+            # 'classes': ('collapse',)
+        }),
+        (_('Timestamps'), {
+            'fields': ('created_at', 'updated_at'),
+            # 'classes': ('collapse',)
+        }),
+    )
+    @display(description=_('Full Name'), ordering='full_name')
+    def get_full_name_display(self, obj):
+        """
+        Parses the JSON full_name and returns the first item's text.
+        """
+        if obj.full_name and isinstance(obj.full_name, list) and len(obj.full_name) > 0:
+            # Safely get the first item
+            first_item = obj.full_name[0]
+            if isinstance(first_item, dict):
+                return first_item.get('text', '-')
+        return '-'
+
+    @display(description=_("Transmitter"), header=True)
+    def display_header(self, obj):
+        
+        return self.get_full_name_display(obj),
+
+
+class HadisTransmitterAdmin(ModelAdmin):
+    """Admin for HadisTransmitter model"""
+    list_display = ('hadis', 'transmitter', 'order', 'created_at')
+    list_filter = ( 'created_at',)
+    search_fields = ('hadis__title', 'transmitter__full_name')
+    readonly_fields = ('created_at',)
+    ordering = ('hadis', 'order')
+
+    fieldsets = (
+        (None, {
+            'fields': ('hadis', 'transmitter', 'order')
+        }),
+        (_('Timestamps'), {
+            'fields': ('created_at',),
+            'classes': ('collapse',)
+        }),
+    )
+
+
 # Main Admin Classes
 class NarratorLayerAdmin(ModelAdmin):
     """Admin for NarratorLayer model"""