Hide pcode label on area cards instead of falling back to the boundary id

City corporation zones have no pcode, so the wizard fell back to the
36-character boundary UUID, which overflowed the narrow card. Make
DraggableAreaCard's pcode prop optional and only render it when present.

Author: mberg

truecover-app/src/components/DraggableAreaCard.tsx

@@ -8,7 +8,7 @@ import { CSS } from '@dnd-kit/utilities';
 interface DraggableAreaCardProps {
   id: string;
   name: string;
-  pcode: string;
+  pcode?: string;
   population?: number;
 }
 
@@ -40,7 +40,7 @@ export const DraggableAreaCard: React.FC<DraggableAreaCardProps> = ({
       `}
     >
       <div className="text-sm font-medium text-zinc-100">{name}</div>
-      <div className="text-xs text-zinc-400">{pcode}</div>
+      {pcode && <div className="text-xs text-zinc-400">{pcode}</div>}
       {population !== undefined && population > 0 && (
         <div className="text-xs text-cyan-400 mt-1">
           Pop: {population.toLocaleString()}

truecover-app/src/components/StratifiedClusterSamplingWizard.tsx

@@ -28,7 +28,7 @@ interface WorkflowProgress {
 
 interface AdminBoundary {
   id: string;
-  pcode: string;
+  pcode: string | null;
   name: string;
   level: number;
   population: number;
@@ -471,7 +471,7 @@ export const StratifiedClusterSamplingWizard: React.FC<
                         key={id}
                         id={id}
                         name={area.name}
-                        pcode={area.pcode || area.id}
+                        pcode={area.pcode || undefined}
                         population={area.population}
                       />
                     ) : null;
@@ -492,7 +492,7 @@ export const StratifiedClusterSamplingWizard: React.FC<
                         key={id}
                         id={id}
                         name={area.name}
-                        pcode={area.pcode || area.id}
+                        pcode={area.pcode || undefined}
                         population={area.population}
                       />
                     ) : null;
@@ -513,7 +513,7 @@ export const StratifiedClusterSamplingWizard: React.FC<
                         key={id}
                         id={id}
                         name={area.name}
-                        pcode={area.pcode || area.id}
+                        pcode={area.pcode || undefined}
                         population={area.population}
                       />
                     ) : null;
@@ -534,7 +534,7 @@ export const StratifiedClusterSamplingWizard: React.FC<
                         key={id}
                         id={id}
                         name={area.name}
-                        pcode={area.pcode || area.id}
+                        pcode={area.pcode || undefined}
                         population={area.population}
                       />
                     ) : null;
@@ -549,7 +549,7 @@ export const StratifiedClusterSamplingWizard: React.FC<
                     return area ? (
                       <div className="p-2 bg-zinc-800 border-2 border-cyan-500 rounded shadow-xl cursor-grabbing">
                         <div className="text-sm font-medium text-zinc-100">{area.name}</div>
-                        <div className="text-xs text-zinc-400">{area.pcode || area.id}</div>
+                        {area.pcode && <div className="text-xs text-zinc-400">{area.pcode}</div>}
                         {area.population !== undefined && area.population > 0 && (
                           <div className="text-xs text-cyan-400 mt-1">
                             Pop: {area.population.toLocaleString()}