Add next-intl to internationalize our project

app/(backend)/users/page.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Search, Plus, MoreVertical, Filter } from "lucide-react";
-import { UserMobileCard } from "./components/UserMobileCard";
-import { UserFormWrapper } from "./components/UserFormWrapper";
-
-// Temporary user data for demonstration
-const tempUsers = [
-    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", joinedAt: "2023-01-01", status: "active" },
-    { id: 2, name: "Alice Smith", email: "alice@test.com", role: "Editor", joinedAt: "2023-02-15", status: "active" },
-    { id: 3, name: "Bob Johnson", email: "bob@community.com", role: "Member", joinedAt: "2023-03-10", status: "inactive" },
-    { id: 4, name: "Charlie Brown", email: "charlie@community.com", role: "Member", joinedAt: "2023-04-20", status: "active" },
-];
-
-export default function UsersPage() {
-
-    const [open, setOpen] = useState(false)
-
-    return (
-        <div className="space-y-6">
-            <div className="flex flex-col gap-6 md:gap-10 p-0">
-
-                {/* Header: Title + Button for Desktop only */}
-                <div className="hidden md:flex items-center justify-between">
-                    <div className="space-y-1">
-                        <h1 className="text-4xl font-bold tracking-tight text-white">
-                            Users
-                        </h1>
-                        <p className="hidden md:block text-muted-foreground text-lg mt-3 max-w-2xl">
-                            Manage your community members, roles, and permissions here.
-                        </p>
-                    </div>
-
-                    {/* Button: Add New User for Desktop only */}
-                    <UserFormWrapper />
-                </div>
-
-                {/* Search + Filter */}
-                <div className="flex gap-3 md:gap-4">
-                    <div className="relative w-full group">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-                        <Input
-                            className="w-full bg-card border border-border rounded-lg py-1 pl-10 pr-12 h-10 focus:outline-1"
-                            placeholder="Search users..."
-                        />
-                        <div className="absolute right-2 top-1/2 -translate-y-1/2">
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                className="size-8 md:size-10 hover:bg-muted text-muted-foreground hover:text-white transition-colors"
-                            >
-                                <Filter className="size-4 md:size-5" />
-                                <span className="sr-only">Filters</span>
-                            </Button>
-                        </div>
-                    </div>
-                    {/* Button: Add New User for Mobile only */}
-                    <div className="md:hidden">
-                        <UserFormWrapper />
-                    </div>
-                </div>
-            </div>
-
-            {/* --- For Mobile Phones --- */}
-            <div className="flex flex-col gap-4 md:hidden">
-                {tempUsers.map((user) => (
-                    <UserMobileCard
-                        key={user.id}
-                        name={user.name}
-                        email={user.email}
-                        role={user.role}
-                        joinedAt={user.joinedAt}
-                        status={user.status as "active" | "inactive"}
-                    />
-                ))}
-            </div>
-
-            {/* Users List / Table */}
-            <div className="hidden md:block bg-card border border-border rounded-xl overflow-hidden shadow-sm">
-                <table className="w-full text-left">
-                    <thead className="bg-muted/50 border-b border-border">
-                        <tr>
-                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
-                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
-                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
-                            <th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
-                            <th className="px-6 py-3"></th>
-                        </tr>
-                    </thead>
-                    <tbody className="divide-y divide-border">
-                        {/* Example Row */}
-                        {tempUsers.map((user) => (
-                            <tr key={user.id} className="hover:bg-muted/20 transition-colors cursor-pointer">
-                                <td className="px-6 py-4">
-                                    <div className="flex items-center gap-3">
-                                        <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">{user.name.charAt(0)}</div>
-                                        <div>
-                                            <div className="text-sm font-medium text-foreground">{user.name}</div>
-                                            <div className="text-xs text-muted-foreground">{user.email}</div>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td className="px-6 py-4">
-                                    <span className="text-sm text-muted-foreground">{user.role}</span>
-                                </td>
-                                <td className="px-6 py-4">
-                                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${user.status === "active"
-                                        ? "bg-green-500/10 text-green-500"
-                                        : "bg-red-500/10 text-red-500"}`}>
-                                        {user.status}
-                                    </span>
-                                </td>
-                                <td className="px-6 py-4 text-sm text-muted-foreground">{user.joinedAt}</td>
-                                <td className="px-6 py-4 text-right">
-                                    <button className="p-2 hover:bg-muted rounded-full transition-colors">
-                                        <MoreVertical className="w-4 h-4 text-muted-foreground" />
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}

app/[locale]/(backend)/page.tsx

@@ -21,10 +21,12 @@ import {
   UserCircle,
   Users,
 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import React from "react";
 
 const Dashboard: React.FC = () => {
+  const t = useTranslations("dashboard");
   const categories: ModuleCategory[] = [
     {
       title: "People & Community",
@@ -170,11 +172,9 @@ const Dashboard: React.FC = () => {
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
         <div>
           <h1 className="text-foreground text-3xl font-bold tracking-tight">
-            Community Dashboard
+            {t("title")}
           </h1>
-          <p className="text-muted-foreground mt-1">
-            Welcome to the admin area. Manage your community resources safely.
-          </p>
+          <p className="text-muted-foreground mt-1">{t("welcome")}</p>
         </div>
         <div className="flex space-x-3">
           <Badge variant="secondary" className="px-2.5 py-0.5 text-sm">

app/[locale]/(backend)/users/page.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Filter, MoreVertical, Search } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { UserFormWrapper } from "./components/UserFormWrapper";
+import { UserMobileCard } from "./components/UserMobileCard";
+
+// Temporary user data for demonstration
+const tempUsers = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    role: "Admin",
+    joinedAt: "2023-01-01",
+    status: "active",
+  },
+  {
+    id: 2,
+    name: "Alice Smith",
+    email: "alice@test.com",
+    role: "Editor",
+    joinedAt: "2023-02-15",
+    status: "active",
+  },
+  {
+    id: 3,
+    name: "Bob Johnson",
+    email: "bob@community.com",
+    role: "Member",
+    joinedAt: "2023-03-10",
+    status: "inactive",
+  },
+  {
+    id: 4,
+    name: "Charlie Brown",
+    email: "charlie@community.com",
+    role: "Member",
+    joinedAt: "2023-04-20",
+    status: "active",
+  },
+];
+
+export default function UsersPage() {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("users");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-6 p-0 md:gap-10">
+        {/* Header: Title + Button for Desktop only */}
+        <div className="hidden items-center justify-between md:flex">
+          <div className="space-y-1">
+            <h1 className="text-4xl font-bold tracking-tight text-white">
+              {t("title")}
+            </h1>
+            <p className="text-muted-foreground mt-3 hidden max-w-2xl text-lg md:block">
+              {t("welcome")}
+            </p>
+          </div>
+
+          {/* Button: Add New User for Desktop only */}
+          <UserFormWrapper />
+        </div>
+
+        {/* Search + Filter */}
+        <div className="flex gap-3 md:gap-4">
+          <div className="group relative w-full">
+            <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+            <Input
+              className="bg-card border-border h-10 w-full rounded-lg border py-1 pr-12 pl-10 focus:outline-1"
+              placeholder="Search users..."
+            />
+            <div className="absolute top-1/2 right-2 -translate-y-1/2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="hover:bg-muted text-muted-foreground size-8 transition-colors hover:text-white md:size-10"
+              >
+                <Filter className="size-4 md:size-5" />
+                <span className="sr-only">Filters</span>
+              </Button>
+            </div>
+          </div>
+          {/* Button: Add New User for Mobile only */}
+          <div className="md:hidden">
+            <UserFormWrapper />
+          </div>
+        </div>
+      </div>
+
+      {/* --- For Mobile Phones --- */}
+      <div className="flex flex-col gap-4 md:hidden">
+        {tempUsers.map((user) => (
+          <UserMobileCard
+            key={user.id}
+            name={user.name}
+            email={user.email}
+            role={user.role}
+            joinedAt={user.joinedAt}
+            status={user.status as "active" | "inactive"}
+          />
+        ))}
+      </div>
+
+      {/* Users List / Table */}
+      <div className="bg-card border-border hidden overflow-hidden rounded-xl border shadow-sm md:block">
+        <table className="w-full text-left">
+          <thead className="bg-muted/50 border-border border-b">
+            <tr>
+              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
+                User
+              </th>
+              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
+                Role
+              </th>
+              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
+                Status
+              </th>
+              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
+                Joined
+              </th>
+              <th className="px-6 py-3"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-border divide-y">
+            {/* Example Row */}
+            {tempUsers.map((user) => (
+              <tr
+                key={user.id}
+                className="hover:bg-muted/20 cursor-pointer transition-colors"
+              >
+                <td className="px-6 py-4">
+                  <div className="flex items-center gap-3">
+                    <div className="bg-primary/20 text-primary flex h-10 w-10 items-center justify-center rounded-full font-bold">
+                      {user.name.charAt(0)}
+                    </div>
+                    <div>
+                      <div className="text-foreground text-sm font-medium">
+                        {user.name}
+                      </div>
+                      <div className="text-muted-foreground text-xs">
+                        {user.email}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <td className="px-6 py-4">
+                  <span className="text-muted-foreground text-sm">
+                    {user.role}
+                  </span>
+                </td>
+                <td className="px-6 py-4">
+                  <span
+                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                      user.status === "active"
+                        ? "bg-green-500/10 text-green-500"
+                        : "bg-red-500/10 text-red-500"
+                    }`}
+                  >
+                    {user.status}
+                  </span>
+                </td>
+                <td className="text-muted-foreground px-6 py-4 text-sm">
+                  {user.joinedAt}
+                </td>
+                <td className="px-6 py-4 text-right">
+                  <button
+                    title="More options"
+                    className="hover:bg-muted rounded-full p-2 transition-colors"
+                  >
+                    <MoreVertical className="text-muted-foreground h-4 w-4" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/[locale]/layout.tsx

@@ -0,0 +1,45 @@
+import { routing } from "@/i18n/routing";
+import type { Metadata } from "next";
+import { NextIntlClientProvider } from "next-intl";
+import { ThemeProvider } from "next-themes";
+import { Geist, Geist_Mono } from "next/font/google";
+import "../globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "CGR App",
+  description: "Manager for CGR Data",
+};
+
+export default async function RootLayout({
+  children,
+  params,
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale?: string };
+}>) {
+  const { locale } = await params;
+
+  return (
+    <html lang={locale || routing.defaultLocale} suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider attribute="class" enableSystem>
+          <NextIntlClientProvider locale={locale || routing.defaultLocale}>
+            {children}
+          </NextIntlClientProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/layout.tsx

@@ -1,35 +1,11 @@
-import type { Metadata } from "next";
-import { ThemeProvider } from "next-themes";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import { ReactNode } from "react";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "CGR App",
-  description: "Manager for CGR Data",
+type Props = {
+  children: ReactNode;
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <ThemeProvider attribute="class" enableSystem>
-          {children}
-        </ThemeProvider>
-      </body>
-    </html>
-  );
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+export default function RootLayout({ children }: Props) {
+  return children;
 }