[DRAFT] Feature i18n added

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /messages/en-US.json
+    translation: /messages/%locale%.json

next.config.mjs

@@ -1,9 +1,13 @@
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     eslint: {
-        ignoreDuringBuilds: true,
+        ignoreDuringBuilds: true
     },
-    output: "standalone"
+    output: 'standalone'
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package.json

@@ -21,6 +21,7 @@
     },
     "dependencies": {
         "@asteasolutions/zod-to-openapi": "^7.3.0",
+        "@heroicons/react": "^2.2.0",
         "@hookform/resolvers": "3.9.1",
         "@node-rs/argon2": "2.0.2",
         "@oslojs/crypto": "1.0.1",
@@ -74,6 +75,7 @@
         "lucide-react": "0.469.0",
         "moment": "2.30.1",
         "next": "15.2.4",
+        "next-intl": "^4.1.0",
         "next-themes": "0.4.4",
         "node-cache": "5.1.2",
         "node-fetch": "3.3.2",

src/app/[orgId]/OrganizationLandingCard.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Users, Globe, Database, Cog, Settings, Waypoints, Combine } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 interface OrgStat {
     label: string;
@@ -38,19 +39,21 @@ export default function OrganizationLandingCard(
 ) {
     const [orgData] = useState(props);
 
+    const t = useTranslations();
+
     const orgStats: OrgStat[] = [
         {
-            label: "Sites",
+            label: t('sites'),
             value: orgData.overview.stats.sites,
             icon: <Combine className="h-6 w-6" />
         },
         {
-            label: "Resources",
+            label: t('resources'),
             value: orgData.overview.stats.resources,
             icon: <Waypoints className="h-6 w-6" />
         },
         {
-            label: "Users",
+            label: t('users'),
             value: orgData.overview.stats.users,
             icon: <Users className="h-6 w-6" />
         }
@@ -81,9 +84,9 @@ export default function OrganizationLandingCard(
                     ))}
                 </div>
                 <div className="text-center text-lg">
-                    Your role:{" "}
+                    {t('accessRoleYour')}{" "}
                     <span className="font-semibold">
-                        {orgData.overview.isOwner ? "Owner" : orgData.overview.userRole}
+                        {orgData.overview.isOwner ? t('accessRoleOwner') : orgData.overview.userRole}
                     </span>
                 </div>
             </CardContent>
@@ -92,7 +95,7 @@ export default function OrganizationLandingCard(
                     <Link href={`/${orgData.overview.orgId}/settings`}>
                         <Button size="lg" className="w-full md:w-auto">
                             <Settings className="mr-2 h-4 w-4" />
-                            Organization Settings
+                            {t('orgGeneralSettings')}
                         </Button>
                     </Link>
                 </CardFooter>

src/app/[orgId]/settings/access/AccessPageHeaderAndNav.tsx

@@ -2,6 +2,7 @@
 
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { useTranslations } from "next-intl";
 
 interface AccessPageHeaderAndNavProps {
     children: React.ReactNode;
@@ -12,29 +13,31 @@ export default function AccessPageHeaderAndNav({
     children,
     hasInvitations
 }: AccessPageHeaderAndNavProps) {
+    const t = useTranslations();
+
     const navItems = [
         {
-            title: "Users",
+            title: t('users'),
             href: `/{orgId}/settings/access/users`
         },
         {
-            title: "Roles",
+            title: t('roles'),
             href: `/{orgId}/settings/access/roles`
         }
     ];
 
     if (hasInvitations) {
         navItems.push({
-            title: "Invitations",
+            title: t('invite'),
             href: `/{orgId}/settings/access/invitations`
         });
     }
 
     return (
         <>
             <SettingsSectionTitle
-                title="Manage Users & Roles"
-                description="Invite users and add them to roles to manage access to your organization"
+                title={t('accessUsersRoles')}
+                description={t('accessUsersRolesDescription')}
             />
 
             <HorizontalTabs items={navItems}>

src/app/[orgId]/settings/access/invitations/InvitationsDataTable.tsx

@@ -4,6 +4,7 @@ import {
     ColumnDef,
 } from "@tanstack/react-table";
 import { DataTable } from "@app/components/ui/data-table";
+import { useTranslations } from 'next-intl';
 
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
@@ -14,12 +15,15 @@ export function InvitationsDataTable<TData, TValue>({
     columns,
     data
 }: DataTableProps<TData, TValue>) {
+
+    const t = useTranslations();
+
     return (
         <DataTable
             columns={columns}
             data={data}
-            title="Invitations"
-            searchPlaceholder="Search invitations..."
+            title={t('invite')}
+            searchPlaceholder={t('inviteSearch')}
             searchColumn="email"
         />
     );

src/app/[orgId]/settings/access/invitations/InvitationsTable.tsx

@@ -17,6 +17,7 @@ import { useOrgContext } from "@app/hooks/useOrgContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
 
 export type InvitationRow = {
     id: string;
@@ -39,6 +40,8 @@ export default function InvitationsTable({
     const [selectedInvitation, setSelectedInvitation] =
         useState<InvitationRow | null>(null);
 
+    const t = useTranslations();
+
     const api = createApiClient(useEnvContext());
     const { org } = useOrgContext();
 
@@ -51,7 +54,7 @@ export default function InvitationsTable({
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button variant="ghost" className="h-8 w-8 p-0">
-                                <span className="sr-only">Open menu</span>
+                                <span className="sr-only">{t('openMenu')}</span>
                                 <MoreHorizontal className="h-4 w-4" />
                             </Button>
                         </DropdownMenuTrigger>
@@ -62,7 +65,7 @@ export default function InvitationsTable({
                                     setSelectedInvitation(invitation);
                                 }}
                             >
-                                <span>Regenerate Invitation</span>
+                                <span>{t('inviteRegenerate')}</span>
                             </DropdownMenuItem>
                             <DropdownMenuItem
                                 onClick={() => {
@@ -71,7 +74,7 @@ export default function InvitationsTable({
                                 }}
                             >
                                 <span className="text-red-500">
-                                    Remove Invitation
+                                    {t('inviteRemove')}
                                 </span>
                             </DropdownMenuItem>
                         </DropdownMenuContent>
@@ -81,11 +84,11 @@ export default function InvitationsTable({
         },
         {
             accessorKey: "email",
-            header: "Email"
+            header: t('email')
         },
         {
             accessorKey: "expiresAt",
-            header: "Expires At",
+            header: t('expiresAt'),
             cell: ({ row }) => {
                 const expiresAt = new Date(row.original.expiresAt);
                 const isExpired = expiresAt < new Date();
@@ -99,7 +102,7 @@ export default function InvitationsTable({
         },
         {
             accessorKey: "role",
-            header: "Role"
+            header: t('role')
         }
     ];
 
@@ -112,17 +115,16 @@ export default function InvitationsTable({
                 .catch((e) => {
                     toast({
                         variant: "destructive",
-                        title: "Failed to remove invitation",
-                        description:
-                            "An error occurred while removing the invitation."
+                        title: t('inviteRemoveError'),
+                        description: t('inviteRemoveErrorDescription')
                     });
                 });
 
             if (res && res.status === 200) {
                 toast({
                     variant: "default",
-                    title: "Invitation removed",
-                    description: `The invitation for ${selectedInvitation.email} has been removed.`
+                    title: t('inviteRemoved'),
+                    description: t('inviteRemovedDescription', {email: selectedInvitation.email})
                 });
 
                 setInvitations((prev) =>
@@ -146,23 +148,20 @@ export default function InvitationsTable({
                 dialog={
                     <div className="space-y-4">
                         <p>
-                            Are you sure you want to remove the invitation for{" "}
-                            <b>{selectedInvitation?.email}</b>?
+                            {t('inviteQuestionRemove', {email: selectedInvitation?.email || ''})}
                         </p>
                         <p>
-                            Once removed, this invitation will no longer be
-                            valid. You can always re-invite the user later.
+                            {t('inviteMessageRemove')}
                         </p>
                         <p>
-                            To confirm, please type the email address of the
-                            invitation below.
+                            {t('inviteMessageConfirm')}
                         </p>
                     </div>
                 }
-                buttonText="Confirm Remove Invitation"
+                buttonText={t('inviteRemoveConfirm')}
                 onConfirm={removeInvitation}
                 string={selectedInvitation?.email ?? ""}
-                title="Remove Invitation"
+                title={t('inviteRemove')}
             />
             <RegenerateInvitationForm
                 open={isRegenerateModalOpen}