Add react i18next to console

Signed-off-by: Jonathan <contact@grafikart.fr>

apps/compliance-portal/package.json

@@ -20,7 +20,7 @@
     "pdfjs-dist": "^5.4.296",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.10",
     "react-pdf": "^10.3.0",
     "react-relay": "^21.0.1",
     "react-router": "^8.1.0",

apps/console/.gitignore

@@ -11,6 +11,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+scripts
 *.local
 
 # Editor directories and files

apps/console/package.json

@@ -22,11 +22,13 @@
     "@probo/ui": "1.0.0",
     "@tanstack/react-query": "^5.76.1",
     "clsx": "^2.1.1",
+    "i18next": "^26.3.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-dropzone": "^15.0.0",
     "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.56.4",
+    "react-i18next": "^17.0.10",
     "react-pdf": "^10.3.0",
     "react-relay": "^21.0.1",
     "react-router": "^8.1.0",

apps/console/src/components/PageError.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   ErrorDetailMessage,
@@ -26,6 +25,7 @@ import {
   ErrorLayout,
 } from "@probo/ui";
 import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Link, useLocation, useRouteError } from "react-router";
 
 type Props = {
@@ -36,7 +36,7 @@ type Props = {
 export function PageError({ resetErrorBoundary, error: propsError }: Props) {
   const routeError = useRouteError();
   const error = routeError ?? propsError;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const location = useLocation();
   const baseLocation = useRef(location);
 
@@ -56,7 +56,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
 
   const actions = (
     <Button asChild>
-      <Link to="/">{__("Go home")}</Link>
+      <Link to="/">{t("pageError.actions.goHome")}</Link>
     </Button>
   );
 
@@ -70,8 +70,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     return (
       <ErrorLayout
         {...layoutProps}
-        title={__("Page not found")}
+        title={t("pageError.notFound.title")}
-        description={__("The page you are looking for does not exist.")}
+        description={t("pageError.notFound.description")}
       />
     );
   }
@@ -80,8 +80,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     return (
       <ErrorLayout
         {...layoutProps}
-        title={__("Page not found")}
+        title={t("pageError.notFound.title")}
-        description={__("The page you are looking for does not exist.")}
+        description={t("pageError.notFound.description")}
       />
     );
   }
@@ -89,11 +89,11 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
   return (
     <ErrorLayout
       {...layoutProps}
-      title={__("Something went wrong")}
+      title={t("pageError.unexpected.title")}
-      description={__("We hit an unexpected error. Head back home to continue.")}
+      description={t("pageError.unexpected.description")}
     >
       {error instanceof Error && (
-        <ErrorDetails summary={__("Technical details")}>
+        <ErrorDetails summary={t("pageError.technicalDetails")}>
           <ErrorDetailMessage>{error.message}</ErrorDetailMessage>
         </ErrorDetails>
       )}

apps/console/src/components/SortableTable.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   IconChevronDown,
@@ -35,6 +34,7 @@ import {
   useContext,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import type { LoadMoreFn } from "react-relay";
 import type { OperationType } from "relay-runtime";
 
@@ -75,7 +75,7 @@ export function SortableTable({
   isLoadingNext?: boolean;
   pageSize?: number;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [order, setOrder] = useState(defaultOrder);
   const changeOrder = (o: Order) => {
     startTransition(() => {
@@ -95,7 +95,7 @@ export function SortableTable({
             disabled={isLoadingNext}
             icon={isLoadingNext ? Spinner : IconChevronDown}
           >
-            {__("Show more")}
+            {t("sortableTable.actions.showMore")}
           </Button>
         )}
       </div>

apps/console/src/components/assets/AssetsTable.tsx

@@ -21,9 +21,7 @@
 import {
   getAssetTypeVariant,
   promisifyMutation,
-  sprintf,
 } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   ActionDropdown,
   Badge,
@@ -34,6 +32,7 @@ import {
   TextCell,
   useConfirm,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import type { usePaginationFragmentHookType } from "react-relay/relay-hooks/usePaginationFragment";
 import { Link } from "react-router";
@@ -90,7 +89,7 @@ export function AssetsTable(props: Props) {
   const { connectionId, pagination, assets } = props;
 
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const deleteAsset = useDeleteAsset(connectionId);
 
   return (
@@ -100,17 +99,17 @@ export function AssetsTable(props: Props) {
       pagination={pagination}
       items={assets}
       columns={[
-        __("Name"),
+        t("assetsTable.columns.name"),
-        __("Type"),
+        t("assetsTable.columns.type"),
-        __("Data Types stored"),
+        t("assetsTable.columns.dataTypesStored"),
-        __("Amount"),
+        t("assetsTable.columns.amount"),
-        __("Owner"),
+        t("assetsTable.columns.owner"),
-        __("Third parties"),
+        t("assetsTable.columns.thirdParties"),
       ]}
       schema={schema}
       updateMutation={updateAssetMutation}
       createMutation={createAssetMutation}
-      addLabel={__("Add a new asset")}
+      addLabel={t("assetsTable.actions.add")}
       defaultValue={{
         ...defaultValue,
         organizationId,
@@ -120,7 +119,7 @@ export function AssetsTable(props: Props) {
           <DropdownItem asChild>
             <Link to={`/organizations/${organizationId}/assets/${item.id}`}>
               <IconPencil size={16} />
-              {__("Edit")}
+              {t("assetsTable.actions.edit")}
             </Link>
           </DropdownItem>
           <DropdownItem
@@ -128,7 +127,7 @@ export function AssetsTable(props: Props) {
             variant="danger"
             icon={IconTrashCan}
           >
-            {__("Delete")}
+            {t("assetsTable.actions.delete")}
           </DropdownItem>
         </ActionDropdown>
       )}
@@ -140,7 +139,9 @@ export function AssetsTable(props: Props) {
             items={["VIRTUAL", "PHYSICAL"]}
             itemRenderer={({ item }) => (
               <Badge variant={getAssetTypeVariant(item ?? "VIRTUAL")}>
-                {item === "PHYSICAL" ? __("Physical") : __("Virtual")}
+                {item === "PHYSICAL"
+                  ? t("assetsTable.assetTypes.physical")
+                  : t("assetsTable.assetTypes.virtual")}
               </Badge>
             )}
             defaultValue={item?.assetType ?? defaultValue.assetType}
@@ -174,11 +175,11 @@ export function AssetsTable(props: Props) {
 const useDeleteAsset = (connectionId: string) => {
   const [mutate] = useMutation<AssetGraphDeleteMutation>(deleteAssetMutation);
   const confirm = useConfirm();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (asset: { id: string; name: string }) => {
     if (!asset.id || !asset.name) {
-      return alert(__("Failed to delete asset: missing id or name"));
+      return alert(t("assetsTable.delete.missingIdOrName"));
     }
     confirm(
       () =>
@@ -191,12 +192,7 @@ const useDeleteAsset = (connectionId: string) => {
           },
         }),
       {
-        message: sprintf(
+        message: t("assetsTable.delete.confirmation", { name: asset.name }),
-          __(
-            "This will permanently delete \"%s\". This action cannot be undone.",
-          ),
-          asset.name,
-        ),
       },
     );
   };

apps/console/src/components/assets/ReadOnlyAssetsTable.tsx

@@ -19,8 +19,8 @@
 // SOFTWARE.
 
 import { faviconUrl, getAssetTypeVariant } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Avatar, Badge, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import type { usePaginationFragmentHookType } from "react-relay/relay-hooks/usePaginationFragment";
 import type { OperationType } from "relay-runtime";
 
@@ -46,17 +46,17 @@ type Props = {
 
 export function ReadOnlyAssetsTable(props: Props) {
   const { pagination, assets } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <SortableTable {...pagination} pageSize={10}>
       <Thead>
         <Tr>
-          <Th>{__("Name")}</Th>
+          <Th>{t("readOnlyAssetsTable.columns.name")}</Th>
-          <Th>{__("Type")}</Th>
+          <Th>{t("readOnlyAssetsTable.columns.type")}</Th>
-          <Th>{__("Amount")}</Th>
+          <Th>{t("readOnlyAssetsTable.columns.amount")}</Th>
-          <Th>{__("Owner")}</Th>
+          <Th>{t("readOnlyAssetsTable.columns.owner")}</Th>
-          <Th>{__("Third parties")}</Th>
+          <Th>{t("readOnlyAssetsTable.columns.thirdParties")}</Th>
         </Tr>
       </Thead>
       <Tbody>
@@ -70,7 +70,7 @@ export function ReadOnlyAssetsTable(props: Props) {
 
 function AssetRow({ entry }: { entry: AssetEntry }) {
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const thirdParties = entry.thirdParties?.edges.map(edge => edge.node) ?? [];
 
   return (
@@ -78,11 +78,13 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
       <Td>{entry.name}</Td>
       <Td>
         <Badge variant={getAssetTypeVariant(entry.assetType)}>
-          {entry.assetType === "PHYSICAL" ? __("Physical") : __("Virtual")}
+          {entry.assetType === "PHYSICAL"
+            ? t("readOnlyAssetsTable.assetTypes.physical")
+            : t("readOnlyAssetsTable.assetTypes.virtual")}
         </Badge>
       </Td>
       <Td>{entry.amount}</Td>
-      <Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
+      <Td>{entry.owner?.fullName ?? t("readOnlyAssetsTable.unassigned")}</Td>
       <Td>
         {thirdParties.length > 0
           ? (
@@ -110,7 +112,7 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
               </div>
             )
           : (
-              <span className="text-txt-secondary text-sm">{__("None")}</span>
+              <span className="text-txt-secondary text-sm">{t("readOnlyAssetsTable.none")}</span>
             )}
       </Td>
     </Tr>

apps/console/src/components/audits/LinkedAuditsCard.tsx

@@ -18,8 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { getAuditStateVariant, sprintf } from "@probo/helpers";
+import { getAuditStateVariant } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -37,6 +36,7 @@ import {
 } from "@probo/ui";
 import { clsx } from "clsx";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -78,7 +78,7 @@ type Props<Params> = {
 };
 
 export function LinkedAuditsCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [limit, setLimit] = useState<number | null>(4);
   const audits = useMemo(() => {
     return limit ? props.audits.slice(0, limit) : props.audits;
@@ -116,7 +116,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
     <Wrapper padded className="space-y-[10px]">
       {variant === "card" && (
         <div className="flex justify-between">
-          <div className="text-lg font-semibold">{__("Audits")}</div>
+          <div className="text-lg font-semibold">{t("linkedAuditsCard.title")}</div>
           {!props.readOnly && (
             <LinkedAuditsDialog
               disabled={props.disabled}
@@ -125,7 +125,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <Button variant="tertiary" icon={IconPlusLarge}>
-                {__("Link audit")}
+                {t("linkedAuditsCard.actions.link")}
               </Button>
             </LinkedAuditsDialog>
           )}
@@ -134,8 +134,8 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
       <Table className={clsx(variant === "card" && "bg-invert")}>
         <Thead>
           <Tr>
-            <Th>{__("Name")}</Th>
+            <Th>{t("linkedAuditsCard.columns.name")}</Th>
-            <Th>{__("State")}</Th>
+            <Th>{t("linkedAuditsCard.columns.state")}</Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -146,7 +146,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
                 colSpan={props.readOnly ? 2 : 3}
                 className="text-center text-txt-secondary"
               >
-                {__("No audits linked")}
+                {t("linkedAuditsCard.empty")}
               </Td>
             </Tr>
           )}
@@ -166,7 +166,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <TrButton colspan={3} icon={IconPlusLarge}>
-                {__("Link audit")}
+                {t("linkedAuditsCard.actions.link")}
               </TrButton>
             </LinkedAuditsDialog>
           )}
@@ -179,7 +179,9 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
           className="mt-3 mx-auto"
           icon={IconChevronDown}
         >
-          {sprintf(__("Show %s more"), props.audits.length - limit)}
+          {t("linkedAuditsCard.actions.showMore", {
+            count: props.audits.length - limit,
+          })}
         </Button>
       )}
     </Wrapper>
@@ -193,7 +195,7 @@ function AuditRow(props: {
 }) {
   const audit = useFragment(linkedAuditFragment, props.audit);
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr to={`/organizations/${organizationId}/audits/${audit.id}`}>
@@ -217,7 +219,7 @@ function AuditRow(props: {
             onClick={() => props.onClick(audit.id)}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedAuditsCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/audits/LinkedAuditsDialog.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { getAuditStateVariant } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -34,6 +33,7 @@ import {
   Spinner,
 } from "@probo/ui";
 import { type ReactNode, Suspense, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -98,16 +98,16 @@ type Props = {
 };
 
 export function LinkedAuditsDialog({ children, ...props }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
-    <Dialog trigger={children} title={__("Link audits")}>
+    <Dialog trigger={children} title={t("linkedAuditsDialog.title")}>
       <DialogContent>
         <Suspense fallback={<Spinner centered />}>
           <LinkedAuditsDialogContent {...props} />
         </Suspense>
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")} />
+      <DialogFooter exitLabel={t("linkedAuditsDialog.actions.close")} />
     </Dialog>
   );
 }
@@ -122,7 +122,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
       auditsFragment,
       query.organization as LinkedAuditsDialogFragment$key,
     );
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const audits = useMemo(
     () => data.audits?.edges?.map(edge => edge.node) ?? [],
@@ -143,7 +143,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
       <div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
         <Input
           icon={IconMagnifyingGlass}
-          placeholder={__("Search audits...")}
+          placeholder={t("linkedAuditsDialog.searchPlaceholder")}
           onValueChange={setSearch}
         />
       </div>
@@ -180,7 +180,7 @@ type RowProps = {
 };
 
 function AuditRow(props: RowProps) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const isLinked = props.linkedAudits.has(props.audit.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -209,7 +209,9 @@ function AuditRow(props: RowProps) {
         <span>
           <IconComponent size={16} />
           {" "}
-          {isLinked ? __("Unlink") : __("Link")}
+          {isLinked
+            ? t("linkedAuditsDialog.actions.unlink")
+            : t("linkedAuditsDialog.actions.link")}
         </span>
       </Button>
     </button>

apps/console/src/components/compliancePage/CompliancePageReferenceDialog.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { acceptImage } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dialog,
@@ -32,6 +31,7 @@ import {
   useDialogRef,
 } from "@probo/ui";
 import { forwardRef, type ReactNode, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
 import type { CompliancePageReferenceListItemFragment$data } from "#/__generated__/core/CompliancePageReferenceListItemFragment.graphql";
@@ -57,7 +57,7 @@ export type CompliancePageReferenceDialogRef = {
 
 export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceDialogRef, { children?: ReactNode }>(
   function CompliancePageReferenceDialog({ children }, ref) {
-    const { __ } = useTranslate();
+    const { t } = useTranslation();
     const dialogRef = useDialogRef();
     const [mode, setMode] = useState<"create" | "edit">("create");
     const [compliancePageId, setCompliancePageId] = useState<string>("");
@@ -182,7 +182,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
     };
 
     const isSubmitting = isCreating || isUpdating;
-    const title = mode === "create" ? __("Add Reference") : __("Edit Reference");
+    const title = mode === "create" ? t("trustCenterReferenceDialog.actions.add") : t("trustCenterReferenceDialog.actions.edit");
 
     return (
       <>
@@ -202,45 +202,45 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
             <DialogContent padded className="space-y-6">
               <Field
                 {...register("name")}
-                label={__("Reference Name")}
+                label={t("trustCenterReferenceDialog.fields.name.label")}
                 type="text"
                 required
                 error={errors.name?.message}
-                placeholder={__("Company or organization name")}
+                placeholder={t("trustCenterReferenceDialog.fields.name.placeholder")}
               />
 
-              <Field label={__("Description")} error={errors.description?.message}>
+              <Field label={t("trustCenterReferenceDialog.fields.description.label")} error={errors.description?.message}>
                 <Textarea
                   {...register("description")}
-                  placeholder={__("Brief description of the reference")}
+                  placeholder={t("trustCenterReferenceDialog.fields.description.placeholder")}
                   rows={3}
                 />
               </Field>
 
               <Field
                 {...register("websiteUrl")}
-                label={__("Website URL")}
+                label={t("trustCenterReferenceDialog.fields.websiteUrl.label")}
                 type="url"
                 required
                 error={errors.websiteUrl?.message}
-                placeholder={__("https://example.com")}
+                placeholder={t("trustCenterReferenceDialog.fields.websiteUrl.placeholder")}
               />
 
               {mode === "edit" && (
                 <Field
                   {...register("rank", { valueAsNumber: true })}
-                  label={__("Rank")}
+                  label={t("trustCenterReferenceDialog.fields.rank.label")}
                   type="number"
                   min={1}
                   error={errors.rank?.message}
-                  placeholder={__("Display order (1, 2, 3...)")}
+                  placeholder={t("trustCenterReferenceDialog.fields.rank.placeholder")}
-                  help={__("Lower numbers appear first")}
+                  help={t("trustCenterReferenceDialog.fields.rank.help")}
                 />
               )}
 
-              <Field label={__("Logo")}>
+              <Field label={t("trustCenterReferenceDialog.fields.logo.label")}>
                 <Dropzone
-                  description={__("Upload logo image (PNG, JPG, WEBP, SVG up to 5MB)")}
+                  description={t("trustCenterReferenceDialog.fields.logo.description")}
                   isUploading={isSubmitting}
                   onDrop={handleDrop}
                   accept={acceptImage}
@@ -249,7 +249,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
                 {uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
                     <p className="text-sm font-medium">
-                      {__("Selected file")}
+                      {t("trustCenterReferenceDialog.fields.logo.selectedFile")}
                       :
                     </p>
                     <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
@@ -258,14 +258,14 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
                 {mode === "edit" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
                     <p className="text-sm text-txt-secondary">
-                      {__("Current logo will be kept if no new file is uploaded")}
+                      {t("trustCenterReferenceDialog.fields.logo.keepCurrent")}
                     </p>
                   </div>
                 )}
                 {mode === "create" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-warning-subtle rounded-lg">
                     <p className="text-sm">
-                      {__("Logo is required for new references")}
+                      {t("trustCenterReferenceDialog.fields.logo.required")}
                     </p>
                   </div>
                 )}
@@ -278,7 +278,7 @@ export const CompliancePageReferenceDialog = forwardRef<CompliancePageReferenceD
                 disabled={isSubmitting || (mode === "create" && !uploadedFile)}
                 icon={isSubmitting ? Spinner : undefined}
               >
-                {mode === "create" ? __("Add Reference") : __("Update Reference")}
+                {mode === "create" ? t("trustCenterReferenceDialog.actions.add") : t("trustCenterReferenceDialog.actions.update")}
               </Button>
             </DialogFooter>
           </form>

apps/console/src/components/compliancePage/DeleteCompliancePageReferenceDialog.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dialog,
@@ -29,6 +27,7 @@ import {
   Spinner,
   useDialogRef,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 import { useDeleteCompliancePageReferenceMutation } from "#/pages/organizations/compliance-page/_lib/compliancePageReferenceMutations";
 
@@ -47,7 +46,7 @@ export function DeleteCompliancePageReferenceDialog({
   connectionId,
   onSuccess,
 }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const ref = useDialogRef();
 
   const [deleteReference, isDeleting] = useDeleteCompliancePageReferenceMutation();
@@ -70,18 +69,15 @@ export function DeleteCompliancePageReferenceDialog({
     <Dialog
       ref={ref}
       trigger={children}
-      title={__("Delete Reference")}
+      title={t("deleteTrustCenterReferenceDialog.title")}
       className="max-w-md"
     >
       <DialogContent padded>
         <p className="text-txt-secondary">
-          {sprintf(
+          {t("deleteTrustCenterReferenceDialog.description", { referenceName })}
-            __("Are you sure you want to delete the reference \"%s\"?"),
-            referenceName,
-          )}
         </p>
         <p className="text-txt-secondary mt-2">
-          {__("This action cannot be undone.")}
+          {t("deleteTrustCenterReferenceDialog.warning")}
         </p>
       </DialogContent>
 
@@ -92,7 +88,7 @@ export function DeleteCompliancePageReferenceDialog({
           disabled={isDeleting}
           icon={isDeleting ? Spinner : IconTrashCan}
         >
-          {isDeleting ? __("Deleting...") : __("Delete")}
+          {isDeleting ? t("deleteTrustCenterReferenceDialog.actions.deleting") : t("deleteTrustCenterReferenceDialog.actions.delete")}
         </Button>
       </DialogFooter>
     </Dialog>

apps/console/src/components/controls/LinkedControlsCard.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -31,6 +30,7 @@ import {
   TrButton,
 } from "@probo/ui";
 import type { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -84,7 +84,7 @@ type Props<Params> = {
  * Reusable component that displays a list of linked controls
  */
 export function LinkedControlsCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const controls = props.controls;
 
   const onDetach = (controlId: string) => {
@@ -118,8 +118,8 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
     <SortableTable refetch={props.refetch}>
       <Thead>
         <Tr>
-          <SortableTh field="SECTION_TITLE">{__("Reference")}</SortableTh>
+          <SortableTh field="SECTION_TITLE">{t("linkedControlsCard.columns.reference")}</SortableTh>
-          <Th>{__("Name")}</Th>
+          <Th>{t("linkedControlsCard.columns.name")}</Th>
           {!props.readOnly && <Th></Th>}
         </Tr>
       </Thead>
@@ -130,7 +130,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
               colSpan={props.readOnly ? 2 : 3}
               className="text-center text-txt-secondary"
             >
-              {__("No controls linked")}
+              {t("linkedControlsCard.empty")}
             </Td>
           </Tr>
         )}
@@ -151,7 +151,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
             onLink={onAttach}
             onUnlink={onDetach}
           >
-            <TrButton colspan={3}>{__("Link control")}</TrButton>
+            <TrButton colspan={3}>{t("linkedControlsCard.actions.link")}</TrButton>
           </LinkedControlsDialog>
         )}
       </Tbody>
@@ -167,7 +167,7 @@ function ControlRow(props: {
 }) {
   const control = useFragment(linkedControlFragment, props.control);
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr
@@ -188,7 +188,7 @@ function ControlRow(props: {
             onClick={() => props.onClick(control.id)}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedControlsCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/controls/LinkedControlsDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -40,6 +39,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 import { useDebounceCallback } from "usehooks-ts";
@@ -107,7 +107,7 @@ type Props = {
 type SearchRef = RefObject<{ search: (v: string) => void } | null>;
 
 export function LinkedControlsDialog(props: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const searchRef: SearchRef = useRef(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const [minHeight, setMinHeight] = useState(0);
@@ -116,12 +116,12 @@ export function LinkedControlsDialog(props: Props) {
     searchRef.current?.search(v);
   };
   return (
-    <Dialog trigger={props.children} title={__("Link controls")}>
+    <Dialog trigger={props.children} title={t("linkedControlsDialog.title")}>
       <DialogContent>
         <div className="flex items-center gap-2 sticky top-0 py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
           <Input
             icon={IconMagnifyingGlass}
-            placeholder={__("Search controls...")}
+            placeholder={t("linkedControlsDialog.searchPlaceholder")}
             onValueChange={onSearch}
           />
         </div>
@@ -202,7 +202,7 @@ function ControlRow(
     controlIds: Set<string>;
   } & Props,
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const isLinked = props.controlIds.has(props.control.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
   const IconComponent = isLinked ? IconTrashCan : IconPlusLarge;
@@ -225,7 +225,9 @@ function ControlRow(
         <span>
           <IconComponent size={16} />
           {" "}
-          {isLinked ? __("Unlink") : __("Link")}
+          {isLinked
+            ? t("linkedControlsDialog.actions.unlink")
+            : t("linkedControlsDialog.actions.link")}
         </span>
       </Button>
     </button>

apps/console/src/components/documents/BulkExportDialog.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Checkbox,
@@ -31,6 +29,7 @@ import {
   useDialogRef,
 } from "@probo/ui";
 import { forwardRef, type ReactNode, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
 import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -69,7 +68,7 @@ export type BulkExportDialogRef = {
 
 export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
   ({ children, onExport, isLoading = false, defaultEmail, selectedCount }, ref) => {
-    const { __ } = useTranslate();
+    const { t } = useTranslation();
     const dialogRef = useDialogRef();
 
     const { register, handleSubmit, formState, watch, setValue } = useFormWithSchema(
@@ -106,7 +105,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
         <Dialog
           className="max-w-md"
           ref={dialogRef}
-          title={sprintf(__("Export %s Documents"), selectedCount)}
+          title={t("bulkExportDialog.title", { count: selectedCount })}
         >
           <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
@@ -118,10 +117,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
-                      {__("Include signatures")}
+                      {t("bulkExportDialog.includeSignatures.label")}
                     </label>
                     <p className="text-xs text-txt-secondary mt-1">
-                      {__("Show signature information and approval details in the PDFs")}
+                      {t("bulkExportDialog.includeSignatures.description")}
                     </p>
                   </div>
                 </div>
@@ -133,10 +132,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
-                      {__("Add watermark")}
+                      {t("bulkExportDialog.watermark.label")}
                     </label>
                     <p className="text-xs text-txt-secondary mt-1">
-                      {__("Add confidential watermark with email and timestamp to all PDFs")}
+                      {t("bulkExportDialog.watermark.description")}
                     </p>
                   </div>
                 </div>
@@ -144,10 +143,10 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                 {watchWatermark && (
                   <div className="ml-6">
                     <Field
-                      label={__("Watermark email")}
+                      label={t("bulkExportDialog.watermark.emailLabel")}
                       {...register("watermarkEmail")}
                       type="email"
-                      placeholder={__("Enter email address")}
+                      placeholder={t("bulkExportDialog.watermark.emailPlaceholder")}
                       error={formState.errors.watermarkEmail?.message}
                       autoComplete="off"
                       required
@@ -158,7 +157,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
 
               <div className="bg-level-1 p-3 rounded-lg border border-border-subtle">
                 <p className="text-sm text-txt-secondary">
-                  {__("The documents will be exported as individual PDFs in a ZIP file. You will receive an email when the export is ready for download.")}
+                  {t("bulkExportDialog.notice")}
                 </p>
               </div>
             </DialogContent>
@@ -171,11 +170,11 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                   ? (
                       <>
                         <Spinner size={16} />
-                        {__("Exporting...")}
+                        {t("bulkExportDialog.actions.exporting")}
                       </>
                     )
                   : (
-                      __("Export Documents")
+                      t("bulkExportDialog.actions.export")
                     )}
               </Button>
             </DialogFooter>

apps/console/src/components/documents/LinkedDocumentsCard.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -38,6 +36,7 @@ import {
 } from "@probo/ui";
 import { clsx } from "clsx";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -92,7 +91,7 @@ type Props<Params> = {
  * Reusable component that displays a list of linked documents
  */
 export function LinkedDocumentsCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [limit, setLimit] = useState<number | null>(4);
   const documents = useMemo(() => {
     return limit ? props.documents.slice(0, limit) : props.documents;
@@ -130,7 +129,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
     <Wrapper padded className="space-y-[10px]">
       {variant === "card" && (
         <div className="flex justify-between">
-          <div className="text-lg font-semibold">{__("Documents")}</div>
+          <div className="text-lg font-semibold">{t("linkedDocumentsCard.title")}</div>
           {!props.readOnly && (
             <LinkedDocumentDialog
               connectionId={props.connectionId}
@@ -140,7 +139,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <Button variant="tertiary" icon={IconPlusLarge}>
-                {__("Link document")}
+                {t("linkedDocumentsCard.actions.link")}
               </Button>
             </LinkedDocumentDialog>
           )}
@@ -149,9 +148,9 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
       <Table className={clsx(variant === "card" && "bg-invert")}>
         <Thead>
           <Tr>
-            <Th>{__("Name")}</Th>
+            <Th>{t("linkedDocumentsCard.columns.name")}</Th>
-            <Th>{__("Type")}</Th>
+            <Th>{t("linkedDocumentsCard.columns.type")}</Th>
-            <Th>{__("State")}</Th>
+            <Th>{t("linkedDocumentsCard.columns.state")}</Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -162,7 +161,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
                 colSpan={props.readOnly ? 3 : 4}
                 className="text-center text-txt-secondary"
               >
-                {__("No documents linked")}
+                {t("linkedDocumentsCard.empty")}
               </Td>
             </Tr>
           )}
@@ -183,7 +182,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <TrButton colspan={4} icon={IconPlusLarge}>
-                {__("Link document")}
+                {t("linkedDocumentsCard.actions.link")}
               </TrButton>
             </LinkedDocumentDialog>
           )}
@@ -196,7 +195,9 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
           className="mt-3 mx-auto"
           icon={IconChevronDown}
         >
-          {sprintf(__("Show %s more"), props.documents.length - limit)}
+          {t("linkedDocumentsCard.actions.showMore", {
+            count: props.documents.length - limit,
+          })}
         </Button>
       )}
     </Wrapper>
@@ -210,7 +211,7 @@ function DocumentRow(props: {
 }) {
   const document = useFragment(linkedDocumentFragment, props.document);
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr to={`/organizations/${organizationId}/documents/${document.id}`}>
@@ -239,7 +240,7 @@ function DocumentRow(props: {
             onClick={() => props.onClick(document.id)}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedDocumentsCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/documents/LinkedDocumentsDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dialog,
@@ -33,6 +32,7 @@ import {
   Spinner,
 } from "@probo/ui";
 import { type ReactNode, Suspense, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -101,16 +101,16 @@ type Props = {
 };
 
 export function LinkedDocumentDialog({ children, ...props }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
-    <Dialog trigger={children} title={__("Link documents")}>
+    <Dialog trigger={children} title={t("linkedDocumentsDialog.title")}>
       <DialogContent>
         <Suspense fallback={<Spinner centered />}>
           <LinkedDocumentsDialogContent {...props} />
         </Suspense>
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")} />
+      <DialogFooter exitLabel={t("linkedDocumentsDialog.actions.close")} />
     </Dialog>
   );
 }
@@ -129,7 +129,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
       documentsFragment,
       query.organization as LinkedDocumentsDialogFragment$key,
     );
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const documents = useMemo(
     () => data.documents?.edges?.map(edge => edge.node) ?? [],
@@ -150,7 +150,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
       <div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
         <Input
           icon={IconMagnifyingGlass}
-          placeholder={__("Search documents...")}
+          placeholder={t("linkedDocumentsDialog.searchPlaceholder")}
           onValueChange={setSearch}
         />
       </div>
@@ -187,7 +187,7 @@ type RowProps = {
 };
 
 function DocumentRow(props: RowProps) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const isLinked = props.linkedDocuments.has(props.document.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -209,7 +209,9 @@ function DocumentRow(props: RowProps) {
         <span>
           <IconComponent size={16} />
           {" "}
-          {isLinked ? __("Unlink") : __("Link")}
+          {isLinked
+            ? t("linkedDocumentsDialog.actions.unlink")
+            : t("linkedDocumentsDialog.actions.link")}
         </span>
       </Button>
     </button>

apps/console/src/components/documents/PdfDownloadDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Checkbox,
@@ -30,6 +29,7 @@ import {
   useDialogRef,
 } from "@probo/ui";
 import { forwardRef, type ReactNode, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
 import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -60,7 +60,7 @@ export type PdfDownloadDialogRef = {
 
 export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
   ({ children, onDownload, isLoading = false, defaultEmail }, ref) => {
-    const { __ } = useTranslate();
+    const { t } = useTranslation();
     const dialogRef = useDialogRef();
 
     const { register, handleSubmit, formState, watch, setValue }
@@ -95,7 +95,7 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
         <Dialog
           className="max-w-md"
           ref={dialogRef}
-          title={__("Download PDF Options")}
+          title={t("pdfDownloadDialog.title")}
         >
           <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
@@ -107,12 +107,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
-                      {__("Include signatures")}
+                      {t("pdfDownloadDialog.includeSignatures.label")}
                     </label>
                     <p className="text-xs text-txt-secondary mt-1">
-                      {__(
+                      {t("pdfDownloadDialog.includeSignatures.description")}
-                        "Show signature information and approval details in the PDF",
-                      )}
                     </p>
                   </div>
                 </div>
@@ -124,12 +122,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
-                      {__("Add watermark")}
+                      {t("pdfDownloadDialog.watermark.label")}
                     </label>
                     <p className="text-xs text-txt-secondary mt-1">
-                      {__(
+                      {t("pdfDownloadDialog.watermark.description")}
-                        "Add confidential watermark with email and timestamp",
-                      )}
                     </p>
                   </div>
                 </div>
@@ -137,10 +133,10 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                 {watchWatermark && (
                   <div className="ml-6">
                     <Field
-                      label={__("Watermark email")}
+                      label={t("pdfDownloadDialog.watermark.emailLabel")}
                       {...register("watermarkEmail")}
                       type="email"
-                      placeholder={__("Enter email address")}
+                      placeholder={t("pdfDownloadDialog.watermark.emailPlaceholder")}
                       error={formState.errors.watermarkEmail?.message}
                       autoComplete="off"
                       required
@@ -155,11 +151,11 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                   ? (
                       <>
                         <Spinner size={16} />
-                        {__("Downloading...")}
+                        {t("pdfDownloadDialog.actions.downloading")}
                       </>
                     )
                   : (
-                      __("Download PDF")
+                      t("pdfDownloadDialog.actions.download")
                     )}
               </Button>
             </DialogFooter>

apps/console/src/components/form/AuditSelectField.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { getAuditStateLabel, getAuditStateVariant } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Badge, Field, Option, Select } from "@probo/ui";
 import { type ComponentProps, Suspense } from "react";
 import {
@@ -28,6 +27,7 @@ import {
   type FieldValues,
   type Path,
 } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { graphql, useLazyLoadQuery } from "react-relay";
 
 import type { AuditSelectFieldQuery } from "#/__generated__/core/AuditSelectFieldQuery.graphql";
@@ -86,7 +86,7 @@ export function AuditSelectField<T extends FieldValues = FieldValues>({
 function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
   props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled">,
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { name, organizationId, control } = props;
   const data = useLazyLoadQuery<AuditSelectFieldQuery>(
     auditsQuery,
@@ -109,7 +109,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           disabled={props.disabled}
           id={name}
           variant="editor"
-          placeholder={__("Select an audit")}
+          placeholder={t("auditSelectField.placeholder")}
           onValueChange={value =>
             field.onChange(value === NONE_VALUE ? "" : value)}
           key={audits?.length.toString() ?? "0"}
@@ -118,7 +118,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           value={field.value || NONE_VALUE}
         >
           <Option value={NONE_VALUE}>
-            <span className="text-txt-tertiary">{__("None")}</span>
+            <span className="text-txt-tertiary">{t("auditSelectField.none")}</span>
           </Option>
           {audits?.map(audit => (
             <Option key={audit.id} value={audit.id}>
@@ -130,7 +130,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
                 </span>
                 <div className="ml-3">
                   <Badge variant={getAuditStateVariant(audit.state)}>
-                    {getAuditStateLabel(__, audit.state)}
+                    {getAuditStateLabel(t, audit.state)}
                   </Badge>
                 </div>
               </div>

apps/console/src/components/form/ControlMaturityLevelOptions.tsx

@@ -18,21 +18,18 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import {
+import { controlMaturityLevels } from "@probo/helpers";
-  controlMaturityLevels,
-  getControlMaturityLevelLabel,
-} from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Option } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 export function ControlMaturityLevelOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <>
       {controlMaturityLevels.map(level => (
         <Option key={level} value={level}>
-          {getControlMaturityLevelLabel(__, level)}
+          {t(`controlMaturityLevelOptions.levels.${level}`)}
         </Option>
       ))}
     </>

apps/console/src/components/form/CountriesField.tsx

@@ -18,12 +18,17 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { countries, type CountryCode, getCountryName, getCountryOptions } from "@probo/helpers";
+import { countries, type CountryCode, getCountryName } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Badge, IconCrossLargeX, Input } from "@probo/ui";
 import { clsx } from "clsx";
 import { useEffect, useState } from "react";
-import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
+import {
+  type Control,
+  Controller,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 type Props<T extends FieldValues = FieldValues> = {
   control: Control<T>;
@@ -31,7 +36,11 @@ type Props<T extends FieldValues = FieldValues> = {
   disabled?: boolean;
 };
 
-export function CountriesField<T extends FieldValues = FieldValues>({ control, name, disabled }: Props<T>) {
+export function CountriesField<T extends FieldValues = FieldValues>({
+  control,
+  name,
+  disabled,
+}: Props<T>) {
   return (
     <Controller
       control={control}
@@ -54,7 +63,7 @@ type CountriesFieldInputProps = {
 };
 
 function CountriesFieldInput(props: CountriesFieldInputProps) {
-  const { __ } = useTranslate();
+  const { i18n } = useTranslation();
   const [animateBadge, setAnimateBadge] = useState(false);
 
   const addCountry = (code: string) => {
@@ -85,7 +94,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
                     && "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
                   )}
                 >
-                  {getCountryName(__, countryCode as CountryCode)}
+                  {getCountryName(i18n.language, countryCode as CountryCode)}
                   <div className="w-0 overflow-hidden group-hover:w-4 duration-200">
                     <IconCrossLargeX size={12} />
                   </div>
@@ -113,10 +122,13 @@ type CountryInputProps = {
 };
 
 function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
-  const { __ } = useTranslate();
+  const { t, i18n } = useTranslation();
   const [search, setSearch] = useState("");
   const [isOpen, setIsOpen] = useState(false);
-  const countryOptions = getCountryOptions(__);
+  const countryOptions = availableCountries.map(code => ({
+    value: code,
+    label: getCountryName(i18n.language, code),
+  }));
 
   useEffect(() => {
     document.body.style.overflow = isOpen ? "hidden" : "";
@@ -126,7 +138,9 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
   }, [isOpen]);
 
   const filteredCountries = countryOptions
-    .filter((option: { value: string; label: string }) => availableCountries.includes(option.value as CountryCode))
+    .filter((option: { value: string; label: string }) =>
+      availableCountries.includes(option.value as CountryCode),
+    )
     .filter((option: { value: string; label: string }) =>
       option.label.toLowerCase().includes(search.toLowerCase()),
     );
@@ -145,7 +159,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
             value={search}
             onChange={e => setSearch(e.target.value)}
             onFocus={() => setIsOpen(true)}
-            placeholder={__("Search and add countries...")}
+            placeholder={t("countriesField.searchPlaceholder")}
             className="w-full pr-8"
           />
           <button
@@ -186,10 +200,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
       )}
 
       {isOpen && (
-        <div
+        <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
-          className="fixed inset-0 z-40"
-          onClick={() => setIsOpen(false)}
-        />
       )}
     </div>
   );

apps/console/src/components/form/DocumentClassificationOptions.tsx

@@ -18,21 +18,18 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import {
+import { documentClassifications } from "@probo/helpers";
-  documentClassifications,
-  getDocumentClassificationLabel,
-} from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Option } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 export function DocumentClassificationOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <>
       {documentClassifications.map(classification => (
         <Option key={classification} value={classification}>
-          {getDocumentClassificationLabel(__, classification)}
+          {t(`documentClassificationOptions.classifications.${classification}`)}
         </Option>
       ))}
     </>

apps/console/src/components/form/DocumentTypeOptions.tsx

@@ -18,18 +18,18 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { documentTypes, getDocumentTypeLabel } from "@probo/helpers";
+import { documentTypes } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Option } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 export function DocumentTypeOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <>
       {documentTypes.map(type => (
         <Option key={type} value={type}>
-          {getDocumentTypeLabel(__, type)}
+          {t(`documentTypeOptions.types.${type}`)}
         </Option>
       ))}
     </>

apps/console/src/components/form/EmailsField.tsx

@@ -18,10 +18,17 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, IconPlusLarge, IconTrashCan, Input, Label } from "@probo/ui";
-import type { ArrayPath, Control, FieldValue, FieldValues, Path, UseFormRegister } from "react-hook-form";
+import type {
+  ArrayPath,
+  Control,
+  FieldValue,
+  FieldValues,
+  Path,
+  UseFormRegister,
+} from "react-hook-form";
 import { useFieldArray } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   disabled: boolean;
@@ -32,10 +39,12 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 /**
  * A field to handle multiple emails
  */
-export function EmailsField<
+export function EmailsField<TFieldValues extends FieldValues = FieldValues>({
-  TFieldValues extends FieldValues = FieldValues,
+  control,
->({ control, register, disabled }: Props<TFieldValues>) {
+  register,
-  const { __ } = useTranslate();
+  disabled,
+}: Props<TFieldValues>) {
+  const { t } = useTranslation();
   const { fields, append, remove } = useFieldArray({
     name: "additionalEmailAddresses" as ArrayPath<TFieldValues>,
     control,
@@ -43,12 +52,14 @@ export function EmailsField<
 
   return (
     <fieldset className="space-y-2">
-      {fields.length > 0 && <Label>{__("Additional emails")}</Label>}
+      {fields.length > 0 && <Label>{t("emailsField.additionalEmails")}</Label>}
       {fields.map((field, index) => (
         <div key={field.id} className="flex items-stretch">
           <Input
             className="w-full"
-            {...register(`additionalEmailAddresses.${index}` as Path<TFieldValues>)}
+            {...register(
+              `additionalEmailAddresses.${index}` as Path<TFieldValues>,
+            )}
             type="email"
             disabled={disabled}
           />
@@ -67,7 +78,7 @@ export function EmailsField<
         onClick={() => append("" as FieldValue<TFieldValues>)}
         disabled={disabled}
       >
-        {__("Add email")}
+        {t("emailsField.actions.add")}
       </Button>
     </fieldset>
   );

apps/console/src/components/form/MeasureSelectField.tsx

@@ -18,10 +18,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Combobox, ComboboxItem, Field } from "@probo/ui";
 import { type ComponentProps, Suspense, useMemo, useState } from "react";
-import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
+import {
+  type Control,
+  Controller,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import { usePaginatedMeasures } from "#/hooks/graph/usePaginatedMeasures";
 
@@ -38,7 +43,9 @@ type Props<
   optional?: boolean;
 } & ComponentProps<typeof Field>;
 
-export function MeasureSelectField<TFieldValues extends FieldValues = FieldValues>({
+export function MeasureSelectField<
+  TFieldValues extends FieldValues = FieldValues,
+>({
   organizationId,
   control,
   disabled,
@@ -48,7 +55,11 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
   return (
     <Field {...props}>
       <Suspense
-        fallback={<Combobox onSearch={() => {}} placeholder="Loading..." disabled><div /></Combobox>}
+        fallback={(
+          <Combobox onSearch={() => {}} placeholder="Loading..." disabled>
+            <div />
+          </Combobox>
+        )}
       >
         <MeasureSelectWithQuery<TFieldValues>
           organizationId={organizationId}
@@ -63,9 +74,12 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
 }
 
 function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
-  props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">,
+  props: Pick<
+    Props<TFieldValues>,
+    "organizationId" | "control" | "name" | "disabled" | "optional"
+  >,
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { name, organizationId, control, disabled, optional } = props;
   const { data } = usePaginatedMeasures(organizationId);
   const [search, setSearch] = useState("");
@@ -91,12 +105,14 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
         control={control}
         name={name}
         render={({ field }) => {
-          const selectedMeasure = field.value ? allMeasures?.find(m => m.id === field.value) : null;
+          const selectedMeasure = field.value
+            ? allMeasures?.find(m => m.id === field.value)
+            : null;
 
           return (
             <Combobox
               id={name}
-              placeholder={__("Select a measure")}
+              placeholder={t("measureSelectField.placeholder")}
               value={selectedMeasure ? selectedMeasure.name : search}
               onSearch={setSearch}
               disabled={disabled}
@@ -108,7 +124,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
                     setSearch("");
                   }}
                 >
-                  {__("None")}
+                  {t("measureSelectField.none")}
                 </ComboboxItem>
               )}
               {measures?.map(m => (
@@ -123,7 +139,9 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
                     <div className="max-w-75 ellipsis overflow-hidden whitespace-pre-wrap">
                       {m.name}
                     </div>
-                    <div className="text-sm text-txt-secondary">{m.category}</div>
+                    <div className="text-sm text-txt-secondary">
+                      {m.category}
+                    </div>
                   </div>
                 </ComboboxItem>
               ))}

apps/console/src/components/form/PeopleMultiSelectField.tsx

@@ -18,10 +18,22 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
+import {
-import { Badge, Button, Field, IconCrossLargeX, Option, Select } from "@probo/ui";
+  Badge,
+  Button,
+  Field,
+  IconCrossLargeX,
+  Option,
+  Select,
+} from "@probo/ui";
 import { type ComponentProps, Suspense, useState } from "react";
-import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
+import {
+  type Control,
+  Controller,
+  type FieldValues,
+  type Path,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
 import { usePeople } from "#/hooks/graph/PeopleGraph";
 
@@ -67,10 +79,24 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople" | "placeholder">,
+  props: Pick<
+    Props<T>,
+    | "organizationId"
+    | "control"
+    | "name"
+    | "disabled"
+    | "selectedPeople"
+    | "placeholder"
+  >,
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
-  const { name, organizationId, control, selectedPeople = [], placeholder } = props;
+  const {
+    name,
+    organizationId,
+    control,
+    selectedPeople = [],
+    placeholder,
+  } = props;
   const people = usePeople(organizationId, { contractEnded: false });
   const [isOpen, setIsOpen] = useState(false);
 
@@ -91,10 +117,16 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
         control={control}
         name={name as Path<T>}
         render={({ field }) => {
-          const selectedPeopleIds = (Array.isArray(field.value) ? field.value : []) as string[];
+          const selectedPeopleIds = (
+            Array.isArray(field.value) ? field.value : []
+          ) as string[];
 
-          const selectedPeople = allPeople.filter(p => selectedPeopleIds.includes(p.id));
+          const selectedPeople = allPeople.filter(p =>
-          const availablePeople = allPeople.filter(p => !selectedPeopleIds.includes(p.id));
+            selectedPeopleIds.includes(p.id),
+          );
+          const availablePeople = allPeople.filter(
+            p => !selectedPeopleIds.includes(p.id),
+          );
 
           const handleAddPerson = (personId: string) => {
             const newValue = [...selectedPeopleIds, personId];
@@ -103,7 +135,9 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
           };
 
           const handleRemovePerson = (personId: string) => {
-            const newValue = selectedPeopleIds.filter((id: string) => id !== personId);
+            const newValue = selectedPeopleIds.filter(
+              (id: string) => id !== personId,
+            );
             field.onChange(newValue);
           };
 
@@ -114,7 +148,9 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   disabled={props.disabled}
                   id={name}
                   variant="editor"
-                  placeholder={placeholder ?? __("Add people...")}
+                  placeholder={
+                    placeholder ?? t("peopleMultiSelectField.addPlaceholder")
+                  }
                   onValueChange={handleAddPerson}
                   key={`${selectedPeopleIds.length}-${people.length}`}
                   className="w-full"
@@ -123,7 +159,11 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   onOpenChange={setIsOpen}
                 >
                   {availablePeople.map(person => (
-                    <Option key={person.id} value={person.id} className="flex gap-2">
+                    <Option
+                      key={person.id}
+                      value={person.id}
+                      className="flex gap-2"
+                    >
                       <div className="flex flex-col">
                         <span>{person.fullName}</span>
                         {person.emailAddress && (
@@ -140,7 +180,11 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
               {selectedPeople.length > 0 && (
                 <div className="flex flex-wrap gap-2">
                   {selectedPeople.map(person => (
-                    <Badge key={person.id} variant="neutral" className="flex items-center gap-2">
+                    <Badge
+                      key={person.id}
+                      variant="neutral"
+                      className="flex items-center gap-2"
+                    >
                       <span>{person.fullName}</span>
                       {!props.disabled && (
                         <Button
@@ -158,7 +202,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
               {selectedPeople.length === 0 && availablePeople.length === 0 && (
                 <div className="text-sm text-txt-secondary py-2">
-                  {__("No people available")}
+                  {t("peopleMultiSelectField.empty")}
                 </div>
               )}
             </div>

apps/console/src/components/form/PeopleSelectField.tsx

@@ -18,12 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Avatar, Field, Option, Select } from "@probo/ui";
 import { type ComponentProps, Suspense } from "react";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 
 import { usePeople } from "#/hooks/graph/PeopleGraph";
+import { useTranslation } from "react-i18next";
 
 type Props<
   TFieldValues extends FieldValues = FieldValues,
@@ -42,7 +42,7 @@ export function PeopleSelectField<TFieldValues extends FieldValues = FieldValues
   control,
   ...props
 }: Props<TFieldValues>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Field {...props}>
@@ -51,7 +51,7 @@ export function PeopleSelectField<TFieldValues extends FieldValues = FieldValues
           <Select
             variant="editor"
             loading
-            placeholder={__("Select an owner")}
+            placeholder={t("peopleSelectField.placeholder")}
             className="w-full"
           />
         )}
@@ -74,7 +74,7 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
     "organizationId" | "control" | "name" | "disabled" | "optional"
   >,
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { name, organizationId, control } = props;
   const people = usePeople(organizationId, { contractEnded: false });
 
@@ -87,14 +87,16 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
           disabled={props.disabled}
           id={name}
           variant="editor"
-          placeholder={__("Select an owner")}
+          placeholder={t("peopleSelectField.placeholder")}
           onValueChange={value =>
             field.onChange(value === "__NONE__" ? null : value)}
           {...field}
           className="w-full"
           value={field.value ?? (props.optional ? "__NONE__" : "")}
         >
-          {props.optional && <Option value="__NONE__">{__("None")}</Option>}
+          {props.optional && (
+            <Option value="__NONE__">{t("peopleSelectField.none")}</Option>
+          )}
           {people?.map(p => (
             <Option key={p.id} value={p.id} className="flex gap-2">
               <Avatar name={p.fullName} />

apps/console/src/components/form/ProcessingActivityEnumOptions.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Option } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 import type {
   ProcessingActivityDataProtectionImpactAssessment,
@@ -28,16 +28,27 @@ import type {
   ProcessingActivityTransferImpactAssessment,
 } from "#/__generated__/core/ProcessingActivityGraphCreateMutation.graphql";
 
+type Translator = (key: string) => string;
+
 export function SpecialOrCriminalDataOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: ProcessingActivitySpecialOrCriminalDatum;
     label: string;
   }> = [
-    { value: "YES", label: __("Yes") },
+    {
-    { value: "NO", label: __("No") },
+      value: "YES",
-    { value: "POSSIBLE", label: __("Possible") },
+      label: t("processingActivityEnumOptions.specialOrCriminalData.yes"),
+    },
+    {
+      value: "NO",
+      label: t("processingActivityEnumOptions.specialOrCriminalData.no"),
+    },
+    {
+      value: "POSSIBLE",
+      label: t("processingActivityEnumOptions.specialOrCriminalData.possible"),
+    },
   ];
 
   return (
@@ -52,18 +63,38 @@ export function SpecialOrCriminalDataOptions() {
 }
 
 export function LawfulBasisOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: ProcessingActivityLawfulBasis;
     label: string;
   }> = [
-    { value: "CONSENT", label: __("Consent") },
+    {
-    { value: "CONTRACTUAL_NECESSITY", label: __("Contractual Necessity") },
+      value: "CONSENT",
-    { value: "LEGAL_OBLIGATION", label: __("Legal Obligation") },
+      label: t("processingActivityEnumOptions.lawfulBasis.consent"),
-    { value: "LEGITIMATE_INTEREST", label: __("Legitimate Interest") },
+    },
-    { value: "PUBLIC_TASK", label: __("Public Task") },
+    {
-    { value: "VITAL_INTERESTS", label: __("Vital Interests") },
+      value: "CONTRACTUAL_NECESSITY",
+      label: t(
+        "processingActivityEnumOptions.lawfulBasis.contractualNecessity",
+      ),
+    },
+    {
+      value: "LEGAL_OBLIGATION",
+      label: t("processingActivityEnumOptions.lawfulBasis.legalObligation"),
+    },
+    {
+      value: "LEGITIMATE_INTEREST",
+      label: t("processingActivityEnumOptions.lawfulBasis.legitimateInterest"),
+    },
+    {
+      value: "PUBLIC_TASK",
+      label: t("processingActivityEnumOptions.lawfulBasis.publicTask"),
+    },
+    {
+      value: "VITAL_INTERESTS",
+      label: t("processingActivityEnumOptions.lawfulBasis.vitalInterests"),
+    },
   ];
 
   return (
@@ -79,17 +110,23 @@ export function LawfulBasisOptions() {
 
 export function getLawfulBasisLabel(
   value: ProcessingActivityLawfulBasis | null | undefined,
-  __: (key: string) => string,
+  t: Translator,
 ): string {
   if (!value) return "-";
 
   const labels = {
-    CONSENT: __("Consent"),
+    CONSENT:
-    CONTRACTUAL_NECESSITY: __("Contractual Necessity"),
+      t("processingActivityEnumOptions.lawfulBasis.consent"),
-    LEGAL_OBLIGATION: __("Legal Obligation"),
+    CONTRACTUAL_NECESSITY:
-    LEGITIMATE_INTEREST: __("Legitimate Interest"),
+      t("processingActivityEnumOptions.lawfulBasis.contractualNecessity"),
-    PUBLIC_TASK: __("Public Task"),
+    LEGAL_OBLIGATION:
-    VITAL_INTERESTS: __("Vital Interests"),
+      t("processingActivityEnumOptions.lawfulBasis.legalObligation"),
+    LEGITIMATE_INTEREST:
+      t("processingActivityEnumOptions.lawfulBasis.legitimateInterest"),
+    PUBLIC_TASK:
+      t("processingActivityEnumOptions.lawfulBasis.publicTask"),
+    VITAL_INTERESTS:
+      t("processingActivityEnumOptions.lawfulBasis.vitalInterests"),
   };
 
   return labels[value] || value;
@@ -97,38 +134,63 @@ export function getLawfulBasisLabel(
 
 export function getResidualRiskLabel(
   value: "LOW" | "MEDIUM" | "HIGH" | null | undefined,
-  __: (key: string) => string,
+  t: Translator,
 ): string {
   if (!value) return "-";
 
   const labels = {
-    LOW: __("Low"),
+    LOW: t("processingActivityEnumOptions.residualRisk.low") || "Low",
-    MEDIUM: __("Medium"),
+    MEDIUM: t("processingActivityEnumOptions.residualRisk.medium") || "Medium",
-    HIGH: __("High"),
+    HIGH: t("processingActivityEnumOptions.residualRisk.high") || "High",
   };
 
   return labels[value] || value;
 }
 
 export function TransferSafeguardsOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: string;
     label: string;
   }> = [
-    { value: "__NONE__", label: __("None") },
+    {
+      value: "__NONE__",
+      label: t("processingActivityEnumOptions.transferSafeguards.none"),
+    },
     {
       value: "STANDARD_CONTRACTUAL_CLAUSES",
-      label: __("Standard Contractual Clauses"),
+      label: t(
+        "processingActivityEnumOptions.transferSafeguards.standardContractualClauses",
+      ),
+    },
+    {
+      value: "BINDING_CORPORATE_RULES",
+      label: t(
+        "processingActivityEnumOptions.transferSafeguards.bindingCorporateRules",
+      ),
+    },
+    {
+      value: "ADEQUACY_DECISION",
+      label: t(
+        "processingActivityEnumOptions.transferSafeguards.adequacyDecision",
+      ),
+    },
+    {
+      value: "DEROGATIONS",
+      label: t("processingActivityEnumOptions.transferSafeguards.derogations"),
+    },
+    {
+      value: "CODES_OF_CONDUCT",
+      label: t(
+        "processingActivityEnumOptions.transferSafeguards.codesOfConduct",
+      ),
     },
-    { value: "BINDING_CORPORATE_RULES", label: __("Binding Corporate Rules") },
-    { value: "ADEQUACY_DECISION", label: __("Adequacy Decision") },
-    { value: "DEROGATIONS", label: __("Derogations") },
-    { value: "CODES_OF_CONDUCT", label: __("Codes of Conduct") },
     {
       value: "CERTIFICATION_MECHANISMS",
-      label: __("Certification Mechanisms"),
+      label: t(
+        "processingActivityEnumOptions.transferSafeguards.certificationMechanisms",
+      ),
     },
   ];
 
@@ -144,14 +206,24 @@ export function TransferSafeguardsOptions() {
 }
 
 export function DataProtectionImpactAssessmentOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: ProcessingActivityDataProtectionImpactAssessment;
     label: string;
   }> = [
-    { value: "NEEDED", label: __("Needed") },
+    {
-    { value: "NOT_NEEDED", label: __("Not Needed") },
+      value: "NEEDED",
+      label: t(
+        "processingActivityEnumOptions.dataProtectionImpactAssessment.needed",
+      ),
+    },
+    {
+      value: "NOT_NEEDED",
+      label: t(
+        "processingActivityEnumOptions.dataProtectionImpactAssessment.notNeeded",
+      ),
+    },
   ];
 
   return (
@@ -166,14 +238,22 @@ export function DataProtectionImpactAssessmentOptions() {
 }
 
 export function TransferImpactAssessmentOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: ProcessingActivityTransferImpactAssessment;
     label: string;
   }> = [
-    { value: "NEEDED", label: __("Needed") },
+    {
-    { value: "NOT_NEEDED", label: __("Not Needed") },
+      value: "NEEDED",
+      label: t("processingActivityEnumOptions.transferImpactAssessment.needed"),
+    },
+    {
+      value: "NOT_NEEDED",
+      label: t(
+        "processingActivityEnumOptions.transferImpactAssessment.notNeeded",
+      ),
+    },
   ];
 
   return (
@@ -188,14 +268,20 @@ export function TransferImpactAssessmentOptions() {
 }
 
 export function RoleOptions() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const options: Array<{
     value: "CONTROLLER" | "PROCESSOR";
     label: string;
   }> = [
-    { value: "CONTROLLER", label: __("Controller") },
+    {
-    { value: "PROCESSOR", label: __("Processor") },
+      value: "CONTROLLER",
+      label: t("processingActivityEnumOptions.roles.controller"),
+    },
+    {
+      value: "PROCESSOR",
+      label: t("processingActivityEnumOptions.roles.processor"),
+    },
   ];
 
   return (

apps/console/src/components/form/ThirdPartiesMultiSelectField.tsx

@@ -19,11 +19,28 @@
 // SOFTWARE.
 
 import { faviconUrl } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
+import {
-import { Avatar, Badge, Button, Field, IconCrossLargeX, Option, Select } from "@probo/ui";
+  Avatar,
+  Badge,
+  Button,
+  Field,
+  IconCrossLargeX,
+  Option,
+  Select,
+} from "@probo/ui";
 import { type ComponentProps, Suspense, useEffect, useState } from "react";
-import { type Control, Controller, type FieldValues, type Path } from "react-hook-form";
+import {
-import { type PreloadedQuery, usePreloadedQuery, useQueryLoader } from "react-relay";
+  type Control,
+  Controller,
+  type FieldValues,
+  type Path,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  type PreloadedQuery,
+  usePreloadedQuery,
+  useQueryLoader,
+} from "react-relay";
 import { graphql } from "relay-runtime";
 
 import type { ThirdPartiesMultiSelectFieldQuery } from "#/__generated__/core/ThirdPartiesMultiSelectFieldQuery.graphql";
@@ -32,10 +49,7 @@ const thirdPartiesQuery = graphql`
   query ThirdPartiesMultiSelectFieldQuery($organizationId: ID!) {
     organization: node(id: $organizationId) {
       ... on Organization {
-        thirdParties(
+        thirdParties(first: 100, orderBy: { direction: ASC, field: NAME }) {
-          first: 100
-          orderBy: { direction: ASC, field: NAME }
-        ) {
           edges {
             node {
               id
@@ -64,12 +78,9 @@ type Props<T extends FieldValues = FieldValues> = {
   selectedThirdParties?: ThirdParty[];
 } & ComponentProps<typeof Field>;
 
-export function ThirdPartiesMultiSelectField<T extends FieldValues = FieldValues>({
+export function ThirdPartiesMultiSelectField<
-  organizationId,
+  T extends FieldValues = FieldValues,
-  control,
+>({ organizationId, control, selectedThirdParties = [], ...props }: Props<T>) {
-  selectedThirdParties = [],
-  ...props
-}: Props<T>) {
   const [queryRef, loadQuery]
     = useQueryLoader<ThirdPartiesMultiSelectFieldQuery>(thirdPartiesQuery);
 
@@ -103,14 +114,21 @@ export function ThirdPartiesMultiSelectField<T extends FieldValues = FieldValues
 }
 
 function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "control" | "name" | "disabled" | "selectedThirdParties"> & {
+  props: Pick<
+    Props<T>,
+    "control" | "name" | "disabled" | "selectedThirdParties"
+  > & {
     queryRef: PreloadedQuery<ThirdPartiesMultiSelectFieldQuery>;
   },
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { name, control, selectedThirdParties = [] } = props;
-  const data = usePreloadedQuery<ThirdPartiesMultiSelectFieldQuery>(thirdPartiesQuery, props.queryRef);
+  const data = usePreloadedQuery<ThirdPartiesMultiSelectFieldQuery>(
-  const thirdParties = data.organization?.thirdParties?.edges.map(edge => edge.node) ?? [];
+    thirdPartiesQuery,
+    props.queryRef,
+  );
+  const thirdParties
+    = data.organization?.thirdParties?.edges.map(edge => edge.node) ?? [];
   const [isOpen, setIsOpen] = useState(false);
 
   const allThirdParties: ThirdParty[] = [...thirdParties];
@@ -128,10 +146,16 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
         control={control}
         name={name as Path<T>}
         render={({ field }) => {
-          const selectedThirdPartyIds = (Array.isArray(field.value) ? field.value : []) as string[];
+          const selectedThirdPartyIds = (
+            Array.isArray(field.value) ? field.value : []
+          ) as string[];
 
-          const selectedThirdParties = allThirdParties.filter(v => selectedThirdPartyIds.includes(v.id));
+          const selectedThirdParties = allThirdParties.filter(v =>
-          const availableThirdParties = allThirdParties.filter(v => !selectedThirdPartyIds.includes(v.id));
+            selectedThirdPartyIds.includes(v.id),
+          );
+          const availableThirdParties = allThirdParties.filter(
+            v => !selectedThirdPartyIds.includes(v.id),
+          );
 
           const handleAddThirdParty = (thirdPartyId: string) => {
             const newValue = [...selectedThirdPartyIds, thirdPartyId];
@@ -140,7 +164,9 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
           };
 
           const handleRemoveThirdParty = (thirdPartyId: string) => {
-            const newValue = selectedThirdPartyIds.filter((id: string) => id !== thirdPartyId);
+            const newValue = selectedThirdPartyIds.filter(
+              (id: string) => id !== thirdPartyId,
+            );
             field.onChange(newValue);
           };
 
@@ -151,7 +177,7 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   disabled={props.disabled}
                   id={name}
                   variant="editor"
-                  placeholder={__("Add third parties...")}
+                  placeholder={t("thirdPartiesMultiSelectField.addPlaceholder")}
                   onValueChange={handleAddThirdParty}
                   key={`${selectedThirdPartyIds.length}-${thirdParties.length}`}
                   className="w-full"
@@ -160,7 +186,11 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   onOpenChange={setIsOpen}
                 >
                   {availableThirdParties.map(thirdParty => (
-                    <Option key={thirdParty.id} value={thirdParty.id} className="flex gap-2">
+                    <Option
+                      key={thirdParty.id}
+                      value={thirdParty.id}
+                      className="flex gap-2"
+                    >
                       <Avatar
                         name={thirdParty.name}
                         src={faviconUrl(thirdParty.websiteUrl)}
@@ -182,7 +212,11 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
               {selectedThirdParties.length > 0 && (
                 <div className="flex flex-wrap gap-2">
                   {selectedThirdParties.map(thirdParty => (
-                    <Badge key={thirdParty.id} variant="neutral" className="flex items-center gap-2">
+                    <Badge
+                      key={thirdParty.id}
+                      variant="neutral"
+                      className="flex items-center gap-2"
+                    >
                       <Avatar
                         name={thirdParty.name}
                         src={faviconUrl(thirdParty.websiteUrl)}
@@ -202,9 +236,10 @@ function ThirdPartiesMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                 </div>
               )}
 
-              {selectedThirdParties.length === 0 && availableThirdParties.length === 0 && (
+              {selectedThirdParties.length === 0
+                && availableThirdParties.length === 0 && (
                 <div className="text-sm text-txt-secondary py-2">
-                  {__("No third parties available")}
+                  {t("thirdPartiesMultiSelectField.empty")}
                 </div>
               )}
             </div>

apps/console/src/components/measures/LinkedMeasuresCard.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -37,6 +35,7 @@ import {
 import { MeasureBadge } from "@probo/ui/src/Molecules/Badge/MeasureBadge";
 import { clsx } from "clsx";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -83,7 +82,7 @@ type Props<Params> = {
  * Reusable component that displays a list of linked measures
  */
 export function LinkedMeasuresCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [limit, setLimit] = useState<number | null>(
     props.variant === "card" ? 4 : null,
   );
@@ -123,7 +122,9 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
     <Wrapper padded className="space-y-[10px]">
       {variant === "card" && (
         <div className="flex justify-between">
-          <div className="text-lg font-semibold">{__("Measures")}</div>
+          <div className="text-lg font-semibold">
+            {t("linkedMeasuresCard.title")}
+          </div>
           {!props.readOnly && (
             <LinkedMeasureDialog
               connectionId={props.connectionId}
@@ -133,7 +134,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <Button variant="tertiary" icon={IconPlusLarge}>
-                {__("Link measure")}
+                {t("linkedMeasuresCard.actions.link")}
               </Button>
             </LinkedMeasureDialog>
           )}
@@ -142,8 +143,8 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
       <Table className={clsx(variant === "card" && "bg-invert")}>
         <Thead>
           <Tr>
-            <Th>{__("Name")}</Th>
+            <Th>{t("linkedMeasuresCard.columns.name")}</Th>
-            <Th>{__("State")}</Th>
+            <Th>{t("linkedMeasuresCard.columns.state")}</Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -154,7 +155,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
                 colSpan={props.readOnly ? 2 : 3}
                 className="text-center text-txt-secondary"
               >
-                {__("No measures linked")}
+                {t("linkedMeasuresCard.empty")}
               </Td>
             </Tr>
           )}
@@ -175,7 +176,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <TrButton colspan={3} icon={IconPlusLarge}>
-                {__("Link measure")}
+                {t("linkedMeasuresCard.actions.link")}
               </TrButton>
             </LinkedMeasureDialog>
           )}
@@ -188,7 +189,9 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
           className="mt-3 mx-auto"
           icon={IconChevronDown}
         >
-          {sprintf(__("Show %s more"), props.measures.length - limit)}
+          {t("linkedMeasuresCard.actions.showMore", {
+            count: props.measures.length - limit,
+          })}
         </Button>
       )}
     </Wrapper>
@@ -202,7 +205,7 @@ function MeasureRow(props: {
 }) {
   const measure = useFragment(linkedMeasureFragment, props.measure);
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr to={`/organizations/${organizationId}/measures/${measure.id}`}>
@@ -217,7 +220,7 @@ function MeasureRow(props: {
             onClick={() => props.onClick(measure.id)}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedMeasuresCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/measures/LinkedMeasuresDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -35,6 +34,7 @@ import {
   Spinner,
 } from "@probo/ui";
 import { type ReactNode, Suspense, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { usePaginatedMeasures } from "#/hooks/graph/usePaginatedMeasures";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
@@ -49,16 +49,16 @@ type Props = {
 };
 
 export function LinkedMeasureDialog({ children, ...props }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
-    <Dialog trigger={children} title={__("Link measures")}>
+    <Dialog trigger={children} title={t("linkedMeasuresDialog.title")}>
       <DialogContent>
         <Suspense fallback={<Spinner centered />}>
           <LinkedMeasuresDialogContent {...props} />
         </Suspense>
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")} />
+      <DialogFooter exitLabel={t("linkedMeasuresDialog.actions.close")} />
     </Dialog>
   );
 }
@@ -67,10 +67,13 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
   const organizationId = useOrganizationId();
   const { data, loadNext, hasNext, isLoadingNext }
     = usePaginatedMeasures(organizationId);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
-  const measures = useMemo(() => data.measures?.edges?.map(edge => edge.node) ?? [], [data.measures]);
+  const measures = useMemo(
+    () => data.measures?.edges?.map(edge => edge.node) ?? [],
+    [data.measures],
+  );
   const linkedIds = useMemo(() => {
     return new Set(props.linkedMeasures?.map(m => m.id) ?? []);
   }, [props.linkedMeasures]);
@@ -94,12 +97,12 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
       <div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
         <Input
           icon={IconMagnifyingGlass}
-          placeholder={__("Search measures...")}
+          placeholder={t("linkedMeasuresDialog.searchPlaceholder")}
           onValueChange={setSearch}
         />
         <Select
           value={category ?? ""}
-          placeholder={__("All categories")}
+          placeholder={t("linkedMeasuresDialog.allCategories")}
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
@@ -141,7 +144,7 @@ type RowProps = {
 };
 
 function MeasureRow(props: RowProps) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const isLinked = props.linkedMeasures.has(props.measure.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -163,7 +166,9 @@ function MeasureRow(props: RowProps) {
         <span>
           <IconComponent size={16} />
           {" "}
-          {isLinked ? __("Unlink") : __("Link")}
+          {isLinked
+            ? t("linkedMeasuresDialog.actions.unlink")
+            : t("linkedMeasuresDialog.actions.link")}
         </span>
       </Button>
     </button>

apps/console/src/components/obligations/LinkedObligationsCard.tsx

@@ -21,9 +21,7 @@
 import {
   getObligationStatusLabel,
   getObligationStatusVariant,
-  sprintf,
 } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -41,6 +39,7 @@ import {
 } from "@probo/ui";
 import { clsx } from "clsx";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -84,7 +83,7 @@ type Props<Params> = {
 };
 
 export function LinkedObligationsCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [limit, setLimit] = useState<number | null>(
     props.variant === "card" ? 4 : null,
   );
@@ -126,7 +125,9 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
     <Wrapper padded className="space-y-[10px]">
       {variant === "card" && (
         <div className="flex justify-between">
-          <div className="text-lg font-semibold">{__("Obligations")}</div>
+          <div className="text-lg font-semibold">
+            {t("linkedObligationsCard.title")}
+          </div>
           {!props.readOnly && (
             <LinkedObligationDialog
               connectionId={props.connectionId}
@@ -136,7 +137,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <Button variant="tertiary" icon={IconPlusLarge}>
-                {__("Link obligation")}
+                {t("linkedObligationsCard.actions.link")}
               </Button>
             </LinkedObligationDialog>
           )}
@@ -145,10 +146,10 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
       <Table className={clsx(variant === "card" && "bg-invert")}>
         <Thead>
           <Tr>
-            <Th>{__("Area")}</Th>
+            <Th>{t("linkedObligationsCard.columns.area")}</Th>
-            <Th>{__("Source")}</Th>
+            <Th>{t("linkedObligationsCard.columns.source")}</Th>
-            <Th>{__("Status")}</Th>
+            <Th>{t("linkedObligationsCard.columns.status")}</Th>
-            <Th>{__("Owner")}</Th>
+            <Th>{t("linkedObligationsCard.columns.owner")}</Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -159,7 +160,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
                 colSpan={props.readOnly ? 4 : 5}
                 className="text-center text-txt-secondary"
               >
-                {__("No obligations linked")}
+                {t("linkedObligationsCard.empty")}
               </Td>
             </Tr>
           )}
@@ -180,7 +181,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
               onUnlink={onDetach}
             >
               <TrButton colspan={5} icon={IconPlusLarge}>
-                {__("Link obligation")}
+                {t("linkedObligationsCard.actions.link")}
               </TrButton>
             </LinkedObligationDialog>
           )}
@@ -193,7 +194,9 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
           className="mt-3 mx-auto"
           icon={IconChevronDown}
         >
-          {sprintf(__("Show %s more"), props.obligations.length - limit)}
+          {t("linkedObligationsCard.actions.showMore", {
+            count: props.obligations.length - limit,
+          })}
         </Button>
       )}
     </Wrapper>
@@ -205,7 +208,7 @@ function ObligationRow(props: {
   onClick: (obligationId: string) => void;
   readOnly?: boolean;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const obligation = useFragment(linkedObligationFragment, props.obligation);
   const organizationId = useOrganizationId();
 
@@ -217,18 +220,20 @@ function ObligationRow(props: {
 
   return (
     <Tr to={detailsUrl}>
-      <Td>{obligation.area || __("No area specified")}</Td>
+      <Td>{obligation.area || t("linkedObligationsCard.noArea")}</Td>
-      <Td>{obligation.source || __("No source specified")}</Td>
+      <Td>{obligation.source || t("linkedObligationsCard.noSource")}</Td>
       <Td>
         <Badge variant={getObligationStatusVariant(obligation.status)}>
           {getObligationStatusLabel(obligation.status)}
         </Badge>
       </Td>
-      <Td>{obligation.owner?.fullName || __("Unassigned")}</Td>
+      <Td>
+        {obligation.owner?.fullName || t("linkedObligationsCard.unassigned")}
+      </Td>
       {!props.readOnly && (
         <Td noLink width={50} className="text-end">
           <Button variant="secondary" icon={IconTrashCan} onClick={onDetach}>
-            {__("Unlink")}
+            {t("linkedObligationsCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/obligations/LinkedObligationsDialog.tsx

@@ -22,7 +22,6 @@ import {
   getObligationStatusLabel,
   getObligationStatusVariant,
 } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -37,6 +36,7 @@ import {
   Spinner,
 } from "@probo/ui";
 import { type ReactNode, Suspense, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery, usePaginationFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -102,16 +102,16 @@ type Props = {
 };
 
 export function LinkedObligationDialog({ children, ...props }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
-    <Dialog trigger={children} title={__("Link obligations")}>
+    <Dialog trigger={children} title={t("linkedObligationsDialog.title")}>
       <DialogContent>
         <Suspense fallback={<Spinner centered />}>
           <LinkedObligationsDialogContent {...props} />
         </Suspense>
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")} />
+      <DialogFooter exitLabel={t("linkedObligationsDialog.actions.close")} />
     </Dialog>
   );
 }
@@ -125,12 +125,14 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
     },
     { fetchPolicy: "network-only" },
   );
-  const { data, loadNext, hasNext, isLoadingNext }
+  const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
-    = usePaginationFragment<LinkedObligationsDialogQuery_fragment, LinkedObligationsDialogFragment$key>(
+    LinkedObligationsDialogQuery_fragment,
+    LinkedObligationsDialogFragment$key
+  >(
     obligationsFragment,
     query.organization as LinkedObligationsDialogFragment$key,
   );
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const obligations = useMemo(
     () => data.obligations?.edges?.map(edge => edge.node) ?? [],
@@ -156,7 +158,7 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
       <div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
         <Input
           icon={IconMagnifyingGlass}
-          placeholder={__("Search obligations...")}
+          placeholder={t("linkedObligationsDialog.searchPlaceholder")}
           onValueChange={setSearch}
         />
       </div>
@@ -191,7 +193,7 @@ function ObligationRow(props: {
   onUnlink: (obligationId: string) => void;
   disabled?: boolean;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const isLinked = props.linkedObligations.has(props.obligation.id);
 
   const onToggle = () => {
@@ -208,11 +210,12 @@ function ObligationRow(props: {
         <div className="flex items-center gap-3">
           <div className="flex-1 min-w-0">
             <div className="text-sm font-medium text-txt-primary truncate">
-              {props.obligation.area || __("No area specified")}
+              {props.obligation.area || t("linkedObligationsDialog.noArea")}
-              {props.obligation.source || __("No source specified")}
+              {props.obligation.source || t("linkedObligationsDialog.noSource")}
             </div>
             <div className="text-xs text-txt-secondary">
-              {props.obligation.owner?.fullName || __("Unassigned")}
+              {props.obligation.owner?.fullName
+                || t("linkedObligationsDialog.unassigned")}
             </div>
           </div>
           <Badge variant={getObligationStatusVariant(props.obligation.status)}>
@@ -227,7 +230,9 @@ function ObligationRow(props: {
         disabled={props.disabled}
         className="ml-6"
       >
-        {isLinked ? __("Unlink") : __("Link")}
+        {isLinked
+          ? t("linkedObligationsDialog.actions.unlink")
+          : t("linkedObligationsDialog.actions.link")}
       </Button>
     </div>
   );

apps/console/src/components/organizations/DeleteOrganizationDialog.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dialog,
@@ -30,6 +28,7 @@ import {
   useDialogRef,
 } from "@probo/ui";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 type DeleteOrganizationDialogProps = {
   children: React.ReactNode;
@@ -44,7 +43,7 @@ export function DeleteOrganizationDialog({
   onConfirm,
   isDeleting = false,
 }: DeleteOrganizationDialogProps) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [inputValue, setInputValue] = useState("");
   const dialogRef = useDialogRef();
   const isConfirmDisabled = inputValue !== organizationName || isDeleting;
@@ -61,25 +60,21 @@ export function DeleteOrganizationDialog({
       className="max-w-lg"
       ref={dialogRef}
       trigger={children}
-      title={__("Delete Organization")}
+      title={t("deleteOrganizationDialog.title")}
     >
       <DialogContent padded className="space-y-4">
         <p className="text-txt-secondary text-sm">
-          {sprintf(
+          {t("deleteOrganizationDialog.description", { organizationName })}
-            __("This will permanently delete the organization %s and all its data."),
-            organizationName,
-          )}
         </p>
 
         <p className="text-red-600 text-sm font-medium">
-          {__("This action cannot be undone.")}
+          {t("deleteOrganizationDialog.warning")}
         </p>
 
         <Field
-          label={sprintf(
+          label={t("deleteOrganizationDialog.confirmationLabel", {
-            __("To confirm deletion, type \"%s\" below:"),
             organizationName,
-          )}
+          })}
           type="text"
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
@@ -96,7 +91,9 @@ export function DeleteOrganizationDialog({
           onClick={handleConfirm}
           disabled={isConfirmDisabled}
         >
-          {isDeleting ? __("Deleting...") : __("Delete Organization")}
+          {isDeleting
+            ? t("deleteOrganizationDialog.actions.deleting")
+            : t("deleteOrganizationDialog.actions.delete")}
         </Button>
       </DialogFooter>
     </Dialog>

apps/console/src/components/risks/LinkedRisksCard.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   IconTrashCan,
@@ -31,6 +30,7 @@ import {
   Tr,
   TrButton,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -77,7 +77,7 @@ type Props<Params> = {
  * Reusable component that displays a list of linked risks
  */
 export function LinkedRisksCard<Params>(props: Props<Params>) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const onAttach = (riskId: string) => {
     props.onAttach({
@@ -108,9 +108,9 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
       <Table>
         <Thead>
           <Tr>
-            <Th>{__("Name")}</Th>
+            <Th>{t("linkedRisksCard.columns.name")}</Th>
-            <Th>{__("Initial Risk")}</Th>
+            <Th>{t("linkedRisksCard.columns.initialRisk")}</Th>
-            <Th>{__("Residual Risk")}</Th>
+            <Th>{t("linkedRisksCard.columns.residualRisk")}</Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -121,7 +121,7 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
                 colSpan={props.readOnly ? 3 : 4}
                 className="text-center text-txt-secondary"
               >
-                {__("No risks linked")}
+                {t("linkedRisksCard.empty")}
               </Td>
             </Tr>
           )}
@@ -141,7 +141,9 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
               onLink={onAttach}
               onUnlink={onDetach}
             >
-              <TrButton colspan={4}>{__("Link risk")}</TrButton>
+              <TrButton colspan={4}>
+                {t("linkedRisksCard.actions.link")}
+              </TrButton>
             </LinkedRisksDialog>
           )}
         </Tbody>
@@ -157,7 +159,7 @@ function RiskRow(props: {
 }) {
   const risk = useFragment(linkedRiskFragment, props.risk);
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr to={`/organizations/${organizationId}/risks/${risk.id}`}>
@@ -175,7 +177,7 @@ function RiskRow(props: {
             onClick={() => props.onClick(risk.id)}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedRisksCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/risks/LinkedRisksDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -34,6 +33,7 @@ import {
   Spinner,
 } from "@probo/ui";
 import { type ReactNode, Suspense, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -70,16 +70,16 @@ type Props = {
 };
 
 export function LinkedRisksDialog({ children, ...props }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
-    <Dialog trigger={children} title={__("Link risks")}>
+    <Dialog trigger={children} title={t("linkedRisksDialog.title")}>
       <DialogContent>
         <Suspense fallback={<Spinner centered />}>
           <LinkedRisksDialogContent {...props} />
         </Suspense>
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")} />
+      <DialogFooter exitLabel={t("linkedRisksDialog.actions.close")} />
     </Dialog>
   );
 }
@@ -89,7 +89,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
   const data = useLazyLoadQuery<LinkedRisksDialogQuery>(risksQuery, {
     organizationId,
   });
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
   const risks = useMemo(
@@ -119,12 +119,12 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
       <div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
         <Input
           icon={IconMagnifyingGlass}
-          placeholder={__("Search risks...")}
+          placeholder={t("linkedRisksDialog.searchPlaceholder")}
           onValueChange={setSearch}
         />
         <Select
           value={category ?? ""}
-          placeholder={__("All categories")}
+          placeholder={t("linkedRisksDialog.allCategories")}
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
@@ -165,7 +165,7 @@ type RowProps = {
 };
 
 function RiskRow(props: RowProps) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const isLinked = props.linkedRisks.has(props.risk.id);
   const onClick = isLinked ? props.onUnlink : props.onLink;
@@ -187,7 +187,9 @@ function RiskRow(props: RowProps) {
         <span>
           <IconComponent size={16} />
           {" "}
-          {isLinked ? __("Unlink") : __("Link")}
+          {isLinked
+            ? t("linkedRisksDialog.actions.unlink")
+            : t("linkedRisksDialog.actions.link")}
         </span>
       </Button>
     </button>

apps/console/src/components/skeletons/ControlSkeleton.tsx

@@ -18,21 +18,21 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { ActionDropdown, Button, IconPencil, Skeleton } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 /**
  * Skeleton state for the framework control panel
  */
 export function ControlSkeleton() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   return (
     <div className="space-y-6">
       <div className="flex justify-between">
         <Skeleton style={{ width: 72, height: 34 }} className="mb-3" />
         <div className="flex gap-2">
           <Button icon={IconPencil} variant="secondary" disabled>
-            {__("Edit control")}
+            {t("controlSkeleton.actions.edit")}
           </Button>
           <ActionDropdown variant="secondary" />
         </div>

apps/console/src/components/skeletons/RisksPageSkeleton.tsx

@@ -18,16 +18,16 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, IconPlusLarge, PageHeader, Skeleton } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 export function RisksPageSkeleton() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   return (
     <div className="space-y-6">
-      <PageHeader title={__("Risks")}>
+      <PageHeader title={t("risksPageSkeleton.title")}>
         <Button icon={IconPlusLarge} disabled>
-          {__("New Risk")}
+          {t("risksPageSkeleton.actions.create")}
         </Button>
       </PageHeader>
       <div className="grid grid-cols-2 gap-4">

apps/console/src/components/statements-of-applicability/LinkedStatementsOfApplicabilityCard.tsx

@@ -18,8 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -37,6 +35,7 @@ import {
 } from "@probo/ui";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -94,8 +93,10 @@ type Props<Params> = {
   readOnly?: boolean;
 };
 
-export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>) {
+export function LinkedStatementsOfApplicabilityCard<Params>(
-  const { __ } = useTranslate();
+  props: Props<Params>,
+) {
+  const { t } = useTranslation();
 
   const [limit, setLimit] = useState<number | null>(
     props.variant === "card" ? 4 : null,
@@ -171,7 +172,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
       {variant === "card" && (
         <div className="flex justify-between">
           <div className="text-lg font-semibold">
-            {__("Statements of Applicability")}
+            {t("linkedStatementsOfApplicabilityCard.title")}
           </div>
           {!props.readOnly && (
             <LinkedStatementsOfApplicabilityDialog
@@ -182,7 +183,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
               onUnlink={onDetach}
             >
               <Button variant="tertiary" icon={IconPlusLarge}>
-                {__("Link statement of applicability")}
+                {t("linkedStatementsOfApplicabilityCard.actions.link")}
               </Button>
             </LinkedStatementsOfApplicabilityDialog>
           )}
@@ -191,9 +192,13 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
       <Table className={clsx(variant === "card" && "bg-invert")}>
         <Thead>
           <Tr>
-            <Th>{__("Name")}</Th>
+            <Th>{t("linkedStatementsOfApplicabilityCard.columns.name")}</Th>
-            <Th>{__("Applicability")}</Th>
+            <Th>
-            <Th>{__("Justification")}</Th>
+              {t("linkedStatementsOfApplicabilityCard.columns.applicability")}
+            </Th>
+            <Th>
+              {t("linkedStatementsOfApplicabilityCard.columns.justification")}
+            </Th>
             {!props.readOnly && <Th></Th>}
           </Tr>
         </Thead>
@@ -204,7 +209,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
                 colSpan={props.readOnly ? 3 : 4}
                 className="text-center text-txt-secondary"
               >
-                {__("No statements of applicability linked")}
+                {t("linkedStatementsOfApplicabilityCard.empty")}
               </Td>
             </Tr>
           )}
@@ -225,7 +230,7 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
               onUnlink={onDetach}
             >
               <TrButton colspan={4} icon={IconPlusLarge}>
-                {__("Link statement of applicability")}
+                {t("linkedStatementsOfApplicabilityCard.actions.link")}
               </TrButton>
             </LinkedStatementsOfApplicabilityDialog>
           )}
@@ -237,10 +242,9 @@ export function LinkedStatementsOfApplicabilityCard<Params>(props: Props<Params>
           icon={IconChevronDown}
           onClick={() => setLimit(null)}
         >
-          {sprintf(
+          {t("linkedStatementsOfApplicabilityCard.actions.showMore", {
-            __("Show %d more"),
+            count: props.statementsOfApplicability.length - limit,
-            props.statementsOfApplicability.length - limit,
+          })}
-          )}
         </Button>
       )}
     </Wrapper>
@@ -256,10 +260,7 @@ function LinkedInfoExtractor(props: {
 }) {
   const { onExtracted, fragment } = props;
 
-  const data = useFragment(
+  const data = useFragment(linkedStatementOfApplicabilityFragment, fragment);
-    linkedStatementOfApplicabilityFragment,
-    fragment,
-  );
 
   useEffect(() => {
     onExtracted({
@@ -283,7 +284,7 @@ function StatementOfApplicabilityRow(props: {
     props.statementOfApplicability,
   );
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Tr
@@ -293,8 +294,8 @@ function StatementOfApplicabilityRow(props: {
       <Td>
         <Badge variant={soa.applicability ? "success" : "danger"}>
           {soa.applicability
-            ? __("Applicable")
+            ? t("linkedStatementsOfApplicabilityCard.applicable")
-            : __("Not Applicable")}
+            : t("linkedStatementsOfApplicabilityCard.notApplicable")}
         </Badge>
       </Td>
       <Td>{soa.justification || "-"}</Td>
@@ -303,13 +304,10 @@ function StatementOfApplicabilityRow(props: {
           <Button
             variant="secondary"
             onClick={() =>
-              props.onClick(
+              props.onClick(soa.statementOfApplicability.id, soa.control.id)}
-                soa.statementOfApplicability.id,
-                soa.control.id,
-              )}
             icon={IconTrashCan}
           >
-            {__("Unlink")}
+            {t("linkedStatementsOfApplicabilityCard.actions.unlink")}
           </Button>
         </Td>
       )}

apps/console/src/components/statements-of-applicability/LinkedStatementsOfApplicabilityDialog.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -30,6 +29,7 @@ import {
 } from "@probo/ui";
 import type { ReactNode } from "react";
 import { Suspense, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -75,13 +75,14 @@ export function LinkedStatementsOfApplicabilityDialog({
   children,
   ...props
 }: Props) {
+  const { t } = useTranslation();
   const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
 
   return (
     <Dialog
       ref={dialogRef}
       trigger={children}
-      title="Link Statement of Applicability"
+      title={t("linkedStatementsOfApplicabilityDialog.title")}
     >
       <Suspense fallback={<div>Loading...</div>}>
         <LinkedStatementsOfApplicabilityDialogContent
@@ -96,7 +97,7 @@ export function LinkedStatementsOfApplicabilityDialog({
 function LinkedStatementsOfApplicabilityDialogContent(
   props: Omit<Props, "children"> & { onClose: () => void },
 ) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const organizationId = useOrganizationId();
   const [selectedSOA, setSelectedSOA] = useState<{
     id: string;
@@ -163,12 +164,10 @@ function LinkedStatementsOfApplicabilityDialogContent(
           ? (
               <div className="flex flex-col items-center justify-center py-12 text-center">
                 <div className="text-txt-secondary text-base mb-2">
-                  {__("No statements of applicability available")}
+                  {t("linkedStatementsOfApplicabilityDialog.empty.title")}
                 </div>
                 <div className="text-txt-tertiary text-sm">
-                  {__(
+                  {t("linkedStatementsOfApplicabilityDialog.empty.description")}
-                    "Create a statement of applicability first to link it to this control",
-                  )}
                 </div>
               </div>
             )
@@ -176,7 +175,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
               ? (
                   <div className="space-y-2">
                     <div className="text-sm font-medium mb-2">
-                      {__("Select a statement of applicability:")}
+                      {t("linkedStatementsOfApplicabilityDialog.select")}
                     </div>
                     {statementsOfApplicability.map((soa) => {
                       const isLinked = linkedSOAIds.has(soa.id);
@@ -197,7 +196,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
                                   onClick={e => e.stopPropagation()}
                                 >
                                   <Badge variant="success">
-                                    {__("Linked")}
+                                    {t("linkedStatementsOfApplicabilityDialog.linked")}
                                   </Badge>
                                   <Button
                                     variant="danger"
@@ -205,7 +204,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
                                       handleUnlink(soa.id)}
                                     disabled={props.disabled}
                                   >
-                                    {__("Unlink")}
+                                    {t("linkedStatementsOfApplicabilityDialog.actions.unlink")}
                                   </Button>
                                 </div>
                               )
@@ -220,7 +219,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
                     <div className="flex items-center justify-between">
                       <div>
                         <div className="text-sm text-txt-secondary mb-1">
-                          {__("Selected:")}
+                          {t("linkedStatementsOfApplicabilityDialog.selected")}
                         </div>
                         <div className="text-lg font-medium">
                           {selectedSOA.name}
@@ -230,7 +229,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
                         variant="tertiary"
                         onClick={() => setSelectedSOA(null)}
                       >
-                        {__("Change")}
+                        {t("linkedStatementsOfApplicabilityDialog.actions.change")}
                       </Button>
                     </div>
 
@@ -242,16 +241,16 @@ function LinkedStatementsOfApplicabilityDialogContent(
                             setApplicability(checked)}
                         />
                         <span className="font-medium">
-                          {__("Applicable")}
+                          {t("linkedStatementsOfApplicabilityDialog.applicable")}
                         </span>
                       </label>
 
                       <div>
                         <label className="text-sm font-medium mb-1 block">
-                          {__("Justification (optional)")}
+                          {t("linkedStatementsOfApplicabilityDialog.justification.label")}
                         </label>
                         <Textarea
-                          placeholder={__("Add a justification...")}
+                          placeholder={t("linkedStatementsOfApplicabilityDialog.justification.placeholder")}
                           value={justification}
                           onChange={e =>
                             setJustification(e.target.value)}
@@ -262,7 +261,7 @@ function LinkedStatementsOfApplicabilityDialogContent(
                   </div>
                 )}
       </DialogContent>
-      <DialogFooter exitLabel={__("Close")}>
+      <DialogFooter exitLabel={t("linkedStatementsOfApplicabilityDialog.actions.close")}>
         {selectedSOA
           ? (
               <>
@@ -270,14 +269,14 @@ function LinkedStatementsOfApplicabilityDialogContent(
                   variant="secondary"
                   onClick={() => setSelectedSOA(null)}
                 >
-                  {__("Back")}
+                  {t("linkedStatementsOfApplicabilityDialog.actions.back")}
                 </Button>
                 <Button
                   variant="primary"
                   onClick={handleLink}
                   disabled={props.disabled}
                 >
-                  {__("Link")}
+                  {t("linkedStatementsOfApplicabilityDialog.actions.link")}
                 </Button>
               </>
             )

apps/console/src/components/table/GraphQLCell.tsx

@@ -19,13 +19,13 @@
 // SOFTWARE.
 
 import { useStateWithRef } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { EditableCell, selectCell, SelectValue, Spinner } from "@probo/ui";
 import { useEditableCellRef } from "@probo/ui/src/Molecules/Table/EditableCell";
 import { useEditableRowContext } from "@probo/ui/src/Molecules/Table/EditableRow";
 import { getKey } from "@probo/ui/src/Molecules/Table/utils";
 import { Command } from "cmdk";
 import { type ReactNode, Suspense } from "react";
+import { useTranslation } from "react-i18next";
 import { useLazyLoadQuery } from "react-relay";
 import type {
   GraphQLTaggedNode,
@@ -44,14 +44,23 @@ type Props<Q extends OperationType, T> = {
   | { defaultValue: T[]; multiple: true }
 );
 
-export function GraphQLCell<Q extends OperationType, T extends NonNullable<unknown>>(props: Props<Q, T>) {
+export function GraphQLCell<
+  Q extends OperationType,
+  T extends NonNullable<unknown>,
+>(props: Props<Q, T>) {
   const [value, setValue, valueRef] = useStateWithRef<T | T[] | undefined>(
     props.defaultValue,
   );
   const cellRef = useEditableCellRef();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
-  const filteredValue = Array.isArray(value) ? value.filter(Boolean) : value ? [value] : [];
+  const filteredValue = Array.isArray(value)
-  const usedKeys = new Set<string>(filteredValue.map(getKey).filter(Boolean) as string[]);
+    ? value.filter(Boolean)
+    : value
+      ? [value]
+      : [];
+  const usedKeys = new Set<string>(
+    filteredValue.map(getKey).filter(Boolean) as string[],
+  );
   const { onUpdate } = useEditableRowContext();
 
   const onSelect = (item: T) => {
@@ -104,7 +113,7 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
         {props.multiple && (
           <Command.Input
             className={classNames.input()}
-            placeholder={__("Search")}
+            placeholder={t("graphQLCell.searchPlaceholder")}
           />
         )}
         <Command.List>

apps/console/src/components/table/SortableDataTable.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   CellHead,
@@ -35,6 +34,7 @@ import {
   useContext,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import type { LoadMoreFn } from "react-relay";
 import type { OperationType } from "relay-runtime";
 
@@ -75,7 +75,7 @@ export function SortableDataTable({
   isLoadingNext?: boolean;
   pageSize?: number;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [order, setOrder] = useState(defaultOrder);
   const onOrderChange = (o: Order) => {
     startTransition(() => {
@@ -95,7 +95,7 @@ export function SortableDataTable({
             disabled={isLoadingNext}
             icon={isLoadingNext ? Spinner : IconChevronDown}
           >
-            {__("Show more")}
+            {t("sortableDataTable.actions.showMore")}
           </Button>
         )}
       </div>

apps/console/src/components/tasks/TaskFormDialog.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { formatDatetime } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dialog,
@@ -40,6 +39,7 @@ import {
 import { Breadcrumb } from "@probo/ui";
 import { type ReactNode, useEffect } from "react";
 import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { useFragment, useRelayEnvironment } from "react-relay";
 import { graphql } from "relay-runtime";
 import { z } from "zod";
@@ -143,7 +143,7 @@ type Props = {
 
 export default function TaskFormDialog(props: Props) {
   const { children, connection, ref, task: taskKey, measureId, onCompleted } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const newRef = useDialogRef();
   const dialogRef = ref ?? newRef;
   const organizationId = useOrganizationId();
@@ -152,8 +152,8 @@ export default function TaskFormDialog(props: Props) {
   const [mutate] = useMutationWithToasts(
     task ? taskUpdateMutation : taskCreateMutation,
     {
-      successMessage: __(`Task ${task ? "updated" : "created"} successfully.`),
+      successMessage: t(task ? "taskFormDialog.messages.updated" : "taskFormDialog.messages.created"),
-      errorMessage: __(`Failed to ${task ? "update" : "create"} task`),
+      errorMessage: t(task ? "taskFormDialog.errors.update" : "taskFormDialog.errors.create"),
     },
   );
 
@@ -246,7 +246,7 @@ export default function TaskFormDialog(props: Props) {
       trigger={children}
       title={(
         <Breadcrumb
-          items={[__("Tasks"), isUpdating ? __("Edit Task") : __("New Task")]}
+          items={[t("taskFormDialog.breadcrumb.tasks"), isUpdating ? t("taskFormDialog.breadcrumb.edit") : t("taskFormDialog.breadcrumb.new")]}
         />
       )}
     >
@@ -257,23 +257,23 @@ export default function TaskFormDialog(props: Props) {
               id="title"
               required
               variant="title"
-              placeholder={__("Task title")}
+              placeholder={t("taskFormDialog.fields.title.placeholder")}
               {...register("name")}
             />
             <Textarea
               id="content"
               variant="ghost"
               autogrow
-              placeholder={__("Add description")}
+              placeholder={t("taskFormDialog.fields.description.placeholder")}
               {...register("description")}
             />
           </div>
           {/* Properties form */}
           <div className="py-5 px-6 bg-subtle">
-            <Label>{__("Properties")}</Label>
+            <Label>{t("taskFormDialog.properties")}</Label>
             {isUpdating && (
               <PropertyRow
-                label={__("State")}
+                label={t("taskFormDialog.fields.state.label")}
                 error={"state" in formState.errors ? formState.errors.state?.message : undefined}
               >
                 <Controller
@@ -287,19 +287,19 @@ export default function TaskFormDialog(props: Props) {
                       <Option value="TODO">
                         <span className="flex items-center gap-2">
                           <TaskStateIcon state="TODO" />
-                          {__("To do")}
+                          {t("taskFormDialog.states.todo")}
                         </span>
                       </Option>
                       <Option value="IN_PROGRESS">
                         <span className="flex items-center gap-2">
                           <TaskStateIcon state="IN_PROGRESS" />
-                          {__("In progress")}
+                          {t("taskFormDialog.states.inProgress")}
                         </span>
                       </Option>
                       <Option value="DONE">
                         <span className="flex items-center gap-2">
                           <TaskStateIcon state="DONE" />
-                          {__("Done")}
+                          {t("taskFormDialog.states.done")}
                         </span>
                       </Option>
                     </Select>
@@ -308,7 +308,7 @@ export default function TaskFormDialog(props: Props) {
               </PropertyRow>
             )}
             <PropertyRow
-              label={__("Priority")}
+              label={t("taskFormDialog.fields.priority.label")}
               error={formState.errors.priority?.message}
             >
               <Controller
@@ -322,25 +322,25 @@ export default function TaskFormDialog(props: Props) {
                     <Option value="URGENT">
                       <span className="flex items-center gap-2">
                         <PriorityLevel level="URGENT" />
-                        {__("Urgent")}
+                        {t("taskFormDialog.priorities.urgent")}
                       </span>
                     </Option>
                     <Option value="HIGH">
                       <span className="flex items-center gap-2">
                         <PriorityLevel level="HIGH" />
-                        {__("High")}
+                        {t("taskFormDialog.priorities.high")}
                       </span>
                     </Option>
                     <Option value="MEDIUM">
                       <span className="flex items-center gap-2">
                         <PriorityLevel level="MEDIUM" />
-                        {__("Medium")}
+                        {t("taskFormDialog.priorities.medium")}
                       </span>
                     </Option>
                     <Option value="LOW">
                       <span className="flex items-center gap-2">
                         <PriorityLevel level="LOW" />
-                        {__("Low")}
+                        {t("taskFormDialog.priorities.low")}
                       </span>
                     </Option>
                   </Select>
@@ -348,7 +348,7 @@ export default function TaskFormDialog(props: Props) {
               />
             </PropertyRow>
             <PropertyRow
-              label={__("Assigned to")}
+              label={t("taskFormDialog.fields.assignedTo.label")}
               error={formState.errors.assignedToId?.message}
             >
               <PeopleSelectField
@@ -360,7 +360,7 @@ export default function TaskFormDialog(props: Props) {
             </PropertyRow>
             {showMeasure && (
               <PropertyRow
-                label={__("Measure")}
+                label={t("taskFormDialog.fields.measure.label")}
                 error={formState.errors.measureId?.message}
               >
                 <MeasureSelectField
@@ -372,7 +372,7 @@ export default function TaskFormDialog(props: Props) {
               </PropertyRow>
             )}
             <PropertyRow
-              label={__("Time estimate")}
+              label={t("taskFormDialog.fields.timeEstimate.label")}
               error={formState.errors.timeEstimate?.message}
             >
               <Controller
@@ -388,7 +388,7 @@ export default function TaskFormDialog(props: Props) {
               />
             </PropertyRow>
             <PropertyRow
-              label={__("Deadline")}
+              label={t("taskFormDialog.fields.deadline.label")}
               error={formState.errors.deadline?.message}
             >
               <Input id="deadline" type="date" {...register("deadline")} />
@@ -397,7 +397,7 @@ export default function TaskFormDialog(props: Props) {
         </DialogContent>
         <DialogFooter>
           <Button type="submit">
-            {isUpdating ? __("Update task") : __("Create task")}
+            {isUpdating ? t("taskFormDialog.actions.update") : t("taskFormDialog.actions.create")}
           </Button>
         </DialogFooter>
       </form>

apps/console/src/components/tasks/TasksCard.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { formatDate, formatDuration, formatError, promisifyMutation } from "@probo/helpers";
+import { formatError, promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
+import { dateFormat, formatDuration } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -38,6 +38,7 @@ import {
   useToast,
 } from "@probo/ui";
 import { Fragment, type ReactNode, useRef, useState, useTransition } from "react";
+import { useTranslation } from "react-i18next";
 import {
   graphql,
   readInlineData,
@@ -185,7 +186,7 @@ const updateRankMutation = graphql`
 `;
 
 export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const hash = useLocation().hash.replace("#", "");
   const [, startTransition] = useTransition();
 
@@ -205,13 +206,13 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
   };
 
   const stateHashes = [
-    { hash: "todo", label: __("To do"), state: "TODO" },
+    { hash: "todo", label: t("tasksCard.states.todo"), state: "TODO" },
-    { hash: "in-progress", label: __("In progress"), state: "IN_PROGRESS" },
+    { hash: "in-progress", label: t("tasksCard.states.inProgress"), state: "IN_PROGRESS" },
-    { hash: "done", label: __("Done"), state: "DONE" },
+    { hash: "done", label: t("tasksCard.states.done"), state: "DONE" },
   ] as const;
 
   const hashes = [
-    { hash: "", label: __("All"), state: null },
+    { hash: "", label: t("tasksCard.states.all"), state: null },
     ...stateHashes,
   ] as const;
 
@@ -346,8 +347,8 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
       onCompleted: (_, errors) => {
         if (errors?.length) {
           toast({
-            title: __("Error"),
+            title: t("tasksCard.error.title"),
-            description: formatError(__("Failed to reorder task."), errors),
+            description: formatError(t("tasksCard.error.reorder"), errors),
             variant: "error",
           });
         }
@@ -365,7 +366,7 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
       onError: () => {
         droppedRef.current = false;
         resetDragState();
-        toast({ title: __("Error"), description: __("Failed to reorder task."), variant: "error" });
+        toast({ title: t("tasksCard.error.title"), description: t("tasksCard.error.reorder"), variant: "error" });
       },
     });
   };
@@ -413,7 +414,7 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
     <div className="space-y-6">
       {tasks.length === 0
         ? (
-            <p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
+            <p className="text-center py-6 text-txt-secondary">{t("tasksCard.empty")}</p>
           )
         : (
             <Card>
@@ -463,8 +464,8 @@ export function TasksCard({ tasks, connectionId, canReorder, refetch }: Props) {
       {canDrag && filteredTasks.length > 1 && (
         <p className="text-sm text-txt-tertiary">
           {hash === ""
-            ? __("Drag and drop to reorder tasks or move them between states")
+            ? t("tasksCard.dragInstructions.all")
-            : __("Drag and drop to reorder tasks")}
+            : t("tasksCard.dragInstructions.state")}
         </p>
       )}
     </div>
@@ -521,7 +522,7 @@ const deleteMutation = graphql`
 function TaskRow(props: TaskRowProps) {
   const organizationId = useOrganizationId();
   const dialogRef = useDialogRef();
-  const { __ } = useTranslate();
+  const { t, i18n } = useTranslation();
   const confirm = useConfirm();
   const [deleteTask] = useMutation<TasksCardDeleteMutation>(deleteMutation);
   const params = useParams<{ measureId?: string }>();
@@ -542,8 +543,8 @@ function TaskRow(props: TaskRowProps) {
     icon: typeof IconCircleProgress;
     className: string;
   }> = {
-    TODO: { state: "IN_PROGRESS", label: __("Move to In progress"), icon: IconCircleProgress, className: "text-txt-warning" },
+    TODO: { state: "IN_PROGRESS", label: t("tasksCard.actions.moveToInProgress"), icon: IconCircleProgress, className: "text-txt-warning" },
-    IN_PROGRESS: { state: "DONE", label: __("Move to Done"), icon: IconCircleCheck, className: "text-txt-accent" },
+    IN_PROGRESS: { state: "DONE", label: t("tasksCard.actions.moveToDone"), icon: IconCircleCheck, className: "text-txt-accent" },
   };
 
   const onAdvance = async () => {
@@ -581,7 +582,7 @@ function TaskRow(props: TaskRowProps) {
           },
         }),
       {
-        message: "Are you sure you want to delete this task?",
+        message: t("tasksCard.deleteConfirmation"),
       },
     );
   };
@@ -642,11 +643,11 @@ function TaskRow(props: TaskRowProps) {
                 </span>
               )}
               {task.timeEstimate && (
-                <span>{formatDuration(task.timeEstimate, __)}</span>
+                <span>{formatDuration(task.timeEstimate, t)}</span>
               )}
               {task.deadline && (
                 <time dateTime={task.deadline}>
-                  {formatDate(task.deadline)}
+                  {dateFormat(i18n.language, task.deadline)}
                 </time>
               )}
             </div>
@@ -677,7 +678,7 @@ function TaskRow(props: TaskRowProps) {
             <Button
               variant="secondary"
               icon={IconPencil}
-              title={__("Edit")}
+              title={t("tasksCard.actions.edit")}
               onClick={() => dialogRef.current?.open()}
             />
           )}
@@ -685,7 +686,7 @@ function TaskRow(props: TaskRowProps) {
             <Button
               variant="danger"
               icon={IconTrashCan}
-              title={__("Delete")}
+              title={t("tasksCard.actions.delete")}
               onClick={onDelete}
             />
           )}

apps/console/src/hooks/forms/useThirdPartyForm.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 import { z } from "zod";
@@ -88,11 +88,11 @@ const thirdPartyUpdateQuery = graphql`
 
 export function useThirdPartyForm(thirdPartyKey: useThirdPartyFormFragment$key) {
   const thirdParty = useFragment(thirdPartyFormFragment, thirdPartyKey);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const [mutate] = useMutationWithToasts(thirdPartyUpdateQuery, {
-    successMessage: __("Third party updated successfully."),
+    successMessage: t("thirdPartyForm.messages.updated"),
-    errorMessage: __("Failed to update third party"),
+    errorMessage: t("thirdPartyForm.messages.updateError"),
   });
 
   const defaultValues = useMemo(

apps/console/src/hooks/graph/AssetGraph.ts

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { promisifyMutation, sprintf } from "@probo/helpers";
+import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -163,11 +163,11 @@ export const useDeleteAsset = (
 ) => {
   const [mutate] = useMutation<AssetGraphDeleteMutation>(deleteAssetMutation);
   const confirm = useConfirm();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return () => {
     if (!asset.id || !asset.name) {
-      return alert(__("Failed to delete asset: missing id or name"));
+      return alert(t("assetGraph.errors.deleteMissingIdOrName"));
     }
     confirm(
       () =>
@@ -180,12 +180,7 @@ export const useDeleteAsset = (
           },
         }),
       {
-        message: sprintf(
+        message: t("assetGraph.deleteConfirmation", { name: asset.name }),
-          __(
-            "This will permanently delete \"%s\". This action cannot be undone.",
-          ),
-          asset.name,
-        ),
       },
     );
   };
@@ -193,7 +188,7 @@ export const useDeleteAsset = (
 
 export const useCreateAsset = (connectionId: string) => {
   const [mutate, isMutating] = useMutation<AssetGraphCreateMutation>(createAssetMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return [
     (input: {
@@ -206,18 +201,16 @@ export const useCreateAsset = (connectionId: string) => {
       dataTypesStored: string;
     }) => {
       if (!input.name?.trim()) {
-        return alert(__("Failed to create asset: name is required"));
+        return alert(t("assetGraph.errors.createNameRequired"));
       }
       if (!input.ownerId) {
-        return alert(__("Failed to create asset: owner is required"));
+        return alert(t("assetGraph.errors.createOwnerRequired"));
       }
       if (!input.organizationId) {
-        return alert(__("Failed to create asset: organization is required"));
+        return alert(t("assetGraph.errors.createOrganizationRequired"));
       }
       if (!input.dataTypesStored) {
-        return alert(
+        return alert(t("assetGraph.errors.createDataTypesStoredRequired"));
-          __("Failed to create asset: data types stored is required"),
-        );
       }
 
       return promisifyMutation(mutate)({
@@ -240,7 +233,7 @@ export const useCreateAsset = (connectionId: string) => {
 };
 
 export const useUpdateAsset = () => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutation<AssetGraphUpdateMutation>(updateAssetMutation);
 
   return (input: {
@@ -253,7 +246,7 @@ export const useUpdateAsset = () => {
     thirdPartyIds?: string[];
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update asset: asset ID is required"));
+      return alert(t("assetGraph.errors.updateIdRequired"));
     }
 
     return promisifyMutation(mutate)({

apps/console/src/hooks/graph/AuditGraph.ts

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { promisifyMutation, sprintf } from "@probo/helpers";
+import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -148,10 +148,10 @@ export const useDeleteAudit = (
   connectionId: string,
   onSuccess?: () => void,
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(deleteAuditMutation, {
-    successMessage: __("Audit deleted successfully"),
+    successMessage: t("auditGraph.messages.deleted"),
-    errorMessage: __("Failed to delete audit"),
+    errorMessage: t("auditGraph.errors.delete"),
   });
   const confirm = useConfirm();
 
@@ -169,12 +169,7 @@ export const useDeleteAudit = (
         onSuccess?.();
       },
       {
-        message: sprintf(
+        message: t("auditGraph.deleteConfirmation", { frameworkName: audit.framework?.name ?? "" }),
-          __(
-            "This will permanently delete the audit for %s. This action cannot be undone.",
-          ),
-          audit.framework?.name ?? "",
-        ),
       },
     );
   };
@@ -183,7 +178,7 @@ export const useDeleteAudit = (
 export const useCreateAudit = (connectionId: string) => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createAuditMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     organizationId: string;
@@ -196,10 +191,10 @@ export const useCreateAudit = (connectionId: string) => {
     file?: File | null;
   }) => {
     if (!input.organizationId) {
-      return alert(__("Failed to create audit: organization is required"));
+      return alert(t("auditGraph.errors.createOrganizationRequired"));
     }
     if (!input.frameworkId) {
-      return alert(__("Failed to create audit: framework is required"));
+      return alert(t("auditGraph.errors.createFrameworkRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -224,7 +219,7 @@ export const useCreateAudit = (connectionId: string) => {
 export const useUpdateAudit = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateAuditMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -234,7 +229,7 @@ export const useUpdateAudit = () => {
     state?: string;
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update audit: audit ID is required"));
+      return alert(t("auditGraph.errors.updateIdRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -263,15 +258,15 @@ export const uploadAuditReportMutation = graphql`
 `;
 
 export const useUploadAuditReport = () => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate, isLoading] = useMutationWithToasts(uploadAuditReportMutation, {
-    successMessage: __("Audit report uploaded successfully"),
+    successMessage: t("auditGraph.messages.reportUploaded"),
-    errorMessage: __("Failed to upload audit report"),
+    errorMessage: t("auditGraph.errors.uploadReport"),
   });
 
   const uploadAuditReport = (input: { auditId: string; file: File }) => {
     if (!input.auditId) {
-      return alert(__("Failed to upload report: audit ID is required"));
+      return alert(t("auditGraph.errors.uploadReportIdRequired"));
     }
 
     return mutate({
@@ -308,10 +303,10 @@ export const deleteAuditReportMutation = graphql`
 `;
 
 export const useDeleteAuditReport = () => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(deleteAuditReportMutation, {
-    successMessage: __("Audit report deleted successfully"),
+    successMessage: t("auditGraph.messages.reportDeleted"),
-    errorMessage: __("Failed to delete audit report"),
+    errorMessage: t("auditGraph.errors.deleteReport"),
   });
 
   return (input: { auditId: string }) => {

apps/console/src/hooks/graph/DatumGraph.ts

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { promisifyMutation, sprintf } from "@probo/helpers";
+import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -154,11 +154,11 @@ export const useDeleteDatum = (
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(deleteDatumMutation);
   const confirm = useConfirm();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return () => {
     if (!datum.id || !datum.name) {
-      return alert(__("Failed to delete data: missing id or name"));
+      return alert(t("datumGraph.errors.deleteMissingIdOrName"));
     }
     confirm(
       () =>
@@ -171,12 +171,7 @@ export const useDeleteDatum = (
           },
         }),
       {
-        message: sprintf(
+        message: t("datumGraph.deleteConfirmation", { name: datum.name }),
-          __(
-            "This will permanently delete \"%s\". This action cannot be undone.",
-          ),
-          datum.name,
-        ),
       },
     );
   };
@@ -185,7 +180,7 @@ export const useDeleteDatum = (
 export const useCreateDatum = (connectionId: string) => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createDatumMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     name: string;
@@ -195,13 +190,13 @@ export const useCreateDatum = (connectionId: string) => {
     thirdPartyIds?: string[];
   }) => {
     if (!input.name?.trim()) {
-      return alert(__("Failed to create data: name is required"));
+      return alert(t("datumGraph.errors.createNameRequired"));
     }
     if (!input.ownerId) {
-      return alert(__("Failed to create data: owner is required"));
+      return alert(t("datumGraph.errors.createOwnerRequired"));
     }
     if (!input.organizationId) {
-      return alert(__("Failed to create data: organization is required"));
+      return alert(t("datumGraph.errors.createOrganizationRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -216,7 +211,7 @@ export const useCreateDatum = (connectionId: string) => {
 export const useUpdateDatum = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateDatumMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -226,7 +221,7 @@ export const useUpdateDatum = () => {
     thirdPartyIds?: string[];
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update data: missing id"));
+      return alert(t("datumGraph.errors.updateMissingId"));
     }
 
     return promisifyMutation(mutate)({

apps/console/src/hooks/graph/DocumentGraph.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
+import { useTranslation } from "react-i18next";
 import { graphql } from "relay-runtime";
 
 import type { DocumentGraphBulkExportDocumentsMutation } from "#/__generated__/core/DocumentGraphBulkExportDocumentsMutation.graphql";
@@ -40,13 +40,13 @@ const deleteDocumentMutation = graphql`
 `;
 
 export function useDeleteDocumentMutation() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMutationWithToasts<DocumentGraphDeleteMutation>(
     deleteDocumentMutation,
     {
-      successMessage: __("Document deleted successfully."),
+      successMessage: t("documentGraph.messages.deleted"),
-      errorMessage: __("Failed to delete document"),
+      errorMessage: t("documentGraph.errors.delete"),
     },
   );
 }
@@ -62,11 +62,11 @@ const bulkDeleteDocumentsMutation = graphql`
 `;
 
 export function useBulkDeleteDocumentsMutation() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMutationWithToasts(bulkDeleteDocumentsMutation, {
-    successMessage: __("Documents deleted successfully."),
+    successMessage: t("documentGraph.messages.bulkDeleted"),
-    errorMessage: __("Failed to delete documents"),
+    errorMessage: t("documentGraph.errors.bulkDelete"),
   });
 }
 
@@ -81,15 +81,13 @@ const bulkExportDocumentsMutation = graphql`
 `;
 
 export function useBulkExportDocumentsMutation() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMutationWithToasts<DocumentGraphBulkExportDocumentsMutation>(
     bulkExportDocumentsMutation,
     {
-      successMessage: __(
+      successMessage: t("documentGraph.messages.exportStarted"),
-        "Document export started successfully. You will receive an email when the export is ready.",
+      errorMessage: t("documentGraph.errors.export"),
-      ),
-      errorMessage: __("Failed to start document export"),
     },
   );
 }

apps/console/src/hooks/graph/FrameworkGraph.ts

@@ -18,10 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import { graphql } from "relay-runtime";
 
 import { useMutationWithToasts } from "../useMutationWithToasts";
@@ -68,12 +67,12 @@ export const useDeleteFrameworkMutation = (
   framework: { id: string; name: string },
   connectionId: string,
 ) => {
+  const { t } = useTranslation();
   const [commitDelete] = useMutationWithToasts(deleteFrameworkMutation, {
-    errorMessage: "Failed to delete framework",
+    errorMessage: t("frameworkGraph.errors.delete"),
-    successMessage: "Framework deleted successfully",
+    successMessage: t("frameworkGraph.messages.deleted"),
   });
   const confirm = useConfirm();
-  const { __ } = useTranslate();
 
   return useCallback(
     (options?: { onSuccess?: () => void }) => {
@@ -90,16 +89,13 @@ export const useDeleteFrameworkMutation = (
           });
         },
         {
-          message: sprintf(
+          message: t("frameworkGraph.deleteConfirmation", {
-            __(
+            name: framework.name,
-              "This will permanently delete framework \"%s\". This action cannot be undone.",
+          }),
-            ),
-            framework.name,
-          ),
         },
       );
     },
-    [framework, connectionId, commitDelete, confirm, __],
+    [framework, connectionId, commitDelete, confirm, t],
   );
 };
 

apps/console/src/hooks/graph/MeasureGraph.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
+import { useTranslation } from "react-i18next";
 import { graphql } from "relay-runtime";
 
 import type { MeasureGraphDeleteMutation } from "#/__generated__/core/MeasureGraphDeleteMutation.graphql";
@@ -39,13 +39,13 @@ const deleteMeasureMutation = graphql`
 `;
 
 export function useDeleteMeasureMutation() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMutationWithToasts<MeasureGraphDeleteMutation>(
     deleteMeasureMutation,
     {
-      successMessage: __("Measure deleted successfully."),
+      successMessage: t("measureGraph.messages.deleted"),
-      errorMessage: __("Failed to delete measure"),
+      errorMessage: t("measureGraph.errors.delete"),
     },
   );
 }
@@ -61,10 +61,10 @@ const measureUpdateMutation = graphql`
 `;
 
 export const useUpdateMeasure = () => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMutationWithToasts(measureUpdateMutation, {
-    successMessage: __("Measure updated successfully."),
+    successMessage: t("measureGraph.messages.updated"),
-    errorMessage: __("Failed to update measure"),
+    errorMessage: t("measureGraph.errors.update"),
   });
 };

apps/console/src/hooks/graph/ObligationGraph.ts

@@ -19,8 +19,8 @@
 // SOFTWARE.
 
 import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -149,10 +149,10 @@ export const useDeleteObligation = (
   obligation: { id: string },
   connectionId: string,
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(deleteObligationMutation, {
-    successMessage: __("Obligation deleted successfully"),
+    successMessage: t("obligationGraph.messages.deleted"),
-    errorMessage: __("Failed to delete obligation"),
+    errorMessage: t("obligationGraph.errors.delete"),
   });
   const confirm = useConfirm();
 
@@ -168,9 +168,7 @@ export const useDeleteObligation = (
           },
         }),
       {
-        message: __(
+        message: t("obligationGraph.deleteConfirmation"),
-          "This will permanently delete this obligation. This action cannot be undone.",
-        ),
       },
     );
   };
@@ -179,7 +177,7 @@ export const useDeleteObligation = (
 export const useCreateObligation = (connectionId: string) => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createObligationMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     organizationId: string;
@@ -195,10 +193,10 @@ export const useCreateObligation = (connectionId: string) => {
     status: string;
   }) => {
     if (!input.organizationId) {
-      return alert(__("Failed to create obligation: organization is required"));
+      return alert(t("obligationGraph.errors.createOrganizationRequired"));
     }
     if (!input.ownerId) {
-      return alert(__("Failed to create obligation: owner is required"));
+      return alert(t("obligationGraph.errors.createOwnerRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -225,7 +223,7 @@ export const useCreateObligation = (connectionId: string) => {
 export const useUpdateObligation = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateObligationMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -241,7 +239,7 @@ export const useUpdateObligation = () => {
     status?: string;
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update obligation: ID is required"));
+      return alert(t("obligationGraph.errors.updateIdRequired"));
     }
 
     return promisifyMutation(mutate)({

apps/console/src/hooks/graph/ProcessingActivityGraph.ts

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { promisifyMutation, sprintf } from "@probo/helpers";
+import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -272,10 +272,10 @@ export const useDeleteProcessingActivity = (
   processingActivity: { id: string; name: string },
   connectionId: string,
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(deleteProcessingActivityMutation, {
-    successMessage: __("Processing activity deleted successfully"),
+    successMessage: t("processingActivityGraph.messages.deleted"),
-    errorMessage: __("Failed to delete processing activity"),
+    errorMessage: t("processingActivityGraph.errors.delete"),
   });
   const confirm = useConfirm();
 
@@ -291,12 +291,9 @@ export const useDeleteProcessingActivity = (
           },
         }),
       {
-        message: sprintf(
+        message: t("processingActivityGraph.deleteConfirmation", {
-          __(
+          name: processingActivity.name,
-            "This will permanently delete the processing activity %s. This action cannot be undone.",
+        }),
-          ),
-          processingActivity.name,
-        ),
       },
     );
   };
@@ -305,7 +302,7 @@ export const useDeleteProcessingActivity = (
 export const useCreateProcessingActivity = (connectionId?: string) => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createProcessingActivityMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     organizationId: string;
@@ -332,12 +329,12 @@ export const useCreateProcessingActivity = (connectionId?: string) => {
   }) => {
     if (!input.organizationId) {
       return alert(
-        __("Failed to create processing activity: organization is required"),
+        t("processingActivityGraph.errors.createOrganizationRequired"),
       );
     }
     if (!input.name) {
       return alert(
-        __("Failed to create processing activity: name is required"),
+        t("processingActivityGraph.errors.createNameRequired"),
       );
     }
 
@@ -376,7 +373,7 @@ export const useCreateProcessingActivity = (connectionId?: string) => {
 export const useUpdateProcessingActivity = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateProcessingActivityMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -402,7 +399,7 @@ export const useUpdateProcessingActivity = () => {
     thirdPartyIds?: string[];
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update processing activity: ID is required"));
+      return alert(t("processingActivityGraph.errors.updateIdRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -489,7 +486,7 @@ export const deleteDataProtectionImpactAssessmentMutation = graphql`
 export const useCreateDataProtectionImpactAssessment = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createDataProtectionImpactAssessmentMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     processingActivityId: string;
@@ -501,7 +498,7 @@ export const useCreateDataProtectionImpactAssessment = () => {
   }) => {
     if (!input.processingActivityId) {
       return alert(
-        __("Failed to create DPIA: Processing Activity ID is required"),
+        t("processingActivityGraph.errors.createDpiaProcessingActivityIdRequired"),
       );
     }
 
@@ -516,7 +513,7 @@ export const useCreateDataProtectionImpactAssessment = () => {
 export const useUpdateDataProtectionImpactAssessment = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateDataProtectionImpactAssessmentMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -527,7 +524,7 @@ export const useUpdateDataProtectionImpactAssessment = () => {
     residualRisk?: ProcessingActivityDPIAResidualRisk;
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update DPIA: ID is required"));
+      return alert(t("processingActivityGraph.errors.updateDpiaIdRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -542,12 +539,12 @@ export const useDeleteDataProtectionImpactAssessment = (
   dpia: { id: string },
   options?: { onSuccess?: () => void },
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(
     deleteDataProtectionImpactAssessmentMutation,
     {
-      successMessage: __("DPIA deleted successfully"),
+      successMessage: t("processingActivityGraph.messages.dpiaDeleted"),
-      errorMessage: __("Failed to delete DPIA"),
+      errorMessage: t("processingActivityGraph.errors.deleteDpia"),
     },
   );
   const confirm = useConfirm();
@@ -564,9 +561,7 @@ export const useDeleteDataProtectionImpactAssessment = (
           onSuccess: options?.onSuccess,
         }),
       {
-        message: __(
+        message: t("processingActivityGraph.dpiaDeleteConfirmation"),
-          "This will permanently delete this Data Protection Impact Assessment. This action cannot be undone.",
-        ),
       },
     );
   };
@@ -648,7 +643,7 @@ export const deleteTransferImpactAssessmentMutation = graphql`
 export const useCreateTransferImpactAssessment = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createTransferImpactAssessmentMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     processingActivityId: string;
@@ -660,7 +655,7 @@ export const useCreateTransferImpactAssessment = () => {
   }) => {
     if (!input.processingActivityId) {
       return alert(
-        __("Failed to create TIA: Processing Activity ID is required"),
+        t("processingActivityGraph.errors.createTiaProcessingActivityIdRequired"),
       );
     }
 
@@ -675,7 +670,7 @@ export const useCreateTransferImpactAssessment = () => {
 export const useUpdateTransferImpactAssessment = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateTransferImpactAssessmentMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -686,7 +681,7 @@ export const useUpdateTransferImpactAssessment = () => {
     supplementaryMeasures?: string;
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update TIA: ID is required"));
+      return alert(t("processingActivityGraph.errors.updateTiaIdRequired"));
     }
 
     return promisifyMutation(mutate)({
@@ -701,12 +696,12 @@ export const useDeleteTransferImpactAssessment = (
   tia: { id: string },
   options?: { onSuccess?: () => void },
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(
     deleteTransferImpactAssessmentMutation,
     {
-      successMessage: __("TIA deleted successfully"),
+      successMessage: t("processingActivityGraph.messages.tiaDeleted"),
-      errorMessage: __("Failed to delete TIA"),
+      errorMessage: t("processingActivityGraph.errors.deleteTia"),
     },
   );
   const confirm = useConfirm();
@@ -723,9 +718,7 @@ export const useDeleteTransferImpactAssessment = (
           onSuccess: options?.onSuccess,
         }),
       {
-        message: __(
+        message: t("processingActivityGraph.tiaDeleteConfirmation"),
-          "This will permanently delete this Transfer Impact Assessment. This action cannot be undone.",
-        ),
       },
     );
   };

apps/console/src/hooks/graph/RightsRequestGraph.ts

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { promisifyMutation, sprintf } from "@probo/helpers";
+import { promisifyMutation } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -126,10 +126,10 @@ export const useDeleteRightsRequest = (
   request: { id: string },
   connectionId: string,
 ) => {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [mutate] = useMutationWithToasts(deleteRightsRequestMutation, {
-    successMessage: __("Rights request deleted successfully"),
+    successMessage: t("rightsRequestGraph.messages.deleted"),
-    errorMessage: __("Failed to delete rights request"),
+    errorMessage: t("rightsRequestGraph.errors.delete"),
   });
   const confirm = useConfirm();
 
@@ -145,11 +145,7 @@ export const useDeleteRightsRequest = (
           },
         }),
       {
-        message: sprintf(
+        message: t("rightsRequestGraph.deleteConfirmation"),
-          __(
-            "This will permanently delete the rights request. This action cannot be undone.",
-          ),
-        ),
       },
     );
   };
@@ -158,7 +154,7 @@ export const useDeleteRightsRequest = (
 export const useCreateRightsRequest = (connectionId: string) => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(createRightsRequestMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     organizationId: string;
@@ -172,17 +168,17 @@ export const useCreateRightsRequest = (connectionId: string) => {
   }) => {
     if (!input.organizationId) {
       return alert(
-        __("Failed to create rights request: organization is required"),
+        t("rightsRequestGraph.errors.createOrganizationRequired"),
       );
     }
     if (!input.requestType) {
       return alert(
-        __("Failed to create rights request: request type is required"),
+        t("rightsRequestGraph.errors.createRequestTypeRequired"),
       );
     }
     if (!input.requestState) {
       return alert(
-        __("Failed to create rights request: request state is required"),
+        t("rightsRequestGraph.errors.createRequestStateRequired"),
       );
     }
 
@@ -207,7 +203,7 @@ export const useCreateRightsRequest = (connectionId: string) => {
 export const useUpdateRightsRequest = () => {
   // eslint-disable-next-line relay/generated-typescript-types
   const [mutate] = useMutation(updateRightsRequestMutation);
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (input: {
     id: string;
@@ -220,7 +216,7 @@ export const useUpdateRightsRequest = () => {
     actionTaken?: string;
   }) => {
     if (!input.id) {
-      return alert(__("Failed to update rights request: ID is required"));
+      return alert(t("rightsRequestGraph.errors.updateIdRequired"));
     }
 
     return promisifyMutation(mutate)({

apps/console/src/hooks/useMutationWithIncrement.ts

@@ -19,9 +19,9 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useToast } from "@probo/ui";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import {
   useMutation,
   type UseMutationConfig,
@@ -55,7 +55,7 @@ export function useMutationWithIncrement<T extends MutationParameters>(
   const [mutate, isLoading] = useMutation<T>(query);
   const relayEnv = useRelayEnvironment();
   const { toast } = useToast();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const options = { ...defaultOptions, ...baseOptions };
   const mutateAndIncrement = useCallback(
     (queryOptions: UseMutationConfig<T>) => {
@@ -63,9 +63,9 @@ export function useMutationWithIncrement<T extends MutationParameters>(
         ...queryOptions,
         onCompleted: (response, error) => {
           if (error) {
-            const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
+            const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
             toast({
-              title: __("Error"),
+              title: t("common.error"),
               description: formatError(errorTitle, error),
               variant: "error",
             });
@@ -81,9 +81,9 @@ export function useMutationWithIncrement<T extends MutationParameters>(
           queryOptions.onCompleted?.(response, error);
         },
         onError: (error) => {
-          const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
+          const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
           toast({
-            title: __("Error"),
+            title: t("common.error"),
             description: formatError(errorTitle, error),
             variant: "error",
           });
@@ -91,7 +91,7 @@ export function useMutationWithIncrement<T extends MutationParameters>(
         },
       });
     },
-    [mutate, options.id, options.node, options.field, options.value, options.errorMessage, relayEnv, toast, __],
+    [mutate, options.id, options.node, options.field, options.value, options.errorMessage, relayEnv, toast, t],
   );
 
   return [mutateAndIncrement, isLoading] as const;

apps/console/src/hooks/useMutationWithToasts.ts

@@ -19,9 +19,9 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { useToast } from "@probo/ui";
 import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation, type UseMutationConfig } from "react-relay";
 import type { GraphQLTaggedNode, MutationParameters } from "relay-runtime";
 
@@ -37,7 +37,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
 ) {
   const [mutate, isLoading] = useMutation<T>(query);
   const { toast } = useToast();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const mutateWithToast = useCallback(
     (
       queryOptions: UseMutationConfig<T> & {
@@ -53,9 +53,9 @@ export function useMutationWithToasts<T extends MutationParameters>(
           onCompleted: (response, error) => {
             options.onCompleted?.(response, error);
             if (error) {
-              const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
+              const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
               toast({
-                title: __("Error"),
+                title: t("common.error"),
                 description: formatError(errorTitle, error),
                 variant: "error",
               });
@@ -67,19 +67,19 @@ export function useMutationWithToasts<T extends MutationParameters>(
               : options.successMessage;
 
             toast({
-              title: __("Success"),
+              title: t("common.success"),
               description:
                 successMessage
-                ?? __("Operation completed successfully"),
+                ?? t("mutation.messages.completed"),
               variant: "success",
             });
             options.onSuccess?.();
             resolve();
           },
           onError: (error) => {
-            const errorTitle = options.errorMessage ?? __("Failed to commit this operation");
+            const errorTitle = options.errorMessage ?? t("mutation.errors.commit");
             toast({
-              title: __("Error"),
+              title: t("common.error"),
               description: formatError(errorTitle, error),
               variant: "error",
             });
@@ -88,7 +88,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
         }),
       );
     },
-    [mutate, toast, __, baseOptions],
+    [mutate, toast, t, baseOptions],
   );
 
   return [mutateWithToast, isLoading] as const;

apps/console/src/lib/i18n/backend.ts

@@ -0,0 +1,84 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import type { BackendModule, ReadCallback, ResourceKey } from "i18next";
+
+// The default namespace for app-wide chrome strings, sourced from src/_locales/.
+export const DEFAULT_NAMESPACE = "app";
+
+type CatalogModule = { default: ResourceKey };
+
+// Vite turns each translation JSON into its own lazily-imported chunk. The keys
+// are project-root-absolute paths, e.g.
+// "/src/pages/organizations/measures/_locales/en-US.json".
+const catalogs = import.meta.glob<CatalogModule>("/src/**/_locales/*.json");
+
+const CATALOG_PATH = /^\/src\/(.*)_locales\/([^/]+)\.json$/;
+
+// Map "<namespace>\u0000<language>" -> lazy importer for that catalog chunk.
+function buildLookup(): Map<string, () => Promise<CatalogModule>> {
+  const lookup = new Map<string, () => Promise<CatalogModule>>();
+
+  for (const [path, importer] of Object.entries(catalogs)) {
+    const match = CATALOG_PATH.exec(path);
+    if (!match) {
+      continue;
+    }
+
+    const [, prefix, language] = match;
+    // prefix is the path between "src/" and "_locales/", e.g. "pages/foo/".
+    // Drop the leading "pages/" and trailing slash; an empty prefix (src/_locales)
+    // is the app-wide default namespace.
+    const namespace
+      = prefix.replace(/^pages\//, "").replace(/\/$/, "") || DEFAULT_NAMESPACE;
+
+    lookup.set(catalogKey(namespace, language), importer);
+  }
+
+  return lookup;
+}
+
+function catalogKey(namespace: string, language: string): string {
+  return `${namespace}\u0000${language}`;
+}
+
+const lookup = buildLookup();
+
+// Custom i18next backend that resolves a (language, namespace) pair to its lazy
+// JSON chunk. A missing catalog resolves to an empty resource so i18next falls
+// through to fallbackLng rather than treating it as a hard load error.
+export const globBackend: BackendModule = {
+  type: "backend",
+  init() {},
+  read(language: string, namespace: string, callback: ReadCallback) {
+    const importer = lookup.get(catalogKey(namespace, language));
+
+    if (!importer) {
+      callback(null, {});
+      return;
+    }
+
+    importer().then(
+      module => callback(null, module.default),
+      (error: unknown) =>
+        callback(error instanceof Error ? error : new Error(String(error)), null),
+    );
+  },
+};

apps/console/src/lib/i18n/i18n.ts

@@ -0,0 +1,47 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { createInstance } from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import { DEFAULT_NAMESPACE, globBackend } from "./backend";
+import { resolveLanguage, SUPPORTED_LANGUAGES } from "./resolveLanguage";
+
+// Build a dedicated instance rather than mutating i18next's global singleton.
+// Initializing it through initReactI18next still registers it as the instance
+// react-i18next's hooks read from, so no I18nextProvider is required.
+const i18n = createInstance();
+
+void i18n
+  .use(globBackend)
+  .use(initReactI18next)
+  .init({
+    lng: resolveLanguage(),
+    fallbackLng: "en-US",
+    supportedLngs: SUPPORTED_LANGUAGES,
+    load: "currentOnly",
+    defaultNS: DEFAULT_NAMESPACE,
+    fallbackNS: DEFAULT_NAMESPACE,
+    ns: [DEFAULT_NAMESPACE],
+    interpolation: { escapeValue: false },
+    react: { useSuspense: true },
+  });
+
+export { i18n };

apps/console/src/lib/i18n/resolveLanguage.ts

@@ -0,0 +1,76 @@
+// Copyright (c) 2026 Probo Inc <hello@probo.com>.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+export const SUPPORTED_LANGUAGES = [
+  "en-US",
+  "fr-FR",
+  "de-DE",
+  "es-ES",
+  "id-ID",
+  "it-IT",
+  "ja-JP",
+  "ko-KR",
+  "pl-PL",
+  "pt-PT",
+  "tr-TR",
+  "uk-UA",
+  "zh-CN",
+] as const;
+
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+
+// Maps a two-letter language prefix (lowercased) to its canonical supported
+// tag, e.g. any "de*" browser tag resolves to "de-DE".
+const PREFIX_TO_LANGUAGE: Record<string, SupportedLanguage> = {
+  en: "en-US",
+  fr: "fr-FR",
+  de: "de-DE",
+  es: "es-ES",
+  id: "id-ID",
+  it: "it-IT",
+  ja: "ja-JP",
+  ko: "ko-KR",
+  pl: "pl-PL",
+  pt: "pt-PT",
+  tr: "tr-TR",
+  uk: "uk-UA",
+  zh: "zh-CN",
+};
+
+// Collapse the browser's preferred languages to one of our supported locales
+// by matching the two-letter language prefix (e.g. any "fr*" tag maps to
+// fr-FR). en-US is the ultimate fallback when nothing matches. Resolving to a
+// canonical supported tag here means i18next is never asked to load an
+// unsupported locale; fallbackLng only has to cover individual missing keys.
+export function resolveLanguage(): SupportedLanguage {
+  const candidates = navigator.languages?.length
+    ? navigator.languages
+    : [navigator.language];
+
+  for (const tag of candidates) {
+    const prefix = tag.toLowerCase().split("-")[0];
+    const language = PREFIX_TO_LANGUAGE[prefix];
+    if (language) {
+      return language;
+    }
+  }
+
+  return "en-US";
+}

apps/console/src/lib/relay/useMutation.ts

@@ -13,10 +13,10 @@
 // PERFORMANCE OF THIS SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { createUseMutation, type MutationNotifier } from "@probo/relay";
 import { useToast } from "@probo/ui";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 /**
  * Binds the shared awaitable useMutation (`@probo/relay`) to this app's
@@ -28,7 +28,7 @@ import { useMemo } from "react";
  */
 function useMutationNotifier(): MutationNotifier {
   const { toast } = useToast();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return useMemo<MutationNotifier>(
     () => ({
@@ -36,7 +36,7 @@ function useMutationNotifier(): MutationNotifier {
         toast({ title, description: "", variant: "success" });
       },
       notifyError: (error, title) => {
-        const finalTitle = title ?? __("Error");
+        const finalTitle = title ?? t("common.error");
         toast({
           title: finalTitle,
           description: formatError(finalTitle, error),
@@ -44,7 +44,7 @@ function useMutationNotifier(): MutationNotifier {
         });
       },
     }),
-    [toast, __],
+    [toast, t],
   );
 }
 

apps/console/src/main.tsx

@@ -24,7 +24,7 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 
 import { App } from "./App";
-import { TranslatorProvider } from "./providers/TranslatorProvider";
+import "./lib/i18n/i18n";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,8 +36,6 @@ const queryClient = new QueryClient({
 
 createRoot(document.getElementById("root")!).render(
   <QueryClientProvider client={queryClient}>
-    <TranslatorProvider>
     <App />
-    </TranslatorProvider>
   </QueryClientProvider>,
 );

apps/console/src/pages/iam/apiKeys/APIKeysPage.tsx

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
+import { useTranslation } from "react-i18next";
 import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
 
 import type { APIKeysPageQuery } from "#/__generated__/iam/APIKeysPageQuery.graphql";
@@ -37,13 +37,13 @@ export function APIKeysPage(props: {
   queryRef: PreloadedQuery<APIKeysPageQuery>;
 }) {
   const { queryRef } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const data = usePreloadedQuery<APIKeysPageQuery>(apiKeysPageQuery, queryRef);
 
   return (
     <div className="space-y-6 w-full py-6">
-      <h1 className="text-3xl font-bold text-center">{__("API Keys")}</h1>
+      <h1 className="text-3xl font-bold text-center">{t("apiKeys.title")}</h1>
       {data.viewer && <PersonalAPIKeyList fKey={data.viewer} />}
     </div>
   );

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Breadcrumb,
   Button,
@@ -37,6 +36,7 @@ import {
 } from "@probo/ui";
 import { useState } from "react";
 import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import {
   ConnectionHandler,
   graphql,
@@ -120,7 +120,7 @@ export function PersonalAPIKeyList(props: {
   fKey: PersonalAPIKeyListFragment$key;
 }) {
   const { fKey } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const createDialogRef = useDialogRef();
   const tokenDialogRef = useDialogRef();
@@ -162,8 +162,8 @@ export function PersonalAPIKeyList(props: {
       },
       onCompleted: (response) => {
         toast({
-          title: __("Success"),
+          title: t("common.success"),
-          description: __("API key created successfully."),
+          description: t("personalApiKeyList.messages.created"),
           variant: "success",
         });
         const newToken = response.createPersonalAPIKey?.token;
@@ -176,8 +176,8 @@ export function PersonalAPIKeyList(props: {
       },
       onError: (error) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"),
-          description: formatError(__("Failed to create API key."), error),
+          description: formatError(t("personalApiKeyList.errors.create"), error),
           variant: "error",
         });
       },
@@ -188,9 +188,9 @@ export function PersonalAPIKeyList(props: {
     <>
       <div className="space-y-4">
         <div className="flex justify-between items-center">
-          <h2 className="text-base font-medium">{__("API Keys")}</h2>
+          <h2 className="text-base font-medium">{t("apiKeys.title")}</h2>
           <Button onClick={() => createDialogRef.current?.open()}>
-            {__("Create API Key")}
+            {t("personalApiKeyList.actions.create")}
           </Button>
         </div>
 
@@ -199,10 +199,10 @@ export function PersonalAPIKeyList(props: {
               <Card padded>
                 <div className="text-center py-12">
                   <h3 className="text-lg font-medium text-gray-900 mb-2">
-                    {__("No API keys")}
+                    {t("personalApiKeyList.empty.title")}
                   </h3>
                   <p className="text-gray-600 mb-6">
-                    {__("Create an API key to authenticate programmatic access.")}
+                    {t("personalApiKeyList.empty.description")}
                   </p>
                 </div>
               </Card>
@@ -219,21 +219,21 @@ export function PersonalAPIKeyList(props: {
 
       <Dialog
         ref={createDialogRef}
-        title={<Breadcrumb items={[__("API Keys"), __("Create")]} />}
+        title={<Breadcrumb items={[t("apiKeys.title"), t("common.create")]} />}
         onClose={() => reset()}
       >
         <form onSubmit={e => void handleSubmit(handleCreate)(e)}>
           <DialogContent padded className="space-y-5">
             <Field error={formState.errors.name?.message}>
-              <Label>{__("Name")}</Label>
+              <Label>{t("personalApiKeyList.fields.name.label")}</Label>
               <Input
                 {...register("name")}
-                placeholder={__("e.g., Production API Key")}
+                placeholder={t("personalApiKeyList.fields.name.placeholder")}
               />
             </Field>
 
             <Field error={formState.errors.expiresIn?.message}>
-              <Label>{__("Expires In")}</Label>
+              <Label>{t("personalApiKeyList.fields.expiresIn.label")}</Label>
               <Controller
                 control={control}
                 name="expiresIn"
@@ -243,10 +243,18 @@ export function PersonalAPIKeyList(props: {
                     onValueChange={field.onChange}
                     value={field.value}
                   >
-                    <Option value="1month">{__("1 Month")}</Option>
+                    <Option value="1month">
-                    <Option value="3months">{__("3 Months")}</Option>
+                      {t("personalApiKeyList.expirations.month", { count: 1 })}
-                    <Option value="6months">{__("6 Months")}</Option>
+                    </Option>
-                    <Option value="1year">{__("1 Year")}</Option>
+                    <Option value="3months">
+                      {t("personalApiKeyList.expirations.month", { count: 3 })}
+                    </Option>
+                    <Option value="6months">
+                      {t("personalApiKeyList.expirations.month", { count: 6 })}
+                    </Option>
+                    <Option value="1year">
+                      {t("personalApiKeyList.expirations.year", { count: 1 })}
+                    </Option>
                   </Select>
                 )}
               />
@@ -254,7 +262,7 @@ export function PersonalAPIKeyList(props: {
           </DialogContent>
           <DialogFooter>
             <Button type="submit" disabled={isCreating}>
-              {isCreating ? __("Creating...") : __("Create")}
+              {isCreating ? t("personalApiKeyList.actions.creating") : t("common.create")}
             </Button>
           </DialogFooter>
         </form>

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx

@@ -18,11 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { formatDate, formatError } from "@probo/helpers";
+import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
+import { dateFormat } from "@probo/i18n";
 import { Button, Spinner, Td, Tr, useConfirm, useToast } from "@probo/ui";
 import { clsx } from "clsx";
 import { Suspense } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment, useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -61,7 +62,7 @@ export function PersonalAPIKeyRow(props: {
   connectionId: string;
 }) {
   const { fKey, connectionId } = props;
-  const { __ } = useTranslate();
+  const { t, i18n } = useTranslation();
   const confirm = useConfirm();
   const { toast } = useToast();
   const now = new Date();
@@ -84,28 +85,28 @@ export function PersonalAPIKeyRow(props: {
             onCompleted: (_response, errors) => {
               if (errors?.length) {
                 toast({
-                  title: __("Error"),
+                  title: t("common.error"),
                   description: formatError(
-                    __("Failed to revoke API key."),
+                    t("personalApiKeyRow.errors.revoke"),
                     errors,
                   ),
                   variant: "error",
                 });
-                reject(new Error(errors[0]?.message ?? __("Failed to revoke API key.")));
+                reject(new Error(errors[0]?.message ?? t("personalApiKeyRow.errors.revoke")));
                 return;
               }
               toast({
-                title: __("Success"),
+                title: t("common.success"),
-                description: __("API key revoked successfully."),
+                description: t("personalApiKeyRow.messages.revoked"),
                 variant: "success",
               });
               resolve();
             },
             onError: (error) => {
               toast({
-                title: __("Error"),
+                title: t("common.error"),
                 description: formatError(
-                  __("Failed to revoke API key."),
+                  t("personalApiKeyRow.errors.revoke"),
                   error,
                 ),
                 variant: "error",
@@ -116,11 +117,9 @@ export function PersonalAPIKeyRow(props: {
         });
       },
       {
-        title: __("Revoke API Key"),
+        title: t("personalApiKeyRow.revoke.title"),
-        message: __(
+        message: t("personalApiKeyRow.revoke.confirmation", { name: key.name }),
-          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`,
+        label: t("personalApiKeyRow.actions.revoke"),
-        ),
-        label: __("Revoke"),
         variant: "danger",
       },
     );
@@ -131,22 +130,22 @@ export function PersonalAPIKeyRow(props: {
       <Td>
         <div className="font-medium text-txt-primary">{key.name}</div>
         <div className="text-xs text-txt-tertiary">
-          {expired ? __("Expired") : __("Active")}
+          {expired ? t("personalApiKeyRow.status.expired") : t("personalApiKeyRow.status.active")}
         </div>
       </Td>
       <Td>
         <span className="text-sm text-txt-secondary">
-          {key.lastUsedAt ? formatDate(key.lastUsedAt) : __("Never")}
+          {key.lastUsedAt ? dateFormat(i18n.language, key.lastUsedAt) : t("personalApiKeyRow.never")}
         </span>
       </Td>
       <Td>
         <span className="text-sm text-txt-secondary">
-          {formatDate(key.createdAt)}
+          {dateFormat(i18n.language, key.createdAt)}
         </span>
       </Td>
       <Td>
         <span className="text-sm text-txt-secondary">
-          {formatDate(key.expiresAt)}
+          {dateFormat(i18n.language, key.expiresAt)}
         </span>
       </Td>
       <Td width={140} className="text-end">
@@ -155,7 +154,7 @@ export function PersonalAPIKeyRow(props: {
             <PersonalAPIKeyTokenAction fKey={fKey} disabled={isRevoking} />
           </Suspense>
           <Button variant="danger" onClick={handleRevoke} disabled={isRevoking}>
-            {__("Revoke")}
+            {t("personalApiKeyRow.actions.revoke")}
           </Button>
         </div>
       </Td>

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx

@@ -19,8 +19,8 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Button, useDialogRef, useToast } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useRefetchableFragment } from "react-relay";
 
 import type { PersonalAPIKeyRowFragment$key } from "#/__generated__/iam/PersonalAPIKeyRowFragment.graphql";
@@ -34,7 +34,7 @@ export function PersonalAPIKeyTokenAction(props: {
   disabled?: boolean;
 }) {
   const { fKey, disabled } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const dialogRef = useDialogRef();
 
@@ -53,9 +53,9 @@ export function PersonalAPIKeyTokenAction(props: {
         onComplete: (error) => {
           if (error) {
             toast({
-              title: __("Error"),
+              title: t("common.error"),
               description: formatError(
-                __("Failed to load API key token."),
+                t("personalApiKeyTokenAction.errors.load"),
                 error,
               ),
               variant: "error",
@@ -70,7 +70,7 @@ export function PersonalAPIKeyTokenAction(props: {
   return (
     <>
       <Button variant="secondary" onClick={handleShow} disabled={!!disabled}>
-        {__("Show")}
+        {t("personalApiKeyTokenAction.actions.show")}
       </Button>
 
       <PersonalAPIKeyTokenDialog

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenDialog.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { useCopy } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Breadcrumb,
   Button,
@@ -27,6 +26,7 @@ import {
   DialogContent,
   DialogFooter,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 export function PersonalAPIKeyTokenDialog(props: {
   dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
@@ -34,13 +34,13 @@ export function PersonalAPIKeyTokenDialog(props: {
   onDone: () => void;
 }) {
   const { dialogRef, token, onDone } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [isCopied, copy] = useCopy();
 
   return (
     <Dialog
       ref={dialogRef}
-      title={<Breadcrumb items={[__("API Keys"), __("Token")]} />}
+      title={<Breadcrumb items={[t("apiKeys.title"), t("personalApiKeyTokenDialog.title")]} />}
     >
       <DialogContent padded className="space-y-4">
         <div className="bg-gray-100 p-4 rounded-lg flex items-center gap-2">
@@ -50,12 +50,12 @@ export function PersonalAPIKeyTokenDialog(props: {
             onClick={() => copy(token)}
             disabled={!token}
           >
-            {isCopied ? __("Copied") : __("Copy")}
+            {isCopied ? t("personalApiKeyTokenDialog.actions.copied") : t("personalApiKeyTokenDialog.actions.copy")}
           </Button>
         </div>
       </DialogContent>
       <DialogFooter>
-        <Button onClick={onDone}>{__("Done")}</Button>
+        <Button onClick={onDone}>{t("personalApiKeyTokenDialog.actions.done")}</Button>
       </DialogFooter>
     </Dialog>
   );

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeysTable.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Table, Tbody, Th, Thead, Tr } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 
 import type { PersonalAPIKeyListFragment$data } from "#/__generated__/iam/PersonalAPIKeyListFragment.graphql";
 
@@ -30,16 +30,16 @@ export function PersonalAPIKeysTable(props: {
   connectionId: string;
 }) {
   const { edges, connectionId } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Table>
       <Thead>
         <Tr>
-          <Th>{__("Name")}</Th>
+          <Th>{t("personalApiKeysTable.columns.name")}</Th>
-          <Th>{__("Last used")}</Th>
+          <Th>{t("personalApiKeysTable.columns.lastUsed")}</Th>
-          <Th>{__("Created")}</Th>
+          <Th>{t("personalApiKeysTable.columns.created")}</Th>
-          <Th>{__("Expires")}</Th>
+          <Th>{t("personalApiKeysTable.columns.expires")}</Th>
           <Th></Th>
         </Tr>
       </Thead>

apps/console/src/pages/iam/auth/ActivateAccountPage.tsx

@@ -20,9 +20,9 @@
 
 import { formatError, type GraphQLError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { useToast } from "@probo/ui";
 import { useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link, useNavigate, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -42,14 +42,14 @@ const activateAccountMutation = graphql`
 `;
 
 export default function ActivateAccountPage() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const submittedRef = useRef<boolean>(false);
   const safeContinueUrl = useSafeContinueUrl();
 
-  usePageTitle(__("Activate Account"));
+  usePageTitle(t("activateAccountPage.pageTitle"));
 
   const [activateAccount] = useMutation<ActivateAccountPageMutation>(activateAccountMutation);
 
@@ -72,8 +72,8 @@ export default function ActivateAccountPage() {
             }
           }
           toast({
-            title: __("Activation failed"),
+            title: t("activateAccountPage.errors.activationFailed"),
-            description: formatError(__("Activation failed"), errors),
+            description: formatError(t("activateAccountPage.errors.activationFailed"), errors),
             variant: "error",
           });
 
@@ -81,10 +81,8 @@ export default function ActivateAccountPage() {
         }
 
         toast({
-          title: __("Success"),
+          title: t("common.success"),
-          description: __(
+          description: t("activateAccountPage.messages.activated"),
-            "Account activated successfully.",
-          ),
           variant: "success",
         });
 
@@ -125,13 +123,13 @@ export default function ActivateAccountPage() {
       },
       onError: (e) => {
         toast({
-          title: __("Activation failed"),
+          title: t("activateAccountPage.errors.activationFailed"),
           description: e.message,
           variant: "error",
         });
       },
     });
-  }, [__, toast, activateAccount, navigate, safeContinueUrl]);
+  }, [t, toast, activateAccount, navigate, safeContinueUrl]);
 
   useEffect(() => {
     const token = searchParams.get("token");
@@ -144,9 +142,9 @@ export default function ActivateAccountPage() {
   return (
     <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Account Activation")}</h1>
+        <h1 className="text-3xl font-bold">{t("activateAccountPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Activating your account…")}
+          {t("activateAccountPage.activating")}
         </p>
       </div>
       <div className="text-center mt-6 text-sm text-txt-secondary">
@@ -154,7 +152,7 @@ export default function ActivateAccountPage() {
           to="/auth/login"
           className="underline hover:text-txt-primary"
         >
-          {__("Go back")}
+          {t("activateAccountPage.actions.goBack")}
         </Link>
       </div>
     </div>

apps/console/src/pages/iam/auth/ConsentPage.tsx

@@ -20,7 +20,6 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   IconArrowsClockwise,
@@ -34,6 +33,7 @@ import {
   useToast,
 } from "@probo/ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -65,10 +65,10 @@ const approveConsentMutation = graphql`
 `;
 
 const scopeLabels: Record<string, string> = {
-  openid: "Verify your identity",
+  openid: "consentPage.scopes.openid",
-  email: "View your email address",
+  email: "consentPage.scopes.email",
-  profile: "View your profile information",
+  profile: "consentPage.scopes.profile",
-  offline_access: "Stay signed in and access your data while you're away",
+  offline_access: "consentPage.scopes.offlineAccess",
 };
 
 const scopeIcons: Record<string, React.ReactNode> = {
@@ -82,8 +82,9 @@ function scopeIcon(name: string): React.ReactNode {
   return scopeIcons[name] ?? <IconKey size={18} className="shrink-0 text-txt-tertiary" />;
 }
 
-function scopeLabel(name: string): string {
+function scopeLabel(name: string, translate: (key: string) => string): string {
-  return scopeLabels[name] ?? formatApiScopeLabel(name);
+  const key = scopeLabels[name];
+  return key ? translate(key) : formatApiScopeLabel(name);
 }
 
 function isApiScope(scope: string): boolean {
@@ -110,8 +111,7 @@ function ConsentScopeRow(props: {
   translate: (label: string) => string;
   nested?: boolean;
 }) {
-  const label = scopeLabel(props.scope);
+  const translated = scopeLabel(props.scope, props.translate);
-  const translated = label !== props.scope ? props.translate(label) : label;
 
   return (
     <li
@@ -163,7 +163,7 @@ function ConsentApiScopesAccordion(props: {
 export default function ConsentPage(props: {
   queryRef: PreloadedQuery<ConsentPageQuery>;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [deviceResult, setDeviceResult] = useState<"authorized" | "denied" | null>(null);
   const [pendingAction, setPendingAction] = useState<"allow" | "deny" | null>(null);
@@ -173,7 +173,7 @@ export default function ConsentPage(props: {
   } | null>(null);
 
   const data = usePreloadedQuery<ConsentPageQuery>(consentPageQuery, props.queryRef);
-  usePageTitle(__("Authorize Application"));
+  usePageTitle(t("consentPage.pageTitle"));
 
   const { node: consent } = data;
 
@@ -185,8 +185,8 @@ export default function ConsentPage(props: {
   );
 
   const apiScopesSummary = useMemo(
-    () => `${__("API access")} (${apiScopes.length})`,
+    () => t("consentPage.apiAccess", { count: apiScopes.length }),
-    [__, apiScopes.length],
+    [t, apiScopes.length],
   );
 
   useEffect(() => {
@@ -212,9 +212,9 @@ export default function ConsentPage(props: {
           if (errors) {
             setPendingAction(null);
             toast({
-              title: __("Authorization failed"),
+              title: t("consentPage.errors.authorizationFailed"),
               description: formatError(
-                __("Something went wrong. Please try again."),
+                t("consentPage.errors.generic"),
                 errors,
               ),
               variant: "error",
@@ -225,8 +225,8 @@ export default function ConsentPage(props: {
           if (!response.approveConsent) {
             setPendingAction(null);
             toast({
-              title: __("Authorization failed"),
+              title: t("consentPage.errors.authorizationFailed"),
-              description: __("Something went wrong. Please try again."),
+              description: t("consentPage.errors.generic"),
               variant: "error",
             });
             return;
@@ -247,23 +247,23 @@ export default function ConsentPage(props: {
         onError: (err) => {
           setPendingAction(null);
           toast({
-            title: __("Error"),
+            title: t("common.error"),
             description:
-              err.message || __("Something went wrong. Please try again."),
+              err.message || t("consentPage.errors.generic"),
             variant: "error",
           });
         },
       });
     },
-    [consent, approveConsent, __, toast, pendingAction],
+    [consent, approveConsent, t, toast, pendingAction],
   );
 
   if (!consent.application || !consent.scopes) {
     return (
       <div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
-        <h1 className="text-2xl font-bold">{__("Invalid Request")}</h1>
+        <h1 className="text-2xl font-bold">{t("consentPage.invalidRequest.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("This consent request is invalid or has expired.")}
+          {t("consentPage.invalidRequest.description")}
         </p>
       </div>
     );
@@ -272,9 +272,9 @@ export default function ConsentPage(props: {
   if (deviceResult === "authorized") {
     return (
       <div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
-        <h1 className="text-2xl font-bold">{__("Device Authorized")}</h1>
+        <h1 className="text-2xl font-bold">{t("consentPage.deviceAuthorized.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Your device has been successfully authorized. You can close this window and return to your device.")}
+          {t("consentPage.deviceAuthorized.description")}
         </p>
       </div>
     );
@@ -283,9 +283,9 @@ export default function ConsentPage(props: {
   if (deviceResult === "denied") {
     return (
       <div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
-        <h1 className="text-2xl font-bold">{__("Access Denied")}</h1>
+        <h1 className="text-2xl font-bold">{t("consentPage.accessDenied.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("You have denied the authorization request. You can close this window.")}
+          {t("consentPage.accessDenied.description")}
         </p>
       </div>
     );
@@ -297,10 +297,10 @@ export default function ConsentPage(props: {
         <Spinner size={24} centered className="text-txt-tertiary" />
         <div className="space-y-2">
           <h1 className="text-2xl font-bold">
-            {redirectState.approved ? __("Authorization Complete") : __("Access Denied")}
+            {redirectState.approved ? t("consentPage.authorizationComplete") : t("consentPage.accessDenied.title")}
           </h1>
           <p className="text-txt-tertiary">
-            {__("You will be redirected to")}
+            {t("consentPage.redirectingTo")}
             {" "}
             <span className="font-medium text-txt-secondary">
               {consent.application.name}
@@ -321,14 +321,12 @@ export default function ConsentPage(props: {
           </div>
         </div>
         <h1 className="text-2xl font-bold">
-          {__("Authorize")}
+          {t("consentPage.authorize")}
           {" "}
           <span className="font-bold">{consent.application.name}</span>
         </h1>
         <p className="text-txt-tertiary text-sm">
-          {__(
+          {t("consentPage.description")}
-            "This application is requesting access to your account with the following permissions:",
-          )}
         </p>
       </div>
 
@@ -339,7 +337,7 @@ export default function ConsentPage(props: {
               <ConsentScopeRow
                 key={scope}
                 scope={scope}
-                translate={__}
+                translate={t}
               />
             ))}
           </ul>
@@ -347,7 +345,7 @@ export default function ConsentPage(props: {
 
         <ConsentApiScopesAccordion
           scopes={apiScopes}
-          translate={__}
+          translate={t}
           summaryLabel={apiScopesSummary}
         />
       </div>
@@ -360,7 +358,7 @@ export default function ConsentPage(props: {
           icon={pendingAction === "deny" ? Spinner : undefined}
           onClick={() => handleAction(false)}
         >
-          {__("Deny")}
+          {t("consentPage.actions.deny")}
         </Button>
         <Button
           className="flex-1 h-10"
@@ -368,12 +366,12 @@ export default function ConsentPage(props: {
           icon={pendingAction === "allow" ? Spinner : undefined}
           onClick={() => handleAction(true)}
         >
-          {__("Allow")}
+          {t("consentPage.actions.allow")}
         </Button>
       </div>
 
       <p className="text-center text-xs text-txt-tertiary">
-        {__("You can revoke access at any time from your account settings.")}
+        {t("consentPage.revokeNotice")}
       </p>
     </div>
   );

apps/console/src/pages/iam/auth/ConsentPageLoader.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Component, type ReactNode, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { useQueryLoader } from "react-relay";
 import { useSearchParams } from "react-router";
 
@@ -61,13 +61,13 @@ class ConsentErrorBoundary extends Component<
 }
 
 function ConsentErrorFallback() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
-      <h1 className="text-2xl font-bold">{__("Invalid Request")}</h1>
+      <h1 className="text-2xl font-bold">{t("consentPage.invalidRequest.title")}</h1>
       <p className="text-txt-tertiary">
-        {__("This consent request is invalid or has expired.")}
+        {t("consentPage.invalidRequest.description")}
       </p>
     </div>
   );

apps/console/src/pages/iam/auth/CreatePasswordPage.tsx

@@ -20,8 +20,8 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link, useNavigate, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -43,12 +43,12 @@ const schema = z.object({
 });
 
 export default function CreatePasswordPage() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  usePageTitle(__("Create Password"));
+  usePageTitle(t("createPasswordPage.pageTitle"));
 
   const { register, handleSubmit, formState } = useFormWithSchema(schema, {
     defaultValues: {
@@ -69,16 +69,16 @@ export default function CreatePasswordPage() {
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Password creation failed"),
+            title: t("createPasswordPage.errors.creationFailed"),
-            description: formatError(__("Password creation failed"), e),
+            description: formatError(t("createPasswordPage.errors.creationFailed"), e),
             variant: "error",
           });
           return;
         }
 
         toast({
-          title: __("Success"),
+          title: t("common.success"),
-          description: __("Account created successfully"),
+          description: t("createPasswordPage.messages.created"),
           variant: "success",
         });
 
@@ -92,7 +92,7 @@ export default function CreatePasswordPage() {
       },
       onError: (e) => {
         toast({
-          title: __("Password creation failed"),
+          title: t("createPasswordPage.errors.creationFailed"),
           description: e.message,
           variant: "error",
         });
@@ -103,15 +103,15 @@ export default function CreatePasswordPage() {
   return (
     <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Create a password")}</h1>
+        <h1 className="text-3xl font-bold">{t("createPasswordPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Set a password for your account, with at least 8 characters")}
+          {t("createPasswordPage.description")}
         </p>
       </div>
 
       <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
-          label={__("Password")}
+          label={t("createPasswordPage.fields.password")}
           type="password"
           placeholder="••••••••"
           {...register("password")}
@@ -120,19 +120,19 @@ export default function CreatePasswordPage() {
         />
 
         <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading || isCreatingPassword}>
-          {__("Save")}
+          {t("createPasswordPage.actions.save")}
         </Button>
       </form>
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}
+          {t("createPasswordPage.alreadyHaveAccount")}
           {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
-            {__("Log in here")}
+            {t("createPasswordPage.actions.logIn")}
           </Link>
         </p>
       </div>

apps/console/src/pages/iam/auth/DeviceActivationPage.tsx

@@ -20,7 +20,6 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, useToast } from "@probo/ui";
 import {
   type ClipboardEvent,
@@ -29,6 +28,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
 import { useNavigate, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -56,13 +56,13 @@ const authorizeDeviceMutation = graphql`
 export default function DeviceActivationPage(props: {
   queryRef: PreloadedQuery<DeviceActivationPageQuery>;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
   usePreloadedQuery<DeviceActivationPageQuery>(deviceActivationPageQuery, props.queryRef);
-  usePageTitle(__("Device Activation"));
+  usePageTitle(t("deviceActivationPage.pageTitle"));
 
   const preset = (searchParams.get("user_code") ?? "").replace(/-/g, "");
   const [values, setValues] = useState<string[]>(() => {
@@ -132,9 +132,9 @@ export default function DeviceActivationPage(props: {
         onCompleted: (response, errors) => {
           if (errors) {
             toast({
-              title: __("Authorization failed"),
+              title: t("deviceActivationPage.errors.authorizationFailed"),
               description: formatError(
-                __("The code is invalid or has expired."),
+                t("deviceActivationPage.errors.invalidCode"),
                 errors,
               ),
               variant: "error",
@@ -153,14 +153,14 @@ export default function DeviceActivationPage(props: {
         },
         onError: (err) => {
           toast({
-            title: __("Error"),
+            title: t("common.error"),
-            description: err.message || __("Something went wrong. Please try again."),
+            description: err.message || t("deviceActivationPage.errors.generic"),
             variant: "error",
           });
         },
       });
     },
-    [values, authorizeDevice, __, toast, navigate],
+    [values, authorizeDevice, t, toast, navigate],
   );
 
   const isFilled = values.every(v => v.length === 1);
@@ -168,9 +168,9 @@ export default function DeviceActivationPage(props: {
   if (status === "success") {
     return (
       <div className="w-full max-w-md mx-auto pt-8 space-y-6 text-center">
-        <h1 className="text-2xl font-bold">{__("Device Authorized")}</h1>
+        <h1 className="text-2xl font-bold">{t("deviceActivationPage.authorized.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Your device has been successfully authorized. You can close this window and return to your device.")}
+          {t("deviceActivationPage.authorized.description")}
         </p>
       </div>
     );
@@ -179,9 +179,9 @@ export default function DeviceActivationPage(props: {
   return (
     <div className="w-full max-w-md mx-auto pt-8 space-y-6">
       <div className="space-y-2 text-center">
-        <h1 className="text-2xl font-bold">{__("Device Activation")}</h1>
+        <h1 className="text-2xl font-bold">{t("deviceActivationPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Enter the code displayed on your device")}
+          {t("deviceActivationPage.description")}
         </p>
       </div>
 
@@ -206,7 +206,7 @@ export default function DeviceActivationPage(props: {
                 autoCapitalize="characters"
                 spellCheck={false}
                 autoFocus={idx === 0}
-                aria-label={`${__("Code character")} ${idx + 1}`}
+                aria-label={t("deviceActivationPage.codeCharacter", { count: idx + 1 })}
                 className="w-11 h-13 text-center text-lg font-mono font-medium uppercase rounded-lg border border-border-mid bg-level-1 text-txt-primary outline-none transition-colors focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
               />
             </div>
@@ -218,12 +218,12 @@ export default function DeviceActivationPage(props: {
           className="w-full h-10"
           disabled={!isFilled || isInFlight}
         >
-          {isInFlight ? __("Authorizing...") : __("Continue")}
+          {isInFlight ? t("deviceActivationPage.actions.authorizing") : t("deviceActivationPage.actions.continue")}
         </Button>
       </form>
 
       <p className="text-center text-sm text-txt-tertiary">
-        {__("Make sure this code matches the one on your device.")}
+        {t("deviceActivationPage.notice")}
       </p>
     </div>
   );

apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx

@@ -20,9 +20,9 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link } from "react-router";
 import { graphql } from "relay-runtime";
@@ -45,9 +45,9 @@ const schema = z.object({
 
 export default function ForgotPasswordPage() {
   const { toast } = useToast();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
-  usePageTitle(__("Forgot Password"));
+  usePageTitle(t("forgotPasswordPage.pageTitle"));
 
   const [instructionsSent, setInstructionsSent] = useState<boolean>();
   const { register, handleSubmit, formState } = useFormWithSchema(schema, {
@@ -67,7 +67,7 @@ export default function ForgotPasswordPage() {
       },
       onError: (e: Error) => {
         toast({
-          title: __("Request failed"),
+          title: t("forgotPasswordPage.errors.requestFailed"),
           description: e.message,
           variant: "error",
         });
@@ -75,9 +75,9 @@ export default function ForgotPasswordPage() {
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Request failed"),
+            title: t("forgotPasswordPage.errors.requestFailed"),
             description: formatError(
-              __("Failed to send reset instructions"),
+              t("forgotPasswordPage.errors.sendInstructions"),
               e,
             ),
             variant: "error",
@@ -86,8 +86,8 @@ export default function ForgotPasswordPage() {
         }
 
         toast({
-          title: __("Success"),
+          title: t("common.success"),
-          description: __("Password reset instructions sent to your email"),
+          description: t("forgotPasswordPage.messages.instructionsSent"),
           variant: "success",
         });
         setInstructionsSent(true);
@@ -99,34 +99,34 @@ export default function ForgotPasswordPage() {
     ? (
         <div className="space-y-6 w-full max-w-md mx-auto pt-8">
           <div className="space-y-2 text-center">
-            <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
+            <h1 className="text-3xl font-bold">{t("forgotPasswordPage.sent.title")}</h1>
             <p className="text-txt-tertiary">
-              {__("We've sent password reset instructions to your email address")}
+              {t("forgotPasswordPage.sent.description")}
             </p>
           </div>
 
           <div className="text-center">
             <p className="text-sm text-txt-tertiary">
-              {__("Didn't receive the email?")}
+              {t("forgotPasswordPage.sent.didNotReceive")}
               {" "}
               <button
                 onClick={() => setInstructionsSent(false)}
                 className="underline text-txt-primary hover:text-txt-secondary"
               >
-                {__("Try again")}
+                {t("forgotPasswordPage.actions.tryAgain")}
               </button>
             </p>
           </div>
 
           <div className="text-center">
             <p className="text-sm text-txt-tertiary">
-              {__("Remember your password?")}
+              {t("forgotPasswordPage.rememberPassword")}
               {" "}
               <Link
                 to="/auth/login"
                 className="underline text-txt-primary hover:text-txt-secondary"
               >
-                {__("Back to login")}
+                {t("forgotPasswordPage.actions.backToLogin")}
               </Link>
             </p>
           </div>
@@ -135,19 +135,17 @@ export default function ForgotPasswordPage() {
     : (
         <div className="space-y-6 w-full max-w-md mx-auto pt-8">
           <div className="space-y-2 text-center">
-            <h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
+            <h1 className="text-3xl font-bold">{t("forgotPasswordPage.title")}</h1>
             <p className="text-txt-tertiary">
-              {__(
+              {t("forgotPasswordPage.description")}
-                "Enter your email address and we'll send you instructions to reset your password",
-              )}
             </p>
           </div>
 
           <form onSubmit={e => void onSubmit(e)} className="space-y-4">
             <Field
-              label={__("Email")}
+              label={t("forgotPasswordPage.fields.email")}
               type="email"
-              placeholder={__("name@example.com")}
+              placeholder={t("forgotPasswordPage.fields.emailPlaceholder")}
               {...register("email")}
               required
               error={formState.errors.email?.message}
@@ -159,20 +157,20 @@ export default function ForgotPasswordPage() {
               disabled={formState.isSubmitting}
             >
               {formState.isSubmitting
-                ? __("Sending instructions...")
+                ? t("forgotPasswordPage.actions.sendingInstructions")
-                : __("Send reset instructions")}
+                : t("forgotPasswordPage.actions.sendInstructions")}
             </Button>
           </form>
 
           <div className="text-center">
             <p className="text-sm text-txt-tertiary">
-              {__("Remember your password?")}
+              {t("forgotPasswordPage.rememberPassword")}
               {" "}
               <Link
                 to="/auth/login"
                 className="underline text-txt-primary hover:text-txt-secondary"
               >
-                {__("Back to login")}
+                {t("forgotPasswordPage.actions.backToLogin")}
               </Link>
             </p>
           </div>

apps/console/src/pages/iam/auth/ResetPasswordPage.tsx

@@ -20,8 +20,8 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link, useNavigate, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -49,13 +49,13 @@ const schema = z
   });
 
 export default function ResetPasswordPage() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
 
-  usePageTitle(__("Reset password"));
+  usePageTitle(t("resetPasswordPage.pageTitle"));
 
   const { register, handleSubmit, formState } = useFormWithSchema(schema, {
     defaultValues: {
@@ -71,8 +71,8 @@ export default function ResetPasswordPage() {
   const onSubmit = handleSubmit((data) => {
     if (!token) {
       toast({
-        title: __("Reset failed"),
+        title: t("resetPasswordPage.errors.resetFailed"),
-        description: __("Invalid or missing reset token"),
+        description: t("resetPasswordPage.errors.invalidToken"),
         variant: "error",
       });
       return;
@@ -87,7 +87,7 @@ export default function ResetPasswordPage() {
       },
       onError: (e: Error) => {
         toast({
-          title: __("Reset failed"),
+          title: t("resetPasswordPage.errors.resetFailed"),
           description: e.message,
           variant: "error",
         });
@@ -95,9 +95,9 @@ export default function ResetPasswordPage() {
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Reset failed"),
+            title: t("resetPasswordPage.errors.resetFailed"),
             description: formatError(
-              __("Password reset failed"),
+              t("resetPasswordPage.errors.reset"),
               e,
             ),
             variant: "error",
@@ -105,8 +105,8 @@ export default function ResetPasswordPage() {
           return;
         }
         toast({
-          title: __("Success"),
+          title: t("common.success"),
-          description: __("Password reset successfully"),
+          description: t("resetPasswordPage.messages.reset"),
           variant: "success",
         });
         void navigate("/auth/login", { replace: true });
@@ -117,15 +117,15 @@ export default function ResetPasswordPage() {
   return (
     <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Reset password")}</h1>
+        <h1 className="text-3xl font-bold">{t("resetPasswordPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Enter your new password to reset your account")}
+          {t("resetPasswordPage.description")}
         </p>
       </div>
 
       <form onSubmit={e => void onSubmit(e)} className="space-y-4">
         <Field
-          label={__("New Password")}
+          label={t("resetPasswordPage.fields.newPassword")}
           type="password"
           placeholder="••••••••"
           {...register("password")}
@@ -134,7 +134,7 @@ export default function ResetPasswordPage() {
         />
 
         <Field
-          label={__("Confirm Password")}
+          label={t("resetPasswordPage.fields.confirmPassword")}
           type="password"
           placeholder="••••••••"
           {...register("confirmPassword")}
@@ -144,20 +144,20 @@ export default function ResetPasswordPage() {
 
         <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
           {formState.isLoading
-            ? __("Resetting password...")
+            ? t("resetPasswordPage.actions.resetting")
-            : __("Reset password")}
+            : t("resetPasswordPage.actions.reset")}
         </Button>
       </form>
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}
+          {t("resetPasswordPage.rememberPassword")}
           {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
-            {__("Log in here")}
+            {t("resetPasswordPage.actions.logIn")}
           </Link>
         </p>
       </div>

apps/console/src/pages/iam/auth/SignUpPage.tsx

@@ -20,9 +20,9 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation, usePreloadedQuery, useQueryLoader } from "react-relay";
 import { Link, useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
@@ -57,11 +57,11 @@ const schema = z.object({
 type FormData = z.infer<typeof schema>;
 
 function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQueryLoader<SignUpPageQuery>>[0]> }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const navigate = useNavigate();
 
-  usePageTitle(__("Sign up"));
+  usePageTitle(t("signUpPage.pageTitle"));
 
   const data = usePreloadedQuery<SignUpPageQuery>(signUpPageQuery, props.queryRef);
 
@@ -87,23 +87,22 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Sign up failed"),
+            title: t("signUpPage.errors.failed"),
-            description: formatError(__("Sign up failed"), e),
+            description: formatError(t("signUpPage.errors.failed"), e),
             variant: "error",
           });
           return;
         }
 
         toast({
-          title: __("Success"),
+          title: t("common.success"), description: t("signUpPage.messages.created"),
-          description: __("Account created successfully"),
           variant: "success",
         });
         void navigate("/", { replace: true });
       },
       onError: (e) => {
         toast({
-          title: __("Sign up failed"),
+          title: t("signUpPage.errors.failed"),
           description: e.message,
           variant: "error",
         });
@@ -115,9 +114,9 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
     return (
       <div className="space-y-6 w-full max-w-md mx-auto pt-8 text-center">
         <div className="space-y-2">
-          <h1 className="text-3xl font-bold">{__("Registration unavailable")}</h1>
+          <h1 className="text-3xl font-bold">{t("signUpPage.unavailable.title")}</h1>
           <p className="text-txt-tertiary">
-            {__("New account registration is currently disabled. Please contact your administrator or reach out to Probo for assistance.")}
+            {t("signUpPage.unavailable.description")}
           </p>
         </div>
 
@@ -127,7 +126,7 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
             className="w-xs h-10 mx-auto"
             to="/auth/login"
           >
-            {__("Back to login")}
+            {t("signUpPage.actions.backToLogin")}
           </Button>
         </div>
       </div>
@@ -137,33 +136,33 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
   return (
     <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Sign up")}</h1>
+        <h1 className="text-3xl font-bold">{t("signUpPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Enter your information to create an account")}
+          {t("signUpPage.description")}
         </p>
       </div>
 
       <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
-          label={__("Full Name")}
+          label={t("signUpPage.fields.fullName")}
           type="text"
-          placeholder={__("John Doe")}
+          placeholder={t("signUpPage.fields.fullNamePlaceholder")}
           {...register("fullName")}
           required
           error={formState.errors.fullName?.message}
         />
 
         <Field
-          label={__("Email")}
+          label={t("signUpPage.fields.email")}
           type="email"
-          placeholder={__("name@example.com")}
+          placeholder={t("signUpPage.fields.emailPlaceholder")}
           {...register("email")}
           required
           error={formState.errors.email?.message}
         />
 
         <Field
-          label={__("Password")}
+          label={t("signUpPage.fields.password")}
           type="password"
           placeholder="••••••••"
           {...register("password")}
@@ -173,20 +172,20 @@ function SignUpPageContent(props: { queryRef: NonNullable<ReturnType<typeof useQ
 
         <Button type="submit" className="w-xs h-10 mx-auto mt-6" disabled={formState.isLoading}>
           {formState.isLoading
-            ? __("Creating account...")
+            ? t("signUpPage.actions.creating")
-            : __("Sign up with email")}
+            : t("signUpPage.actions.signUpWithEmail")}
         </Button>
       </form>
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}
+          {t("signUpPage.alreadyHaveAccount")}
           {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
-            {__("Log in here")}
+            {t("signUpPage.actions.logIn")}
           </Link>
         </p>
       </div>

apps/console/src/pages/iam/auth/VerifyEmailPage.tsx

@@ -20,9 +20,9 @@
 
 import { formatError } from "@probo/helpers";
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -44,11 +44,11 @@ const confirmEmailSchema = z.object({
 });
 
 export default function VerifyEmailPage() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [searchParams] = useSearchParams();
 
-  usePageTitle(__("Confirm Email"));
+  usePageTitle(t("verifyEmailPage.pageTitle"));
 
   const [isConfirmed, setIsConfirmed] = useState(false);
 
@@ -71,8 +71,7 @@ export default function VerifyEmailPage() {
       onCompleted: (_, errors) => {
         if (errors) {
           toast({
-            title: __("Error"),
+            title: t("common.error"), description: formatError(t("verifyEmailPage.errors.confirm"), errors),
-            description: formatError(__("Failed to confirm email"), errors),
             variant: "error",
           });
           return;
@@ -80,15 +79,13 @@ export default function VerifyEmailPage() {
 
         setIsConfirmed(true);
         toast({
-          title: __("Success"),
+          title: t("common.success"), description: t("verifyEmailPage.messages.confirmed"),
-          description: __("Your email has been confirmed successfully"),
           variant: "success",
         });
       },
       onError: (err) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"), description: err.message || t("verifyEmailPage.errors.confirm"),
-          description: err.message || __("Failed to confirm email"),
           variant: "error",
         });
       },
@@ -98,9 +95,9 @@ export default function VerifyEmailPage() {
   return (
     <div className="space-y-6 w-full max-w-md mx-auto pt-8">
       <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
+        <h1 className="text-3xl font-bold">{t("verifyEmailPage.title")}</h1>
         <p className="text-txt-tertiary">
-          {__("Confirm your email address to complete registration")}
+          {t("verifyEmailPage.description")}
         </p>
       </div>
 
@@ -108,25 +105,23 @@ export default function VerifyEmailPage() {
         ? (
             <div className="space-y-4 text-center">
               <p className="text-green-600 dark:text-green-400">
-                {__("Your email has been confirmed successfully!")}
+                {t("verifyEmailPage.messages.confirmedWithExclamation")}
               </p>
               <Button to="/auth/login" className="w-full">
-                {__("Proceed to Login")}
+                {t("verifyEmailPage.actions.proceedToLogin")}
               </Button>
             </div>
           )
         : (
             <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
               <Field
-                label={__("Confirmation Token")}
+                label={t("verifyEmailPage.fields.token")}
                 type="text"
-                placeholder={__("Enter your confirmation token")}
+                placeholder={t("verifyEmailPage.fields.tokenPlaceholder")}
                 {...form.register("token")}
                 error={form.formState.errors.token?.message}
                 disabled={form.formState.isSubmitting}
-                help={__(
+                help={t("verifyEmailPage.fields.tokenHelp")}
-                  "The token has been automatically filled from the URL if available",
-                )}
               />
 
               <Button
@@ -135,8 +130,8 @@ export default function VerifyEmailPage() {
                 disabled={form.formState.isSubmitting}
               >
                 {form.formState.isSubmitting
-                  ? __("Confirming...")
+                  ? t("verifyEmailPage.actions.confirming")
-                  : __("Confirm Email")}
+                  : t("verifyEmailPage.actions.confirm")}
               </Button>
             </form>
           )}
@@ -148,7 +143,7 @@ export default function VerifyEmailPage() {
               to="/auth/login"
               className="underline text-txt-primary hover:text-txt-secondary"
             >
-              {__("Back to Login")}
+              {t("verifyEmailPage.actions.backToLogin")}
             </Link>
           </p>
         )}

apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx

@@ -19,9 +19,9 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, IconChevronLeft, useToast } from "@probo/ui";
 import type { FormEventHandler } from "react";
+import { useTranslation } from "react-i18next";
 import { useMutation } from "react-relay";
 import { Link, matchPath, useLocation } from "react-router";
 import { graphql } from "relay-runtime";
@@ -43,7 +43,7 @@ export default function PasswordSignInPage() {
   const location = useLocation();
   const postAuthRedirectUrl = usePostAuthRedirectUrl();
 
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
 
   const [signIn, isSigningIn]
@@ -74,9 +74,9 @@ export default function PasswordSignInPage() {
       onCompleted: (_, error) => {
         if (error) {
           toast({
-            title: __("Error"),
+            title: t("common.error"),
             description: formatError(
-              __("Failed to login"),
+              t("passwordSignInPage.errors.login"),
               error,
             ),
             variant: "error",
@@ -88,7 +88,7 @@ export default function PasswordSignInPage() {
       },
       onError: (e) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"),
           description: e.message,
           variant: "error",
         });
@@ -103,55 +103,55 @@ export default function PasswordSignInPage() {
         className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
       >
         <IconChevronLeft size={20} />
-        <span className="text-sm">{__("Back")}</span>
+        <span className="text-sm">{t("passwordSignInPage.actions.back")}</span>
       </Link>
 
       <h1 className="text-center text-2xl font-bold">
-        {__("Sign in with password")}
+        {t("passwordSignInPage.title")}
       </h1>
       <p className="text-center text-txt-tertiary mt-1 mb-6">
-        {__("Enter your email and password")}
+        {t("passwordSignInPage.description")}
       </p>
 
       <div className="space-y-4">
         <Field
           required
-          placeholder={__("Email")}
+          placeholder={t("passwordSignInPage.fields.email")}
           name="email"
           type="email"
-          label={__("Email")}
+          label={t("passwordSignInPage.fields.email")}
           autoFocus
         />
 
         <Field
           required
-          placeholder={__("Password")}
+          placeholder={t("passwordSignInPage.fields.password")}
           name="password"
           type="password"
-          label={__("Password")}
+          label={t("passwordSignInPage.fields.password")}
         />
       </div>
 
       <Button className="w-xs h-10 mx-auto mt-6" disabled={isSigningIn}>
-        {isSigningIn ? __("Logging in...") : __("Login")}
+        {isSigningIn ? t("passwordSignInPage.actions.loggingIn") : t("passwordSignInPage.actions.login")}
       </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Don't have an account ?")}
+        {t("passwordSignInPage.noAccount")}
         {" "}
         <Link to={{ pathname: "/auth/register", search: location.search }} className="underline hover:text-txt-primary">
-          {__("Register")}
+          {t("passwordSignInPage.actions.register")}
         </Link>
       </div>
 
       <div className="text-center text-sm text-txt-secondary">
-        {__("Forgot password?")}
+        {t("passwordSignInPage.forgotPassword")}
         {" "}
         <Link
           to="/auth/forgot-password"
           className="underline hover:text-txt-primary"
         >
-          {__("Reset password")}
+          {t("passwordSignInPage.actions.resetPassword")}
         </Link>
       </div>
     </form>

apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, IconChevronLeft, useToast } from "@probo/ui";
 import { type FormEventHandler, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   type PreloadedQuery,
   usePreloadedQuery,
@@ -40,7 +40,7 @@ const ssoAvailabilityQuery = graphql`
 
 export default function SSOSignInPage() {
   const location = useLocation();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const [queryRef, loadQuery]
     = useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
@@ -65,37 +65,37 @@ export default function SSOSignInPage() {
           className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
         >
           <IconChevronLeft size={20} />
-          <span className="text-sm">{__("Back")}</span>
+          <span className="text-sm">{t("ssoSignInPage.actions.back")}</span>
         </Link>
 
         <h1 className="text-center text-2xl font-bold">
-          {__("Login with SSO")}
+          {t("ssoSignInPage.title")}
         </h1>
         <p className="text-center text-txt-tertiary mt-1 mb-6">
-          {__("Enter your work email to continue with SSO")}
+          {t("ssoSignInPage.description")}
         </p>
 
         <Field
           required
-          placeholder={__("Work Email")}
+          placeholder={t("ssoSignInPage.fields.workEmail")}
           name="email"
           type="email"
-          label={__("Work Email")}
+          label={t("ssoSignInPage.fields.workEmail")}
           autoFocus
         />
 
         <Button className="w-xs h-10 mx-auto mt-6" disabled={checking}>
-          {checking ? __("Checking...") : __("Continue with SSO")}
+          {checking ? t("ssoSignInPage.actions.checking") : t("ssoSignInPage.actions.continue")}
         </Button>
 
         <div className="text-center mt-6 text-sm text-txt-secondary">
-          {__("Don't have an account ?")}
+          {t("ssoSignInPage.noAccount")}
           {" "}
           <Link
             to={{ pathname: "/auth/register", search: location.search }}
             className="underline hover:text-txt-primary"
           >
-            {__("Register")}
+            {t("ssoSignInPage.actions.register")}
           </Link>
         </div>
       </form>
@@ -118,7 +118,7 @@ function NavigateToSSOLoginURL(props: {
 }) {
   const { queryRef, loginSearch } = props;
 
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -132,11 +132,11 @@ function NavigateToSSOLoginURL(props: {
   useEffect(() => {
     if (!ssoLoginURL.ok) {
       toast({
-        title: __("Error"),
+        title: t("common.error"),
         description:
           ssoLoginURL.errors[0] instanceof Error
             ? ssoLoginURL.errors[0].message
-            : __("SSO not available for this email domain"),
+            : t("ssoSignInPage.errors.unavailable"),
         variant: "error",
       });
 
@@ -146,8 +146,7 @@ function NavigateToSSOLoginURL(props: {
 
     if (!ssoLoginURL.value) {
       toast({
-        title: __("Error"),
+        title: t("common.error"), description: t("ssoSignInPage.errors.unavailable"),
-        description: __("SSO not available for this email domain"),
         variant: "error",
       });
       return;
@@ -162,7 +161,7 @@ function NavigateToSSOLoginURL(props: {
     }
 
     window.location.href = url.toString();
-  }, [__, loginSearch, navigate, postAuthRedirectUrl, searchParams, ssoLoginURL, toast]);
+  }, [t, loginSearch, navigate, postAuthRedirectUrl, searchParams, ssoLoginURL, toast]);
 
   return null;
 }

apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx

@@ -19,8 +19,8 @@
 // SOFTWARE.
 
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import { Button } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { Link, useLocation, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -52,7 +52,7 @@ type Props = {
 };
 
 export default function SignInPage(props: Props) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const location = useLocation();
   const [searchParams] = useSearchParams();
   const postAuthRedirectUrl = usePostAuthRedirectUrl();
@@ -64,15 +64,15 @@ export default function SignInPage(props: Props) {
 
   const clientBranding = data.oauthClientBranding;
   const authorizeHeading = clientBranding?.name
-    ? __("Sign in")
+    ? t("auth.actions.signIn")
-    : __("Sign in to continue");
+    : t("signInPage.authorize.title");
 
   usePageTitle(
     isAuthorizeFlow
       ? clientBranding?.name
-        ? `${__("Sign in to")} ${clientBranding.name}`
+        ? t("signInPage.authorize.titleWithClient", { name: clientBranding.name })
         : authorizeHeading
-      : __("Sign in to your account"),
+      : t("signInPage.title"),
   );
 
   const oidcContinueURL = isAuthorizeFlow ? postAuthRedirectUrl : undefined;
@@ -94,11 +94,11 @@ export default function SignInPage(props: Props) {
         <h1 className="text-2xl font-bold">
           {isAuthorizeFlow
             ? authorizeHeading
-            : __("Sign in to your account")}
+            : t("signInPage.title")}
         </h1>
         {isAuthorizeFlow && (
           <p className="text-txt-tertiary">
-            {__("Use your email or a connected account to continue")}
+            {t("signInPage.authorize.description")}
           </p>
         )}
       </div>
@@ -114,33 +114,35 @@ export default function SignInPage(props: Props) {
 
         <MagicLinkForm />
 
-        <Divider>{__("Or")}</Divider>
+        <Divider>{t("signInPage.or")}</Divider>
 
         <Button
           variant="secondary"
           className="w-full h-10"
           to={{ pathname: "/auth/sso-login", search: location.search }}
         >
-          {__("Sign in with SSO")}
+          {t("signInPage.actions.signInWithSso")}
         </Button>
 
+        <Divider>{t("signInPage.or")}</Divider>
+
         <Button
           variant="secondary"
           className="w-full h-10"
           to={{ pathname: "/auth/password-login", search: location.search }}
         >
-          {__("Sign in with password")}
+          {t("signInPage.actions.signInWithEmail")}
         </Button>
       </div>
 
-      <p className="text-center text-sm text-txt-secondary">
+      <p className="mt-8 text-center text-sm text-txt-secondary">
-        {__("New to Probo?")}
+        {t("signInPage.newToProbo")}
         {" "}
         <Link
           to={{ pathname: "/auth/register", search: location.search }}
           className="underline hover:text-txt-primary"
         >
-          {__("Create account")}
+          {t("signInPage.actions.createAccount")}
         </Link>
       </p>
     </div>

apps/console/src/pages/iam/auth/sign-in/_components/MagicLinkForm.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 
 import { useFormWithSchema } from "#/hooks/useFormWithSchema";
@@ -35,7 +35,7 @@ type FormData = z.infer<typeof schema>;
 const timerDurationSeconds = 60;
 
 export function MagicLinkForm() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
   const postAuthRedirectUrl = usePostAuthRedirectUrl();
 
@@ -83,8 +83,8 @@ export function MagicLinkForm() {
       });
     } catch {
       toast({
-        title: __("Error"),
+        title: t("common.error"),
-        description: __("Cannot send magic link"),
+        description: t("magicLinkForm.errors.send"),
         variant: "error",
       });
       return;
@@ -92,16 +92,16 @@ export function MagicLinkForm() {
 
     if (!response.ok) {
       toast({
-        title: __("Error"),
+        title: t("common.error"),
-        description: __("Cannot send magic link"),
+        description: t("magicLinkForm.errors.send"),
         variant: "error",
       });
       return;
     }
 
     toast({
-      title: __("Success"),
+      title: t("common.success"),
-      description: __("Magic link sent!"),
+      description: t("magicLinkForm.messages.sent"),
       variant: "success",
     });
     setTimer(timerDurationSeconds);
@@ -111,7 +111,7 @@ export function MagicLinkForm() {
   return (
     <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
       <Field
-        label={__("Email")}
+        label={t("magicLinkForm.fields.email")}
         placeholder="john.doe@acme.com"
         {...register("email")}
         type="email"
@@ -121,9 +121,7 @@ export function MagicLinkForm() {
 
       {magicLinkSent && (
         <p className="text-txt-primary text-sm">
-          {__(
+          {t("magicLinkForm.sentDescription")}
-            "Magic link sent! Check your email and use the link to continue.",
-          )}
         </p>
       )}
 
@@ -134,9 +132,9 @@ export function MagicLinkForm() {
       >
         {magicLinkSent
           ? timer === 0
-            ? __("Resend Link")
+            ? t("magicLinkForm.actions.resend")
-            : `${__("Resend Link in")} ${timer}s`
+            : t("magicLinkForm.actions.resendIn", { count: timer })
-          : __("Send Magic Link")}
+          : t("magicLinkForm.actions.send")}
       </Button>
     </form>
   );

apps/console/src/pages/iam/auth/sign-in/_components/OIDCButton.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, Google, Microsoft } from "@probo/ui";
 import type { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -50,7 +50,7 @@ export function OIDCButton({
   providerRef: OIDCButtonFragment$key;
   continueURL?: string;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [searchParams] = useSearchParams();
   const safeContinueUrl = useSafeContinueUrl();
   const provider = useFragment(fragment, providerRef);
@@ -74,7 +74,9 @@ export function OIDCButton({
     >
       <span className="flex items-center gap-2">
         {Icon && <Icon width={18} height={18} />}
-        {__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
+        {t("oidcButton.signInWith", {
+          provider: provider.name.charAt(0).toUpperCase() + provider.name.slice(1),
+        })}
       </span>
     </Button>
   );

apps/console/src/pages/iam/memberships/MembershipsPage.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -28,6 +27,7 @@ import {
   Input,
 } from "@probo/ui";
 import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
 
 import type { MembershipsPageQuery } from "#/__generated__/iam/MembershipsPageQuery.graphql";
@@ -67,10 +67,10 @@ export const membershipsPageQuery = graphql`
 export function MembershipsPage(props: {
   queryRef: PreloadedQuery<MembershipsPageQuery>;
 }) {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
 
-  usePageTitle(__("Select an organization"));
+  usePageTitle(t("membershipsPage.pageTitle"));
 
   const { queryRef } = props;
   const {
@@ -93,13 +93,13 @@ export function MembershipsPage(props: {
     <>
       <div className="space-y-6 w-full py-6">
         <h1 className="text-3xl font-bold text-center">
-          {__("Select an organization")}
+          {t("membershipsPage.title")}
         </h1>
         <div className="space-y-4 w-full">
           {invitingOrganizations.length > 0 && (
             <div className="space-y-3">
               <h2 className="text-xl font-semibold">
-                {__("Pending invitations")}
+                {t("membershipsPage.pendingInvitations")}
               </h2>
               {invitingOrganizations.map(organization => (
                 <InvitingOrganizationCard key={organization.id} fKey={organization} />
@@ -109,12 +109,12 @@ export function MembershipsPage(props: {
           {initialProfiles.length > 0 && (
             <div className="space-y-3">
               <h2 className="text-xl font-semibold">
-                {__("Your organizations")}
+                {t("membershipsPage.yourOrganizations")}
               </h2>
               <div className="w-full">
                 <Input
                   icon={IconMagnifyingGlass}
-                  placeholder={__("Search organizations...")}
+                  placeholder={t("membershipsPage.searchPlaceholder")}
                   value={search}
                   onValueChange={setSearch}
                 />
@@ -122,7 +122,7 @@ export function MembershipsPage(props: {
               {profiles.length === 0
                 ? (
                     <div className="text-center text-txt-secondary py-4">
-                      {__("No organizations found")}
+                      {t("membershipsPage.empty")}
                     </div>
                   )
                 : (
@@ -138,10 +138,10 @@ export function MembershipsPage(props: {
           )}
           <Card padded>
             <h2 className="text-xl font-semibold mb-1">
-              {__("Create an organization")}
+              {t("membershipsPage.createOrganization.title")}
             </h2>
             <p className="text-txt-tertiary mb-4">
-              {__("Add a new organization to your account")}
+              {t("membershipsPage.createOrganization.description")}
             </p>
             <Button
               to="/organizations/new"
@@ -149,7 +149,7 @@ export function MembershipsPage(props: {
               icon={IconPlusLarge}
               className="w-full"
             >
-              {__("Create organization")}
+              {t("membershipsPage.createOrganization.action")}
             </Button>
           </Card>
         </div>

apps/console/src/pages/iam/memberships/_components/InvitingOrganizationCard.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Badge, Card, IconMail } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -37,7 +37,7 @@ interface InvitingOrganizationCardProps {
 
 export function InvitingOrganizationCard(props: InvitingOrganizationCardProps) {
   const { fKey } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const organization = useFragment<InvitingOrganizationCardFragment$key>(
     fragment,
@@ -50,7 +50,7 @@ export function InvitingOrganizationCard(props: InvitingOrganizationCardProps) {
         <h2 className="font-semibold text-xl">{organization.name}</h2>
         <Badge variant="neutral" className="flex items-center gap-1">
           <IconMail size={14} />
-          {__("Check your email")}
+          {t("invitingOrganizationCard.checkEmail")}
         </Badge>
       </div>
     </Card>

apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { parseDate } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Avatar,
   Badge,
@@ -29,6 +28,7 @@ import {
   IconClock,
   IconLock,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { Link } from "react-router";
 import { graphql } from "relay-runtime";
@@ -65,7 +65,7 @@ interface MembershipCardProps {
 
 export function MembershipCard(props: MembershipCardProps) {
   const { fKey, organizationFragmentRef } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const { membership, ...user } = useFragment<MembershipCardFragment$key>(
     fragment,
@@ -84,21 +84,21 @@ export function MembershipCard(props: MembershipCardProps) {
       return (
         <Badge variant="success" className="flex items-center gap-1">
           <IconCheckmark1 size={14} />
-          {__("Authenticated")}
+          {t("membershipCard.status.authenticated")}
         </Badge>
       );
     } else if (isExpired) {
       return (
         <Badge variant="warning" className="flex items-center gap-1">
           <IconClock size={14} />
-          {__("Session expired")}
+          {t("membershipCard.status.sessionExpired")}
         </Badge>
       );
     } else {
       return (
         <Badge variant="neutral" className="flex items-center gap-1">
           <IconLock size={14} />
-          {__("Authentication required")}
+          {t("membershipCard.status.authenticationRequired")}
         </Badge>
       );
     }
@@ -123,12 +123,12 @@ export function MembershipCard(props: MembershipCardProps) {
             ? (
                 <Link to={`/organizations/${organization.id}`}>
                   {isAssuming
-                    ? <Button variant="secondary">{__("Start")}</Button>
+                    ? <Button variant="secondary">{t("membershipCard.actions.start")}</Button>
-                    : <Button>{__("Login")}</Button>}
+                    : <Button>{t("membershipCard.actions.login")}</Button>}
                 </Link>
               )
             : (
-                <Button variant="secondary" disabled>{__("Account deactivated")}</Button>
+                <Button variant="secondary" disabled>{t("membershipCard.accountDeactivated")}</Button>
               )}
         </div>
       </div>

apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   DropdownSeparator,
   IconArrowBoxLeft,
@@ -29,6 +28,7 @@ import {
   UserDropdownItem,
   useToast,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment, useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -55,7 +55,7 @@ const signOutMutation = graphql`
 export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
   const { fKey } = props;
 
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
 
   const { canListAPIKeys, canListOAuth2AccessTokens, email, fullName }
@@ -70,8 +70,8 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Request failed"),
+            title: t("viewerDropdown.errors.requestFailed"),
-            description: formatError(__("Cannot sign out"), e),
+            description: formatError(t("viewerDropdown.errors.cannotSignOut"), e),
             variant: "error",
           });
           return;
@@ -80,7 +80,7 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
       },
       onError: (e) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"),
           description: e.message,
           variant: "error",
         });
@@ -94,27 +94,27 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
         <UserDropdownItem
           to="/me/api-keys"
           icon={IconKey}
-          label={__("API Keys")}
+          label={t("apiKeys.title")}
         />
       )}
       {canListOAuth2AccessTokens && (
         <UserDropdownItem
           to="/me/oauth-tokens"
           icon={IconKey}
-          label={__("OAuth tokens")}
+          label={t("viewerDropdown.actions.oauthTokens")}
         />
       )}
       <UserDropdownItem
         to="mailto:support@probo.com"
         icon={IconCircleQuestionmark}
-        label={__("Help")}
+        label={t("viewerDropdown.actions.help")}
       />
       <DropdownSeparator />
       <UserDropdownItem
         variant="danger"
         to="/logout"
         icon={IconArrowBoxLeft}
-        label="Logout"
+        label={t("viewerDropdown.actions.logout")}
         onClick={handleLogout}
       />
     </UserDropdown>

apps/console/src/pages/iam/oauthTokens/NewOAuthTokenPage.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Breadcrumb,
   Button,
@@ -35,6 +34,7 @@ import {
 } from "@probo/ui";
 import { useMemo, useState } from "react";
 import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { ConnectionHandler, useLazyLoadQuery } from "react-relay";
 import { Link, useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
@@ -106,12 +106,12 @@ function computeExpiresAt(expiresIn: CreateFormData["expiresIn"]) {
 }
 
 export function NewOAuthTokenPage() {
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const tokenDialogRef = useDialogRef();
   const [token, setToken] = useState("");
 
-  usePageTitle(__("New OAuth token"));
+  usePageTitle(t("newOAuthTokenPage.pageTitle"));
 
   const data = useLazyLoadQuery<NewOAuthTokenPageQuery>(pageQuery, {});
 
@@ -136,8 +136,8 @@ export function NewOAuthTokenPage() {
   const [create, isCreating] = useMutationWithToasts<NewOAuthTokenPageCreateMutation>(
     createMutation,
     {
-      successMessage: "OAuth token created successfully.",
+      successMessage: t("newOAuthTokenPage.messages.created"),
-      errorMessage: "Failed to create OAuth token",
+      errorMessage: t("newOAuthTokenPage.errors.create"),
     },
   );
 
@@ -202,25 +202,23 @@ export function NewOAuthTokenPage() {
       <Breadcrumb
         items={[
           {
-            label: __("OAuth tokens"),
+            label: t("oauthTokensPage.title"),
             to: "/me/oauth-tokens",
           },
-          { label: __("New token") },
+          { label: t("newOAuthTokenPage.breadcrumb") },
         ]}
       />
 
       <PageHeader
-        title={__("New OAuth token")}
+        title={t("newOAuthTokenPage.title")}
-        description={__(
+        description={t("newOAuthTokenPage.description")}
-          "Create a bearer token with scoped access to the Probo API.",
-        )}
       />
 
       <Card padded>
         <form className="space-y-6" onSubmit={e => void handleSubmit(handleCreate)(e)}>
           <div className="max-w-xl space-y-6">
             <Field>
-              <Label htmlFor="name">{__("Name")}</Label>
+              <Label htmlFor="name">{t("newOAuthTokenPage.fields.name")}</Label>
               <Input id="name" {...register("name")} />
               {formState.errors.name && (
                 <p className="text-sm text-danger mt-1">
@@ -230,7 +228,7 @@ export function NewOAuthTokenPage() {
             </Field>
 
             <Field>
-              <Label htmlFor="expiresIn">{__("Expiration")}</Label>
+              <Label htmlFor="expiresIn">{t("newOAuthTokenPage.fields.expiration")}</Label>
               <Controller
                 name="expiresIn"
                 control={control}
@@ -240,10 +238,10 @@ export function NewOAuthTokenPage() {
                     value={field.value}
                     onValueChange={field.onChange}
                   >
-                    <Option value="1month">{__("1 month")}</Option>
+                    <Option value="1month">{t("newOAuthTokenPage.expirations.month", { count: 1 })}</Option>
-                    <Option value="3months">{__("3 months")}</Option>
+                    <Option value="3months">{t("newOAuthTokenPage.expirations.month", { count: 3 })}</Option>
-                    <Option value="6months">{__("6 months")}</Option>
+                    <Option value="6months">{t("newOAuthTokenPage.expirations.month", { count: 6 })}</Option>
-                    <Option value="1year">{__("1 year")}</Option>
+                    <Option value="1year">{t("newOAuthTokenPage.expirations.year", { count: 1 })}</Option>
                   </Select>
                 )}
               />
@@ -251,7 +249,7 @@ export function NewOAuthTokenPage() {
           </div>
 
           <Field>
-            <Label>{__("Scopes")}</Label>
+            <Label>{t("newOAuthTokenPage.fields.scopes")}</Label>
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
               {supportedScopes.map(scope => (
                 <label key={scope} className="flex items-start gap-2">
@@ -279,18 +277,18 @@ export function NewOAuthTokenPage() {
 
           <div className="flex gap-3 max-w-xl">
             <Button type="submit" disabled={isCreating}>
-              {__("Create token")}
+              {t("newOAuthTokenPage.actions.create")}
             </Button>
             <Button
               type="button"
               variant="secondary"
               onClick={toggleAllScopes}
             >
-              {allScopesSelected ? __("Deselect all") : __("Select all")}
+              {allScopesSelected ? t("newOAuthTokenPage.actions.deselectAll") : t("newOAuthTokenPage.actions.selectAll")}
             </Button>
             <Button variant="secondary" asChild>
               <Link to="/me/oauth-tokens">
-                {__("Cancel")}
+                {t("newOAuthTokenPage.actions.cancel")}
               </Link>
             </Button>
           </div>

apps/console/src/pages/iam/oauthTokens/OAuthTokensPage.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { usePageTitle } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -32,6 +31,7 @@ import {
   Thead,
   Tr,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import {
   graphql,
   type PreloadedQuery,
@@ -87,9 +87,9 @@ export function OAuthTokensPage(props: {
   queryRef: PreloadedQuery<OAuthTokensPageQuery>;
 }) {
   const { queryRef } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
-  usePageTitle(__("OAuth tokens"));
+  usePageTitle(t("oauthTokensPage.pageTitle"));
 
   const { viewer } = usePreloadedQuery<OAuthTokensPageQuery>(
     oauthTokensPageQuery,
@@ -106,15 +106,13 @@ export function OAuthTokensPage(props: {
   return (
     <div className="space-y-6 w-full py-6">
       <PageHeader
-        title={__("OAuth tokens")}
+        title={t("oauthTokensPage.title")}
-        description={__(
+        description={t("oauthTokensPage.description")}
-          "Create bearer tokens with scoped API access for your account.",
-        )}
       >
         {viewer.canCreateOAuth2AccessToken && (
           <Button asChild>
             <Link to="/me/oauth-tokens/new">
-              {__("Create token")}
+              {t("oauthTokensPage.actions.create")}
             </Link>
           </Button>
         )}
@@ -125,12 +123,10 @@ export function OAuthTokensPage(props: {
             <Card padded>
               <div className="text-center py-12">
                 <h3 className="text-lg font-medium text-gray-900 mb-2">
-                  {__("No OAuth tokens")}
+                  {t("oauthTokensPage.empty.title")}
                 </h3>
                 <p className="text-gray-600">
-                  {__(
+                  {t("oauthTokensPage.empty.description")}
-                    "Create a token to authenticate API requests on your behalf.",
-                  )}
                 </p>
               </div>
             </Card>
@@ -139,16 +135,16 @@ export function OAuthTokensPage(props: {
             <Card padded className="space-y-4">
               {totalCount > tokens.length && (
                 <p className="text-sm text-txt-tertiary">
-                  {`${__("Showing")} ${tokens.length} ${__("of")} ${totalCount}`}
+                  {t("oauthTokensPage.showing", { shown: tokens.length, total: totalCount })}
                 </p>
               )}
               <Table>
                 <Thead>
                   <Tr>
-                    <Th>{__("Name")}</Th>
+                    <Th>{t("oauthTokensPage.columns.name")}</Th>
-                    <Th>{__("Scopes")}</Th>
+                    <Th>{t("oauthTokensPage.columns.scopes")}</Th>
-                    <Th>{__("Created")}</Th>
+                    <Th>{t("oauthTokensPage.columns.created")}</Th>
-                    <Th>{__("Expires")}</Th>
+                    <Th>{t("oauthTokensPage.columns.expires")}</Th>
                     <Th className="w-0" />
                   </Tr>
                 </Thead>
@@ -170,7 +166,7 @@ export function OAuthTokensPage(props: {
                   disabled={isLoadingNext}
                   icon={isLoadingNext ? Spinner : IconChevronDown}
                 >
-                  {__("Show more")}
+                  {t("oauthTokensPage.actions.showMore")}
                 </Button>
               )}
             </Card>

apps/console/src/pages/iam/oauthTokens/_components/OAuthTokenCredentialsDialog.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { useCopy } from "@probo/hooks";
-import { useTranslate } from "@probo/i18n";
 import {
   Breadcrumb,
   Button,
@@ -31,6 +30,7 @@ import {
   IconWarning,
 } from "@probo/ui";
 import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
 
 export function OAuthTokenCredentialsDialog(props: {
   dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
@@ -38,21 +38,19 @@ export function OAuthTokenCredentialsDialog(props: {
   onDone: () => void;
 }) {
   const { dialogRef, token, onDone } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [isCopied, copy] = useCopy();
 
   return (
     <Dialog
       ref={dialogRef}
-      title={<Breadcrumb items={[__("OAuth tokens"), __("Token")]} />}
+      title={<Breadcrumb items={[t("oauthTokensPage.title"), t("oauthTokenCredentialsDialog.title")]} />}
     >
       <DialogContent padded className="space-y-4">
         <div className="flex items-start gap-2 rounded-lg border border-border-danger bg-danger px-4 py-3 text-sm text-txt-danger">
           <IconWarning size={16} className="shrink-0 mt-0.5" />
           <p>
-            {__(
+            {t("oauthTokenCredentialsDialog.description")}
-              "Copy this bearer token now. You will not be able to see it again.",
-            )}
           </p>
         </div>
         <code className="flex items-start gap-2 rounded-lg bg-subtle p-4 font-mono text-sm">
@@ -65,8 +63,8 @@ export function OAuthTokenCredentialsDialog(props: {
             )}
             onClick={() => copy(token)}
             disabled={!token}
-            aria-label={isCopied ? __("Copied") : __("Copy")}
+            aria-label={isCopied ? t("oauthTokenCredentialsDialog.actions.copied") : t("oauthTokenCredentialsDialog.actions.copy")}
-            title={isCopied ? __("Copied") : __("Copy")}
+            title={isCopied ? t("oauthTokenCredentialsDialog.actions.copied") : t("oauthTokenCredentialsDialog.actions.copy")}
           >
             {isCopied
               ? <IconCheckmark1 size={16} />
@@ -75,7 +73,7 @@ export function OAuthTokenCredentialsDialog(props: {
         </code>
       </DialogContent>
       <DialogFooter>
-        <Button onClick={onDone}>{__("Done")}</Button>
+        <Button onClick={onDone}>{t("oauthTokenCredentialsDialog.actions.done")}</Button>
       </DialogFooter>
     </Dialog>
   );

apps/console/src/pages/iam/oauthTokens/_components/OAuthTokenRow.tsx

@@ -18,8 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { formatError } from "@probo/helpers";
+import { formatDate, formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Badge,
   Button,
@@ -31,6 +30,7 @@ import {
   useToast,
 } from "@probo/ui";
 import * as Popover from "@radix-ui/react-popover";
+import { useTranslation } from "react-i18next";
 import { ConnectionHandler, graphql, useFragment, useMutation } from "react-relay";
 
 import type { OAuthTokenRowFragment$key } from "#/__generated__/iam/OAuthTokenRowFragment.graphql";
@@ -67,7 +67,7 @@ export function OAuthTokenRow(props: {
   identityId: string;
 }) {
   const { tokenKey, identityId } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { toast } = useToast();
 
   const token = useFragment(fragment, tokenKey);
@@ -90,9 +90,9 @@ export function OAuthTokenRow(props: {
       onCompleted: (_response, errors) => {
         if (errors?.length) {
           toast({
-            title: __("Error"),
+            title: t("common.error"),
             description: formatError(
-              __("Failed to revoke OAuth token."),
+              t("oauthTokenRow.errors.revoke"),
               errors,
             ),
             variant: "error",
@@ -100,15 +100,13 @@ export function OAuthTokenRow(props: {
           return;
         }
         toast({
-          title: __("Success"),
+          title: t("common.success"), description: t("oauthTokenRow.messages.revoked"),
-          description: __("OAuth token revoked."),
           variant: "success",
         });
       },
       onError: (error) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"), description: formatError(t("oauthTokenRow.errors.revoke"), error),
-          description: formatError(__("Failed to revoke OAuth token."), error),
           variant: "error",
         });
       },
@@ -154,28 +152,26 @@ export function OAuthTokenRow(props: {
           )}
         </div>
       </Td>
-      <Td>{new Date(token.createdAt).toLocaleDateString()}</Td>
+      <Td>{formatDate(token.createdAt)}</Td>
-      <Td>{new Date(token.expiresAt).toLocaleDateString()}</Td>
+      <Td>{formatDate(token.expiresAt)}</Td>
       <Td>
         {token.canDelete && (
           <Dialog
-            title={__("Revoke OAuth token")}
+            title={t("oauthTokenRow.revoke.title")}
             trigger={(
               <Button variant="danger" disabled={isRevoking}>
-                {__("Revoke")}
+                {t("oauthTokenRow.actions.revoke")}
               </Button>
             )}
           >
             <DialogContent padded>
               <p>
-                {__(
+                {t("oauthTokenRow.revoke.description")}
-                  "This token will stop working immediately. This action cannot be undone.",
-                )}
               </p>
             </DialogContent>
             <DialogFooter>
               <Button variant="danger" onClick={handleRevoke} disabled={isRevoking}>
-                {__("Revoke token")}
+                {t("oauthTokenRow.actions.revokeToken")}
               </Button>
             </DialogFooter>
           </Dialog>

apps/console/src/pages/iam/organizations/AssumePage.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { UnAuthenticatedError } from "@probo/relay";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
 import { useNavigate, useSearchParams } from "react-router";
 import { graphql } from "relay-runtime";
@@ -67,7 +67,7 @@ export function AssumePage(props: { queryRef: PreloadedQuery<AssumePageQuery> })
   const organizationId = useOrganizationId();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const safeContinueUrl = useSafeContinueUrl(`/organizations/${organizationId}`);
 
@@ -126,9 +126,9 @@ export function AssumePage(props: { queryRef: PreloadedQuery<AssumePageQuery> })
     <AuthLayout>
       <div className="space-y-6 w-full max-w-md mx-auto pt-8">
         <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold">{__("Sign in Redirection")}</h1>
+          <h1 className="text-3xl font-bold">{t("assumePage.title")}</h1>
           <p className="text-txt-tertiary">
-            {__("Redirecting you to your authentication URL…")}
+            {t("assumePage.description")}
           </p>
         </div>
       </div>

apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Card,
@@ -29,6 +28,7 @@ import {
   useToast,
 } from "@probo/ui";
 import type { FormEventHandler } from "react";
+import { useTranslation } from "react-i18next";
 import { graphql, useMutation } from "react-relay";
 import { Link, useLocation, useNavigate } from "react-router";
 
@@ -50,7 +50,7 @@ function NewOrganizationPageInner() {
   const location = useLocation();
   const navigate = useNavigate();
   const { toast } = useToast();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const [createOrganization, isCreating]
     = useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
@@ -61,8 +61,7 @@ function NewOrganizationPageInner() {
     const name = formData.get("name") ? (formData.get("name") as string).toString() : "";
     if (!name) {
       toast({
-        title: __("Error"),
+        title: t("common.error"), description: t("newOrganizationPage.errors.nameRequired"),
-        description: __("Name is required"),
         variant: "error",
       });
       return;
@@ -77,8 +76,7 @@ function NewOrganizationPageInner() {
       onCompleted: (r, e) => {
         if (e) {
           toast({
-            title: __("Error"),
+            title: t("common.error"), description: formatError(t("newOrganizationPage.errors.create"), e),
-            description: formatError(__("Failed to create organization"), e),
             variant: "error",
           });
           return;
@@ -87,14 +85,13 @@ function NewOrganizationPageInner() {
         const org = r.createOrganization!.organization;
         void navigate(`/organizations/${org!.id}`);
         toast({
-          title: __("Success"),
+          title: t("common.success"), description: t("newOrganizationPage.messages.created"),
-          description: __("Organization has been created successfully"),
           variant: "success",
         });
       },
       onError: (e) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"),
           description: e.message,
           variant: "error",
         });
@@ -109,34 +106,30 @@ function NewOrganizationPageInner() {
         className="mb-4 inline-flex gap-2 items-center"
       >
         <IconChevronLeft size={16} />
-        {__("Back")}
+        {t("newOrganizationPage.actions.back")}
       </Link>
       <PageHeader
-        title={__("Create Organization")}
+        title={t("newOrganizationPage.title")}
-        description={__(
+        description={t("newOrganizationPage.description")}
-          "Create a new organization to manage your compliance and security needs.",
-        )}
       />
       <Card padded asChild>
         <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
           <h2 className="text-xl font-semibold mb-1">
-            {__("Organization Details")}
+            {t("newOrganizationPage.details")}
           </h2>
           <p className="text-txt-tertiary text-sm mb-4">
-            {__("Enter the basic information about your organization.")}
+            {t("newOrganizationPage.detailsDescription")}
           </p>
           <Field
             required
             name="name"
             type="text"
-            placeholder={__("Organization name")}
+            placeholder={t("newOrganizationPage.fields.name")}
-            label={__("Organization name")}
+            label={t("newOrganizationPage.fields.name")}
-            help={__(
+            help={t("newOrganizationPage.fields.nameHelp")}
-              "The name of your organization as it will appear throughout the platform.",
-            )}
           />
           <Button disabled={isCreating} type="submit" className="w-full">
-            {__("Create Organization")}
+            {t("newOrganizationPage.actions.create")}
           </Button>
         </form>
       </Card>

apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx

@@ -18,7 +18,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import {
   Button,
   Dropdown,
@@ -30,6 +29,7 @@ import {
   Input,
 } from "@probo/ui";
 import { Suspense, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useFragment, useQueryLoader } from "react-relay";
 import { Link, useLocation } from "react-router";
 import { graphql } from "relay-runtime";
@@ -54,7 +54,7 @@ export function MembershipsDropdown(props: {
   const { organizationFKey } = props;
 
   const location = useLocation();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
 
   const currentOrganization
@@ -90,7 +90,7 @@ export function MembershipsDropdown(props: {
         <div className="px-3 py-2">
           <Input
             icon={IconMagnifyingGlass}
-            placeholder={__("Search organizations...")}
+            placeholder={t("membershipsDropdown.searchPlaceholder")}
             value={search}
             onValueChange={setSearch}
             onKeyDown={(e) => {
@@ -104,7 +104,7 @@ export function MembershipsDropdown(props: {
             <Suspense
               fallback={(
                 <div className="px-3 py-2 text-gray-500">
-                  {__("Loading organizations...")}
+                  {t("membershipsDropdown.loading")}
                 </div>
               )}
             >
@@ -116,7 +116,7 @@ export function MembershipsDropdown(props: {
         <DropdownItem asChild>
           <Link to="/organizations/new" state={{ from: location.pathname }}>
             <IconPlusLarge size={16} />
-            {__("Add organization")}
+            {t("membershipsDropdown.addOrganization")}
           </Link>
         </DropdownItem>
       </Dropdown>

apps/console/src/pages/iam/organizations/_components/MembershipsDropdownInvitingItem.tsx

@@ -18,8 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { IconMail } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -35,7 +35,7 @@ export function MembershipsDropdownInvitingItem(props: {
   fKey: MembershipsDropdownInvitingItemFragment$key;
 }) {
   const { fKey } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const organization = useFragment<MembershipsDropdownInvitingItemFragment$key>(
     fragment,
@@ -45,7 +45,7 @@ export function MembershipsDropdownInvitingItem(props: {
   return (
     <div
       className="text-txt-primary flex items-center gap-2 p-2 cursor-default"
-      title={__("Check your email to accept the invitation")}
+      title={t("membershipsDropdownInvitingItem.title")}
     >
       <div className="bg-border-mid text-txt-invert! rounded-full size-6 flex items-center justify-center flex-none">
         <IconMail size={16} />

apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenu.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { DropdownSeparator } from "@probo/ui";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { graphql, type PreloadedQuery, usePreloadedQuery } from "react-relay";
 
 import type { MembershipsDropdownMenuQuery } from "#/__generated__/iam/MembershipsDropdownMenuQuery.graphql";
@@ -65,7 +65,7 @@ interface MembershipsDropdownMenuProps {
 
 export function MembershipsDropdownMenu(props: MembershipsDropdownMenuProps) {
   const { queryRef, search } = props;
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const {
     viewer: {
@@ -102,7 +102,7 @@ export function MembershipsDropdownMenu(props: MembershipsDropdownMenuProps) {
       {invitingOrganizations.length > 0 && (
         <>
           <div className="px-3 py-1 text-xs text-txt-tertiary uppercase">
-            {__("Pending invitations")}
+            {t("membershipsDropdownMenu.pendingInvitations")}
           </div>
           {invitingOrganizations.map(organization => (
             <MembershipsDropdownInvitingItem key={organization.id} fKey={organization} />

apps/console/src/pages/iam/organizations/_components/Sidebar.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { CookieIcon, LaptopIcon } from "@phosphor-icons/react";
-import { useTranslate } from "@probo/i18n";
 import {
   IconBank,
   IconBook,
@@ -42,6 +41,7 @@ import {
   IconTodo,
   SidebarItem,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -84,7 +84,7 @@ const fragment = graphql`
 export function Sidebar(props: { fKey: SidebarFragment$key }) {
   const { fKey } = props;
 
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const organizationId = useOrganizationId();
 
   const organization = useFragment<SidebarFragment$key>(fragment, fKey);
@@ -95,28 +95,28 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
     <ul className="space-y-[2px]">
       {organization.canGetContext && (
         <SidebarItem
-          label={__("Context")}
+          label={t("sidebar.context")}
           icon={IconPageTextSolid}
           to={`${prefix}/context`}
         />
       )}
       {organization.canListTasks && (
         <SidebarItem
-          label={__("Tasks")}
+          label={t("sidebar.tasks")}
           icon={IconInboxEmpty}
           to={`${prefix}/tasks`}
         />
       )}
       {organization.canListMeasures && (
         <SidebarItem
-          label={__("Measures")}
+          label={t("sidebar.measures")}
           icon={IconTodo}
           to={`${prefix}/measures`}
         />
       )}
       {organization.canListRisks && (
         <SidebarItem
-          label={__("Risks")}
+          label={t("sidebar.risks")}
           icon={IconFire3}
           to={`${prefix}/risks`}
         />
@@ -124,119 +124,119 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
 
       {organization.canListFrameworks && (
         <SidebarItem
-          label={__("Frameworks")}
+          label={t("sidebar.frameworks")}
           icon={IconBank}
           to={`${prefix}/frameworks`}
         />
       )}
       {organization.canListMembers && (
         <SidebarItem
-          label={__("People")}
+          label={t("sidebar.people")}
           icon={IconGroup1}
           to={`${prefix}/people`}
         />
       )}
       {organization.canListThirdParties && (
         <SidebarItem
-          label={__("Third parties")}
+          label={t("sidebar.thirdParties")}
           icon={IconStore}
           to={`${prefix}/third-parties`}
         />
       )}
       {organization.canListDocuments && (
         <SidebarItem
-          label={__("Documents")}
+          label={t("sidebar.documents")}
           icon={IconPageTextLine}
           to={`${prefix}/documents`}
         />
       )}
       {organization.canListAssets && (
         <SidebarItem
-          label={__("Assets")}
+          label={t("sidebar.assets")}
           icon={IconBox}
           to={`${prefix}/assets`}
         />
       )}
       {organization.canListDevices && (
         <SidebarItem
-          label={__("Devices")}
+          label={t("sidebar.devices")}
           icon={LaptopIcon}
           to={`${prefix}/devices`}
         />
       )}
       {organization.canListData && (
         <SidebarItem
-          label={__("Data")}
+          label={t("sidebar.data")}
           icon={IconListStack}
           to={`${prefix}/data`}
         />
       )}
       {organization.canListAudits && (
         <SidebarItem
-          label={__("Audits")}
+          label={t("sidebar.audits")}
           icon={IconMedal}
           to={`${prefix}/audits`}
         />
       )}
       {organization.canListFindings && (
         <SidebarItem
-          label={__("Findings")}
+          label={t("sidebar.findings")}
           icon={IconMagnifyingGlass}
           to={`${prefix}/findings`}
         />
       )}
       {organization.canListObligations && (
         <SidebarItem
-          label={__("Obligations")}
+          label={t("sidebar.obligations")}
           icon={IconBook}
           to={`${prefix}/obligations`}
         />
       )}
       {organization.canListProcessingActivities && (
         <SidebarItem
-          label={__("Processing Activities")}
+          label={t("sidebar.processingActivities")}
           icon={IconCircleProgress}
           to={`${prefix}/processing-activities`}
         />
       )}
       {organization.canListStatementsOfApplicability && (
         <SidebarItem
-          label={__("Statements of Applicability")}
+          label={t("sidebar.statementsOfApplicability")}
           icon={IconPageCheck}
           to={`${prefix}/statements-of-applicability`}
         />
       )}
       {organization.canListRightsRequests && (
         <SidebarItem
-          label={__("Rights Requests")}
+          label={t("sidebar.rightsRequests")}
           icon={IconLock}
           to={`${prefix}/rights-requests`}
         />
       )}
       {organization.canListAccessReviewCampaigns && (
         <SidebarItem
-          label={__("Access Reviews")}
+          label={t("sidebar.accessReviews")}
           icon={IconKey}
           to={`${prefix}/access-reviews`}
         />
       )}
       {organization.canGetCompliancePage && (
         <SidebarItem
-          label={__("Compliance Page")}
+          label={t("sidebar.compliancePage")}
           icon={IconShield}
           to={`${prefix}/compliance-page`}
         />
       )}
       {organization.canListCookieBanners && (
         <SidebarItem
-          label={__("Cookie Banners")}
+          label={t("sidebar.cookieBanners")}
           icon={CookieIcon}
           to={`${prefix}/cookie-banners`}
         />
       )}
       {organization.canUpdateOrganization && (
         <SidebarItem
-          label={__("Settings")}
+          label={t("sidebar.settings")}
           icon={IconSettingsGear2}
           to={`${prefix}/settings`}
         />

apps/console/src/pages/iam/organizations/_components/ViewerMembershipDropdown.tsx

@@ -19,7 +19,6 @@
 // SOFTWARE.
 
 import { formatError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import {
   DropdownSeparator,
   IconArrowBoxLeft,
@@ -30,6 +29,7 @@ import {
   UserDropdownItem,
   useToast,
 } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { useFragment, useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -65,7 +65,7 @@ export function ViewerMembershipDropdown(props: {
 }) {
   const { fKey } = props;
 
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const organizationId = useOrganizationId();
   const { toast } = useToast();
 
@@ -85,8 +85,8 @@ export function ViewerMembershipDropdown(props: {
       onCompleted: (_, e) => {
         if (e) {
           toast({
-            title: __("Request failed"),
+            title: t("viewerMembershipDropdown.errors.requestFailed"),
-            description: formatError(__("Cannot sign out"), e),
+            description: formatError(t("viewerMembershipDropdown.errors.cannotSignOut"), e),
             variant: "error",
           });
           return;
@@ -95,7 +95,7 @@ export function ViewerMembershipDropdown(props: {
       },
       onError: (e) => {
         toast({
-          title: __("Error"),
+          title: t("common.error"),
           description: e.message,
           variant: "error",
         });
@@ -109,32 +109,32 @@ export function ViewerMembershipDropdown(props: {
         <UserDropdownItem
           to="/me/api-keys"
           icon={IconKey}
-          label={__("API Keys")}
+          label={t("viewerMembershipDropdown.actions.apiKeys")}
         />
       )}
       {canListOAuth2AccessTokens && (
         <UserDropdownItem
           to="/me/oauth-tokens"
           icon={IconKey}
-          label={__("OAuth tokens")}
+          label={t("viewerMembershipDropdown.actions.oauthTokens")}
         />
       )}
       <UserDropdownItem
         to={`/organizations/${organizationId}/employee`}
         icon={IconPageTextLine}
-        label={__("Employee Portal")}
+        label={t("viewerMembershipDropdown.actions.employeePortal")}
       />
       <UserDropdownItem
         to="mailto:support@probo.com"
         icon={IconCircleQuestionmark}
-        label={__("Help")}
+        label={t("viewerMembershipDropdown.actions.help")}
       />
       <DropdownSeparator />
       <UserDropdownItem
         variant="danger"
         to="/logout"
         icon={IconArrowBoxLeft}
-        label="Logout"
+        label={t("viewerMembershipDropdown.actions.logout")}
         onClick={handleLogout}
       />
     </UserDropdown>

apps/console/src/pages/iam/organizations/people/PeoplePage.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Button, PageHeader } from "@probo/ui";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { ConnectionHandler, type DataID, graphql } from "relay-runtime";
 
@@ -49,7 +49,7 @@ export function PeoplePage(props: {
   const { queryRef } = props;
 
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   const [connectionId, setConnectionId] = useState<DataID>(
     ConnectionHandler.getConnectionID(
@@ -69,11 +69,11 @@ export function PeoplePage(props: {
 
   return (
     <div className="space-y-6">
-      <PageHeader title={__("People")}>
+      <PageHeader title={t("peoplePage.title")}>
         {organization.canCreateUser
           && (
             <AddPersonDialog connectionId={connectionId}>
-              <Button variant="secondary">{__("Add Person")}</Button>
+              <Button variant="secondary">{t("peoplePage.actions.add")}</Button>
             </AddPersonDialog>
           )}
       </PageHeader>

apps/console/src/pages/iam/organizations/people/PersonPage.tsx

@@ -18,9 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { sprintf } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { ActionDropdown, Avatar, Badge, Breadcrumb, Card, DropdownItem, IconArchive, IconTrashCan, useConfirm } from "@probo/ui";
+import { useTranslation } from "react-i18next";
 import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
 import { useNavigate } from "react-router";
 import { graphql } from "relay-runtime";
@@ -73,7 +72,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
   const { queryRef } = props;
 
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const confirm = useConfirm();
   const navigate = useNavigate();
 
@@ -85,15 +84,15 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
   const [archiveUser, isArchiving] = useMutationWithToasts(
     archiveUserMutation,
     {
-      successMessage: __("Person archived successfully"),
+      successMessage: t("personPage.messages.archived"),
-      errorMessage: __("Failed to archive person"),
+      errorMessage: t("personPage.errors.archive"),
     },
   );
   const [removeUser, isRemoving] = useMutationWithToasts(
     removeUserMutation,
     {
-      successMessage: __("Person removed successfully"),
+      successMessage: t("personPage.messages.removed"),
-      errorMessage: __("Failed to remove person"),
+      errorMessage: t("personPage.errors.remove"),
     },
   );
   const isMutating = isArchiving || isRemoving;
@@ -114,10 +113,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
         });
       },
       {
-        message: sprintf(
+        message: t("personPage.confirmations.archive", { name: person.fullName }),
-          __("Are you sure you want to archive %s?"),
-          person.fullName,
-        ),
       },
     );
   };
@@ -138,10 +134,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
         });
       },
       {
-        message: sprintf(
+        message: t("personPage.confirmations.remove", { name: person.fullName }),
-          __("Are you sure you want to remove %s?"),
-          person.fullName,
-        ),
       },
     );
   };
@@ -154,7 +147,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
       <Breadcrumb
         items={[
           {
-            label: __("People"),
+            label: t("personPage.breadcrumb.people"),
             to: `/organizations/${organizationId}/people`,
           },
           {
@@ -181,7 +174,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
                 onClick={handleArchive}
                 disabled={isMutating}
               >
-                {__("Archive")}
+                {t("personPage.actions.archive")}
               </DropdownItem>
             )}
             {canRemove && (
@@ -191,7 +184,7 @@ export function PersonPage(props: { queryRef: PreloadedQuery<PersonPageQuery> })
                 onClick={handleRemove}
                 disabled={isMutating}
               >
-                {__("Remove")}
+                {t("personPage.actions.remove")}
               </DropdownItem>
             )}
           </ActionDropdown>

apps/console/src/pages/iam/organizations/people/_components/AddPersonDialog.tsx

@@ -18,9 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { useTranslate } from "@probo/i18n";
 import { Dialog, DialogContent, useDialogRef } from "@probo/ui";
 import { type PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
 import type { DataID } from "relay-runtime";
 
 import { PersonForm } from "./PersonForm";
@@ -30,11 +30,11 @@ export function AddPersonDialog(props: PropsWithChildren<{
 }>) {
   const { children, connectionId } = props;
   const dialogRef = useDialogRef();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Dialog
-      title={__("Add Person")}
+      title={t("addPersonDialog.title")}
       trigger={children}
       className="max-w-xl"
       ref={dialogRef}

apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx

@@ -19,10 +19,10 @@
 // SOFTWARE.
 
 import { getAssignableRoles } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
 import { Tbody, Td, Th, Thead, Tr } from "@probo/ui";
 import type { ComponentProps } from "react";
 import { use } from "react";
+import { useTranslation } from "react-i18next";
 import { ConnectionHandler, graphql, usePaginationFragment } from "react-relay";
 
 import type { PeopleListFragment$key } from "#/__generated__/iam/PeopleListFragment.graphql";
@@ -72,7 +72,7 @@ export function PeopleList(props: {
   const { fKey, onConnectionIdChange } = props;
 
   const organizationId = useOrganizationId();
-  const { __ } = useTranslate();
+  const { t } = useTranslation();
   const { role } = use(CurrentUser);
   const canManageRoles = getAssignableRoles(role).length > 0;
 
@@ -107,11 +107,11 @@ export function PeopleList(props: {
     >
       <Thead>
         <Tr>
-          <SortableTh field="FULL_NAME" onOrderChange={handleOrderChange}>{__("Name")}</SortableTh>
+          <SortableTh field="FULL_NAME" onOrderChange={handleOrderChange}>{t("peopleList.columns.name")}</SortableTh>
-          <SortableTh field="STATE">{__("Status")}</SortableTh>
+          <SortableTh field="STATE">{t("peopleList.columns.status")}</SortableTh>
-          <SortableTh field="EMAIL_ADDRESS" onOrderChange={handleOrderChange}>{__("Email")}</SortableTh>
+          <SortableTh field="EMAIL_ADDRESS" onOrderChange={handleOrderChange}>{t("peopleList.columns.email")}</SortableTh>
-          {canManageRoles && <Th>{__("Role")}</Th>}
+          {canManageRoles && <Th>{t("peopleList.columns.role")}</Th>}
-          <SortableTh field="CREATED_AT" onOrderChange={handleOrderChange}>{__("Created on")}</SortableTh>
+          <SortableTh field="CREATED_AT" onOrderChange={handleOrderChange}>{t("peopleList.columns.createdOn")}</SortableTh>
           <Th></Th>
         </Tr>
       </Thead>
@@ -120,7 +120,7 @@ export function PeopleList(props: {
           ? (
               <Tr>
                 <Td colSpan={7} className="text-center text-txt-secondary">
-                  {__("No people")}
+                  {t("peopleList.empty")}
                 </Td>
               </Tr>
             )