quar 1.2.3 → 1.2.5

package/README.md

@@ -1,7 +1,7 @@
 # Quar Studio – Quick UI for Mongoose Models
 
 <p align="center">
-    <img src="./public/assets/icon.png" alt="logo" width="200px"/>
+    <img src="./assets/icon.png" alt="logo" width="200px"/>
 </p>
 
 Instantly spin up a web-based editor for your Mongoose models.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quar",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "This will load all Mongoose models from the folder and start a local web UI to Create, view, update, and delete documents.",
   "main": "index.js",
   "type": "module",
@@ -20,5 +20,13 @@
     "mongoose": "^8.14.1",
     "open": "^10.1.2",
     "zare": "^2.1.1"
-  }
-}
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IsmailBinMujeeb/quar-studio.git"
+  },
+  "bugs": {
+    "url": "https://github.com/IsmailBinMujeeb/quar-studio/issues"
+  },
+  "homepage": "https://github.com/IsmailBinMujeeb/quar-studio#readme"
+}

package/public/scripts/insertTab.js

@@ -0,0 +1,155 @@
+async function toggleInsertTab() {
+    const modelName = content.dataset?.modelName;
+    if (!modelName) {
+        showModal('error', 'Error Occurred!', 'No model selected.');
+        return;
+    }
+
+    const insertTab = document.querySelector('.insert-tab');
+    insertTab.classList.toggle('active');
+
+    if (insertTab.innerHTML.trim() !== '') return;
+
+    try {
+        const res = await fetch(`/schema/${modelName}`);
+        if (!res.ok) throw new Error();
+
+        const schema = await res.json();
+
+        const form = document.createElement('form');
+        form.id = 'insert-form';
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(e.target);
+            const data = Object.fromEntries(formData.entries());
+
+            const checkboxes = e.target.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(cb => {
+                data[cb.name] = cb.checked;
+            });
+
+            const textareas = e.target.querySelectorAll('textarea');
+            textareas.forEach(async tarea => {
+                
+                data[tarea.name] = JSON.parse(tarea.value)
+                
+            })
+
+            const res = await fetch(`/insert/${modelName}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data)
+            });
+
+            if (!res.ok) {
+                const error = await res.json();
+                showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+                return;
+            }
+
+            loadDocuments();
+        });
+
+
+        for (const key in schema) {
+
+            if (/\.\$\*$/.test(key)) continue;
+            const field = schema[key];
+            let inputType = null;
+
+            const label = document.createElement('label');
+            label.innerHTML = `${key}:`;
+            label.className = 'label';
+            label.htmlFor = key;
+
+            if (field.type === 'ObjectId') {
+                const idRes = await fetch(`/id/${field.ref}`);
+                if (!idRes.ok) {
+                    const error = await idRes.json();
+                    showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+                    return;
+                };
+
+                const ids = await idRes.json();
+                const select = document.createElement('select');
+                select.id = key;
+                select.name = key;
+                select.className = 'input';
+
+                ids.forEach(id => {
+                    const option = document.createElement('option');
+                    option.value = id;
+                    option.innerText = id;
+                    select.appendChild(option);
+                });
+
+                form.append(label, select);
+                continue;
+            }
+
+            if (field.type === 'String') inputType = 'text';
+            else if (field.type === 'Number') inputType = 'number';
+            else if (field.type === 'Boolean') inputType = 'checkbox';
+            else if (field.type === 'Date') inputType = 'date';
+            else if (field.type === 'Array' || field.type === "Map" || field.type === "Object" || field.type == "Mixed" || field.type === "Buffer") {
+                const input = document.createElement('textarea');
+
+                input.placeholder = field.type;
+                input.id = key;
+                input.name = key;
+                input.className = 'input';
+                field.type === "Array" ? input.textContent = "[ ]" : input.textContent = "{ }";
+                input.required = isRequired(field.require);
+                if (field.default !== undefined) input.value = field.default;
+
+                form.append(label, input);
+                continue;
+            };
+
+            if (field.enum) {
+                const select = document.createElement('select');
+                select.id = key;
+                select.name = key;
+                select.className = 'input';
+
+                field.enum.forEach(id => {
+                    const option = document.createElement('option');
+                    option.value = id;
+                    option.innerText = id;
+                    select.appendChild(option);
+                });
+
+                form.append(label, select);
+                continue;
+            }
+
+            const input = document.createElement('input');
+            input.type = inputType || 'text';
+            input.placeholder = field.type;
+            input.id = key;
+            input.name = key;
+            input.className = 'input';
+            input.required = isRequired(field.require);
+            if (field.default !== undefined) input.value = field.default;
+
+            form.append(label, input);
+        }
+
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.innerHTML = 'Submit';
+        submitBtn.className = 'btn';
+        form.appendChild(submitBtn);
+
+        insertTab.appendChild(form);
+
+    } catch (error) {
+        showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
+    }
+}
+
+function isRequired(require) {
+    return Array.isArray(require) ? require[0] : require;
+}

package/public/scripts/keyboardCommands.js

@@ -0,0 +1,16 @@
+document.addEventListener("keydown", (e) => {
+
+    if (e.ctrlKey && e.key === 'o') {
+        e.preventDefault();
+        toggleInsertTab();
+    } else if (e.ctrlKey && e.key == "r") {
+        e.preventDefault()
+        loadDocuments();
+    } else if (e.ctrlKey && e.key == ".") {
+        e.preventDefault()
+        gotoNextPage();
+    } else if (e.ctrlKey && e.key == ",") {
+        e.preventDefault()
+        gotoPreviousPage();
+    }
+})

package/public/scripts/main.js

@@ -0,0 +1,365 @@
+const tabsContainer = document.getElementById("tabs");
+const content = document.getElementById("content");
+let currentModelName = "";
+let loadedDocuments = [];
+const openTabs = {};
+
+function openModel(modelName) {
+
+    if (!openTabs[modelName]) {
+        // Create a new tab
+        const tab = document.createElement("div");
+        tab.className = "tab";
+        tab.id = "tab-" + modelName;
+        tab.draggable = true;
+        tab.innerHTML = modelName + '<span class="close" onclick="closeTab(event, \'' + modelName + '\')">×</span>';
+        tab.onclick = () => activateTab(modelName);
+        tabsContainer.appendChild(tab);
+
+        tab.addEventListener("dragstart", dragStart);
+        tab.addEventListener("dragover", dragOver);
+        tab.addEventListener("drop", drop);
+        tab.addEventListener("dragend", dragEnd);
+
+        openTabs[modelName] = tab;
+    }
+
+
+    activateTab(modelName);
+}
+
+async function activateTab(modelName) {
+
+    // Prevent if tab is already active
+    if (content.dataset?.modelName == modelName) return
+
+    content.dataset.modelName = modelName;
+    document.getElementById("page-value").innerText = 1;
+    document.querySelectorAll(".operations .btn")?.forEach( btn => btn.disabled = false )
+    document.querySelector(".operations select").disabled = false;
+
+    const insertTab = document.querySelector('.insert-tab');
+    insertTab.classList.remove('active');
+    insertTab.innerHTML = "";
+    // Remove active class from all tabs
+    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+
+    // Set current tab active
+    const currentTab = document.getElementById("tab-" + modelName);
+    currentTab.classList.add("active");
+
+    // Update content
+    await loadDocuments();
+}
+
+function closeTab(event, modelName) {
+    event.stopPropagation(); // prevent tab click
+    const tab = document.getElementById("tab-" + modelName);
+    tab.remove();
+    delete openTabs[modelName];
+
+    // Clear content if that tab was active and check if other tabs are open to be active
+    if (tab.classList.contains("active")) {
+        content.innerHTML = "";
+        const keys = Object.keys(openTabs);
+        const modelName = keys[keys.length - 1] || null;
+        if (modelName) activateTab(modelName);
+        else disableAllOptions();
+    }
+}
+
+function disableAllOptions() {
+    content.dataset.modelName = '';
+
+    document.querySelectorAll(".operations .btn")?.forEach( btn => btn.disabled = true );
+    document.getElementById("document-count").innerText = 0;
+    document.querySelector(".operations select").disabled = true;
+}
+
+async function loadDocuments() {
+
+    content.innerHTML = "";
+    const limit = document.getElementById("limit").value;
+    const page = document.getElementById("page-value").innerText;
+    const modelName = content.dataset?.modelName;
+
+    if (!modelName) {
+        showModal('error', 'Error Occurred!', 'No model selected.');
+        return;
+    }
+
+    const response = await fetch(`/models/${modelName}?limit=${limit}&page=${page}`);
+    if (response.status !== 200) {
+        showModal('error', 'Error Occurred!', 'Something went wrong, please try again.');
+        return;
+    }
+    const data = await response.json();
+
+    document.getElementById("document-count").innerText = data.count;
+    document.getElementById("page-value").dataset.totalPages = data.totalPages;
+    document.getElementById(`${modelName}-doc-count`).innerText = data.totalCount;
+
+    if (Number(page) >= Number(data.totalPages)) document.getElementById("next-page").disabled = true;
+    else document.getElementById("next-page").disabled = false;
+
+    if (Number(page) <= 1) document.getElementById("previous-page").disabled = true;
+    else document.getElementById("previous-page").disabled = false;
+
+    currentModelName = modelName;
+    loadedDocuments = data.documents;
+    // Render each array element as its own tree
+    data.documents.forEach((doc, index) => {
+        const wrapper = document.createElement('div');
+        const divDocument = document.createElement('div');
+        divDocument.innerHTML += Object.entries(doc).map(([key, value]) => renderData(key, value, index)).join('');
+
+        divDocument.classList.add('document');
+
+        wrapper.appendChild(divDocument);
+        wrapper.innerHTML += `<div class="document-actions"><button class="updateDocument" onclick="updateDocument(${index})">Update</button><button class="deleteDocument" onclick="deleteDoc('${modelName}', '${doc._id}')">Delete</button></div>`;
+
+        content.appendChild(wrapper);
+    });
+}
+
+function toggleEditMode(id) {
+    const htmlData = document.getElementById(`${id}-html-data`);
+    const jsonData = document.getElementById(`${id}-json-data`);
+
+    htmlData.classList.toggle('hidden');
+    jsonData.classList.toggle('hidden');
+
+}
+
+function gotoNextPage() {
+    const page = document.getElementById("page-value");
+    page.innerText = Number(page.innerText) + 1;
+
+    if (Number(page.innerText) > Number(page.dataset.totalPages)) {
+        page.innerText = Number(page.dataset.totalPages);
+        return;
+    }
+
+    loadDocuments();
+}
+
+function gotoPreviousPage() {
+    const page = document.getElementById("page-value").innerText;
+    document.getElementById("page-value").innerText = Number(page) - 1;
+
+    if (Number(page) - 1 < 1) {
+        document.getElementById("page-value").innerText = 1;
+        return;
+    }
+
+    loadDocuments();
+}
+
+function renderData(key, value, index, level = "root.", parentDataType = "object") {
+    const type = typeof value;
+    if (value === null) return `<div class="field"><span class="data-key">${key}</span>: <span class="null" data-level="${level}" data-index="${index}">null</span><span class="data-type">(null)</span></div>`;
+
+    if (Array.isArray(value)) {
+        return `
+            <details class="field">
+                <summary ><span class="data-key">${key}</span><span class="data-type"> (Array - ${value.length})</span></summary>
+                <div class="data-value">
+                    ${value.map((v, i) => renderData(`[${i}]`, v, index, level + key, "array")).join('')}
+                </div>
+            </details>
+        `;
+    } else if (type === 'object') {
+        return `
+            <details class="field">
+                <summary><span class="data-key">${key}</span><span class="data-type"> (Object)</span></summary>
+                <div class="data-value">
+                    ${Object.entries(value).map(([k, v]) => renderData(k, v, index, level + key, "object")).join('')}
+                </div>
+            </details>
+        `;
+    } else if (typeof value === 'string' && /^[a-f\d]{24}$/i.test(value)) {
+
+        return `<div class="field"><span class="data-key">${key}</span>: <span class="ObjectId">${value}</span></div>`;
+    } else {
+        return `<div class="field"><span class="data-key">${key}</span>: <span class="${type}" data-level="${level}" data-index="${index}" data-parent-data-type="${parentDataType}" contenteditable >${value}</span></div>`;
+    }
+}
+
+// Handle collapsibles
+document.addEventListener('click', function (e) {
+    if (e.target.classList.contains('collapsible')) {
+        e.target.classList.toggle("caret-down");
+        const nested = e.target.nextElementSibling;
+        if (nested) {
+            nested.classList.toggle("active");
+        }
+    }
+});
+
+function setNestedValue(obj, path, value, parentDataType) {
+    const keys = path.split(".");
+    let current = obj;
+
+    keys.forEach((key, index) => {
+        if (index === keys.length - 1) {
+            const arrayIndexMatch = key.match(/\[(\d+)\]/);
+            if (arrayIndexMatch) {
+                const idx = parseInt(arrayIndexMatch[1], 10);
+                current[idx] = value;
+            } else {
+                current[key] = value;
+            }
+
+        } else {
+            if (parentDataType === "array" && !Array.isArray(current[key])) {
+                current[key] = [];
+            } else if (parentDataType === "object" && typeof current[key] !== "object") {
+                current[key] = {};
+            }
+
+            current = current[key]; // Go deeper
+        }
+    });
+}
+
+async function updateDocument(index) {
+
+    const confirmUpdate = confirm("Are you sure you want to update this document?");
+    if (!confirmUpdate) return;
+
+    const doc = loadedDocuments[index];
+    const id = doc._id;
+
+    let updatedDoc = {};
+    const values = document.querySelectorAll(`[data-index="${index}"]`);
+
+    values.forEach(el => {
+        const key = el.previousElementSibling?.textContent?.trim();
+        const level = el.dataset.level;
+
+        if (key) {
+            if (level && level !== "root") {
+                // Build the full path
+                const fullPath = `${level.replace("root.", "")}.${key}`;
+                setNestedValue(updatedDoc, fullPath, el.textContent, el.dataset.parentDataType);
+            } else {
+                updatedDoc[key] = el.textContent;
+            }
+        }
+    });
+
+    updatedDoc = { ...updatedDoc, ...updatedDoc[""] }
+
+    const res = await fetch(`/update/${currentModelName}/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updatedDoc),
+    });
+
+    if (res.ok) {
+        showModal('info', 'Document Updated', 'Document updated successfully.');
+        loadDocuments();
+    } else {
+        const data = await res.json();
+        showModal('error', 'Update Failed', data.error || 'Update failed, please try again.');
+    }
+}
+
+async function deleteDoc(modelName, id) {
+    const confirmDelete = confirm("Are you sure you want to delete this document?");
+    if (!confirmDelete) return;
+
+    const res = await fetch(`/delete/${modelName}/${id}`, {
+        method: "DELETE"
+    });
+
+    if (res.ok) {
+        showModal('info', 'Document Deleted', 'Document deleted successfully.');
+        openModel(modelName);
+        const data = await res.json();
+        document.getElementById(`${modelName}-doc-count`).innerText = data.count || 0;
+        loadDocuments()
+    } else {
+        showModal('error', 'Delete Failed', await res.json().error || 'Delete failed, please try again.');
+    }
+}
+
+async function deleteAllDocs() {
+    try {
+        const confirmDelete = confirm("Are you sure you want to delete all documents?");
+        if (!confirmDelete) return;
+
+        const modelName = content.dataset?.modelName;
+        if (!modelName) {
+            showModal('error', 'Error Occurred!', 'No model selected.');
+            return;
+        }
+
+        const res = await fetch(`/delete-all/${modelName}`, { method: "DELETE" });
+        if (res.ok) {
+            showModal('info', 'All Documents Deleted', 'All documents deleted successfully.');
+            loadDocuments();
+        } else {
+            showModal('error', 'Delete Failed', await res.json().error || 'Delete failed, please try again.');
+        }
+    } catch (error) {
+        showModal('error', 'Delete Failed', error.message || 'Delete failed, please try again.');
+    }
+}
+
+function dragStart(e) {
+    dragSrc = this;
+    e.dataTransfer.effectAllowed = "move";
+    this.classList.add("dragging");
+}
+
+function dragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+}
+
+function drop(e) {
+    e.preventDefault();
+    if (dragSrc !== this) {
+        // Swap positions
+        const draggedIndex = Array.from(tabsContainer.children).indexOf(dragSrc);
+        const targetIndex = Array.from(tabsContainer.children).indexOf(this);
+
+        if (draggedIndex < targetIndex) {
+            tabsContainer.insertBefore(dragSrc, this.nextSibling);
+        } else {
+            tabsContainer.insertBefore(dragSrc, this);
+        }
+    }
+}
+
+function dragEnd() {
+    this.classList.remove("dragging");
+}
+
+async function refreshSideBar() {
+    try {
+        const modelWrapper = document.querySelector('.model-wrapper');
+
+        const res = await fetch("/models");
+
+        if (!res.ok) {
+            const error = await res.json();
+            showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+            return;
+        }
+
+        modelWrapper.innerHTML = "";
+        const data = await res.json();
+
+        data.models.forEach(model => {
+            const modelDiv = document.createElement('div');
+            modelDiv.classList.add('model');
+            modelDiv.onclick = () => openModel(model.name);
+            modelDiv.innerHTML = `${model.name} <span id="${model.name}-doc-count">${model.count}</span>`;
+            modelWrapper.appendChild(modelDiv);
+        });
+    } catch (error) {
+        showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
+    }
+}

package/public/scripts/popup.js

@@ -0,0 +1,26 @@
+function showModal(type, title, message) {
+    const popup = document.getElementById('popup');
+    const box = document.getElementById('popupBox');
+    const titleEl = document.getElementById('popupTitle');
+    const msgEl = document.getElementById('popupMessage');
+
+    box.className = 'popup-box';
+    if (type === 'warning') box.classList.add('warning');
+    else if (type === 'info') box.classList.add('info');
+
+    titleEl.textContent = title;
+    msgEl.textContent = message;
+
+    popup.style.display = 'flex';
+}
+
+function closePopup() {
+    document.getElementById('popup').style.display = 'none';
+}
+
+window.onclick = function (e) {
+    const popup = document.getElementById('popup');
+    if (e.target === popup) {
+        closePopup();
+    }
+}

package/public/styles/insertTab.css

@@ -0,0 +1,74 @@
+@import './variables.css';
+
+.insert-tab {
+    width: 40%;
+    max-width: 400px;
+    height: 100%;
+    background-color: var(--bg-color);
+    position: fixed;
+    top: 0;
+    right: -100%;
+    z-index: 1000;
+    overflow-y: auto;
+    padding: 20px;
+    border-left: 2px solid var(--muted-color);
+    transition: right 0.3s ease-in-out;
+}
+
+.insert-tab.active {
+    right: 0;
+}
+
+#insert-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+#insert-form label {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+#insert-form input,
+select,
+textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+#insert-form textarea {
+    resize: vertical;
+    min-height: fit-content;
+}
+
+#insert-form input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--green-color);
+    background-color: var(--bg-color);
+    border: 1px solid var(--muted-color);
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+#insert-form .btn {
+    background: transparent;
+    color: var(--text-color);
+    border: none;
+    padding: 5px 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--blue-color);
+        color: var(--bg-color);
+    }
+}

package/public/styles/popup.css

@@ -0,0 +1,71 @@
+@import './variables.css';
+
+.popup-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup-box {
+    background: var(--bg-color);
+    padding: 20px 25px;
+    border-radius: 10px;
+    max-width: 400px;
+    text-align: center;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    animation: slideIn 0.4s ease;
+    position: relative;
+}
+
+.popup-box h2 {
+    margin-top: 0;
+    color: var(--red-color);
+}
+
+.popup-box.warning h2 {
+    color: var(--yellow-color);
+}
+
+.popup-box.info h2 {
+    color: var(--green-color);
+}
+
+.popup-box p {
+    margin: 10px 0 20px;
+}
+
+.close-btn {
+    background: var(--red-color);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.popup-box.warning .close-btn {
+    background: var(--yellow-color);
+}
+
+.popup-box.info .close-btn {
+    background: var(--green-color);
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-30px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

package/public/styles/style.css

@@ -0,0 +1,342 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    display: flex;
+    background: var(--bg-color);
+    color: #E0E0E0;
+}
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    width: 15vw;
+    background: #282b30;
+    border-right: 1px solid var(--muted-color);
+    height: 100vh;
+}
+
+.sidebar-header {
+    font-size: 13px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #1e2124;
+    padding: 10px;
+    border-bottom: 1px solid var(--muted-color);
+}
+
+.sidebar-header .btn {
+    color: #E0E0E0;
+    background-color: transparent;
+    border: none;
+    font-size: 12px;
+    padding: 0 4px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.1s ease-in-out;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.model-wrapper {
+    padding: 10px;
+}
+
+.model {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    margin: 5px 0;
+    border-radius: 5px;
+    color: #E0E0E0;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.model span {
+    color: var(--muted-color);
+}
+
+.main {
+    margin-left: auto;
+    height: 100vh;
+    width: 85vw;
+    display: flex;
+    flex-direction: column;
+}
+
+.tabs {
+    display: flex;
+    border-bottom: 1px solid var(--muted-color);
+    background: #1e2124;
+}
+
+.tab {
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+    color: var(--muted-color);
+    border-left: 1px solid var(--muted-color);
+    border-right: 1px solid var(--muted-color);
+    position: relative;
+    margin: 1px 0;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+        color: white;
+    }
+}
+
+
+.tab.active {
+    color: white;
+    background-color: #2E3A59;
+}
+
+.tab .close {
+    cursor: pointer;
+    font-weight: bold;
+    padding: 0 5px;
+}
+
+.operations {
+    display: flex;
+    background: #1e2124;
+    align-items: center;
+    padding: 8px 5px;
+    gap: 10px;
+}
+
+.operations .btn {
+    background: var(--muted-color);
+    color: #E0E0E0;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.1s ease-in-out;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.operations .btn:disabled {
+    background-color: #3a3f4b;
+    color: #888;
+    cursor: not-allowed;
+}
+
+.operations .limit-wrapper,
+.count-wrapper,
+.page-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 2px 5px;
+    gap: 5px;
+    border-radius: 5px;
+    background-color: var(--muted-color);
+    cursor: pointer;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.operations .limit-wrapper:hover #limit {
+    background: #2E3A59;
+}
+
+.operations .text {
+    padding: 2px 5px;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+}
+
+.operations .limit-div,
+.count-div,
+.page-div {
+    width: fit-content;
+    border-left: 2px solid #424549;
+    height: 100%;
+    color: #E0E0E0;
+}
+
+.operations .count-div,
+.page-div {
+    padding: 2px 5px;
+    font-size: 12px;
+}
+
+.operations .limit-wrapper #limit {
+    background-color: var(--muted-color);
+    border: none;
+    color: #E0E0E0;
+    padding: 2px 5px;
+    width: fit-content;
+    height: 100%;
+    font-size: 12px;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.content {
+    padding: 10px;
+    flex: 1;
+    border-top: 1px solid var(--muted-color);
+    background: #23272a;
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.content::-webkit-scrollbar {
+    display: none;
+}
+
+.hidden {
+    display: none;
+}
+
+summary::marker{
+    color: var(--muted-color);
+    font-size: 10px;
+    margin-right: 10px;
+}
+
+.document {
+    padding: 10px;
+    border: 1px solid var(--muted-color);
+    background: #1e2124;
+    border-radius: 10px;
+    margin-top: 10px;
+}
+
+.field {
+    padding: 5px 20px;
+
+}
+
+.field .string {
+    color: var(--green-color);
+}
+
+.field .string::after {
+    content: '"';
+    color: var(--green-color);
+}
+
+.field .string::before {
+    content: '"';
+    color: var(--green-color);
+}
+
+.field .number {
+    color: var(--blue-color);
+}
+
+.field .ObjectId {
+    color: var(--red-color);
+}
+
+.field .ObjectId::after {
+    content: ' )';
+    color: var(--red-color);
+}
+
+.field .ObjectId::before {
+    content: 'ObjectId( ';
+    color: var(--red-color);
+}
+
+.json-data {
+    width: 100%;
+    height: auto;
+    margin-top: 10px;
+    background: #1e2124;
+    border: none;
+    color: #E0E0E0;
+    padding: 10px;
+    border-radius: 10px;
+    resize: none;
+}
+
+.document-actions {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+}
+
+.document-actions .updateDocument {
+    background: transparent;
+    color: #E0E0E0;
+    border: none;
+    padding: 5px 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--green-color);
+        color: var(--bg-color);
+    }
+}
+
+.document-actions .deleteDocument {
+    background: transparent;
+    color: #E0E0E0;
+    border: none;
+    padding: 5px 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--red-color);
+        color: var(--bg-color);
+    }
+}
+
+.top-container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+    padding:  0 10px;
+}
+
+.top-container .editDocument {
+    background: transparent;
+    color: #E0E0E0;
+    border: none;
+    padding: 5px 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--blue-color);
+        color: var(--bg-color);
+    }
+}

package/public/styles/variables.css

@@ -0,0 +1,9 @@
+:root{
+    --bg-color: #171f2a;
+    --text-color: #fff;
+    --muted-color: #555A6B;
+    --blue-color: #4FC3F7;
+    --green-color: #00ffaa;
+    --red-color: #FF5370;
+    --yellow-color: #FFEB3B;
+}