@necrolab/dashboard 0.4.48 → 0.4.49

package/.claude/settings.local.json

@@ -52,7 +52,8 @@
       "Bash(timeout 10s npm run dev)",
       "Bash(gtimeout:*)",
       "Bash(echo $SHELL)",
-      "Bash(mkdir:*)"
+      "Bash(mkdir:*)",
+      "Bash(base64:*)"
     ],
     "deny": []
   }

package/exit

@@ -0,0 +1,209 @@
+#!/bin/bash
+
+# 🎯 Necro Dashboard Exit - Fire Edition 🔥
+# Enhanced exit script with style and robust functionality
+
+# Colors for that fire output 🌈
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+PURPLE='\033[0;35m'
+CYAN='\033[0;36m'
+WHITE='\033[1;37m'
+BOLD='\033[1m'
+NC='\033[0m' # No Color
+
+# Fire emojis for maximum style
+FIRE="🔥"
+STOP="🛑"
+GEAR="⚙️"
+CHECK="✅"
+CROSS="❌"
+LIGHTNING="⚡"
+SKULL="💀"
+
+# Banner function
+show_banner() {
+    echo -e "${RED}${BOLD}"
+    echo "   ███╗   ██╗███████╗ ██████╗██████╗  ██████╗ "
+    echo "   ████╗  ██║██╔════╝██╔════╝██╔══██╗██╔═══██╗"
+    echo "   ██╔██╗ ██║█████╗  ██║     ██████╔╝██║   ██║"
+    echo "   ██║╚██╗██║██╔══╝  ██║     ██╔══██╗██║   ██║"
+    echo "   ██║ ╚████║███████╗╚██████╗██║  ██║╚██████╔╝"
+    echo "   ╚═╝  ╚═══╝╚══════╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ "
+    echo -e "${NC}"
+    echo -e "${RED}${BOLD}Dashboard Exit ${SKULL} v2.0${NC}"
+    echo -e "${WHITE}────────────────────────────────────────────${NC}"
+}
+
+# Success message
+success() {
+    echo -e "${GREEN}${BOLD}${CHECK} $1${NC}"
+}
+
+# Error message
+error() {
+    echo -e "${RED}${BOLD}${CROSS} $1${NC}"
+}
+
+# Info message
+info() {
+    echo -e "${CYAN}${BOLD}${LIGHTNING} $1${NC}"
+}
+
+# Warning message
+warn() {
+    echo -e "${YELLOW}${BOLD}⚠️  $1${NC}"
+}
+
+# Check if lsof is available
+check_lsof() {
+    if ! command -v lsof &> /dev/null; then
+        error "lsof is not installed or not in PATH"
+        warn "Install with: brew install lsof (macOS) or apt-get install lsof (Linux)"
+        exit 1
+    fi
+}
+
+# Function to kill process on a specific port with enhanced feedback
+kill_port() {
+    local port=$1
+    local service_name=$2
+    
+    info "Checking for processes on port ${port} (${service_name})..."
+    
+    # Get PID using lsof
+    local pid=$(lsof -ti:$port 2>/dev/null)
+    
+    if [ -n "$pid" ]; then
+        # Get process name for better feedback
+        local process_name=$(ps -p $pid -o comm= 2>/dev/null || echo "unknown")
+        
+        warn "Found process: ${process_name} (PID: ${pid}) on port ${port}"
+        
+        # Try graceful termination first
+        info "Attempting graceful shutdown..."
+        if kill -TERM $pid 2>/dev/null; then
+            sleep 2
+            
+            # Check if process is still running
+            if kill -0 $pid 2>/dev/null; then
+                warn "Process still running, forcing termination..."
+                if kill -9 $pid 2>/dev/null; then
+                    success "Process ${pid} forcefully terminated on port ${port}"
+                else
+                    error "Failed to kill process ${pid} on port ${port}"
+                    return 1
+                fi
+            else
+                success "Process ${pid} gracefully terminated on port ${port}"
+            fi
+        else
+            error "Failed to send termination signal to process ${pid}"
+            return 1
+        fi
+    else
+        info "No process found on port ${port} (${service_name})"
+    fi
+    
+    return 0
+}
+
+# Function to kill all Node.js processes
+kill_all_node() {
+    info "Searching for Node.js processes..."
+    
+    local node_pids=$(pgrep -f "node" 2>/dev/null)
+    
+    if [ -n "$node_pids" ]; then
+        warn "Found Node.js processes, terminating..."
+        echo "$node_pids" | while read -r pid; do
+            if [ -n "$pid" ]; then
+                local process_info=$(ps -p $pid -o args= 2>/dev/null || echo "unknown")
+                info "Killing Node.js process: $pid ($process_info)"
+                kill -TERM $pid 2>/dev/null || kill -9 $pid 2>/dev/null
+            fi
+        done
+        success "All Node.js processes terminated"
+    else
+        info "No Node.js processes found"
+    fi
+}
+
+# Function to clean up development servers
+cleanup_dev_servers() {
+    info "Cleaning up development servers ${GEAR}"
+    
+    # Kill specific ports used by the dashboard
+    kill_port 5173 "Vite Dev Server"
+    kill_port 8081 "Backend Server"
+    kill_port 3000 "Alternative Dev Server"
+    kill_port 8080 "Alternative Backend"
+    
+    echo ""
+}
+
+# Help function
+show_help() {
+    echo -e "${WHITE}${BOLD}Usage:${NC}"
+    echo -e "  ${CYAN}./exit${NC}          ${WHITE}Stop dashboard servers (ports 5173, 8081)${NC}"
+    echo -e "  ${CYAN}./exit all${NC}      ${WHITE}Stop all Node.js processes${NC}"
+    echo -e "  ${CYAN}./exit port <n>${NC} ${WHITE}Stop process on specific port${NC}"
+    echo -e "  ${CYAN}./exit help${NC}     ${WHITE}Show this help message${NC}"
+    echo ""
+    echo -e "${WHITE}${BOLD}Examples:${NC}"
+    echo -e "  ${YELLOW}./exit${NC}          ${GREEN}# Stop dashboard servers${NC}"
+    echo -e "  ${YELLOW}./exit all${NC}      ${GREEN}# Nuclear option - kill all Node.js${NC}"
+    echo -e "  ${YELLOW}./exit port 3000${NC} ${GREEN}# Stop specific port${NC}"
+    echo ""
+    echo -e "${RED}Made with ${SKULL} for clean shutdowns${NC}"
+}
+
+# Main execution flow
+main() {
+    # Clear screen for clean output
+    clear
+    
+    # Show the banner
+    show_banner
+    
+    # Check dependencies
+    check_lsof
+    
+    case "${1:-}" in
+        "all")
+            kill_all_node
+            ;;
+        "port")
+            if [ -z "$2" ]; then
+                error "Port number required"
+                echo -e "${CYAN}Usage: ./exit port <port_number>${NC}"
+                exit 1
+            fi
+            kill_port "$2" "Custom Port"
+            ;;
+        "help"|"-h"|"--help")
+            show_help
+            ;;
+        "")
+            cleanup_dev_servers
+            ;;
+        *)
+            warn "Unknown command: $1"
+            echo ""
+            show_help
+            exit 1
+            ;;
+    esac
+    
+    echo ""
+    success "Exit sequence completed ${STOP}"
+    echo -e "${PURPLE}Dashboard processes have been terminated ${FIRE}${NC}"
+}
+
+# Error handling for script interruption
+trap 'echo -e "\n${YELLOW}${BOLD}${LIGHTNING} Exit script interrupted${NC}"; exit 0' INT
+
+# Run the main function
+main "$@"

package/index.html

@@ -97,7 +97,7 @@
         <link rel="preload" as="fetch" href="/manifest.json" crossorigin />
         <link rel="manifest" href="/manifest.json" />
         <meta name="theme-color" content="#1a1b1e" />
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2" />
 
         <!-- Prism.js for syntax highlighting -->
         <link

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.48",
+    "version": "0.4.49",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/public/manifest.json

@@ -2,21 +2,26 @@
     "short_name": "Necro",
     "name": "Necro Dashboard",
     "icons": [{
-            "src": "/android-chrome-192x192.png",
+            "src": "/android-chrome-192x192.png?v=2",
             "type": "image/png",
             "sizes": "192x192"
         },
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/android-chrome-192x192.png?v=2",
             "type": "image/png",
             "sizes": "192x192",
             "purpose": "any maskable"
 
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/android-chrome-512x512.png?v=2",
             "type": "image/png",
             "sizes": "512x512"
+        },
+        {
+            "src": "/apple-touch-icon.png?v=2",
+            "type": "image/png",
+            "sizes": "180x180"
         }
     ],
     "start_url": "/",

package/src/assets/css/_input.scss

@@ -1,132 +1,87 @@
+/* ==========================================================================
+   INPUT COMPONENTS STYLING
+   ========================================================================== */
+
 .input-default {
-    @apply h-12 bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border border-dark-550 border-2;
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-3 py-2 border-dark-550 border-2;
+    height: 3.45em;
+    transition: border-color 0.15s ease;
 
-    input {
-        @apply h-full w-full px-4 focus:outline-none text-xs text-white;
-        background-color: transparent;
+    &:focus-within {
+        @apply border-dark-700;
     }
 
-    /* When input has incrementer, add right padding */
-    &:has(.input-incrementer) input {
-        @apply pr-10;
+    input {
+        @apply h-full w-full focus:outline-none text-sm text-white;
+        background: transparent;
     }
 
-    /* Required field indicator */
-    &.required {
-        /* Professional style with colored border */
-        border-left: 3px solid rgba(239, 68, 68, 0.7);
+    .input-incrementer {
+        @apply flex flex-col ml-2 gap-0.5;
 
-        /* Red bullet indicator directly in the field */
-        &::after {
-            content: "";
-            position: absolute;
-            right: 8px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background-color: #ef4444;
+        button {
+            @apply w-6 h-4 flex items-center justify-center text-white transition-all duration-200 rounded-sm border border-dark-650;
+            background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+            &:hover {
+                @apply border-dark-700;
+                background: linear-gradient(135deg, #2e2f34 0%, #32333a 100%);
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+                transform: translateY(-0.5px);
+            }
+
+            &:active {
+                @apply border-dark-600;
+                background: linear-gradient(135deg, #26272c 0%, #2a2b30 100%);
+                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
+                transform: translateY(0);
+            }
+
+            &:first-child {
+                border-radius: 4px 4px 2px 2px;
+            }
+
+            &:last-child {
+                border-radius: 2px 2px 4px 4px;
+            }
         }
 
-        &:has(.input-incrementer)::after {
-            right: 16px;
+        svg {
+            @apply w-2.5 h-2.5;
+            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
         }
     }
 }
-.input-wrapper {
-    @apply z-20;
 
-    label {
-        @apply text-xs text-light-300 block;
-    }
+.input-wrapper label {
+    @apply text-white font-medium mb-2 block;
+    font-size: 16px;
 }
 
 .button-default {
     @apply text-white font-medium h-12 rounded-lg duration-150 border border-dark-650 hover:border-dark-700 !important;
 }
 
-// Remove number input spinners
+/* Remove number input spinners */
 input[type="number"] {
-    -webkit-appearance: textfield;
     -moz-appearance: textfield;
-    appearance: textfield;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-    }
 }
 
-.input-incrementer {
-    @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);
-        border: 1px solid rgba(61, 62, 68, 0.6);
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 8px;
-
-        &:hover {
-            background: rgba(68, 69, 75, 0.9);
-            border-color: rgba(255, 255, 255, 0.4);
-            color: white;
-        }
-
-        &:active {
-            background: rgba(35, 36, 41, 0.9);
-        }
-
-        svg {
-            @apply w-2.5 h-2.5;
-        }
-    }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
 
-// Mobile responsive adjustments
-@media (max-width: 810px) {
-    .input-default {
-        height: 40px;
-
-        input {
-            font-size: 12px;
-        }
-
-        .input-incrementer button {
-            @apply w-5 h-3;
-
-            svg {
-                @apply w-2 h-2;
-            }
-        }
-    }
-
-    .input-wrapper label {
-        font-size: 15px;
-    }
-
-    .ant-select {
-        height: fit-content;
-        min-height: 40px;
-        padding: 0;
-
-        &-show-search:not(.ant-select-customize-input) .ant-select-selector {
-            font-size: 12px;
-        }
+/* ==========================================================================
+   ANT DESIGN SELECT STYLING
+   ========================================================================== */
 
-        &-multiple .ant-select-selection-item {
-            height: 25px;
-        }
-    }
-}
-// Ant Design Select styling
 .ant-select-dropdown {
     z-index: 10000 !important;
     position: relative;
-    @apply rounded-lg !important;
+    @apply rounded-lg bg-dark-400 !important;
 }
 
 .ant-select {
@@ -140,10 +95,15 @@ input[type="number"] {
         background-color: transparent !important;
         border: 0 !important;
         box-shadow: 0 0 0 !important;
+
+        &:before {
+            content: "";
+            position: absolute;
+            @apply bg-light-400 h-1 w-1 right-1 rounded-full !important;
+        }
     }
 }
 
-// Ant Design Select item styling
 .ant-select-multiple .ant-select-selection-item {
     @apply bg-dark-400 items-center gap-x-4 !important;
     padding-inline-end: 15px;
@@ -151,17 +111,19 @@ input[type="number"] {
     border-radius: 10px;
     height: 40px;
     border: 0;
+    color: #ffffff;
 
     &-remove > .anticon {
         vertical-align: 0.05rem;
     }
 }
+
 .ant-select-selection-item-remove > .anticon svg {
     color: #fff;
-}
 
-.ant-select-selection-item-remove > .anticon svg path {
-    fill: currentColor;
+    path {
+        fill: currentColor;
+    }
 }
 
 .ant-select-item-option {
@@ -186,12 +148,43 @@ input[type="number"] {
     }
 }
 
-.ant-select-dropdown {
-    @apply bg-dark-400 !important;
-}
+/* ==========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================== */
+
+@screen md {
+    .input-default {
+        height: 40px;
+
+        input {
+            font-size: 12px;
+        }
 
-.ant-select-selector:before {
-    content: "";
-    position: absolute;
-    @apply bg-light-400 h-1 w-1 right-1 rounded-full !important;
+        .input-incrementer button {
+            @apply w-5 h-3;
+
+            svg {
+                @apply w-2 h-2;
+            }
+        }
+    }
+
+    .input-wrapper label {
+        font-size: 15px;
+    }
+
+    .ant-select {
+        height: fit-content;
+        min-height: 40px;
+        padding: 0;
+
+        &-show-search:not(.ant-select-customize-input) .ant-select-selector {
+            font-size: 12px;
+        }
+
+        &-multiple .ant-select-selection-item {
+            height: 25px;
+            font-size: 10px;
+        }
+    }
 }