@medusajs/dashboard 3.0.0-snapshot-20251212142124 → 3.0.0-snapshot-20251214110905

package/src/routes/orders/order-export/order-export.tsx

@@ -0,0 +1,66 @@
+import { Button, Heading, toast } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { RouteDrawer, useRouteModal } from "../../../components/modals"
+import { useExportOrders } from "../../../hooks/api"
+import { useOrderTableQuery } from "../../../hooks/table/query"
+import { ExportFilters } from "./components/export-filters"
+
+export const OrderExport = () => {
+  const { t } = useTranslation()
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("orders.export.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("orders.export.description")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      <OrderExportContent />
+    </RouteDrawer>
+  )
+}
+
+const OrderExportContent = () => {
+  const { t } = useTranslation()
+  const { searchParams } = useOrderTableQuery({})
+
+  const { mutateAsync } = useExportOrders(searchParams)
+  const { handleSuccess } = useRouteModal()
+
+  const handleExportRequest = async () => {
+    await mutateAsync(searchParams, {
+      onSuccess: () => {
+        toast.info(t("orders.export.success.title"), {
+          description: t("orders.export.success.description"),
+        })
+        handleSuccess()
+      },
+      onError: (err) => {
+        toast.error(err.message)
+      },
+    })
+  }
+
+  return (
+    <>
+      <RouteDrawer.Body>
+        <ExportFilters />
+      </RouteDrawer.Body>
+      <RouteDrawer.Footer>
+        <div className="flex items-center gap-x-2">
+          <RouteDrawer.Close asChild>
+            <Button size="small" variant="secondary">
+              {t("actions.cancel")}
+            </Button>
+          </RouteDrawer.Close>
+          <Button onClick={handleExportRequest} size="small">
+            {t("actions.export")}
+          </Button>
+        </div>
+      </RouteDrawer.Footer>
+    </>
+  )
+}

package/src/routes/orders/order-list/components/order-list-table/configurable-order-list-table.tsx

@@ -1,16 +1,24 @@
 import { useTranslation } from "react-i18next"
+import { Outlet, useLocation } from "react-router-dom"
+
 import { ConfigurableDataTable } from "../../../../../components/table/configurable-data-table"
 import { useOrderTableAdapter } from "./order-table-adapter"
 
 export const ConfigurableOrderListTable = () => {
   const { t } = useTranslation()
-  const orderAdapter = useOrderTableAdapter()
+  const location = useLocation()
+  const adapter = useOrderTableAdapter()
 
   return (
-    <ConfigurableDataTable
-      adapter={orderAdapter}
-      heading={t("orders.domain")}
-      layout="fill"
-    />
+    <>
+      <ConfigurableDataTable
+        adapter={adapter}
+        heading={t("orders.domain")}
+        actions={[
+          { label: t("actions.export"), to: `export${location.search}` },
+        ]}
+      />
+      <Outlet />
+    </>
   )
 }

package/src/routes/orders/order-list/components/order-list-table/order-list-table.tsx

@@ -1,15 +1,16 @@
-import { Container, Heading } from "@medusajs/ui"
+import { Button, Container, Heading } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
+import { Link, Outlet, useLocation } from "react-router-dom"
 
 import { _DataTable } from "../../../../../components/table/data-table/data-table"
 import { useOrders } from "../../../../../hooks/api/orders"
 import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-order-table-columns"
-import { useOrderTableFilters } from "./use-order-table-filters"
 import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 import { ConfigurableOrderListTable } from "./configurable-order-list-table"
+import { useOrderTableFilters } from "./use-order-table-filters"
 
 import { DEFAULT_FIELDS } from "../../const"
 
@@ -17,6 +18,7 @@ const PAGE_SIZE = 20
 
 export const OrderListTable = () => {
   const { t } = useTranslation()
+  const location = useLocation()
   const isViewConfigEnabled = useFeatureFlag("view_configurations")
 
   // If feature flag is enabled, use the new configurable table
@@ -57,6 +59,9 @@ export const OrderListTable = () => {
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
         <Heading>{t("orders.domain")}</Heading>
+        <Button size="small" variant="secondary" asChild>
+          <Link to={`export${location.search}`}>{t("actions.export")}</Link>
+        </Button>
       </div>
       <_DataTable
         columns={columns}
@@ -78,6 +83,7 @@ export const OrderListTable = () => {
           message: t("orders.list.noRecordsMessage"),
         }}
       />
+      <Outlet />
     </Container>
   )
 }

package/src/routes/product-tags/product-tag-detail/components/product-tag-general-section/product-tag-general-section.tsx

@@ -1,9 +1,10 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductTagAction } from "../../../common/hooks/use-delete-product-tag-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTagGeneralSectionProps = {
   productTag: HttpTypes.AdminProductTag
@@ -14,6 +15,7 @@ export const ProductTagGeneralSection = ({
 }: ProductTagGeneralSectionProps) => {
   const { t } = useTranslation()
   const handleDelete = useDeleteProductTagAction({ productTag })
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <Container className="flex items-center justify-between">
@@ -32,6 +34,19 @@ export const ProductTagGeneralSection = ({
               },
             ],
           },
+          ...(isTranslationsEnabled
+            ? [
+                {
+                  actions: [
+                    {
+                      label: t("translations.actions.manage"),
+                      to: `/settings/translations/edit?reference=product_tag&reference_id=${productTag.id}`,
+                      icon: <GlobeEurope />,
+                    },
+                  ],
+                },
+              ]
+            : []),
           {
             actions: [
               {

package/src/routes/product-tags/product-tag-list/components/product-tag-list-table/product-tag-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Button, Container, Heading } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
@@ -16,6 +16,7 @@ import { useProductTagTableQuery } from "../../../../../hooks/table/query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useDeleteProductTagAction } from "../../../common/hooks/use-delete-product-tag-action"
 import { productTagListLoader } from "../../loader"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const PAGE_SIZE = 20
 
@@ -88,6 +89,7 @@ const ProductTagRowActions = ({
 }) => {
   const { t } = useTranslation()
   const handleDelete = useDeleteProductTagAction({ productTag })
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <ActionMenu
@@ -101,6 +103,19 @@ const ProductTagRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_tag&reference_id=${productTag.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/product-types/product-type-detail/components/product-type-general-section/product-type-general-section.tsx

@@ -1,9 +1,10 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductTypeAction } from "../../../common/hooks/use-delete-product-type-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTypeGeneralSectionProps = {
   productType: HttpTypes.AdminProductType
@@ -17,6 +18,7 @@ export const ProductTypeGeneralSection = ({
     productType.id,
     productType.value
   )
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <Container className="flex items-center justify-between">
@@ -32,6 +34,19 @@ export const ProductTypeGeneralSection = ({
               },
             ],
           },
+          ...(isTranslationsEnabled
+            ? [
+                {
+                  actions: [
+                    {
+                      label: t("translations.actions.manage"),
+                      to: `/settings/translations/edit?reference=product_type&reference_id=${productType.id}`,
+                      icon: <GlobeEurope />,
+                    },
+                  ],
+                },
+              ]
+            : []),
           {
             actions: [
               {

package/src/routes/product-types/product-type-list/components/product-type-list-table/product-table-row-actions.tsx

@@ -1,8 +1,9 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductTypeAction } from "../../../common/hooks/use-delete-product-type-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTypeRowActionsProps = {
   productType: HttpTypes.AdminProductType
@@ -16,6 +17,7 @@ export const ProductTypeRowActions = ({
     productType.id,
     productType.value
   )
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <ActionMenu
@@ -29,6 +31,19 @@ export const ProductTypeRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_type&reference_id=${productType.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx

@@ -1,4 +1,4 @@
-import { Component, PencilSquare, Trash } from "@medusajs/icons"
+import { Component, GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteVariant } from "../../../../../hooks/api/products"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type VariantGeneralSectionProps = {
   variant: HttpTypes.AdminProductVariant
@@ -16,6 +17,7 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const navigate = useNavigate()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const hasInventoryKit = variant.inventory?.length > 1
 
@@ -70,6 +72,19 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product_variant&reference_id=${variant.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

package/src/routes/products/product-detail/components/product-general-section/product-general-section.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, StatusBadge, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
@@ -8,6 +8,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteProduct } from "../../../../../hooks/api/products"
 import { useExtension } from "../../../../../providers/extension-provider"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const productStatusColor = (status: string) => {
   switch (status) {
@@ -35,6 +36,7 @@ export const ProductGeneralSection = ({
   const prompt = usePrompt()
   const navigate = useNavigate()
   const { getDisplays } = useExtension()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const displays = getDisplays("product", "general")
 
@@ -85,6 +87,19 @@ export const ProductGeneralSection = ({
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

package/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx

@@ -1,4 +1,10 @@
-import { Buildings, Component, PencilSquare, Trash } from "@medusajs/icons"
+import {
+  Buildings,
+  Component,
+  GlobeEurope,
+  PencilSquare,
+  Trash,
+} from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
   Badge,
@@ -26,6 +32,7 @@ import {
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 import { PRODUCT_VARIANT_IDS_KEY } from "../../../common/constants"
 import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductVariantSectionProps = {
   product: HttpTypes.AdminProduct
@@ -38,6 +45,7 @@ export const ProductVariantSection = ({
   product,
 }: ProductVariantSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { q, order, offset, allow_backorder, manage_inventory } =
     useQueryParams(
@@ -70,6 +78,11 @@ export const ProductVariantSection = ({
     }
   )
 
+  const translationParams = new URLSearchParams()
+  variants?.forEach((variant) => {
+    translationParams.append("reference_id", variant.id)
+  })
+
   if (isError) {
     throw error
   }
@@ -115,6 +128,15 @@ export const ProductVariantSection = ({
                   to: `stock`,
                   icon: <Buildings />,
                 },
+                ...(isTranslationsEnabled
+                  ? [
+                      {
+                        icon: <GlobeEurope />,
+                        label: t("translations.actions.manage"),
+                        to: `/settings/translations/edit?reference=product_variant&${translationParams.toString()}`,
+                      },
+                    ]
+                  : []),
               ],
             },
           ],
@@ -225,6 +247,15 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
             )
           },
         },
+        {
+          icon: <GlobeEurope />,
+          label: t("translations.actions.manage"),
+          onClick: () => {
+            navigate(
+              `/settings/translations/edit?reference=product_variant&reference_id=${variant.id}`
+            )
+          },
+        },
       ]
 
       const secondaryActions: DataTableAction<HttpTypes.AdminProductVariant>[] =

package/src/routes/products/product-list/components/product-list-table/product-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { createColumnHelper } from "@tanstack/react-table"
@@ -110,6 +110,7 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const { mutateAsync } = useDeleteProduct(product.id)
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const handleDelete = async () => {
     const res = await prompt({
@@ -153,6 +154,19 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

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

@@ -0,0 +1,68 @@
+import { PencilSquare, Text as TextIcon } from "@medusajs/icons"
+import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { IconAvatar } from "../../../../../components/common/icon-avatar"
+import { HttpTypes } from "@medusajs/types"
+import { useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+
+type ActiveLocalesSectionProps = {
+  locales: HttpTypes.AdminLocale[]
+}
+
+export const ActiveLocalesSection = ({
+  locales,
+}: ActiveLocalesSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const handleManageLocales = useCallback(() => {
+    navigate("/settings/store/locales")
+  }, [navigate])
+
+  const renderLocales = useCallback(() => {
+    const maxLocalesToDetail = 2
+    if (locales.length <= maxLocalesToDetail) {
+      return locales.map((locale) => locale.name).join(", ")
+    }
+
+    return `${locales
+      .slice(0, maxLocalesToDetail)
+      .map((locale) => locale.name)
+      .join(", ")} + ${locales.length - maxLocalesToDetail}`
+  }, [locales])
+
+  const hasLocales = locales.length > 0
+
+  return (
+    <Container className="flex flex-col p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("translations.activeLocales.heading")}</Heading>
+        <IconButton variant="transparent" onClick={handleManageLocales}>
+          <PencilSquare></PencilSquare>
+        </IconButton>
+      </div>
+      <div className="px-1 pb-1">
+        {hasLocales ? (
+          <Container className="bg-ui-bg-component flex items-center gap-x-4 px-6 py-2">
+            <IconAvatar>
+              <TextIcon />
+            </IconAvatar>
+            <div className="flex flex-col">
+              <Text size="small" weight="plus">
+                {t("translations.activeLocales.subtitle")}
+              </Text>
+              <Text className="text-ui-fg-subtle" size="small">
+                {renderLocales()}
+              </Text>
+            </div>
+          </Container>
+        ) : (
+          <InlineTip label="Tip">
+            {t("translations.activeLocales.noLocalesTip")}
+          </InlineTip>
+        )}
+      </div>
+    </Container>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { Button, Container, Text } from "@medusajs/ui"
+import { Link } from "react-router-dom"
+
+type TranslatableEntity = {
+  icon: React.ReactNode
+  label: string
+  reference: string
+  translatedCount?: number
+  totalCount?: number
+}
+
+type TranslationListSectionProps = {
+  entities: TranslatableEntity[]
+  hasLocales: boolean
+}
+
+export const TranslationListSection = ({
+  entities,
+  hasLocales = false,
+}: TranslationListSectionProps) => {
+  return (
+    <Container className="divide-y p-0">
+      {entities.map((entity) => (
+        <div
+          key={entity.reference}
+          className="grid grid-cols-[250px_1fr_auto] items-center gap-x-4 px-6 py-4"
+        >
+          <Text size="small" weight="plus">
+            {entity.label}
+          </Text>
+          <Text size="small" className="text-ui-fg-subtle">
+            {(entity.translatedCount ?? 0).toLocaleString()} of{" "}
+            {(entity.totalCount ?? 0).toLocaleString()} fields translated
+          </Text>
+          <Link
+            to={`/settings/translations/edit?reference=${entity.reference}`}
+          >
+            <Button variant="secondary" size="small" disabled={!hasLocales}>
+              Edit
+            </Button>
+          </Link>
+        </div>
+      ))}
+    </Container>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+type TranslationsCompletionSectionProps = {
+  translatedCount?: number
+  totalCount?: number
+}
+
+export const TranslationsCompletionSection = ({
+  translatedCount = 0,
+  totalCount = 0,
+}: TranslationsCompletionSectionProps) => {
+  const { t } = useTranslation()
+
+  const percentage = totalCount > 0 ? (translatedCount / totalCount) * 100 : 0
+  const remaining = Math.max(0, totalCount - translatedCount)
+
+  return (
+    <Container className="flex flex-col gap-y-3 px-6 py-4">
+      <div className="flex items-center justify-between">
+        <Heading>{t("translations.completion.heading")}</Heading>
+        <Text size="small" className="text-ui-fg-subtle">
+          {translatedCount.toLocaleString()} {t("general.of")}{" "}
+          {totalCount.toLocaleString()}
+        </Text>
+      </div>
+
+      <div className="flex h-2 w-full overflow-hidden rounded-full">
+        {percentage > 0 ? (
+          <>
+            <div
+              className="mr-0.5 h-full rounded-l-full transition-all"
+              style={{
+                width: `${percentage}%`,
+                backgroundColor: "var(--bg-interactive)",
+              }}
+            />
+            <div
+              className="h-full flex-1 rounded-r-full"
+              style={{
+                backgroundColor: "var(--bg-interactive)",
+                opacity: 0.3,
+              }}
+            />
+          </>
+        ) : (
+          <div
+            className="h-full w-full rounded-full"
+            style={{
+              backgroundColor: "var(--bg-interactive)",
+              opacity: 0.3,
+            }}
+          />
+        )}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Text size="small" className="text-ui-fg-subtle">
+          {percentage.toFixed(1)}%
+        </Text>
+        <Text size="small" className="text-ui-fg-subtle">
+          {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
+        </Text>
+      </div>
+    </Container>
+  )
+}

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

@@ -0,0 +1 @@
+export { TranslationList as Component } from "./translation-list"