feat: CRUD admin for skills and teams

components/admin/management/tree-item-row.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Edit, Trash2 } from "lucide-react";
+
+interface TreeItemRowProps {
+  icon?: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  badges?: Array<{
+    text: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+    className?: string;
+  }>;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  canDelete?: boolean;
+  showSeparator?: boolean;
+  additionalInfo?: React.ReactNode;
+}
+
+export function TreeItemRow({
+  icon,
+  title,
+  subtitle,
+  badges = [],
+  onEdit,
+  onDelete,
+  canDelete = true,
+  showSeparator = false,
+  additionalInfo,
+}: TreeItemRowProps) {
+  return (
+    <div>
+      {/* Séparateur entre items */}
+      {showSeparator && <div className="border-t border-white/5 ml-12" />}
+
+      <div className="flex items-center justify-between p-2 ml-6 border-l-2 border-slate-700/50 hover:bg-white/5 transition-colors">
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {icon}
+          <div className="flex items-center gap-3 flex-1 min-w-0">
+            <h4 className="text-sm font-medium text-white truncate">{title}</h4>
+            {badges.map((badge, index) => (
+              <Badge
+                key={index}
+                variant={badge.variant || "outline"}
+                className={`text-xs px-2 py-0.5 shrink-0 ${
+                  badge.className || ""
+                }`}
+              >
+                {badge.text}
+              </Badge>
+            ))}
+            {subtitle && (
+              <p className="text-slate-400 text-xs truncate flex-1">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Informations additionnelles (comme les métriques) */}
+        {additionalInfo && (
+          <div className="mx-4 shrink-0">{additionalInfo}</div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 shrink-0">
+          {onEdit && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onEdit}
+              className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 h-6 w-6 p-0"
+            >
+              <Edit className="w-3 h-3" />
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDelete}
+              className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
+              disabled={!canDelete}
+            >
+              <Trash2 className="w-3 h-3" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}