Enhance certificate designer and seafarer registration features with image support and dynamic department/rank options

apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts

@@ -81,23 +81,46 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
   const selectedBlock =
     placements.find((block) => block.id === selectedBlockId) ?? null;
 
-  /** Drops a new block near the top-left, where it is immediately visible. */
-  const addBlock = useCallback((variable: string | null, text?: string) => {
-    const block: TemplateFieldPlacement = {
-      id: blockId(),
-      variable,
-      text,
-      xPct: 10,
-      yPct: 10,
-      widthPct: 30,
-      fontSize: 14,
-      fontWeight: 'normal',
-      align: 'left',
-      color: '#111111',
-    };
-    setPlacements((prev) => [...prev, block]);
-    setSelectedBlockId(block.id);
-  }, []);
+  /**
+   * Drops a new block near the top-left, where it is immediately visible.
+   *
+   * An image block gets a square-ish default footprint instead of the text
+   * defaults (fontSize/color/align mean nothing on an `<img>`) — a seal or
+   * signature dropped at 30% width and no explicit height would otherwise
+   * stretch to whatever the image's own aspect ratio makes of that width,
+   * which reads as broken until the author manually resizes it.
+   */
+  const addBlock = useCallback(
+    (variable: string | null, text?: string, kind: 'text' | 'image' = 'text') => {
+      const block: TemplateFieldPlacement =
+        kind === 'image'
+          ? {
+              id: blockId(),
+              variable,
+              type: 'image',
+              xPct: 10,
+              yPct: 10,
+              widthPct: 15,
+            }
+          : {
+              id: blockId(),
+              variable,
+              text,
+              type: 'text',
+              xPct: 10,
+              yPct: 10,
+              widthPct: 30,
+              fontSize: 14,
+              fontWeight: 'normal',
+              fontStyle: 'normal',
+              align: 'left',
+              color: '#111111',
+            };
+      setPlacements((prev) => [...prev, block]);
+      setSelectedBlockId(block.id);
+    },
+    [],
+  );
 
   const updateBlock = useCallback((next: TemplateFieldPlacement) => {
     setPlacements((prev) =>