fix: add translation of the seeded data

Author: yidongw

.husky/pre-commit

@@ -10,6 +10,7 @@ if git diff --cached --name-only | grep -qE '\.(tsx?|jsx?)$|\.po$'; then
 
     # Add compiled locale files to the commit
     git add packages/locale/locales/**/*.po
+    git add apps/erp/app/utils/seedDataDisplayName.ts
 fi
 
 # Regenerate MCP tools if any .service.ts file was modified

apps/erp/app/components/Form/Account.tsx

@@ -1,6 +1,7 @@
 import type { ComboboxProps } from "@carbon/form";
 import { Combobox } from "@carbon/form";
 import { Badge, Combobox as ComboboxBase, useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useEffect, useMemo, useState } from "react";
 import { useFetcher } from "react-router";
 import type { AccountClass, getAccountsList } from "~/modules/accounting";
@@ -10,6 +11,7 @@ import {
   getClientCache,
   getCompanyId
 } from "~/utils/react-query";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 
 type AccountData = {
   id: string;
@@ -61,6 +63,7 @@ const badgeColors: Record<
 };
 
 function useAccountOptions(classes?: AccountClass[]) {
+  const { i18n } = useLingui();
   const accounts = useAccounts(classes);
 
   return useMemo(
@@ -69,13 +72,15 @@ function useAccountOptions(classes?: AccountClass[]) {
         value: c.id,
         label: (
           <div className="flex items-center justify-between w-full gap-2">
-            <span className="truncate">{c.name}</span>
+            <span className="truncate">
+              {translateSeedDisplayName(c.name, i18n)}
+            </span>
             {c.class && <Badge variant={badgeColors[c.class]}>{c.class}</Badge>}
           </div>
         ),
         helper: c.number
       })),
-    [accounts]
+    [accounts, i18n]
   );
 }
 

apps/erp/app/components/Form/CustomerType.tsx

@@ -1,12 +1,14 @@
 import type { ComboboxProps } from "@carbon/form";
 import { CreatableCombobox } from "@carbon/form";
 import { useDisclosure, useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import { Enumerable } from "~/components/Enumerable";
 import type { getCustomerTypesList } from "~/modules/sales";
 import { CustomerTypeForm } from "~/modules/sales/ui/CustomerTypes";
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 
 type CustomerTypeSelectProps = Omit<ComboboxProps, "options"> & {
   exclude?: string[];
@@ -59,6 +61,7 @@ CustomerType.displayName = "CustomerType";
 export default CustomerType;
 
 export const useCustomerTypes = () => {
+  const { i18n } = useLingui();
   const customerTypeFetcher =
     useFetcher<Awaited<ReturnType<typeof getCustomerTypesList>>>();
 
@@ -71,9 +74,9 @@ export const useCustomerTypes = () => {
 
     return dataSource.map((c) => ({
       value: c.id,
-      label: c.name
+      label: translateSeedDisplayName(c.name, i18n)
     }));
-  }, [customerTypeFetcher.data?.data]);
+  }, [customerTypeFetcher.data?.data, i18n]);
 
   return options;
 };

apps/erp/app/components/Form/Location.tsx

@@ -2,12 +2,14 @@ import type { CreatableComboboxProps } from "@carbon/form";
 import { CreatableCombobox } from "@carbon/form";
 import { useDisclosure, useMount } from "@carbon/react";
 import { getLocalTimeZone } from "@internationalized/date";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import { useUser } from "~/hooks";
 import type { getLocationsList } from "~/modules/resources";
 import LocationForm from "~/modules/resources/ui/Locations/LocationForm";
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 import { Enumerable } from "../Enumerable";
 
 type LocationSelectProps = Omit<
@@ -77,6 +79,7 @@ Location.displayName = "Location";
 export default Location;
 
 export const useLocations = () => {
+  const { i18n } = useLingui();
   const locationFetcher =
     useFetcher<Awaited<ReturnType<typeof getLocationsList>>>();
 
@@ -89,10 +92,10 @@ export const useLocations = () => {
       locationFetcher.data?.data
         ? locationFetcher.data?.data.map((c) => ({
             value: c.id,
-            label: c.name
+            label: translateSeedDisplayName(c.name, i18n)
           }))
         : [],
-    [locationFetcher.data]
+    [locationFetcher.data, i18n]
   );
 
   return options;

apps/erp/app/components/Form/PaymentTerm.tsx

@@ -1,12 +1,14 @@
 import type { ComboboxProps } from "@carbon/form";
 import { Combobox, CreatableCombobox } from "@carbon/form";
 import { useDisclosure, useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import { usePermissions } from "~/hooks";
 import type { getPaymentTermsList } from "~/modules/accounting";
 import PaymentTermForm from "~/modules/accounting/ui/PaymentTerms/PaymentTermForm";
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 
 type PaymentTermSelectProps = Omit<ComboboxProps, "options" | "inline"> & {
   inline?: boolean;
@@ -75,6 +77,7 @@ PaymentTerm.displayName = "PaymentTerm";
 export default PaymentTerm;
 
 export const usePaymentTerm = () => {
+  const { i18n } = useLingui();
   const paymentTermFetcher =
     useFetcher<Awaited<ReturnType<typeof getPaymentTermsList>>>();
 
@@ -85,9 +88,9 @@ export const usePaymentTerm = () => {
   const options = useMemo(() => {
     return (paymentTermFetcher.data?.data ?? []).map((c) => ({
       value: c.id,
-      label: c.name
+      label: translateSeedDisplayName(c.name, i18n)
     }));
-  }, [paymentTermFetcher.data?.data]);
+  }, [paymentTermFetcher.data?.data, i18n]);
 
   return options;
 };

apps/erp/app/components/Form/ScrapReason.tsx

@@ -1,6 +1,7 @@
 import type { ComboboxProps } from "@carbon/form";
 import { Combobox } from "@carbon/form";
 import { useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo } from "react";
 import { useFetcher } from "react-router";
 import { useRouteData } from "~/hooks";
@@ -9,6 +10,7 @@ import type {
   ScrapReason as ScrapReasonType
 } from "~/modules/production";
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 
 type ScrapReasonSelectProps = Omit<ComboboxProps, "options">;
 
@@ -29,6 +31,7 @@ ScrapReason.displayName = "ScrapReason";
 export default ScrapReason;
 
 export const useScrapReasons = () => {
+  const { i18n } = useLingui();
   const scrapReasonFetcher =
     useFetcher<Awaited<ReturnType<typeof getScrapReasonsList>>>();
 
@@ -50,12 +53,13 @@ export const useScrapReasons = () => {
 
     return dataSource.map((c) => ({
       value: c.id,
-      label: c.name
+      label: translateSeedDisplayName(c.name, i18n)
     }));
   }, [
     scrapReasonFetcher.data?.data,
     hasScrapReasonData,
-    sharedProductionData?.scrapReasons
+    sharedProductionData?.scrapReasons,
+    i18n
   ]);
 
   return options;

apps/erp/app/components/Form/SupplierType.tsx

@@ -1,13 +1,15 @@
 import type { ComboboxProps } from "@carbon/form";
 import { CreatableCombobox } from "@carbon/form";
 import { useDisclosure, useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import { Enumerable } from "~/components/Enumerable";
 import type { getSupplierTypesList } from "~/modules/purchasing";
 import SupplierTypeForm from "~/modules/purchasing/ui/SupplierTypes/SupplierTypeForm";
 
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 
 type SupplierTypeSelectProps = Omit<ComboboxProps, "options">;
 
@@ -57,6 +59,7 @@ SupplierType.displayName = "SupplierType";
 export default SupplierType;
 
 export const useSupplierTypes = () => {
+  const { i18n } = useLingui();
   const supplierTypeFetcher =
     useFetcher<Awaited<ReturnType<typeof getSupplierTypesList>>>();
 
@@ -69,9 +72,9 @@ export const useSupplierTypes = () => {
 
     return dataSource.map((c) => ({
       value: c.id,
-      label: c.name
+      label: translateSeedDisplayName(c.name, i18n)
     }));
-  }, [supplierTypeFetcher.data?.data]);
+  }, [supplierTypeFetcher.data?.data, i18n]);
 
   return options;
 };

apps/erp/app/components/Form/UnitOfMeasure.tsx

@@ -1,6 +1,7 @@
 import type { ComboboxProps } from "@carbon/form";
 import { CreatableCombobox } from "@carbon/form";
 import { useDisclosure, useMount } from "@carbon/react";
+import { useLingui } from "@lingui/react/macro";
 import { useMemo, useRef, useState } from "react";
 import { useFetcher } from "react-router";
 import { useRouteData } from "~/hooks";
@@ -10,6 +11,7 @@ import type {
 } from "~/modules/items";
 import UnitOfMeasureForm from "~/modules/items/ui/UnitOfMeasure/UnitOfMeasureForm";
 import { path } from "~/utils/path";
+import { translateSeedDisplayName } from "~/utils/seedDataDisplayName";
 import { Enumerable } from "../Enumerable";
 
 type UnitOfMeasureSelectProps = Omit<ComboboxProps, "options" | "inline"> & {
@@ -28,6 +30,7 @@ const UnitOfMeasurePreview = (
 };
 
 const UnitOfMeasure = (props: UnitOfMeasureSelectProps) => {
+  const { t } = useLingui();
   const options = useUnitOfMeasure();
 
   const newUnitOfMeasureModal = useDisclosure();
@@ -41,7 +44,7 @@ const UnitOfMeasure = (props: UnitOfMeasureSelectProps) => {
         options={options}
         {...props}
         inline={props.inline ? UnitOfMeasurePreview : undefined}
-        label={props?.label ?? "Unit of Measure"}
+        label={props?.label ?? t`Unit of Measure`}
         onCreateOption={(option) => {
           newUnitOfMeasureModal.onOpen();
           setCreated(option);
@@ -70,6 +73,7 @@ UnitOfMeasure.displayName = "UnitOfMeasure";
 export default UnitOfMeasure;
 
 export const useUnitOfMeasure = () => {
+  const { i18n } = useLingui();
   const uomFetcher =
     useFetcher<Awaited<ReturnType<typeof getUnitOfMeasuresList>>>();
 
@@ -91,12 +95,13 @@ export const useUnitOfMeasure = () => {
 
     return dataSource.map((c) => ({
       value: c.code,
-      label: c.name
+      label: translateSeedDisplayName(c.name, i18n)
     }));
   }, [
     hasSharedPartData,
     sharedPartData?.unitOfMeasures,
-    uomFetcher.data?.data
+    uomFetcher.data?.data,
+    i18n
   ]);
 
   return options;