feat: Add a user profile page to allow user to update there preferred language

public/locales/en.json

@@ -79,7 +79,17 @@
     }
   },
   "auth": {
-    "logout": "Logout"
+    "logout": "Logout",
+    "settings": {
+      "title": "Account Settings",
+      "language": {
+        "label": "Preferred language",
+        "list": {
+          "en": "English",
+          "fr": "French"
+        }
+      }
+    }
   },
   "boats": {
     "list": {
@@ -305,5 +315,8 @@
         }
       }
     }
+  },
+  "core": {
+    "settings": "Settings"
   }
 }

public/locales/fr.json

@@ -79,7 +79,17 @@
     }
   },
   "auth": {
-    "logout": "Déconnexion"
+    "logout": "Déconnexion",
+    "settings": {
+      "title": "Paramètres du compte",
+      "language": {
+        "label": "Langue préférée",
+        "list": {
+          "en": "Anglais",
+          "fr": "Français"
+        }
+      }
+    }
   },
   "boats": {
     "list": {
@@ -305,5 +315,8 @@
         }
       }
     }
+  },
+  "core": {
+    "settings": "Paramètres"
   }
 }

src/auth/components/change-language.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from '@refinedev/core';
+import { Form, Select } from 'antd';
+
+import { useUpdateIdentity } from '../hooks/use-update-identity';
+
+const ChangeLanguage = () => {
+  const { getLocale, changeLocale, translate } = useTranslation();
+  const { identity, update } = useUpdateIdentity();
+
+  console.log('Rendering ChangeLanguage with identity:', identity);
+
+  const handleChange = (value: string) => {
+    changeLocale(value);
+    update({ language: value });
+  };
+
+  return (
+    <Form.Item
+      label={translate('auth.settings.language.label')}
+      layout="vertical"
+    >
+      <Select
+        defaultValue={getLocale()}
+        onChange={handleChange}
+        options={[
+          {
+            value: 'en',
+            label: <span>{translate('auth.settings.language.list.en')}</span>,
+          },
+          {
+            value: 'fr',
+            label: <span>{translate('auth.settings.language.list.fr')}</span>,
+          },
+        ]}
+      />
+    </Form.Item>
+  );
+};
+
+export { ChangeLanguage };

src/auth/hooks/use-update-identity.tsx

@@ -0,0 +1,24 @@
+import { useGetIdentity } from '@refinedev/core';
+
+import { supabaseClient } from '@/core/utils/supabaseClient';
+
+const useUpdateIdentity = () => {
+  const identity = useGetIdentity<{
+    id: string;
+    user_metadata?: Record<string, unknown> | null;
+  }>();
+
+  const update = async (data: Record<string, unknown>) => {
+    supabaseClient.auth.updateUser({
+      data: {
+        ...identity.data?.user_metadata,
+        ...data,
+      },
+    });
+    identity.refetch();
+  };
+
+  return { update, identity: identity.data?.user_metadata };
+};
+
+export { useUpdateIdentity };

src/auth/pages/settings.tsx

@@ -0,0 +1,21 @@
+import { useTranslate } from '@refinedev/core';
+import { Card } from 'antd';
+
+import { PageHeader } from '@/shared/components/page-header';
+import { PageLayout } from '@/shared/components/page-layout';
+import { ChangeLanguage } from '../components/change-language';
+
+const SettingsPage = () => {
+  const translate = useTranslate();
+
+  return (
+    <PageLayout>
+      <PageHeader title={translate('auth.settings.title')} />
+      <Card>
+        <ChangeLanguage />
+      </Card>
+    </PageLayout>
+  );
+};
+
+export { SettingsPage };

src/boats/pages/list.tsx

@@ -30,7 +30,7 @@ const ListBoat = () => {
             <Card hoverable style={{ textAlign: 'center' }}>
               <PlusOutlined style={{ fontSize: 24 }} />
               <span style={{ marginLeft: 16 }}>
-                {translate('ListBoat.add')}
+                {translate('boats.list.add')}
               </span>
             </Card>
           </Link>

src/core/components/app-layout.tsx

@@ -1,7 +1,7 @@
-import { Link } from '@refinedev/core';
+import { Link, useGetIdentity, useTranslation } from '@refinedev/core';
 import type { MenuProps } from 'antd';
 import { Grid, Layout as LayoutAntd } from 'antd';
-import type { FC } from 'react';
+import { type FC, useMemo } from 'react';
 
 import { LogoutButton } from '@/auth/components/logout-button';
 
@@ -15,6 +15,18 @@ interface LayoutProps {
 
 const AppLayout: FC<LayoutProps> = ({ children }) => {
   const screens = useBreakpoint();
+  const identity = useGetIdentity<{
+    id: string;
+    user_metadata?: Record<string, unknown> | null;
+  }>();
+  const { translate, changeLocale, getLocale } = useTranslation();
+
+  useMemo(() => {
+    const userLanguage = identity.data?.user_metadata?.language as string;
+    if (userLanguage && userLanguage !== getLocale()) {
+      changeLocale(userLanguage);
+    }
+  }, [identity, changeLocale, getLocale]);
 
   return (
     <LayoutAntd style={{ minHeight: '100vh' }}>
@@ -32,7 +44,13 @@ const AppLayout: FC<LayoutProps> = ({ children }) => {
           <span>Vessel</span>
           <span style={{ color: '#1890ff' }}>Vigil</span>
         </Link>
-        <LogoutButton style={{ marginLeft: 'auto' }} />
+        <Link
+          to="/settings"
+          style={{ color: 'white', marginRight: '20px', marginLeft: 'auto' }}
+        >
+          {translate('core.settings')}
+        </Link>
+        <LogoutButton />
       </Header>
       <Content>{children}</Content>
       <Footer style={{ textAlign: 'center' }}>

src/core/components/app-router.tsx

@@ -3,6 +3,7 @@ import { Authenticated } from '@refinedev/core';
 import { Navigate, Outlet, Route, Routes } from 'react-router';
 
 import { Login } from '@/auth/pages/login';
+import { SettingsPage } from '@/auth/pages/settings';
 import { BoatLayout } from '@/boats/components/boat-layout';
 import { AddBoat } from '@/boats/pages/add';
 import { BoatDashboard } from '@/boats/pages/dashboard';
@@ -57,6 +58,7 @@ const AppRouter = () => {
             <Route path="access" element={<AccessSettings />} />
           </Route>
         </Route>
+        <Route path="/settings" element={<SettingsPage />} />
       </Route>
       <Route
         element={