From 02681fe9bee94897bcedc482df6f6071afc91a3a Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Sat, 8 Aug 2026 09:09:08 +0000
Subject: [PATCH] Add maxDepth prop to LocationPicker and update
 AddressFormContent to limit cascading levels

---
 .../features/location/components/LocationPicker.tsx    | 10 ++++++----
 .../features/profile/components/AddressFormContent.tsx |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/app/features/location/components/LocationPicker.tsx b/apps/portal/src/app/features/location/components/LocationPicker.tsx
index d0e629252..befac6ce5 100644
--- a/apps/portal/src/app/features/location/components/LocationPicker.tsx
+++ b/apps/portal/src/app/features/location/components/LocationPicker.tsx
@@ -10,9 +10,11 @@ interface LocationPickerProps {
   onChange?: (locationId: string | null) => void;
   onChainChange?: (chain: Location[]) => void;
   required?: boolean;
+  /** Caps how many cascading levels render (e.g. 3 = City / Sub-city / Woreda only). */
+  maxDepth?: number;
 }
 
-export function LocationPicker({ value, onChange, onChainChange, required }: LocationPickerProps) {
+export function LocationPicker({ value, onChange, onChainChange, required, maxDepth }: LocationPickerProps) {
   const { t } = useTranslation();
   const { data: typesRes, isLoading: typesLoading, isError: typesError, refetch: refetchTypes } = useGetLocationTypesQuery();
   const { data: locsRes, isLoading: locsLoading, isError: locsError, refetch: refetchLocs } = useGetLocationsQuery({ take: 10000 });
@@ -187,9 +189,9 @@ export function LocationPicker({ value, onChange, onChainChange, required }: Loc
   // name — an unnamed/unmapped type (e.g. a stray Kebele row) would otherwise
   // render as a dead-end "Sub-location" picker whose selection is silently
   // dropped (AddressFormContent only maps Region/City/SubCity/Woreda).
-  const totalRenderedLevels = Math.max(
-    1,
-    selectedChain.length + (currentLevelChildren.length > 0 && levelLabel ? 1 : 0),
+  const totalRenderedLevels = Math.min(
+    maxDepth ?? Infinity,
+    Math.max(1, selectedChain.length + (currentLevelChildren.length > 0 && levelLabel ? 1 : 0)),
   );
 
   const levels = Array.from({ length: totalRenderedLevels }, (_, i) => i);
diff --git a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
index b05c6986c..127fb066b 100644
--- a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
@@ -164,7 +164,8 @@ export function AddressFormContent({
       <Text fw={600} fz="sm" tt="uppercase" c="gray.6" mt="lg" mb="sm">
         Address
       </Text>
-      <LocationPicker value={leafId} onChainChange={handleChainChange} />
+      {/* City / Sub-city / Woreda only — no Kebele level, kebeleId mirrors woredaId. */}
+      <LocationPicker value={leafId} onChainChange={handleChainChange} maxDepth={3} />
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="md">
         <TextInput
           label="Street Address"