@lastbrain/module-auth 2.0.16 → 2.0.27

package/dist/web/public/SignUpPage.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Card, CardBody, Input, Link, Chip, addToast, } from "@lastbrain/ui";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { Suspense, useState } from "react";
 import { Mail, Lock, User, ArrowRight, Sparkles, CheckCircle2, } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
+import { useLocalizedRouter } from "@lastbrain/core";
 function SignUpForm() {
-    const router = useRouter();
+    const router = useLocalizedRouter();
     const searchParams = useSearchParams();
+    const t = useModuleTranslation("auth");
     const [fullName, setFullName] = useState("");
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -21,11 +24,13 @@ function SignUpForm() {
         setError(null);
         setSuccess(null);
         if (password !== confirmPassword) {
-            setError("Les mots de passe ne correspondent pas.");
+            setError(t("signup.password_mismatch") ||
+                "Les mots de passe ne correspondent pas.");
             return;
         }
         if (password.length < 6) {
-            setError("Le mot de passe doit contenir au moins 6 caractères.");
+            setError(t("signup.password_too_short") ||
+                "Le mot de passe doit contenir au moins 6 caractères.");
             return;
         }
         setLoading(true);
@@ -58,7 +63,7 @@ function SignUpForm() {
                     router.push(`/signin?redirect=${encodeURIComponent(redirectUrl)}`);
                 }
                 else {
-                    router.push("/signin");
+                    router.push(`/signin`);
                 }
             }, 2000);
         }
@@ -73,21 +78,23 @@ function SignUpForm() {
             setLoading(false);
         }
     };
-    return (_jsxs("div", { className: " relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-secondary-50/30 to-primary-50/30 dark:from-secondary-950/50 dark:to-primary-950/50", children: [_jsx("div", { className: "absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" }), _jsx("div", { className: "relative flex min-h-screen items-center justify-center px-4 py-12", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsx(Chip, { color: "secondary", variant: "flat", startContent: _jsx(Sparkles, { className: "w-4 h-4" }), className: "mb-4 p-2", children: "Rejoignez-nous" }), _jsx("h1", { className: "mb-3 text-4xl font-bold", children: _jsx("span", { className: "bg-gradient-to-r from-secondary-600 to-primary-600 bg-clip-text text-transparent", children: "Commencer gratuitement" }) }), _jsx("p", { className: "text-default-600 dark:text-default-400", children: "Cr\u00E9ez votre compte en quelques secondes" })] }), _jsx(Card, { className: "border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl", children: _jsxs(CardBody, { className: "gap-6 p-8", children: [_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6", children: [_jsx(Input, { label: "Nom complet", type: "text", placeholder: "Jean Dupont", value: fullName, onChange: (e) => setFullName(e.target.value), startContent: _jsx(User, { className: "h-4 w-4 text-default-400" }), classNames: {
+    return (_jsxs("div", { className: " relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-secondary-50/30 to-primary-50/30 dark:from-secondary-950/50 dark:to-primary-950/50", children: [_jsx("div", { className: "absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800/20 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05))]" }), _jsx("div", { className: "relative flex min-h-screen items-center justify-center px-4 py-12", children: _jsxs("div", { className: "w-full max-w-md", children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsx(Chip, { color: "secondary", variant: "flat", startContent: _jsx(Sparkles, { className: "w-4 h-4" }), className: "mb-4 p-2", children: t("signup.chip_label") || "Rejoignez-nous" }), _jsx("h1", { className: "mb-3 text-4xl font-bold", children: _jsx("span", { className: "bg-gradient-to-r from-secondary-600 to-primary-600 bg-clip-text text-transparent", children: t("signup.title") || "Commencer gratuitement" }) }), _jsx("p", { className: "text-default-600 dark:text-default-700", children: t("signup.subtitle") ||
+                                        "Créez votre compte en quelques secondes" })] }), _jsx(Card, { className: "border border-default-200/60 bg-background/60 backdrop-blur-md backdrop-saturate-150 shadow-xl", children: _jsxs(CardBody, { className: "gap-6 p-8", children: [_jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6", children: [_jsx(Input, { label: t("signup.full_name") || "Nom complet", type: "text", placeholder: t("signup.full_name_placeholder") || "Jean Dupont", value: fullName, onChange: (e) => setFullName(e.target.value), startContent: _jsx(User, { className: "h-4 w-4 text-default-400" }), classNames: {
                                                     input: "text-base",
                                                     inputWrapper: "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
-                                                } }), _jsx(Input, { label: "Email", type: "email", placeholder: "votre@email.com", value: email, onChange: (e) => setEmail(e.target.value), required: true, startContent: _jsx(Mail, { className: "h-4 w-4 text-default-400" }), classNames: {
+                                                } }), _jsx(Input, { label: t("email") || "Email", type: "email", placeholder: t("signin.email_placeholder") || "votre@email.com", value: email, onChange: (e) => setEmail(e.target.value), required: true, startContent: _jsx(Mail, { className: "h-4 w-4 text-default-400" }), classNames: {
                                                     input: "text-base",
                                                     inputWrapper: "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
-                                                } }), _jsx(Input, { label: "Mot de passe", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 6, startContent: _jsx(Lock, { className: "h-4 w-4 text-default-400" }), classNames: {
+                                                } }), _jsx(Input, { label: t("password") || "Mot de passe", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChange: (e) => setPassword(e.target.value), required: true, minLength: 6, startContent: _jsx(Lock, { className: "h-4 w-4 text-default-400" }), classNames: {
                                                     input: "text-base",
                                                     inputWrapper: "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
-                                                }, description: "Minimum 6 caract\u00E8res" }), _jsx(Input, { label: "Confirmer le mot de passe", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, minLength: 6, startContent: _jsx(Lock, { className: "h-4 w-4 text-default-400" }), classNames: {
+                                                }, description: t("signup.password_hint") || "Minimum 6 caractères" }), _jsx(Input, { label: t("signup.confirm_password") || "Confirmer le mot de passe", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), required: true, minLength: 6, startContent: _jsx(Lock, { className: "h-4 w-4 text-default-400" }), classNames: {
                                                     input: "text-base",
                                                     inputWrapper: "border border-default-200/60 hover:border-secondary-400 focus-within:border-secondary-500",
-                                                } }), error && (_jsx("div", { className: "rounded-lg border border-danger-200 bg-danger-50/50 px-4 py-3 dark:border-danger-800 dark:bg-danger-950/50", children: _jsx("p", { className: "text-sm text-danger-600 dark:text-danger-400", children: error }) })), success && (_jsx("div", { className: "rounded-lg border border-success-200 bg-success-50/50 px-4 py-3 dark:border-success-800 dark:bg-success-950/50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-success-600 dark:text-success-400" }), _jsx("p", { className: "text-sm text-success-600 dark:text-success-400", children: success })] }) })), _jsx(Button, { type: "submit", color: "secondary", size: "lg", className: "w-full font-semibold", endContent: loading ? null : _jsx(ArrowRight, { className: "h-5 w-5" }), isLoading: loading, children: "Cr\u00E9er mon compte" })] }), _jsxs("div", { className: "relative flex items-center gap-4 py-2", children: [_jsx("div", { className: "h-px flex-1 bg-default-200" }), _jsx("span", { className: "text-xs text-default-400", children: "OU" }), _jsx("div", { className: "h-px flex-1 bg-default-200" })] }), _jsx("div", { className: "text-center", children: _jsxs("p", { className: "text-sm text-default-600", children: ["D\u00E9j\u00E0 inscrit ?", " ", _jsx(Link, { href: redirectUrl
+                                                } }), error && (_jsx("div", { className: "rounded-lg border border-danger-200 bg-danger-50/50 px-4 py-3 dark:border-danger-800 dark:bg-danger-950/50", children: _jsx("p", { className: "text-sm text-danger-600 dark:text-danger-400", children: error }) })), success && (_jsx("div", { className: "rounded-lg border border-success-200 bg-success-50/50 px-4 py-3 dark:border-success-800 dark:bg-success-950/50", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-success-600 dark:text-success-400" }), _jsx("p", { className: "text-sm text-success-600 dark:text-success-400", children: success })] }) })), _jsx(Button, { type: "submit", color: "secondary", size: "lg", className: "w-full font-semibold", endContent: loading ? null : _jsx(ArrowRight, { className: "h-5 w-5" }), isLoading: loading, children: t("signup.submit") || "Créer mon compte" })] }), _jsxs("div", { className: "relative flex items-center gap-4 py-2", children: [_jsx("div", { className: "h-px flex-1 bg-default-200" }), _jsx("span", { className: "text-xs text-default-400", children: t("signup.or") || "OU" }), _jsx("div", { className: "h-px flex-1 bg-default-200" })] }), _jsx("div", { className: "text-center", children: _jsxs("p", { className: "text-sm text-default-600", children: [t("signup.have_account") || "Déjà inscrit ?", " ", _jsx(Link, { href: redirectUrl
                                                         ? `/signin?redirect=${encodeURIComponent(redirectUrl)}`
-                                                        : "/signin", className: "font-semibold text-secondary-600 hover:text-secondary-700", children: "Se connecter" })] }) })] }) }), _jsxs("p", { className: "mt-8 text-center text-xs text-default-400", children: ["En cr\u00E9ant un compte, vous acceptez nos", " ", _jsx(Link, { href: "/legal/terms", className: "underline hover:text-secondary-500", children: "conditions d'utilisation" }), " ", "et notre", " ", _jsx(Link, { href: "/legal/privacy", className: "underline hover:text-secondary-500", children: "politique de confidentialit\u00E9" })] })] }) })] }));
+                                                        : "/signin", className: "font-semibold text-secondary-600 hover:text-secondary-700", children: t("signin.submit") || "Se connecter" })] }) })] }) }), _jsxs("p", { className: "mt-8 text-center text-sm text-default-700", children: [t("signup.legal_prefix") ||
+                                    "En créant un compte, vous acceptez nos", " ", _jsx(Link, { href: "/legal/terms", className: "underline hover:text-secondary-500", children: t("signup.terms") || "conditions d'utilisation" }), " ", t("signup.legal_and") || "et notre", " ", _jsx(Link, { href: "/legal/privacy", className: "underline hover:text-secondary-500", children: t("signup.privacy") || "politique de confidentialité" })] })] }) })] }));
 }
 export function SignUpPage() {
     return (_jsx(Suspense, { fallback: _jsx("div", { children: "Chargement..." }), children: _jsx(SignUpForm, {}) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/module-auth",
-  "version": "2.0.16",
+  "version": "2.0.27",
   "description": "Module d'authentification complet pour LastBrain avec Supabase",
   "private": false,
   "type": "module",
@@ -32,8 +32,9 @@
     "supabase"
   ],
   "dependencies": {
-    "@lastbrain/core": "^2.0.16",
-    "@lastbrain/ui": "^2.0.16",
+    "@lastbrain/app": "^2.0.31",
+    "@lastbrain/core": "^2.0.27",
+    "@lastbrain/ui": "^2.0.27",
     "@supabase/supabase-js": "^2.86.0",
     "lucide-react": "^0.554.0",
     "react": "^19.2.1",

package/src/auth.build.config.ts

@@ -18,11 +18,6 @@ const authBuildConfig: ModuleBuildConfig = {
       path: "/reset-password",
       componentExport: "ResetPassword",
     },
-    {
-      section: "auth",
-      path: "/dashboard",
-      componentExport: "DashboardPage",
-    },
     {
       section: "auth",
       path: "/folder",
@@ -141,8 +136,8 @@ const authBuildConfig: ModuleBuildConfig = {
   menu: {
     public: [
       {
-        title: "Notifications",
-        description: "Vos notifications",
+        title: "module-auth.menu.notifications",
+        description: "module-auth.menu.notifications_desc",
         icon: "Bell",
         path: "#",
         order: 998,
@@ -151,8 +146,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "NotificationButton",
       },
       {
-        title: "Compte",
-        description: "Gérer votre compte",
+        title: "module-auth.menu.account",
+        description: "module-auth.menu.account_desc",
         icon: "User",
         path: "#",
         order: 999,
@@ -161,8 +156,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "AccountButton",
       },
       {
-        title: "Theme",
-        description: "Changer le thème",
+        title: "module-auth.menu.theme",
+        description: "module-auth.menu.theme_desc",
         icon: "Palette",
         path: "#",
         order: 9999,
@@ -173,8 +168,8 @@ const authBuildConfig: ModuleBuildConfig = {
     ],
     admin: [
       {
-        title: "Gestion des utilisateurs",
-        description: "Gérez les utilisateurs de la plateforme",
+        title: "module-auth.menu.users_management",
+        description: "module-auth.menu.users_management_desc",
         icon: "Users2",
         path: "/admin/auth/users",
         order: 1,
@@ -182,16 +177,16 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcutDisplay: "⌘⇧U",
       },
       {
-        title: "Statistiques d'inscriptions",
-        description: "Suivez les inscriptions par source",
+        title: "module-auth.menu.signup_stats",
+        description: "module-auth.menu.signup_stats_desc",
         icon: "UserStar",
         path: "/admin/auth/signup-stats",
         order: 2,
       },
 
       {
-        title: "Notifications",
-        description: "Vos notifications",
+        title: "module-auth.menu.notifications",
+        description: "module-auth.menu.notifications_desc",
         icon: "Bell",
         path: "#",
         order: 998,
@@ -200,8 +195,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "NotificationButton",
       },
       {
-        title: "Compte",
-        description: "Gérer votre compte",
+        title: "module-auth.menu.account",
+        description: "module-auth.menu.account_desc",
         icon: "User",
         path: "#",
         order: 999,
@@ -210,8 +205,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "AccountButton",
       },
       {
-        title: "Theme",
-        description: "Changer le thème",
+        title: "module-auth.menu.theme",
+        description: "module-auth.menu.theme_desc",
         icon: "Palette",
         path: "#",
         order: 9999,
@@ -222,8 +217,8 @@ const authBuildConfig: ModuleBuildConfig = {
     ],
     auth: [
       {
-        title: "Tableau de bord",
-        description: "Accédez à votre tableau de bord",
+        title: "module-auth.menu.dashboard",
+        description: "module-auth.menu.dashboard_desc",
         icon: "LayoutDashboard",
         path: "/auth/dashboard",
         order: 1,
@@ -231,8 +226,8 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcutDisplay: "⌘⇧D",
       },
       {
-        title: "Dossier",
-        description: "Accédez à votre dossier personnel",
+        title: "module-auth.menu.folder",
+        description: "module-auth.menu.folder_desc",
         icon: "FolderOpen",
         path: "/auth/folder",
         order: 99,
@@ -240,8 +235,8 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcutDisplay: "⌘⇧F",
       },
       {
-        title: "Notifications",
-        description: "Vos notifications",
+        title: "module-auth.menu.notifications",
+        description: "module-auth.menu.notifications_desc",
         icon: "Bell",
         path: "#",
         order: 998,
@@ -250,8 +245,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "NotificationButton",
       },
       {
-        title: "Compte",
-        description: "Gérer votre compte",
+        title: "module-auth.menu.account",
+        description: "module-auth.menu.account_desc",
         icon: "User",
         path: "#",
         order: 999,
@@ -260,8 +255,8 @@ const authBuildConfig: ModuleBuildConfig = {
         componentExport: "AccountButton",
       },
       {
-        title: "Theme",
-        description: "Changer le thème",
+        title: "module-auth.menu.theme",
+        description: "module-auth.menu.theme_desc",
         icon: "Palette",
         path: "#",
         order: 9999,
@@ -272,8 +267,8 @@ const authBuildConfig: ModuleBuildConfig = {
     ],
     account: [
       {
-        title: "Mon profil",
-        description: "Gérez vos informations personnelles",
+        title: "module-auth.menu.profile",
+        description: "module-auth.menu.profile_desc",
         icon: "User2",
         path: "/auth/profile",
         order: 1,
@@ -281,8 +276,8 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcutDisplay: "⌘⇧P",
       },
       {
-        title: "Paramètres",
-        description: "Configurez votre compte",
+        title: "module-auth.menu.settings",
+        description: "module-auth.menu.settings_desc",
         icon: "Settings",
         path: "/auth/reglage",
         order: 2,
@@ -290,8 +285,8 @@ const authBuildConfig: ModuleBuildConfig = {
         shortcutDisplay: "⌘⇧S",
       },
       {
-        title: "Déconnexion",
-        description: "Se déconnecter",
+        title: "module-auth.menu.signout",
+        description: "module-auth.menu.signout",
         icon: "LogOut",
         path: "/signout",
         order: 99,
@@ -308,22 +303,18 @@ const authBuildConfig: ModuleBuildConfig = {
         filter: "owner_id=eq.${USER_ID}",
         broadcast: "user_notifications_updated",
       },
-      {
-        schema: "public",
-        table: "user_profil",
-        event: "*",
-        filter: "owner_id=eq.${USER_ID}",
-        broadcast: "user_profil_updated",
-      },
-      {
-        schema: "public",
-        table: "user_addresses",
-        event: "*",
-        filter: "owner_id=eq.${USER_ID}",
-        broadcast: "user_address_updated",
-      },
     ],
-  },
+  }, 
+  authDashboard: [
+     {
+      key: "user",
+      title: "auth",
+      icon: "Dashboard",
+      componentExport: "DashboardPage",
+      entryPoint: "components/auth/dashboard",
+      order: 1,
+    },
+  ],
   storage: {
     buckets: [
       {

package/src/components/AccountButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Link } from "@lastbrain/ui";
+import { AppLink, Button } from "@lastbrain/ui";
 import { Avatar } from "@lastbrain/ui";
 import {
   Dropdown,
@@ -10,6 +10,8 @@ import {
 } from "@lastbrain/ui";
 import * as LucideIcons from "lucide-react";
 import type { User } from "@supabase/supabase-js";
+import { useModuleTranslation, langHref } from "@lastbrain/app";
+import { useLanguage } from "@lastbrain/app";
 
 interface AccountButtonProps {
   item: {
@@ -38,12 +40,15 @@ export const AccountButton = ({
   accountMenu = [],
   onLogout,
 }: AccountButtonProps) => {
+  const { lang } = useLanguage();
+  const t = useModuleTranslation("auth");
+
   if (!user)
     return (
       <>
         <div className="block md:hidden">
           <Button
-            as={Link}
+            as={AppLink}
             href="/signin"
             radius="full"
             isIconOnly
@@ -53,7 +58,7 @@ export const AccountButton = ({
             <LucideIcons.LogIn size={16} />
           </Button>
           <Button
-            as={Link}
+            as={AppLink}
             href="/signup"
             radius="full"
             isIconOnly
@@ -66,23 +71,23 @@ export const AccountButton = ({
         </div>
         <div className="hidden md:block">
           <Button
-            as={Link}
+            as={AppLink}
             href="/signin"
             startContent={<LucideIcons.LogIn size={16} />}
             variant="light"
             color="primary"
           >
-            Se connecter
+            {t("signin")}
           </Button>
           <Button
-            as={Link}
+            as={AppLink}
             href="/signup"
             variant="flat"
             className="ml-2"
             color="secondary"
             startContent={<LucideIcons.UserPlus2 size={16} />}
           >
-            S'inscrire
+            {t("signup")}
           </Button>
         </div>
       </>
@@ -117,7 +122,9 @@ export const AccountButton = ({
         items={[
           {
             key: "hello",
-            label: `Bonjour ${user?.user_metadata?.full_name || user.email}`,
+            label: `${t("hello")} ${
+              user?.user_metadata?.full_name || user.email
+            }`,
             isReadOnly: true,
           },
           ...accountMenu.map((item) => ({
@@ -130,7 +137,7 @@ export const AccountButton = ({
             href:
               item.path.includes("signout") || item.path.includes("logout")
                 ? undefined
-                : item.path,
+                : langHref(item.path, lang),
           })),
         ]}
       >
@@ -151,7 +158,7 @@ export const AccountButton = ({
               href={item.href}
               onPress={item.isLogout ? () => onLogout?.() : undefined}
               color={item.isLogout ? "danger" : "default"}
-              description={item.description}
+              description={!item.isLogout && item.description}
               startContent={Icon && <Icon size={16} />}
               isDisabled={item.isReadOnly}
               isReadOnly={item.isReadOnly}

package/src/{web → components}/auth/dashboard.tsx

@@ -11,7 +11,8 @@ import {
   Avatar,
 } from "@lastbrain/ui";
 
-import { User, Mail, Calendar, Shield } from "lucide-react";
+import { User, Mail, Calendar, Shield, LayoutDashboard } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
 
 interface UserData {
   id: string;
@@ -28,6 +29,7 @@ interface UserData {
 }
 
 export function DashboardPage() {
+  const t = useModuleTranslation("auth");
   const [userData, setUserData] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -59,7 +61,9 @@ export function DashboardPage() {
       <div className="flex justify-center items-center min-h-[400px]">
         <Spinner color="primary" size="lg">
           {" "}
-          <span className="text-xs text-default-700">Loading dashboard...</span>
+          <span className="text-xs text-default-700">
+            {t("dashboard.loading") || "Loading dashboard..."}
+          </span>
         </Spinner>
       </div>
     );
@@ -70,7 +74,9 @@ export function DashboardPage() {
       <div className="pt-12">
         <Card className="max-w-2xl mx-auto">
           <CardBody>
-            <p className="text-danger">Error: {error}</p>
+            <p className="text-danger">
+              {t("dashboard.error") || "Error"}: {error}
+            </p>
           </CardBody>
         </Card>
       </div>
@@ -87,10 +93,15 @@ export function DashboardPage() {
       : "User";
 
   return (
-    <div className="pt-12 pb-12 max-w-6xl mx-auto px-4">
-      <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+    <div className="md:pt-8  max-w-6xl mx-auto">
+      <div className="flex flex-inline items-center gap-2 mb-4">
+        <LayoutDashboard size={24} />
+        <h1 className="text-3xl font-bold ">
+          {t("dashboard.title") || "Dashboard"}
+        </h1>
+      </div>
 
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className="mx-0 px-0 grid gap-6 md:grid-cols-2">
         {/* Profile Summary Card */}
         <Card className="col-span-full md:col-span-1">
           <CardHeader className="flex gap-3">
@@ -115,7 +126,7 @@ export function DashboardPage() {
               <div className="flex items-center gap-2">
                 <Calendar className="w-4 h-4 text-default-400" />
                 <span className="text-small">
-                  Member since{" "}
+                  {t("dashboard.member_since") || "Member since"}{" "}
                   {new Date(userData.created_at).toLocaleDateString()}
                 </span>
               </div>
@@ -132,25 +143,33 @@ export function DashboardPage() {
         {/* Account Status Card */}
         <Card>
           <CardHeader>
-            <h3 className="text-lg font-semibold">Account Status</h3>
+            <h3 className="text-lg font-semibold">
+              {t("dashboard.account_status") || "Account Status"}
+            </h3>
           </CardHeader>
           <Divider />
           <CardBody>
             <div className="space-y-4">
               <div className="flex justify-between items-center">
-                <span className="text-small">Status</span>
+                <span className="text-small">
+                  {t("dashboard.status") || "Status"}
+                </span>
                 <Chip color="success" size="sm" variant="flat">
-                  Active
+                  {t("dashboard.active") || "Active"}
                 </Chip>
               </div>
               <div className="flex justify-between items-center">
-                <span className="text-small">Profile</span>
+                <span className="text-small">
+                  {t("dashboard.profile") || "Profile"}
+                </span>
                 <Chip
                   color={userData.profile ? "success" : "warning"}
                   size="sm"
                   variant="flat"
                 >
-                  {userData.profile ? "Complete" : "Incomplete"}
+                  {userData.profile
+                    ? t("dashboard.complete") || "Complete"
+                    : t("dashboard.incomplete") || "Incomplete"}
                 </Chip>
               </div>
             </div>
@@ -172,7 +191,7 @@ export function DashboardPage() {
           </Card>
         )}
 
-        {/* Quick Stats */}
+        {/* Quick Stats
         <Card className="col-span-full">
           <CardHeader>
             <h3 className="text-lg font-semibold">Quick Stats</h3>
@@ -203,7 +222,7 @@ export function DashboardPage() {
               </div>
             </div>
           </CardBody>
-        </Card>
+        </Card> */}
       </div>
     </div>
   );