quar 1.1.0

package/public/styles/insertTab.css

@@ -0,0 +1,57 @@
+@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 {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+#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,341 @@
+@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;
+}
+
+.document {
+    padding: 10px;
+    border: 1px solid var(--muted-color);
+    /* background: var(--bg-color); */
+    background: #1e2124;
+    max-height: 80vh;
+    border-radius: 10px;
+    margin-top: 10px;
+}
+
+.tree {
+    padding-left: 20px;
+}
+
+.tree li {
+    list-style-type: none;
+    padding: 5px 5px;
+    font-size: 14px;
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+
+    &:hover {
+        background: #2E3A59;
+    }
+}
+
+.tree li .String {
+    color: var(--green-color);
+}
+
+.tree li .String::after {
+    content: '"';
+    color: var(--green-color);
+}
+
+.tree li .String::before {
+    content: '"';
+    color: var(--green-color);
+}
+
+.tree li .Number {
+    color: var(--blue-color);
+}
+
+.tree li .ObjectId {
+    color: var(--red-color);
+}
+
+.tree li .ObjectId::after {
+    content: ' )';
+    color: var(--red-color);
+}
+
+.tree li .ObjectId::before {
+    content: 'ObjectId( ';
+    color: var(--red-color);
+}
+
+.collapsible {
+    cursor: pointer;
+    user-select: none;
+}
+
+.tree li .nested {
+    display: none;
+}
+
+.tree li .active {
+    display: block;
+}
+
+.caret::before {
+    content: "▶";
+    color: #555;
+    display: inline-block;
+    font-size: 10px;
+    margin-right: 6px;
+    transform: rotate(0deg);
+    transition: transform 0.3s ease;
+}
+
+.caret-down::before {
+    transform: rotate(90deg);
+}
+
+.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);
+    }
+}

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;
+}

package/server.js

@@ -0,0 +1,239 @@
+import express from 'express';
+import mongoose from 'mongoose';
+import path from "path"
+import loadModels from './utils/loadModels.js';
+
+const app = express();
+const PORT = 8319;
+
+app.set('view engine', 'zare');
+app.set("views", path.join(import.meta.dirname, "views"));
+app.set("port", PORT);
+
+app.use(express.static(path.join(import.meta.dirname, "public")));
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+app.get('/', async (_, res) => {
+    try {
+        const modelNames = mongoose.modelNames();
+
+        modelNames.sort((a, b) => a.localeCompare(b));
+
+        const result = await Promise.all(
+            modelNames.map(async name => {
+                const model = mongoose.model(name);
+                const count = await model.countDocuments();
+                return { name, count };
+            })
+        );
+
+        res.render('pages/index', { models: result });
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+});
+
+app.get("/models", async (_, res) => {
+
+    try {
+
+        if (!app.locals.modelPath) return res.status(409).json({ error: "model directory path not set" })
+        loadModels(app.locals.modelPath)
+        const modelNames = mongoose.modelNames();
+        modelNames.sort((a, b) => a.localeCompare(b));
+    
+        const result = await Promise.all(
+            modelNames.map(async name => {
+                const model = mongoose.model(name);
+                const count = await model.countDocuments();
+                return { name, count };
+            })
+        );
+    
+        res.status(200).json({ models: result });
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+});
+
+app.get("/models/:modelName", async (req, res) => {
+    try {
+
+        const { modelName } = req.params;
+        const { page = 1, limit = 100 } = req.query;
+        const model = mongoose.model(modelName);
+        const modelSchema = model.schema.paths;
+        const documents = await model.find({}).limit(limit).skip((page - 1) * limit);
+        const totalCount = await model.countDocuments();
+        const count = documents.length;
+        const totalPages = Math.ceil(totalCount / limit);
+
+        res.status(200).json({ documents, schema: modelSchema, totalCount, count, totalPages });
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+});
+
+app.get("/schema/:modelName", async (req, res) => {
+    try {
+        const modelName = req.params.modelName;
+        const Model = mongoose.model(modelName);
+
+        if (!Model) return res.status(404).json({ error: 'Model not found' });
+
+        const paths = Model.schema.paths;
+        const schema = {};
+
+        function getSchema(paths) {
+            for (const path in paths) {
+
+                if (path === '_id' || path === '__v') continue;
+
+                if (paths[path].instance === 'Embedded') {
+                    getSchema(paths[path].schema.paths);
+                    continue;
+                };
+
+                const field = paths[path];
+                const fieldType = field.instance;
+                const fieldOptions = Object.assign({}, field.options);
+
+                delete fieldOptions["type"];
+
+                schema[path] = {
+                    type: fieldType,
+                    ...fieldOptions
+                }
+            }
+        }
+        getSchema(paths)
+        res.status(200).json(schema);
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Intenral Server Error" })
+    }
+});
+
+app.get("/id/:modelName", async (req, res) => {
+
+    try {
+        const { modelName } = req.params;
+        const Model = mongoose.model(modelName)
+        if (!Model) return res.status(404).json({ error: "model not found" });
+
+        const docs = await Model.find({});
+        const ids = [];
+
+        docs.map(doc => ids.push(doc._id))
+
+        res.status(200).json(ids)
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" })
+    }
+})
+
+app.post("/insert/:modelName", async (req, res) => {
+
+    try {
+        const { modelName } = req.params;
+        const body = req.body;
+    
+        const Model = mongoose.model(modelName);
+    
+        if (!Model) return res.status(404).json({ error: "model not found" });
+    
+        const paths = Model.schema.paths;
+    
+        function getSchema(paths) {
+    
+            let schema = {};
+            for (const path in paths) {
+    
+                if (path === '_id' || path === '__v') continue;
+    
+                if (paths[path].instance === 'Embedded') {
+                    schema[path] = getSchema(paths[path].schema.paths);
+                    continue;
+                };
+    
+                schema[path] = paths[path].instance;
+            }
+    
+            return schema;
+        }
+    
+        const schema = getSchema(paths)
+    
+        function getData(body, schema) {
+    
+            let data = {};
+            
+            for (const key in schema) {
+                if (typeof schema[key] === 'object' && schema[key] !== null) {
+                    
+                    data[key] = getData(body, schema[key]);
+                    continue;
+                }
+    
+                if (Object.keys(body).includes(key)) {
+                    data[key] = body[key];
+                }
+            }
+    
+            return data;
+        }
+    
+        const data = getData(body, schema)
+        
+        const result = await Model.create(data)
+    
+        res.status(200).json(result)
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" })
+    }
+})
+
+app.put("/update/:modelName/:id", async (req, res) => {
+    try {
+        const { modelName, id } = req.params;
+        const model = mongoose.model(modelName);
+        const updatedDoc = req.body;
+        delete updatedDoc._id;
+        const result = await model.findByIdAndUpdate(id, updatedDoc, { new: true });
+
+        res.status(200).json(result);
+    } catch (error) {
+
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+});
+
+app.delete("/delete/:modelName/:id", async (req, res) => {
+    try {
+        const { modelName, id } = req.params;
+        const model = mongoose.model(modelName);
+
+        await model.findByIdAndDelete(id);
+        const count = await model.countDocuments();
+
+        res.status(200).json({ count });
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+});
+
+app.delete("/delete-all/:modelName", async (req, res) => {
+    try {
+        const { modelName } = req.params;
+        const model = mongoose.model(modelName);
+        if (!model) return res.status(404).json({ error: "model not found" });
+
+        await model.deleteMany({});
+
+        res.status(200).json({ success: true });
+    } catch (error) {
+        res.status(500).json({ error: error.message || "Internal server error" });
+    }
+})
+
+export default app;