@medusajs/dashboard 3.0.0-snapshot-20251216135612 → 3.0.0-snapshot-20251216145629

package/src/i18n/translations/es.json

@@ -122,7 +122,9 @@
   },
   "actions": {
     "save": "Guardar",
+    "saveChanges": "Guardar cambios",
     "saveAsDraft": "Guardar como borrador",
+    "saveAndClose": "Guardar y cerrar",
     "copy": "Copiar",
     "copied": "Copiado",
     "duplicate": "Duplicar",
@@ -2460,13 +2462,23 @@
       "header": "Editor de Traducciones en Masa",
       "locale": "Idioma"
     },
+    "edit": {
+      "successToast": "Traducciones actualizadas exitosamente",
+      "unsavedChanges": {
+        "title": "Traducciones sin guardar",
+        "description": "No pierdas tu trabajo. Tienes cambios que no han sido guardados aún"
+      }
+    },
     "activeLocales": {
       "heading": "Idiomas",
       "subtitle": "Traducciones activas",
       "noLocalesTip": "Configura al menos un idioma para empezar a traducir tu información"
     },
     "completion": {
-      "heading": "Textos traducidos"
+      "heading": "Textos traducidos",
+      "translated": "Traducidos",
+      "toTranslate": "Por traducir",
+      "footer": "Idiomas"
     }
   },
   "store": {

package/src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx

@@ -1,15 +1,28 @@
-import { AdminTranslationEntityStatistics } from "@medusajs/types"
-import { Container, Heading, Text } from "@medusajs/ui"
+import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
+import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 type TranslationsCompletionSectionProps = {
   statistics: Record<string, AdminTranslationEntityStatistics>
+  locales: HttpTypes.AdminLocale[]
+}
+
+type LocaleStats = {
+  code: string
+  name: string
+  translated: number
+  toTranslate: number
+  total: number
 }
 
 export const TranslationsCompletionSection = ({
   statistics,
+  locales,
 }: TranslationsCompletionSectionProps) => {
   const { t } = useTranslation()
+  const [hoveredLocale, setHoveredLocale] = useState<string | null>(null)
+
   const { translatedCount, totalCount } = Object.values(statistics).reduce(
     (acc, curr) => ({
       translatedCount: acc.translatedCount + curr.translated,
@@ -21,6 +34,47 @@ export const TranslationsCompletionSection = ({
   const percentage = totalCount > 0 ? (translatedCount / totalCount) * 100 : 0
   const remaining = Math.max(0, totalCount - translatedCount)
 
+  const localeStats = useMemo((): LocaleStats[] => {
+    const localeMap = new Map<
+      string,
+      { translated: number; expected: number }
+    >()
+
+    locales.forEach((locale) => {
+      localeMap.set(locale.code, { translated: 0, expected: 0 })
+    })
+
+    Object.values(statistics).forEach((entityStats) => {
+      if (entityStats.by_locale) {
+        Object.entries(entityStats.by_locale).forEach(
+          ([localeCode, localeData]) => {
+            const existing = localeMap.get(localeCode)
+            if (existing) {
+              existing.translated += localeData.translated
+              existing.expected += localeData.expected
+            }
+          }
+        )
+      }
+    })
+
+    return locales.map((locale) => {
+      const stats = localeMap.get(locale.code) || { translated: 0, expected: 0 }
+      return {
+        code: locale.code,
+        name: locale.name,
+        translated: stats.translated,
+        toTranslate: Math.max(0, stats.expected - stats.translated),
+        total: stats.expected,
+      }
+    })
+  }, [statistics, locales])
+
+  const maxTotal = useMemo(
+    () => Math.max(...localeStats.map((s) => s.total), 1),
+    [localeStats]
+  )
+
   return (
     <Container className="flex flex-col gap-y-3 px-6 py-4">
       <div className="flex items-center justify-between">
@@ -68,6 +122,103 @@ export const TranslationsCompletionSection = ({
           {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
         </Text>
       </div>
+
+      {localeStats.length > 0 && (
+        <div className="mt-4 flex flex-col gap-y-2">
+          <div className="flex h-32 w-full items-end gap-1">
+            {localeStats.map((locale) => {
+              const heightPercent = (locale.total / maxTotal) * 100
+              const translatedPercent =
+                locale.total > 0 ? (locale.translated / locale.total) * 100 : 0
+
+              return (
+                <Tooltip
+                  key={locale.code}
+                  open={hoveredLocale === locale.code}
+                  content={
+                    <div className="flex flex-col gap-y-1 p-1">
+                      <Text size="small" weight="plus">
+                        {locale.name}
+                      </Text>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-x-2">
+                          <div
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: "var(--bg-interactive)" }}
+                          />
+                          <Text
+                            size="small"
+                            weight="plus"
+                            className="text-ui-fg-subtle"
+                          >
+                            {t("translations.completion.translated")}
+                          </Text>
+                        </div>
+                        <Text size="small" weight="plus">
+                          {locale.translated}
+                        </Text>
+                      </div>
+                      <div className="flex items-center gap-x-2">
+                        <div
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: "var(--bg-interactive)",
+                            opacity: 0.3,
+                          }}
+                        />
+                        <Text
+                          size="small"
+                          weight="plus"
+                          className="text-ui-fg-subtle"
+                        >
+                          {t("translations.completion.toTranslate")}
+                        </Text>
+                        <Text size="small" weight="plus">
+                          {locale.toTranslate}
+                        </Text>
+                      </div>
+                    </div>
+                  }
+                >
+                  <div
+                    className="flex min-w-2 flex-1 cursor-pointer flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
+                    style={{ height: `${heightPercent}%` }}
+                    onMouseEnter={() => setHoveredLocale(locale.code)}
+                    onMouseLeave={() => setHoveredLocale(null)}
+                  >
+                    <div
+                      className="w-full rounded-t-sm"
+                      style={{
+                        height: `${100 - translatedPercent}%`,
+                        backgroundColor: "var(--bg-interactive)",
+                        opacity: 0.3,
+                        minHeight: locale.toTranslate > 0 ? "2px" : "0",
+                      }}
+                    />
+                    {translatedPercent > 0 && (
+                      <div
+                        className="mt-0.5 w-full rounded-sm"
+                        style={{
+                          height: `${translatedPercent}%`,
+                          backgroundColor: "var(--bg-interactive)",
+                          minHeight: locale.translated > 0 ? "2px" : "0",
+                        }}
+                      />
+                    )}
+                  </div>
+                </Tooltip>
+              )
+            })}
+          </div>
+          <Text
+            size="small"
+            weight="plus"
+            className="text-ui-fg-muted text-center"
+          >
+            {t("translations.completion.footer")}
+          </Text>
+        </div>
+      )}
     </Container>
   )
 }

package/src/routes/translations/translation-list/translation-list.tsx

@@ -1,7 +1,6 @@
 import { Container, Heading, Text } from "@medusajs/ui"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useTranslation } from "react-i18next"
-import { Buildings } from "@medusajs/icons"
 import {
   useStore,
   useTranslationSettings,
@@ -125,7 +124,14 @@ export const TranslationList = () => {
             ) ?? []
           }
         ></ActiveLocalesSection>
-        <TranslationsCompletionSection statistics={statistics ?? {}} />
+        <TranslationsCompletionSection
+          statistics={statistics ?? {}}
+          locales={
+            store?.supported_locales?.map(
+              (supportedLocale) => supportedLocale.locale
+            ) ?? []
+          }
+        />
       </TwoColumnPage.Sidebar>
     </TwoColumnPage>
   )

package/src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx

@@ -426,7 +426,7 @@ export const TranslationsEditForm = ({
     const calculateColumnWidth = () => {
       if (containerRef.current) {
         const containerWidth = containerRef.current.offsetWidth
-        const availableWidth = containerWidth - FIELD_COLUMN_WIDTH - 12
+        const availableWidth = containerWidth - FIELD_COLUMN_WIDTH - 16
         const columnWidth = Math.max(300, Math.floor(availableWidth / 2))
         setDynamicColumnWidth(columnWidth)
       }
@@ -588,11 +588,7 @@ export const TranslationsEditForm = ({
     async (closeOnSuccess: boolean = false) => {
       const success = await saveCurrentLocale()
       if (success) {
-        toast.success(
-          t("translations.edit.successToast", {
-            defaultValue: "Translations updated successfully",
-          })
-        )
+        toast.success(t("translations.edit.successToast"))
         if (closeOnSuccess) {
           handleSuccess()
         }
@@ -613,9 +609,6 @@ export const TranslationsEditForm = ({
       payload.update.length === 0 &&
       payload.delete.length === 0
     ) {
-      toast.info(
-        t("translations.noChanges", { defaultValue: "No changes to save" })
-      )
       return
     }
 
@@ -736,7 +729,7 @@ export const TranslationsEditForm = ({
               onClick={() => handleSave(false)}
               isLoading={isPending}
             >
-              {t("actions.saveChanges", { defaultValue: "Save changes" })}
+              {t("actions.saveChanges")}
             </Button>
             <Button
               size="small"
@@ -744,7 +737,7 @@ export const TranslationsEditForm = ({
               onClick={() => handleSave(true)}
               isLoading={isPending}
             >
-              {t("actions.saveAndClose", { defaultValue: "Save and close" })}
+              {t("actions.saveAndClose")}
             </Button>
           </div>
         </RouteFocusModal.Footer>
@@ -754,15 +747,10 @@ export const TranslationsEditForm = ({
         <Prompt.Content>
           <Prompt.Header>
             <Prompt.Title>
-              {t("translations.unsavedChanges.title", {
-                defaultValue: "Unsaved changes",
-              })}
+              {t("translations.edit.unsavedChanges.title")}
             </Prompt.Title>
             <Prompt.Description>
-              {t("translations.unsavedChanges.description", {
-                defaultValue:
-                  "You have unsaved changes for this locale. Save them before switching?",
-              })}
+              {t("translations.edit.unsavedChanges.description")}
             </Prompt.Description>
           </Prompt.Header>
           <Prompt.Footer>
@@ -780,7 +768,7 @@ export const TranslationsEditForm = ({
               type="button"
               isLoading={isPending}
             >
-              {t("actions.saveChanges", { defaultValue: "Save changes" })}
+              {t("actions.saveChanges")}
             </Button>
           </Prompt.Footer>
         </Prompt.Content>