added location type when selecting root location

apps/backoffice/src/app/features/location/components/LocationForm.tsx

@@ -8,6 +8,7 @@ import {
   Title,
   Text,
   Badge,
+  Select,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,7 @@ interface LocationFormValues {
   code: string;
   namesEn: string;
   namesAm: string;
+  locationTypeId: string;
 }
 
 interface LocationFormProps {
@@ -46,10 +48,10 @@ export function LocationForm({
 
   const isEditing = !!editingLocation;
 
-  const { type, typesAvailable } = useMemo(() => {
+  const { type, allAtLevel, typesAvailable } = useMemo(() => {
     if (isEditing) {
       const lt = locationTypes.find((t) => t.id === editingLocation.locationTypeId);
-      return { type: lt ?? null, typesAvailable: false };
+      return { type: lt ?? null, allAtLevel: [lt].filter(Boolean) as LocationType[], typesAvailable: false };
     }
 
     if (parentLocation) {
@@ -58,14 +60,14 @@ export function LocationForm({
       const nextLevel = locationTypes
         .filter((lt) => lt.level === parentLevel + 1)
         .sort((a, b) => a.level - b.level);
-      return { type: nextLevel[0] ?? null, typesAvailable: nextLevel.length > 1 };
+      return { type: nextLevel[0] ?? null, allAtLevel: nextLevel, typesAvailable: nextLevel.length > 1 };
     }
 
     const minLevel = Math.min(...locationTypes.map((lt) => lt.level));
     const roots = locationTypes
       .filter((lt) => lt.level === minLevel)
       .sort((a, b) => a.level - b.level);
-    return { type: roots[0] ?? null, typesAvailable: roots.length > 1 };
+    return { type: roots[0] ?? null, allAtLevel: roots, typesAvailable: roots.length > 1 };
   }, [locationTypes, parentLocation, editingLocation, isEditing]);
 
   const form = useForm<LocationFormValues>({
@@ -73,11 +75,16 @@ export function LocationForm({
       code: '',
       namesEn: '',
       namesAm: '',
+      locationTypeId: typesAvailable ? '' : (type?.id ?? ''),
     },
     validate: {
       code: (v) => (!v ? t('location.validation.codeRequired') : null),
       namesEn: (v) => (!v ? t('location.validation.nameEnRequired') : null),
       namesAm: (v) => (!v ? t('location.validation.nameAmRequired') : null),
+      locationTypeId: (v) => {
+        if (typesAvailable && !v) return t('location.validation.typeRequired');
+        return null;
+      },
     },
   });
 
@@ -87,19 +94,21 @@ export function LocationForm({
         code: editingLocation.code,
         namesEn: editingLocation.names.en,
         namesAm: editingLocation.names.am,
+        locationTypeId: editingLocation.locationTypeId,
       });
     }
   }, [editingLocation]);
 
   const handleSubmit = form.onSubmit((values) => {
-    if (!type) {
+    const resolvedTypeId = typesAvailable ? values.locationTypeId : type?.id;
+    if (!resolvedTypeId) {
       notify.error(t('location.noTypesAvailable'));
       return;
     }
     onSubmit({
       code: values.code,
       names: { en: values.namesEn, am: values.namesAm },
-      locationTypeId: type.id,
+      locationTypeId: resolvedTypeId,
       parentId: editingLocation ? editingLocation.parentId : parentLocation?.id ?? null,
     });
   });
@@ -124,24 +133,34 @@ export function LocationForm({
       )}
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
-          <div>
+          {typesAvailable ? (
-            <Text size="xs" c="dimmed" fw={500} mb={4}>
+            <Select
-              {t('location.type')}
+              label={t('location.type')}
-            </Text>
+              placeholder={t('location.selectType')}
-            {type ? (
+              data={allAtLevel.map((lt) => ({
-              <Badge size="lg" variant="light" color="blue">
+                value: lt.id,
-                {type.names.en}
+                label: lt.names.en,
-              </Badge>
+              }))}
-            ) : (
+              {...form.getInputProps('locationTypeId')}
-              <Text size="sm" c="red">
+              size="sm"
-                {t('location.noTypesAvailable')}
+              required
+              nothingFoundMessage={t('location.noTypesAvailable')}
+            />
+          ) : (
+            <div>
+              <Text size="xs" c="dimmed" fw={500} mb={4}>
+                {t('location.type')}
               </Text>
-            )}
+              {type ? (
-          </div>
+                <Badge size="lg" variant="light" color="blue">
-          {typesAvailable && (
+                  {type.names.en}
-            <Text size="xs" c="dimmed">
+                </Badge>
-              {t('location.multipleTypesHint')}
+              ) : (
-            </Text>
+                <Text size="sm" c="red">
+                  {t('location.noTypesAvailable')}
+                </Text>
+              )}
+            </div>
           )}
           <TextInput
             label={t('location.code')}