diff --git a/public/locales/en.json b/public/locales/en.json
index a78e17f..0a06068 100644
--- a/public/locales/en.json
+++ b/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"
}
}
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 46ce36a..b18a8ba 100644
--- a/public/locales/fr.json
+++ b/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"
}
}
diff --git a/src/auth/components/change-language.tsx b/src/auth/components/change-language.tsx
new file mode 100644
index 0000000..6f455a2
--- /dev/null
+++ b/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 (
+
+
+ );
+};
+
+export { ChangeLanguage };
diff --git a/src/auth/hooks/use-update-identity.tsx b/src/auth/hooks/use-update-identity.tsx
new file mode 100644
index 0000000..55845e9
--- /dev/null
+++ b/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 | null;
+ }>();
+
+ const update = async (data: Record) => {
+ supabaseClient.auth.updateUser({
+ data: {
+ ...identity.data?.user_metadata,
+ ...data,
+ },
+ });
+ identity.refetch();
+ };
+
+ return { update, identity: identity.data?.user_metadata };
+};
+
+export { useUpdateIdentity };
diff --git a/src/auth/pages/settings.tsx b/src/auth/pages/settings.tsx
new file mode 100644
index 0000000..b32c27a
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+};
+
+export { SettingsPage };
diff --git a/src/boats/pages/list.tsx b/src/boats/pages/list.tsx
index ec99b38..83963fc 100644
--- a/src/boats/pages/list.tsx
+++ b/src/boats/pages/list.tsx
@@ -30,7 +30,7 @@ const ListBoat = () => {
- {translate('ListBoat.add')}
+ {translate('boats.list.add')}
diff --git a/src/core/components/app-layout.tsx b/src/core/components/app-layout.tsx
index 042ac74..971394b 100644
--- a/src/core/components/app-layout.tsx
+++ b/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 = ({ children }) => {
const screens = useBreakpoint();
+ const identity = useGetIdentity<{
+ id: string;
+ user_metadata?: Record | 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 (
@@ -32,7 +44,13 @@ const AppLayout: FC = ({ children }) => {
Vessel
Vigil
-
+
+ {translate('core.settings')}
+
+
{children}