@wakastellar/ui 2.0.0 → 2.1.1

package/src/blocks/i18n-editor/index.tsx

@@ -0,0 +1,1016 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Badge } from "../../components/badge"
+import { Textarea } from "../../components/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from "../../components/sheet"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "../../components/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../components/tooltip"
+import {
+  AlertTriangle,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  Download,
+  Edit3,
+  Filter,
+  Flag,
+  Languages,
+  Loader2,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Trash2,
+  Upload,
+  X,
+  XCircle,
+} from "lucide-react"
+
+// Types
+export interface TranslationValue {
+  value: string
+  updatedAt?: Date
+  comment?: string
+}
+
+export interface TranslationEntry {
+  key: string
+  translations: Record<string, TranslationValue>
+}
+
+export interface LanguageConfig {
+  code: string
+  label: string
+  flag?: string
+  isSource?: boolean
+}
+
+export interface I18nEditorConfig {
+  /** Langues disponibles */
+  languages: LanguageConfig[]
+  /** Code de la langue source */
+  sourceLanguage: string
+  /** Séparateur pour les clés (ex: ".") */
+  keyPathSeparator?: string
+  /** Activer l'auto-save */
+  autoSave?: boolean
+  /** Délai de debounce pour l'auto-save en ms */
+  saveDebounceMs?: number
+  /** Patterns de placeholders à valider */
+  placeholderPatterns?: string[]
+  /** Ratio max de longueur */
+  maxLengthRatio?: number
+}
+
+export interface I18nEditorProps {
+  /** Configuration de l'éditeur */
+  config: I18nEditorConfig
+  /** Données de traduction initiales */
+  translations: TranslationEntry[]
+  /** Callback quand une traduction change */
+  onChange?: (key: string, language: string, value: string) => void
+  /** Callback pour sauvegarder */
+  onSave?: (translations: TranslationEntry[]) => Promise<void>
+  /** Callback pour ajouter une clé */
+  onAddKey?: (key: string) => Promise<void>
+  /** Callback pour supprimer une clé */
+  onDeleteKey?: (key: string) => Promise<void>
+  /** Callback pour ajouter une langue */
+  onAddLanguage?: (language: LanguageConfig) => Promise<void>
+  /** Callback pour exporter */
+  onExport?: (language?: string) => Promise<void>
+  /** Callback pour importer */
+  onImport?: (file: File, language: string, strategy: "overwrite" | "merge") => Promise<void>
+  /** État de chargement */
+  isLoading?: boolean
+  /** État de sauvegarde */
+  isSaving?: boolean
+  /** Classe CSS */
+  className?: string
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+}
+
+type TranslationStatus = "valid" | "missing" | "identical" | "warning"
+type FilterType = "all" | "missing" | "incomplete" | "identical"
+
+// Helper functions
+function getTranslationStatus(
+  entry: TranslationEntry,
+  targetLang: string,
+  sourceLang: string
+): TranslationStatus {
+  const sourceValue = entry.translations[sourceLang]?.value || ""
+  const targetValue = entry.translations[targetLang]?.value
+
+  if (!targetValue || targetValue.trim() === "") {
+    return "missing"
+  }
+  if (targetValue === sourceValue) {
+    return "identical"
+  }
+  return "valid"
+}
+
+function getOverallStatus(
+  entry: TranslationEntry,
+  languages: string[],
+  sourceLang: string
+): TranslationStatus {
+  const statuses = languages
+    .filter(lang => lang !== sourceLang)
+    .map(lang => getTranslationStatus(entry, lang, sourceLang))
+
+  if (statuses.includes("missing")) return "missing"
+  if (statuses.includes("identical")) return "identical"
+  return "valid"
+}
+
+function validatePlaceholders(
+  source: string,
+  target: string,
+  patterns: string[]
+): { valid: boolean; missing: string[]; extra: string[] } {
+  const extractMatches = (text: string) => {
+    const matches: string[] = []
+    for (const pattern of patterns) {
+      const regex = new RegExp(pattern, "g")
+      let match
+      while ((match = regex.exec(text)) !== null) {
+        matches.push(match[0])
+      }
+    }
+    return matches
+  }
+
+  const sourceMatches = extractMatches(source)
+  const targetMatches = extractMatches(target)
+
+  const missing = sourceMatches.filter(m => !targetMatches.includes(m))
+  const extra = targetMatches.filter(m => !sourceMatches.includes(m))
+
+  return {
+    valid: missing.length === 0 && extra.length === 0,
+    missing,
+    extra,
+  }
+}
+
+function groupByPrefix(
+  entries: TranslationEntry[],
+  separator: string
+): Map<string, TranslationEntry[]> {
+  const groups = new Map<string, TranslationEntry[]>()
+
+  for (const entry of entries) {
+    const parts = entry.key.split(separator)
+    const prefix = parts.length > 1 ? parts[0] : "__root__"
+
+    if (!groups.has(prefix)) {
+      groups.set(prefix, [])
+    }
+    groups.get(prefix)!.push(entry)
+  }
+
+  return groups
+}
+
+// Status Badge Component
+function StatusBadge({ status }: { status: TranslationStatus }) {
+  const config = {
+    valid: { label: "OK", variant: "default" as const, icon: CheckCircle, className: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300" },
+    missing: { label: "Manquant", variant: "destructive" as const, icon: XCircle, className: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300" },
+    identical: { label: "Identique", variant: "secondary" as const, icon: AlertTriangle, className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
+    warning: { label: "Attention", variant: "secondary" as const, icon: AlertTriangle, className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300" },
+  }
+
+  const { label, icon: Icon, className } = config[status]
+
+  return (
+    <Badge variant="outline" className={cn("gap-1 text-xs", className)}>
+      <Icon className="h-3 w-3" />
+      {label}
+    </Badge>
+  )
+}
+
+// Inline Editor Component
+function InlineEditor({
+  value,
+  onChange,
+  onBlur,
+  placeholder,
+  status,
+  disabled,
+}: {
+  value: string
+  onChange: (value: string) => void
+  onBlur?: () => void
+  placeholder?: string
+  status?: TranslationStatus
+  disabled?: boolean
+}) {
+  const [localValue, setLocalValue] = React.useState(value)
+
+  React.useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalValue(e.target.value)
+    onChange(e.target.value)
+  }
+
+  return (
+    <Textarea
+      value={localValue}
+      onChange={handleChange}
+      onBlur={onBlur}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={cn(
+        "min-h-[60px] resize-none text-sm",
+        status === "missing" && "border-red-300 dark:border-red-700",
+        status === "identical" && "border-yellow-300 dark:border-yellow-700"
+      )}
+    />
+  )
+}
+
+// Main Component
+export function WakaI18nEditor({
+  config,
+  translations: initialTranslations,
+  onChange,
+  onSave,
+  onAddKey,
+  onDeleteKey,
+  onAddLanguage,
+  onExport,
+  onImport,
+  isLoading = false,
+  isSaving = false,
+  className,
+  title = "Translation Editor",
+  description = "Gérez vos traductions i18n",
+}: I18nEditorProps) {
+  const [translations, setTranslations] = React.useState<TranslationEntry[]>(initialTranslations)
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [activeFilter, setActiveFilter] = React.useState<FilterType>("all")
+  const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set())
+  const [selectedEntry, setSelectedEntry] = React.useState<TranslationEntry | null>(null)
+  const [isEditorOpen, setIsEditorOpen] = React.useState(false)
+  const [isAddKeyOpen, setIsAddKeyOpen] = React.useState(false)
+  const [isAddLanguageOpen, setIsAddLanguageOpen] = React.useState(false)
+  const [isImportOpen, setIsImportOpen] = React.useState(false)
+  const [newKey, setNewKey] = React.useState("")
+  const [newLanguage, setNewLanguage] = React.useState({ code: "", label: "", flag: "" })
+  const [importFile, setImportFile] = React.useState<File | null>(null)
+  const [importLanguage, setImportLanguage] = React.useState("")
+  const [importStrategy, setImportStrategy] = React.useState<"overwrite" | "merge">("merge")
+  const [pendingChanges, setPendingChanges] = React.useState<Map<string, Map<string, string>>>(new Map())
+  const saveTimeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  const {
+    languages,
+    sourceLanguage,
+    keyPathSeparator = ".",
+    autoSave = true,
+    saveDebounceMs = 300,
+    placeholderPatterns = ["{{.*?}}", "{.*?}", "%s", "%d"],
+  } = config
+
+  const targetLanguages = languages.filter(l => l.code !== sourceLanguage)
+
+  // Update translations when props change
+  React.useEffect(() => {
+    setTranslations(initialTranslations)
+  }, [initialTranslations])
+
+  // Auto-save logic
+  React.useEffect(() => {
+    if (autoSave && pendingChanges.size > 0 && onSave) {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+
+      saveTimeoutRef.current = setTimeout(async () => {
+        await onSave(translations)
+        setPendingChanges(new Map())
+      }, saveDebounceMs)
+    }
+
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+    }
+  }, [pendingChanges, autoSave, saveDebounceMs, onSave, translations])
+
+  // Filter and search logic
+  const filteredTranslations = React.useMemo(() => {
+    let result = translations
+
+    // Search filter
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      result = result.filter(entry => {
+        if (entry.key.toLowerCase().includes(query)) return true
+        for (const lang of Object.keys(entry.translations)) {
+          if (entry.translations[lang]?.value?.toLowerCase().includes(query)) return true
+        }
+        return false
+      })
+    }
+
+    // Status filter
+    if (activeFilter !== "all") {
+      result = result.filter(entry => {
+        const status = getOverallStatus(entry, languages.map(l => l.code), sourceLanguage)
+        switch (activeFilter) {
+          case "missing":
+            return status === "missing"
+          case "incomplete":
+            return status === "missing" || status === "identical"
+          case "identical":
+            return status === "identical"
+          default:
+            return true
+        }
+      })
+    }
+
+    return result
+  }, [translations, searchQuery, activeFilter, languages, sourceLanguage])
+
+  // Group translations
+  const groupedTranslations = React.useMemo(() => {
+    return groupByPrefix(filteredTranslations, keyPathSeparator)
+  }, [filteredTranslations, keyPathSeparator])
+
+  // Handlers
+  const handleTranslationChange = (key: string, language: string, value: string) => {
+    setTranslations(prev =>
+      prev.map(entry => {
+        if (entry.key === key) {
+          return {
+            ...entry,
+            translations: {
+              ...entry.translations,
+              [language]: {
+                ...entry.translations[language],
+                value,
+                updatedAt: new Date(),
+              },
+            },
+          }
+        }
+        return entry
+      })
+    )
+
+    // Track pending changes
+    setPendingChanges(prev => {
+      const newChanges = new Map(prev)
+      if (!newChanges.has(key)) {
+        newChanges.set(key, new Map())
+      }
+      newChanges.get(key)!.set(language, value)
+      return newChanges
+    })
+
+    onChange?.(key, language, value)
+  }
+
+  const handleAddKey = async () => {
+    if (!newKey.trim()) return
+
+    await onAddKey?.(newKey)
+    setNewKey("")
+    setIsAddKeyOpen(false)
+  }
+
+  const handleDeleteKey = async (key: string) => {
+    await onDeleteKey?.(key)
+    setTranslations(prev => prev.filter(e => e.key !== key))
+  }
+
+  const handleAddLanguage = async () => {
+    if (!newLanguage.code || !newLanguage.label) return
+
+    await onAddLanguage?.(newLanguage)
+    setNewLanguage({ code: "", label: "", flag: "" })
+    setIsAddLanguageOpen(false)
+  }
+
+  const handleImport = async () => {
+    if (!importFile || !importLanguage) return
+
+    await onImport?.(importFile, importLanguage, importStrategy)
+    setImportFile(null)
+    setImportLanguage("")
+    setIsImportOpen(false)
+  }
+
+  const handleCopyKey = (key: string) => {
+    navigator.clipboard.writeText(key)
+  }
+
+  const toggleGroup = (group: string) => {
+    setCollapsedGroups(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(group)) {
+        newSet.delete(group)
+      } else {
+        newSet.add(group)
+      }
+      return newSet
+    })
+  }
+
+  // Stats
+  const stats = React.useMemo(() => {
+    let total = translations.length
+    let missing = 0
+    let identical = 0
+    let valid = 0
+
+    for (const entry of translations) {
+      const status = getOverallStatus(entry, languages.map(l => l.code), sourceLanguage)
+      if (status === "missing") missing++
+      else if (status === "identical") identical++
+      else valid++
+    }
+
+    return { total, missing, identical, valid }
+  }, [translations, languages, sourceLanguage])
+
+  if (isLoading) {
+    return (
+      <div className={cn("flex items-center justify-center py-12", className)}>
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <TooltipProvider>
+      <div className={cn("flex flex-col h-full", className)}>
+        {/* Header */}
+        <div className="flex flex-col gap-4 p-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-2xl font-bold flex items-center gap-2">
+                <Languages className="h-6 w-6" />
+                {title}
+              </h2>
+              <p className="text-sm text-muted-foreground">{description}</p>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsAddKeyOpen(true)}
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Ajouter une clé
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsAddLanguageOpen(true)}
+              >
+                <Flag className="h-4 w-4 mr-1" />
+                Ajouter une langue
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => onExport?.()}>
+                    <Download className="h-4 w-4 mr-2" />
+                    Exporter tout
+                  </DropdownMenuItem>
+                  {languages.map(lang => (
+                    <DropdownMenuItem key={lang.code} onClick={() => onExport?.(lang.code)}>
+                      <Download className="h-4 w-4 mr-2" />
+                      Exporter {lang.label}
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setIsImportOpen(true)}>
+                    <Upload className="h-4 w-4 mr-2" />
+                    Importer
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              {isSaving && (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Sauvegarde...
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="flex items-center gap-4 text-sm">
+            <span className="text-muted-foreground">
+              {stats.total} clés
+            </span>
+            <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
+              <CheckCircle className="h-4 w-4" />
+              {stats.valid} traduites
+            </span>
+            <span className="flex items-center gap-1 text-red-600 dark:text-red-400">
+              <XCircle className="h-4 w-4" />
+              {stats.missing} manquantes
+            </span>
+            <span className="flex items-center gap-1 text-yellow-600 dark:text-yellow-400">
+              <AlertTriangle className="h-4 w-4" />
+              {stats.identical} identiques
+            </span>
+          </div>
+
+          {/* Search and Filters */}
+          <div className="flex items-center gap-4">
+            <div className="relative flex-1 max-w-md">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Rechercher une clé ou une traduction..."
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery("")}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <Select value={activeFilter} onValueChange={(v) => setActiveFilter(v as FilterType)}>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Toutes ({stats.total})</SelectItem>
+                  <SelectItem value="missing">Manquantes ({stats.missing})</SelectItem>
+                  <SelectItem value="incomplete">Incomplètes ({stats.missing + stats.identical})</SelectItem>
+                  <SelectItem value="identical">Identiques ({stats.identical})</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="flex-1 overflow-auto">
+          <table className="w-full border-collapse">
+            <thead className="sticky top-0 bg-muted/50 backdrop-blur z-10">
+              <tr>
+                <th className="text-left p-3 font-medium text-sm border-b w-[280px]">
+                  Clé
+                </th>
+                <th className="text-left p-3 font-medium text-sm border-b">
+                  {languages.find(l => l.code === sourceLanguage)?.label || sourceLanguage} (source)
+                </th>
+                {targetLanguages.map(lang => (
+                  <th key={lang.code} className="text-left p-3 font-medium text-sm border-b">
+                    <span className="flex items-center gap-2">
+                      {lang.flag && <span>{lang.flag}</span>}
+                      {lang.label}
+                    </span>
+                  </th>
+                ))}
+                <th className="text-center p-3 font-medium text-sm border-b w-[100px]">
+                  État
+                </th>
+                <th className="text-center p-3 font-medium text-sm border-b w-[60px]">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {Array.from(groupedTranslations.entries()).map(([group, entries]) => (
+                <React.Fragment key={group}>
+                  {/* Group Header */}
+                  {group !== "__root__" && (
+                    <tr className="bg-muted/30">
+                      <td colSpan={targetLanguages.length + 4} className="p-2">
+                        <button
+                          onClick={() => toggleGroup(group)}
+                          className="flex items-center gap-2 text-sm font-medium hover:text-primary transition-colors"
+                        >
+                          {collapsedGroups.has(group) ? (
+                            <ChevronRight className="h-4 w-4" />
+                          ) : (
+                            <ChevronDown className="h-4 w-4" />
+                          )}
+                          {group}
+                          <Badge variant="secondary" className="text-xs">
+                            {entries.length}
+                          </Badge>
+                        </button>
+                      </td>
+                    </tr>
+                  )}
+
+                  {/* Group Entries */}
+                  {!collapsedGroups.has(group) &&
+                    entries.map(entry => {
+                      const overallStatus = getOverallStatus(
+                        entry,
+                        languages.map(l => l.code),
+                        sourceLanguage
+                      )
+
+                      return (
+                        <tr
+                          key={entry.key}
+                          className="border-b hover:bg-muted/30 transition-colors"
+                        >
+                          {/* Key */}
+                          <td className="p-3 font-mono text-sm">
+                            <div className="flex items-center gap-2">
+                              <span className="truncate max-w-[200px]" title={entry.key}>
+                                {entry.key}
+                              </span>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={() => handleCopyKey(entry.key)}
+                                    className="text-muted-foreground hover:text-foreground"
+                                  >
+                                    <Copy className="h-3 w-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>Copier la clé</TooltipContent>
+                              </Tooltip>
+                            </div>
+                          </td>
+
+                          {/* Source */}
+                          <td className="p-2">
+                            <InlineEditor
+                              value={entry.translations[sourceLanguage]?.value || ""}
+                              onChange={value => handleTranslationChange(entry.key, sourceLanguage, value)}
+                              placeholder={`Texte source...`}
+                              status={entry.translations[sourceLanguage]?.value ? "valid" : "missing"}
+                            />
+                          </td>
+
+                          {/* Target Languages */}
+                          {targetLanguages.map(lang => {
+                            const status = getTranslationStatus(entry, lang.code, sourceLanguage)
+                            return (
+                              <td key={lang.code} className="p-2">
+                                <InlineEditor
+                                  value={entry.translations[lang.code]?.value || ""}
+                                  onChange={value => handleTranslationChange(entry.key, lang.code, value)}
+                                  placeholder={`Traduction ${lang.label}...`}
+                                  status={status}
+                                />
+                              </td>
+                            )
+                          })}
+
+                          {/* Status */}
+                          <td className="p-3 text-center">
+                            <StatusBadge status={overallStatus} />
+                          </td>
+
+                          {/* Actions */}
+                          <td className="p-3 text-center">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" size="sm">
+                                  <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end">
+                                <DropdownMenuItem
+                                  onClick={() => {
+                                    setSelectedEntry(entry)
+                                    setIsEditorOpen(true)
+                                  }}
+                                >
+                                  <Edit3 className="h-4 w-4 mr-2" />
+                                  Éditer
+                                </DropdownMenuItem>
+                                <DropdownMenuItem onClick={() => handleCopyKey(entry.key)}>
+                                  <Copy className="h-4 w-4 mr-2" />
+                                  Copier la clé
+                                </DropdownMenuItem>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem
+                                  className="text-destructive"
+                                  onClick={() => handleDeleteKey(entry.key)}
+                                >
+                                  <Trash2 className="h-4 w-4 mr-2" />
+                                  Supprimer
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                </React.Fragment>
+              ))}
+
+              {filteredTranslations.length === 0 && (
+                <tr>
+                  <td colSpan={targetLanguages.length + 4} className="p-12 text-center">
+                    <Languages className="h-12 w-12 mx-auto text-muted-foreground/50 mb-4" />
+                    <p className="text-muted-foreground">
+                      {searchQuery || activeFilter !== "all"
+                        ? "Aucune traduction ne correspond à vos critères"
+                        : "Aucune traduction disponible"}
+                    </p>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Editor Drawer */}
+        <Sheet open={isEditorOpen} onOpenChange={setIsEditorOpen}>
+          <SheetContent className="w-[500px] sm:max-w-[500px]">
+            <SheetHeader>
+              <SheetTitle>Éditer la traduction</SheetTitle>
+              <SheetDescription>
+                {selectedEntry?.key}
+              </SheetDescription>
+            </SheetHeader>
+
+            {selectedEntry && (
+              <div className="py-6 space-y-6">
+                {/* Source */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">
+                    {languages.find(l => l.code === sourceLanguage)?.label} (source)
+                  </label>
+                  <Textarea
+                    value={selectedEntry.translations[sourceLanguage]?.value || ""}
+                    onChange={e => {
+                      handleTranslationChange(selectedEntry.key, sourceLanguage, e.target.value)
+                      setSelectedEntry({
+                        ...selectedEntry,
+                        translations: {
+                          ...selectedEntry.translations,
+                          [sourceLanguage]: {
+                            ...selectedEntry.translations[sourceLanguage],
+                            value: e.target.value,
+                          },
+                        },
+                      })
+                    }}
+                    placeholder="Texte source..."
+                    className="min-h-[100px]"
+                  />
+                </div>
+
+                {/* Targets */}
+                {languages.filter(l => l.code !== sourceLanguage).map(lang => (
+                  <div key={lang.code} className="space-y-2">
+                    <label className="text-sm font-medium flex items-center gap-2">
+                      {lang.flag && <span>{lang.flag}</span>}
+                      {lang.label}
+                    </label>
+                    <Textarea
+                      value={selectedEntry.translations[lang.code]?.value || ""}
+                      onChange={e => {
+                        handleTranslationChange(selectedEntry.key, lang.code, e.target.value)
+                        setSelectedEntry({
+                          ...selectedEntry,
+                          translations: {
+                            ...selectedEntry.translations,
+                            [lang.code]: {
+                              ...selectedEntry.translations[lang.code],
+                              value: e.target.value,
+                            },
+                          },
+                        })
+                      }}
+                      placeholder={`Traduction ${lang.label}...`}
+                      className="min-h-[100px]"
+                    />
+                  </div>
+                ))}
+
+                {/* Comment */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Commentaire (optionnel)</label>
+                  <Textarea
+                    placeholder="Contexte ou indication pour la traduction..."
+                    className="min-h-[80px]"
+                  />
+                </div>
+              </div>
+            )}
+
+            <SheetFooter>
+              <Button variant="outline" onClick={() => setIsEditorOpen(false)}>
+                Fermer
+              </Button>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+
+        {/* Add Key Dialog */}
+        <Dialog open={isAddKeyOpen} onOpenChange={setIsAddKeyOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Ajouter une clé de traduction</DialogTitle>
+              <DialogDescription>
+                Entrez la clé de traduction (ex: common.buttons.submit)
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="py-4">
+              <Input
+                value={newKey}
+                onChange={e => setNewKey(e.target.value)}
+                placeholder="namespace.key.name"
+              />
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsAddKeyOpen(false)}>
+                Annuler
+              </Button>
+              <Button onClick={handleAddKey}>
+                Ajouter
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Add Language Dialog */}
+        <Dialog open={isAddLanguageOpen} onOpenChange={setIsAddLanguageOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Ajouter une langue</DialogTitle>
+              <DialogDescription>
+                Configurez la nouvelle langue à ajouter
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="py-4 space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Code (ex: de, it, pt)</label>
+                <Input
+                  value={newLanguage.code}
+                  onChange={e => setNewLanguage({ ...newLanguage, code: e.target.value })}
+                  placeholder="de"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Label</label>
+                <Input
+                  value={newLanguage.label}
+                  onChange={e => setNewLanguage({ ...newLanguage, label: e.target.value })}
+                  placeholder="Allemand"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Emoji drapeau (optionnel)</label>
+                <Input
+                  value={newLanguage.flag}
+                  onChange={e => setNewLanguage({ ...newLanguage, flag: e.target.value })}
+                  placeholder="🇩🇪"
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsAddLanguageOpen(false)}>
+                Annuler
+              </Button>
+              <Button onClick={handleAddLanguage}>
+                Ajouter
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Import Dialog */}
+        <Dialog open={isImportOpen} onOpenChange={setIsImportOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Importer des traductions</DialogTitle>
+              <DialogDescription>
+                Sélectionnez un fichier JSON à importer
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="py-4 space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Fichier JSON</label>
+                <Input
+                  type="file"
+                  accept=".json"
+                  onChange={e => setImportFile(e.target.files?.[0] || null)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Langue cible</label>
+                <Select value={importLanguage} onValueChange={setImportLanguage}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Sélectionner une langue" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {languages.map(lang => (
+                      <SelectItem key={lang.code} value={lang.code}>
+                        {lang.flag && <span className="mr-2">{lang.flag}</span>}
+                        {lang.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Stratégie</label>
+                <Select value={importStrategy} onValueChange={(v) => setImportStrategy(v as "overwrite" | "merge")}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="merge">Fusionner (conserver les existantes)</SelectItem>
+                    <SelectItem value="overwrite">Écraser tout</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsImportOpen(false)}>
+                Annuler
+              </Button>
+              <Button onClick={handleImport} disabled={!importFile || !importLanguage}>
+                Importer
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </TooltipProvider>
+  )
+}
+
+export default WakaI18nEditor