improved table views and added more host information

frontend/src/components/InlineEdit.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Edit2, Check, X } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const InlineEdit = ({ 
+  value, 
+  onSave, 
+  onCancel, 
+  placeholder = "Enter value...",
+  maxLength = 100,
+  className = "",
+  disabled = false,
+  validate = null,
+  linkTo = null
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  const handleEdit = () => {
+    if (disabled) return;
+    setIsEditing(true);
+    setEditValue(value);
+    setError('');
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue(value);
+    setError('');
+    if (onCancel) onCancel();
+  };
+
+  const handleSave = async () => {
+    if (disabled || isLoading) return;
+
+    // Validate if validator function provided
+    if (validate) {
+      const validationError = validate(editValue);
+      if (validationError) {
+        setError(validationError);
+        return;
+      }
+    }
+
+    // Check if value actually changed
+    if (editValue.trim() === value.trim()) {
+      setIsEditing(false);
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await onSave(editValue.trim());
+      setIsEditing(false);
+    } catch (err) {
+      setError(err.message || 'Failed to save');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <input
+          ref={inputRef}
+          type="text"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          maxLength={maxLength}
+          disabled={isLoading}
+          className={`flex-1 px-2 py-1 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent ${
+            error ? 'border-red-500' : ''
+          } ${isLoading ? 'opacity-50' : ''}`}
+        />
+        <button
+          onClick={handleSave}
+          disabled={isLoading || editValue.trim() === ''}
+          className="p-1 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Save"
+        >
+          <Check className="h-4 w-4" />
+        </button>
+        <button
+          onClick={handleCancel}
+          disabled={isLoading}
+          className="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Cancel"
+        >
+          <X className="h-4 w-4" />
+        </button>
+        {error && (
+          <span className="text-xs text-red-600 dark:text-red-400">{error}</span>
+        )}
+      </div>
+    );
+  }
+
+  const displayValue = linkTo ? (
+    <Link
+      to={linkTo}
+      className="text-sm font-medium text-secondary-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 cursor-pointer transition-colors"
+      title="View details"
+    >
+      {value}
+    </Link>
+  ) : (
+    <span className="text-sm font-medium text-secondary-900 dark:text-white">
+      {value}
+    </span>
+  );
+
+  return (
+    <div className={`flex items-center gap-2 group ${className}`}>
+      {displayValue}
+      {!disabled && (
+        <button
+          onClick={handleEdit}
+          className="p-1 text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded transition-colors opacity-0 group-hover:opacity-100"
+          title="Edit"
+        >
+          <Edit2 className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default InlineEdit;

frontend/src/components/InlineGroupEdit.jsx

@@ -0,0 +1,262 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Edit2, Check, X, ChevronDown } from 'lucide-react';
+
+const InlineGroupEdit = ({ 
+  value, 
+  onSave, 
+  onCancel, 
+  options = [],
+  className = "",
+  disabled = false,
+  placeholder = "Select group..."
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  useEffect(() => {
+    if (isEditing && dropdownRef.current) {
+      dropdownRef.current.focus();
+    }
+  }, [isEditing]);
+
+  useEffect(() => {
+    setSelectedValue(value);
+    // Force re-render when value changes
+    if (!isEditing) {
+      setIsOpen(false);
+    }
+  }, [value, isEditing]);
+
+  // Calculate dropdown position
+  const calculateDropdownPosition = () => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      calculateDropdownPosition();
+      document.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('resize', calculateDropdownPosition);
+      window.addEventListener('scroll', calculateDropdownPosition);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+        window.removeEventListener('resize', calculateDropdownPosition);
+        window.removeEventListener('scroll', calculateDropdownPosition);
+      };
+    }
+  }, [isOpen]);
+
+  const handleEdit = () => {
+    if (disabled) return;
+    setIsEditing(true);
+    setSelectedValue(value);
+    setError('');
+    // Automatically open dropdown when editing starts
+    setTimeout(() => {
+      setIsOpen(true);
+    }, 0);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setSelectedValue(value);
+    setError('');
+    setIsOpen(false);
+    if (onCancel) onCancel();
+  };
+
+  const handleSave = async () => {
+    if (disabled || isLoading) return;
+
+    console.log('handleSave called:', { selectedValue, originalValue: value, changed: selectedValue !== value });
+
+    // Check if value actually changed
+    if (selectedValue === value) {
+      console.log('No change detected, closing edit mode');
+      setIsEditing(false);
+      setIsOpen(false);
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      console.log('Calling onSave with:', selectedValue);
+      await onSave(selectedValue);
+      console.log('Save successful');
+      // Update the local value to match the saved value
+      setSelectedValue(selectedValue);
+      setIsEditing(false);
+      setIsOpen(false);
+    } catch (err) {
+      console.error('Save failed:', err);
+      setError(err.message || 'Failed to save');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancel();
+    }
+  };
+
+  const getDisplayValue = () => {
+    console.log('getDisplayValue called with:', { value, options });
+    if (!value) {
+      console.log('No value, returning Ungrouped');
+      return 'Ungrouped';
+    }
+    const option = options.find(opt => opt.id === value);
+    console.log('Found option:', option);
+    return option ? option.name : 'Unknown Group';
+  };
+
+  const getDisplayColor = () => {
+    if (!value) return 'bg-secondary-100 text-secondary-800';
+    const option = options.find(opt => opt.id === value);
+    return option ? `text-white` : 'bg-secondary-100 text-secondary-800';
+  };
+
+  if (isEditing) {
+    return (
+      <div className={`relative ${className}`} ref={dropdownRef}>
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <button
+              ref={buttonRef}
+              type="button"
+              onClick={() => setIsOpen(!isOpen)}
+              onKeyDown={handleKeyDown}
+              disabled={isLoading}
+              className={`w-full px-3 py-1 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent flex items-center justify-between ${
+                error ? 'border-red-500' : ''
+              } ${isLoading ? 'opacity-50' : ''}`}
+            >
+              <span className="truncate">
+                {selectedValue ? options.find(opt => opt.id === selectedValue)?.name || 'Unknown Group' : 'Ungrouped'}
+              </span>
+              <ChevronDown className="h-4 w-4 flex-shrink-0" />
+            </button>
+            
+            {isOpen && (
+              <div 
+                className="fixed z-50 bg-white dark:bg-secondary-800 border border-secondary-300 dark:border-secondary-600 rounded-md shadow-lg max-h-60 overflow-auto"
+                style={{
+                  top: `${dropdownPosition.top}px`,
+                  left: `${dropdownPosition.left}px`,
+                  width: `${dropdownPosition.width}px`,
+                  minWidth: '200px'
+                }}
+              >
+                <div className="py-1">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedValue(null);
+                      setIsOpen(false);
+                    }}
+                    className={`w-full px-3 py-2 text-left text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700 flex items-center ${
+                      selectedValue === null ? 'bg-primary-50 dark:bg-primary-900/20' : ''
+                    }`}
+                  >
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800">
+                      Ungrouped
+                    </span>
+                  </button>
+                  {options.map((option) => (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => {
+                        setSelectedValue(option.id);
+                        setIsOpen(false);
+                      }}
+                      className={`w-full px-3 py-2 text-left text-sm hover:bg-secondary-100 dark:hover:bg-secondary-700 flex items-center ${
+                        selectedValue === option.id ? 'bg-primary-50 dark:bg-primary-900/20' : ''
+                      }`}
+                    >
+                      <span 
+                        className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
+                        style={{ backgroundColor: option.color }}
+                      >
+                        {option.name}
+                      </span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          <button
+            onClick={handleSave}
+            disabled={isLoading}
+            className="p-1 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Save"
+          >
+            <Check className="h-4 w-4" />
+          </button>
+          <button
+            onClick={handleCancel}
+            disabled={isLoading}
+            className="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            title="Cancel"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        {error && (
+          <span className="text-xs text-red-600 dark:text-red-400 mt-1 block">{error}</span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex items-center gap-2 group ${className}`}>
+      <span 
+        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getDisplayColor()}`}
+        style={value ? { backgroundColor: options.find(opt => opt.id === value)?.color } : {}}
+      >
+        {getDisplayValue()}
+      </span>
+      {!disabled && (
+        <button
+          onClick={handleEdit}
+          className="p-1 text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded transition-colors opacity-0 group-hover:opacity-100"
+          title="Edit group"
+        >
+          <Edit2 className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default InlineGroupEdit;

frontend/src/components/Layout.jsx

@@ -20,7 +20,10 @@ import {
   GitBranch,
   Wrench,
   Container,
-  Plus
+  Plus,
+  Activity,
+  Cog,
+  FileText
 } from 'lucide-react'
 import { useState, useEffect, useRef } from 'react'
 import { useQuery } from '@tanstack/react-query'
@@ -65,7 +68,7 @@ const Layout = ({ children }) => {
         ...(canViewHosts() ? [{ name: 'Hosts', href: '/hosts', icon: Server }] : []),
         ...(canViewPackages() ? [{ name: 'Packages', href: '/packages', icon: Package }] : []),
         ...(canViewHosts() ? [{ name: 'Repos', href: '/repositories', icon: GitBranch }] : []),
-        { name: 'Services', href: '/services', icon: Wrench, comingSoon: true },
+        { name: 'Services', href: '/services', icon: Activity, comingSoon: true },
         { name: 'Docker', href: '/docker', icon: Container, comingSoon: true },
         { name: 'Reporting', href: '/reporting', icon: BarChart3, comingSoon: true },
       ]
@@ -80,17 +83,18 @@ const Layout = ({ children }) => {
     {
       section: 'Settings',
       items: [
+        ...(canManageHosts() ? [{ 
+          name: 'PatchMon Options', 
+          href: '/options', 
+          icon: Settings
+        }] : []),
+        { name: 'Audit Log', href: '/audit-log', icon: FileText, comingSoon: true },
         ...(canManageSettings() ? [{ 
           name: 'Server Config', 
           href: '/settings', 
-          icon: Settings,
+          icon: Wrench,
           showUpgradeIcon: updateAvailable
         }] : []),
-        ...(canManageHosts() ? [{ 
-          name: 'Options', 
-          href: '/options', 
-          icon: Settings
-        }] : []),
       ]
     }
   ]
@@ -110,7 +114,8 @@ const Layout = ({ children }) => {
     if (path === '/users') return 'Users'
     if (path === '/permissions') return 'Permissions'
     if (path === '/settings') return 'Settings'
-    if (path === '/options') return 'Options'
+    if (path === '/options') return 'PatchMon Options'
+    if (path === '/audit-log') return 'Audit Log'
     if (path === '/profile') return 'My Profile'
     if (path.startsWith('/hosts/')) return 'Host Details'
     if (path.startsWith('/packages/')) return 'Package Details'