fix: Add localization route and settings menu entry

- Add LocalizationSettings to RouterContext routes
- Add localization card to SettingsOverview menu
- Update LocalizationSettings to use SettingsLayout
- Add Language icon import

Now accessible at /settings/localization

src/contexts/RouterContext.jsx

@@ -31,6 +31,7 @@ import PaymentSuccessView from '../views/Payments/PaymentSuccessView'
 import PrivacyPolicyView from '../views/PrivacyPolicy/PrivacyPolicyView'
 import ProjectView from '../views/Projects/ProjectView'
 import APITokenSettings from '../views/Settings/APITokenSettings'
+import LocalizationSettings from '../views/Settings/LocalizationSettings'
 import MFASettings from '../views/Settings/MFASettings'
 import NotificationSetting from '../views/Settings/NotificationSetting'
 import ProfileSettings from '../views/Settings/ProfileSettings'
@@ -115,6 +116,10 @@ const Router = createBrowserRouter([
             path: 'theme',
             element: <ThemeSettings />,
           },
+          {
+            path: 'localization',
+            element: <LocalizationSettings />,
+          },
           {
             path: 'advanced',
             element: <AdvancedSettings />,

src/views/Settings/LocalizationSettings.jsx

@@ -8,17 +8,16 @@ import {
   Box,
   Button,
   Card,
-  Chip,
   Divider,
   FormControl,
   FormHelperText,
-  FormLabel,
   Option,
   Select,
   Typography,
 } from '@mui/joy'
 import moment from 'moment'
 import { useTranslation } from 'react-i18next'
+import SettingsLayout from './SettingsLayout'
 
 const LocalizationSettings = () => {
   const { t } = useTranslation('settings')
@@ -46,7 +45,12 @@ const LocalizationSettings = () => {
   ]
 
   return (
-    <Box>
+    <SettingsLayout title="Localization">
+      <div className='grid gap-4'>
+        <Typography level='body-md'>
+          {t('localization.description')}
+        </Typography>
+
         <Card variant='outlined' sx={{ p: 3, mb: 2 }}>
           <Box sx={{ mb: 3 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
@@ -180,7 +184,8 @@ const LocalizationSettings = () => {
             </FormControl>
           </Box>
         </Card>
-    </Box>
+      </div>
+    </SettingsLayout>
   )
 }
 

src/views/Settings/SettingsOverview.jsx

@@ -5,6 +5,7 @@ import {
   Circle,
   Code,
   FamilyRestroom,
+  Language,
   Notifications,
   Palette,
   Person,
@@ -109,6 +110,13 @@ const SettingsOverview = () => {
         'Choose your preferred theme and configure dark/light mode settings.',
       icon: <Palette />,
     },
+    {
+      id: 'localization',
+      title: 'Localization',
+      description:
+        'Customize language, date format, time format, and regional preferences.',
+      icon: <Language />,
+    },
     {
       id: 'advanced',
       title: 'Advanced Settings',