@necrolab/dashboard 0.4.39 → 0.4.40

package/.claude/settings.local.json

@@ -46,7 +46,11 @@
       "Bash(sed:*)",
       "Bash(true)",
       "Bash(./run build)",
-      "Bash(mv:*)"
+      "Bash(mv:*)",
+      "Bash(chown:*)",
+      "Bash(chmod:*)",
+      "Bash(timeout 10s npm run dev)",
+      "Bash(gtimeout:*)"
     ],
     "deny": []
   }

package/.prettierrc

@@ -6,5 +6,18 @@
     "trailingComma": "none",
     "bracketSpacing": true,
     "arrowParens": "always",
-    "printWidth": 120
+    "printWidth": 120,
+    "vueIndentScriptAndStyle": false,
+    "htmlWhitespaceSensitivity": "ignore",
+    "bracketSameLine": true,
+    "singleAttributePerLine": false,
+    "overrides": [
+        {
+            "files": "*.vue",
+            "options": {
+                "vueIndentScriptAndStyle": false,
+                "htmlWhitespaceSensitivity": "ignore"
+            }
+        }
+    ]
 }

package/backend/api.js

@@ -179,6 +179,11 @@ app.ws("/api/updates", async function (ws, req) {
     }
 });
 
+// Root route - serve the main app
+app.get("/", (req, res) => {
+    res.sendFile(path.join(__dirname, "../dist/index.html"));
+});
+
 // catches vue reloads
 app.use(
     ["/login", "/console", "/editor", "/filter", "/profiles", "/accounts"],

package/backend/mock-data.js

@@ -2,17 +2,17 @@ const users = [
     {
         event: "auth",
         botChannels: {
-            splash: "950761407119511582",
-            carts: "961558093832011807",
-            checkouts: "1025407596120776794",
-            declines: "1027868055696572508",
-            stockChecker: "1099079655962722375",
-            venueMaps: "1099125114450214973"
+            splash: "-",
+            carts: "-",
+            checkouts: "-",
+            declines: "-",
+            stockChecker: "-",
+            venueMaps: "-"
         },
         _id: "641a5292b561088b64fe390b",
-        name: "admin",
+        name: "Admin",
         password: "admin",
-        profilePicture: "https://avatars.githubusercontent.com/u/202437892?s=128",
+        profilePicture: "https://cdn.discordapp.com/avatars/435549216304267264/6cfd74ad7c5939a0bcbf218aa08be8cb.png",
         admin: true,
         proxyList: { checkout: "admin-proxies" },
         profileTags: ["Amex", "Citi", "Mercury", "Slash"],

package/dev-server.js

@@ -1,49 +1,136 @@
 #!/usr/bin/env node
 
-import { createServer } from 'vite'
-import process from 'process'
+import { createServer } from "vite";
+import process from "process";
+import { spawn } from "child_process";
+
+// Start backend server with mock data
+const startBackend = () => {
+    return new Promise((resolve, reject) => {
+        const backend = spawn("node", ["index.js"], {
+            stdio: ["inherit", "pipe", "pipe"],
+            env: { ...process.env, NODE_ENV: "development" }
+        });
+
+        let backendReady = false;
+
+        backend.stdout.on("data", (data) => {
+            const output = data.toString();
+
+            // Look for backend ready signal
+            if (output.includes("Web API started on port") || output.includes("8081")) {
+                backendReady = true;
+                resolve(backend);
+            }
+        });
+
+        backend.stderr.on("data", (data) => {
+            // Suppress error output unless it's critical
+            if (data.toString().includes("Error") || data.toString().includes("EADDRINUSE")) {
+                console.error("⚠️  Backend error:", data.toString().trim());
+            }
+        });
+
+        backend.on("error", (error) => {
+            reject(error);
+        });
+
+        backend.on("exit", (code) => {
+            if (code !== 0 && !backendReady) {
+                reject(new Error(`Backend failed to start`));
+            }
+        });
+
+        // Timeout fallback
+        setTimeout(() => {
+            if (!backendReady) {
+                resolve(backend);
+            }
+        }, 5000);
+    });
+};
 
 const startServer = async () => {
-  try {
-    const server = await createServer({
-      configFile: './vite.config.js',
-      server: {
-        port: 5173,
-        strictPort: true,
-        host: true,
-        cors: true,
-        hmr: {
-          overlay: false
+    let backend;
+    let server;
+    let isShuttingDown = false;
+
+    // Cleanup function
+    const cleanup = () => {
+        if (isShuttingDown) return;
+        isShuttingDown = true;
+        
+        console.log("\n👋 Goodbye!");
+        if (backend) {
+            backend.kill("SIGTERM");
+            setTimeout(() => backend.kill("SIGKILL"), 3000);
+        }
+        if (server) {
+            server.close();
         }
-      }
-    })
-
-    // Handle unhandled errors gracefully
-    process.on('uncaughtException', (error) => {
-      if (error.code === 'ECONNRESET' || error.errno === -54) {
-        console.log('📱 iPhone disconnected/reconnected - continuing...')
-        return
-      }
-      console.error('Server error:', error)
-    })
-
-    process.on('unhandledRejection', (reason, promise) => {
-      if (reason?.code === 'ECONNRESET' || reason?.errno === -54) {
-        console.log('📱 iPhone connection reset - continuing...')
-        return
-      }
-      console.error('Unhandled rejection at:', promise, 'reason:', reason)
-    })
-
-    await server.listen()
-    server.printUrls()
-    
-    console.log('🚀 Dev server running with iOS connection error handling')
-    
-  } catch (error) {
-    console.error('Failed to start server:', error)
-    process.exit(1)
-  }
-}
-
-startServer()
+        process.exit(0);
+    };
+
+    // Handle cleanup on various exit signals
+    process.on("SIGINT", cleanup);
+    process.on("SIGTERM", cleanup);
+
+    try {
+        console.log("🚀 Starting Necro Dashboard...");
+        
+        // Ensure proper permissions for Vite cache
+        try {
+            const fs = await import('node:fs');
+            const path = await import('node:path');
+            const cacheDir = path.resolve('./node_modules/.vite');
+            if (fs.existsSync(cacheDir)) {
+                fs.chmodSync(cacheDir, 0o755);
+            }
+        } catch (e) {
+            // Ignore permission errors
+        }
+        
+        backend = await startBackend();
+
+        server = await createServer({
+            configFile: "./vite.config.js",
+            server: {
+                port: 5173,
+                strictPort: true,
+                host: true,
+                cors: true,
+                hmr: {
+                    overlay: false
+                }
+            }
+        });
+
+        // Handle unhandled errors gracefully
+        process.on("uncaughtException", (error) => {
+            if (error.code === "ECONNRESET" || error.errno === -54) {
+                return; // Silently handle mobile reconnects
+            }
+            console.error("❌ Server error:", error.message);
+        });
+
+        process.on("unhandledRejection", (reason) => {
+            if (reason?.code === "ECONNRESET" || reason?.errno === -54) {
+                return; // Silently handle mobile reconnects
+            }
+            console.error("❌ Unhandled error:", reason?.message || reason);
+        });
+
+        await server.listen();
+
+        console.log("\n✨ Necro Dashboard is ready!");
+        console.log("🌐 Development: http://localhost:5173");
+        console.log("🌐 Staging: http://localhost:8081\n");
+        console.log("💀 Happy debugging");
+        console.log("\n\n👆 Press Ctrl+C to stop");
+    } catch (error) {
+        console.error("Failed to start server:", error);
+        process.exit(1);
+    }
+};
+
+startServer();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.39",
+    "version": "0.4.40",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
@@ -15,7 +15,7 @@
     "dependencies": {
         "@faker-js/faker": "^7.6.0",
         "@msgpack/msgpack": "^3.0.0-beta2",
-        "@necrolab/tm-renderer": "^0.1.4",
+        "@necrolab/tm-renderer": "^0.1.7",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vueuse/core": "^11.3.0",
         "autoprefixer": "^10.4.21",
@@ -25,6 +25,7 @@
         "dragselect": "^3.1.1",
         "express": "^4.21.2",
         "express-ws": "^5.0.2",
+        "ipaddr.js": "^2.2.0",
         "pinia": "^2.3.0",
         "postcss": "^8.4.49",
         "register-service-worker": "^1.7.2",

package/postinstall.js

@@ -5,19 +5,31 @@ import { fileURLToPath } from "node:url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-console.log(__dirname);
+console.log("🔧 Running postinstall build...");
 
-var vitePath = path.resolve(path.join(__dirname, "/../../vite/bin/vite.js"));
-console.log(vitePath);
-execSync(`node "${vitePath}" build`, {
-    cwd: __dirname,
-    stdio: "inherit"
-});
+// Use npx to run vite instead of hardcoded path
+try {
+    execSync(`npx vite build`, {
+        cwd: __dirname,
+        stdio: "inherit"
+    });
+    console.log("✅ Build completed successfully");
+} catch (error) {
+    console.log("⚠️  Build failed, but continuing...");
+}
 
-var oldPath = path.resolve("./dist/");
-var distPath = path.resolve(path.join(__dirname, "../../../dashboard/dist/"));
-fs.rmSync(distPath, {
-    recursive: true
-});
+// Only do file operations if we're in a nested structure
+const distPath = path.resolve(path.join(__dirname, "../../../dashboard/dist/"));
+const localDistPath = path.resolve("./dist/");
 
-fs.renameSync(oldPath, distPath);
+if (fs.existsSync(localDistPath) && __dirname.includes("dashboard")) {
+    try {
+        if (fs.existsSync(distPath)) {
+            fs.rmSync(distPath, { recursive: true });
+        }
+        fs.renameSync(localDistPath, distPath);
+        console.log("📁 Moved dist folder");
+    } catch (error) {
+        console.log("⚠️  Could not move dist folder, but that's okay");
+    }
+}

package/src/assets/css/_input.scss

@@ -43,7 +43,7 @@
 }
 
 .button-default {
-    @apply text-white font-medium h-12 rounded-lg duration-150 border border-dark-650 hover:border-dark-700 #{!important};
+    @apply text-white font-medium h-12 rounded-lg duration-150 border border-dark-650 hover:border-dark-700 !important;
 }
 
 // Remove number input spinners
@@ -59,9 +59,10 @@ input[type="number"] {
 }
 
 .input-incrementer {
-    @apply flex flex-col absolute right-2 top-1/2 transform -translate-y-1/2 #{!important};
+    @apply flex flex-col absolute right-2 top-1/2 transform -translate-y-1/2 !important;
     gap: 2px;
 
+
     button {
         @apply w-6 h-4 flex items-center justify-center transition-all duration-150 rounded-sm;
         background: rgba(46, 47, 52, 0.8);
@@ -125,16 +126,16 @@ input[type="number"] {
 .ant-select-dropdown {
     z-index: 10000 !important;
     position: relative;
-    @apply rounded-lg #{!important};
+    @apply rounded-lg !important;
 }
 
 .ant-select {
-    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 #{!important};
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 !important;
     min-height: 3.45em;
     height: fit-content;
 
     .ant-select-selector {
-        @apply h-full w-full focus:outline-none text-xs text-white #{!important};
+        @apply h-full w-full focus:outline-none text-xs text-white !important;
         background: transparent;
         background-color: transparent !important;
         border: 0 !important;
@@ -144,7 +145,7 @@ input[type="number"] {
 
 // Ant Design Select item styling
 .ant-select-multiple .ant-select-selection-item {
-    @apply bg-dark-400 items-center gap-x-4 #{!important};
+    @apply bg-dark-400 items-center gap-x-4 !important;
     padding-inline-end: 15px;
     padding-inline-start: 15px;
     border-radius: 10px;
@@ -155,7 +156,6 @@ input[type="number"] {
         vertical-align: 0.05rem;
     }
 }
-
 .ant-select-selection-item-remove > .anticon svg {
     color: #fff;
 }
@@ -166,10 +166,10 @@ input[type="number"] {
 
 .ant-select-item-option {
     &-selected:not(.ant-select-item-option-disabled) {
-        @apply bg-dark-500 text-white #{!important};
+        @apply bg-dark-500 text-white !important;
 
         .ant-select-item-option-state {
-            @apply text-white #{!important};
+            @apply text-white !important;
 
             svg {
                 margin-top: -1.5px;
@@ -182,16 +182,16 @@ input[type="number"] {
     }
 
     &-content {
-        @apply text-white #{!important};
+        @apply text-white !important;
     }
 }
 
 .ant-select-dropdown {
-    @apply bg-dark-400 #{!important};
+    @apply bg-dark-400 !important;
 }
 
 .ant-select-selector:before {
     content: "";
     position: absolute;
-    @apply bg-light-400 h-1 w-1 right-1 rounded-full #{!important};
+    @apply bg-light-400 h-1 w-1 right-1 rounded-full !important;
 }

package/src/assets/css/main.scss

@@ -142,11 +142,11 @@ img {
 
 // Button utilities
 .btn-primary {
-    @apply bg-accent-blue hover:bg-opacity-80 text-white font-medium px-4 py-2 rounded transition-all duration-150;
-    border: 1px solid #5d7cc0;
+    @apply bg-dark-550 hover:bg-dark-650 text-white font-medium px-4 py-2 rounded transition-all duration-150;
+    border: 1px solid #44454b;
 
     &:hover {
-        border-color: #4a6ba0;
+        border-color: #4b4c53;
     }
 }
 
@@ -290,26 +290,35 @@ img {
     }
 }
 
-// Dynamic heights for different devices
+// Dynamic heights for different devices - conservative approach to prevent partial items
 .max-h-big {
-    max-height: 36rem;
+    max-height: calc(100vh - 12rem); // Account for navbar, header, stats, controls, utilities
+    min-height: 8rem; // 2 items minimum (2 * 64px = 128px = 8rem)
+    overflow: hidden; // Ensure no partial items show
+}
+
+@media only screen and (min-width: 1440px) {
+    .max-h-big {
+        max-height: calc(100vh - 11rem); // Large screens get slightly more space
+    }
 }
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
     .max-h-big {
-        max-height: 44rem;
+        max-height: calc(100vh - 12rem);
     }
 }
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) {
     .max-h-big {
-        max-height: 68rem;
+        max-height: calc(100vh - 12rem);
     }
 }
 
 @media screen and (max-device-height: 500px) {
     .max-h-big {
-        max-height: 11.7rem;
+        max-height: calc(100vh - 12rem);
+        min-height: 8rem;
     }
 }
 
@@ -370,10 +379,30 @@ img {
     fill: currentColor !important;
 }
 
+// Toast container
+.Toastify__toast-container {
+    pointer-events: none;
+    --toastify-toast-bd-radius: 6px;
+}
+
 .Toastify__toast {
     min-height: 50px !important;
-    height: 50px !important;
-    pointer-events: none !important;
+    height: 50px !important; // Keep fixed height for consistency
+    pointer-events: auto !important;
+    margin-bottom: 6px !important;
+    
+    // Ultra-smooth animations with optimized timing
+    transition: transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
+    transform: translate3d(0, 0, 0);
+    
+    // Override default animations with smoother curves
+    &.Toastify__slide-enter-active {
+        animation: slideInRight 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
+    }
+    
+    &.Toastify__slide-exit-active {
+        animation: slideOutRight 0.12s cubic-bezier(0.4, 0, 1, 1);
+    }
 
     &-body > div:last-child {
         font-family: "Inter", sans-serif;
@@ -387,6 +416,29 @@ img {
     }
 }
 
+// Tighter, more precise animations
+@keyframes slideInRight {
+    0% {
+        transform: translateX(110%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOutRight {
+    0% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(110%);
+        opacity: 0;
+    }
+}
+
 .Toastify__toast--error svg {
     color: #ee8282;
 }
@@ -401,6 +453,7 @@ img {
 
 .Toastify__progress-bar {
     height: 2px;
+    transition: width 0.08s cubic-bezier(0.25, 0.1, 0.25, 1); // Ultra-smooth progress bar
 }
 
 // Mobile optimizations

package/src/components/Auth/LoginForm.vue

@@ -1,26 +1,32 @@
 <template>
     <div class="form-section">
         <!-- Username -->
-        <div class="input-wrapper">
-            <label class="label-override mb-2">Username</label>
+        <div class="input-wrapper mb-4">
+            <label style="display: flex; align-items: center; font-size: 12px; margin-bottom: 8px; color: #a0a0a6">
+                Username
+                <ProfileIcon style="margin-left: 8px; width: 16px; height: 16px" />
+            </label>
             <div class="input-default">
                 <input v-model="user" placeholder="Username" />
             </div>
         </div>
         <!-- Password -->
         <div class="input-wrapper">
-            <label class="label-override mb-2">Password</label>
+            <label style="display: flex; align-items: center; font-size: 12px; margin-bottom: 8px; color: #a0a0a6">
+                Password
+                <KeyIcon style="margin-left: 8px; width: 16px; height: 16px" />
+            </label>
             <div class="input-default">
                 <input v-model="password" type="password" placeholder="Password" />
             </div>
         </div>
         <button
-            class="btn-primary w-full mt-4"
+            class="bg-green-400 hover:bg-green-500 smooth-hover text-white font-medium px-4 py-2 rounded transition-all duration-150 w-full mt-4 h-10 flex items-center justify-center"
             @click="login()"
             :disabled="buttonDisabled"
         >
             <span v-if="!buttonDisabled">Login</span>
-            <div v-else class="loading-spinner mx-auto"></div>
+            <div v-else class="loading-spinner"></div>
         </button>
     </div>
 </template>
@@ -29,6 +35,7 @@ import { useUIStore } from "@/stores/ui";
 import { ref } from "vue";
 import router from "@/router/index";
 import { sendLogin } from "@/stores/requests";
+import { ProfileIcon, KeyIcon } from "@/components/icons";
 
 const password = ref("");
 const user = ref("");