emaui/apps/portal/src/app/features/profile/pages/ProfilePage.tsx

import {
  Avatar,
  Button,
  Group,
  Paper,
  Select,
  SimpleGrid,
  Stack,
  TextInput,
  Title,
} from '@mantine/core';
import { IconDeviceFloppy } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { notify } from '@ema-platform/ui';
import { PageHeader } from '../../../components/PageHeader';
import { SUPPORTED_LANGUAGES, type AppLanguage } from '../../../i18n/config';

export function ProfilePage() {
  const { t, i18n } = useTranslation();

  const handleSave = () => notify.success(t('common.saved'));

  return (
    <Stack gap="lg" maw={820}>
      <PageHeader title={t('profile.title')} subtitle={t('profile.subtitle')} />

      <Paper p="lg" shadow="sm" radius="md" withBorder>
        <Group mb="lg">
          <Avatar color="emaPrimary" radius="xl" size={64}>
            BN
          </Avatar>
          <div>
            <Title order={4}>Blue Nile Shipping PLC</Title>
            <TextInput
              variant="unstyled"
              defaultValue="muluhabit@gmail.com"
              readOnly
              size="sm"
            />
          </div>
        </Group>

        <Stack gap="lg">
          <div>
            <Title order={5} mb="sm">
              {t('profile.personal')}
            </Title>
            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
              <TextInput
                label={t('profile.fields.fullName')}
                defaultValue="Dawit Bekele"
              />
              <TextInput
                label={t('profile.fields.organization')}
                defaultValue="Blue Nile Shipping PLC"
              />
            </SimpleGrid>
          </div>

          <div>
            <Title order={5} mb="sm">
              {t('profile.contact')}
            </Title>
            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
              <TextInput
                label={t('profile.fields.email')}
                defaultValue="muluhabit@gmail.com"
              />
              <TextInput
                label={t('profile.fields.phone')}
                defaultValue="+251 91 234 5678"
              />
              <TextInput
                label={t('profile.fields.address')}
                defaultValue="Addis Ababa, Ethiopia"
              />
            </SimpleGrid>
          </div>

          <div>
            <Title order={5} mb="sm">
              {t('profile.preferences')}
            </Title>
            <Select
              maw={320}
              label={t('profile.fields.language')}
              data={SUPPORTED_LANGUAGES.map((lng) => ({
                value: lng,
                label: t(`language.${lng}`),
              }))}
              value={i18n.language}
              onChange={(v) => v && i18n.changeLanguage(v as AppLanguage)}
              allowDeselect={false}
            />
          </div>

          <Group>
            <Button
              leftSection={<IconDeviceFloppy size={18} />}
              onClick={handleSave}
            >
              {t('common.save')}
            </Button>
          </Group>
        </Stack>
      </Paper>
    </Stack>
  );
}