feat: add i18n support and localized labels to certification and profession features commit

This commit is contained in:
mengstabketemaw
2026-06-30 15:57:25 +03:00
parent ef69448bbd
commit 9fd59f52ed
19 changed files with 593 additions and 354 deletions

View File

@@ -129,7 +129,8 @@ function ProfessionForm({ editingProf, deptOptions, isSubmitting, onSubmit, onCa
}
function ProfessionTab() {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const locale = i18n.language as 'en' | 'am';
const { data: deptRes } = useGetOrganizationsQuery();
const { data: profRes, isLoading, isError } = useGetProfessionsQuery();
const [createProfession, { isLoading: isCreating }] = useCreateProfessionMutation();
@@ -146,7 +147,7 @@ function ProfessionTab() {
const deptOptions = departments.filter((d) => d?.status?.toLowerCase() === 'active').map((d) => ({
value: d.id,
label: d.name?.en ?? d.name ?? '',
label: d.name?.[locale] ?? d.name ?? '',
}));
const resetProfForm = useCallback(() => {
@@ -205,8 +206,8 @@ function ProfessionTab() {
const getDeptName = useCallback((deptId: string) => {
const dept = departments.find((d) => d.id === deptId);
return dept ? dept.name.en : '-';
}, [departments]);
return dept ? (dept.name?.[locale] ?? dept.name?.en ?? '-') : '-';
}, [departments, locale]);
if (isLoading) {
return <Center py="xl"><Loader /></Center>;
@@ -245,8 +246,7 @@ function ProfessionTab() {
<Table striped highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>{t('configuration.nameEn')}</Table.Th>
<Table.Th>{t('configuration.nameAm')}</Table.Th>
<Table.Th>{t('configuration.name')}</Table.Th>
<Table.Th>{t('configuration.description')}</Table.Th>
<Table.Th>{t('configuration.department')}</Table.Th>
<Table.Th />
@@ -255,10 +255,9 @@ function ProfessionTab() {
<Table.Tbody>
{professions.filter((p) => p.isActive).map((prof) => (
<Table.Tr key={prof.id}>
<Table.Td>{prof.name.en}</Table.Td>
<Table.Td>{prof.name.am}</Table.Td>
<Table.Td>{prof.name[locale]}</Table.Td>
<Table.Td>
<Text size="sm" lineClamp={2} maw={200}>{prof.description.en ?? prof.description.am}</Text>
<Text size="sm" lineClamp={2} maw={200}>{prof.description[locale]}</Text>
</Table.Td>
<Table.Td>{getDeptName(prof.departmentId)}</Table.Td>
<Table.Td>
@@ -275,7 +274,7 @@ function ProfessionTab() {
))}
{professions.length === 0 && (
<Table.Tr>
<Table.Td colSpan={5}>
<Table.Td colSpan={4}>
<Text c="dimmed" ta="center" py="xl">
{t('configuration.noProfessions')}
</Text>
@@ -287,7 +286,7 @@ function ProfessionTab() {
<Modal opened={deleteOpened} onClose={closeDelete} title={t('configuration.confirmDelete')} size="sm">
<Text mb="md">
{t('configuration.deleteConfirmText', { name: deleteTarget?.name?.en ?? '' })}
{t('configuration.deleteConfirmText', { name: deleteTarget?.name?.[locale] ?? '' })}
</Text>
<Group justify="flex-end">
<Button variant="default" onClick={closeDelete} size="sm">{t('configuration.cancel')}</Button>
@@ -314,7 +313,7 @@ export function ConfigurationPage() {
{t('location.title')}
</Tabs.Tab>
<Tabs.Tab value="certifications" leftSection={<IconCertificate size={16} />}>
Certifications
{t('certification.title')}
</Tabs.Tab>
</Tabs.List>