Feat : Various features

vps-monitor/frontend/src/components/VpsCard.jsx

@@ -1,6 +1,7 @@
-import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp, RefreshCw, Cpu, MemoryStick, ArrowUp, ArrowDown } from 'lucide-react'
+import { Server, Wifi, WifiOff, Trash2, ChevronDown, ChevronUp, RefreshCw, Cpu, MemoryStick, ArrowUp, ArrowDown, Pencil } from 'lucide-react'
 import { useState } from 'react'
 import ContainerRow from './ContainerRow'
+import { tagColor } from './TagInput'
 
 function formatBytes(bps) {
   if (bps < 1024)         return `${bps.toFixed(0)} B/s`
@@ -13,7 +14,7 @@ function formatRam(bytes) {
   return `${(bytes / 1024 ** 3).toFixed(1)} GB`
 }
 
-export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate }) {
+export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate, onEdit }) {
   const [collapsed, setCollapsed] = useState(false)
   const [updatingProject, setUpdatingProject] = useState(null)
 
@@ -61,6 +62,14 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate }) {
             {collapsed ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
           </button>
 
+          <button
+            onClick={() => onEdit(vps)}
+            className="p-1.5 rounded hover:bg-gray-800 text-gray-500 hover:text-gray-300 transition-colors"
+            title="Modifier ce VPS"
+          >
+            <Pencil size={14} />
+          </button>
+
           <button
             onClick={() => onDelete(vps.id)}
             className="p-1.5 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
@@ -97,6 +106,20 @@ export default function VpsCard({ vps, onAction, onLogs, onDelete, onUpdate }) {
         </div>
       )}
 
+      {/* Tags */}
+      {vps.tags?.length > 0 && !collapsed && (
+        <div className="px-4 py-2 border-b border-gray-800/60 flex flex-wrap gap-1.5">
+          {vps.tags.map(tag => (
+            <span
+              key={tag}
+              className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${tagColor(tag)}`}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
       {/* Description */}
       {vps.description && !collapsed && (
         <p className="px-4 py-2 text-xs text-gray-500 border-b border-gray-800/60">{vps.description}</p>