@hed-hog/contact 0.0.305 → 0.0.309

package/hedhog/frontend/app/accounts/_components/account-form-sheet.tsx.ejs

@@ -8,7 +8,7 @@ import {
   type Person,
 } from '@/app/(app)/(libraries)/contact/person/_components/person-types';
 import { CopyButton } from '@/components/copy-button';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -27,6 +27,7 @@ import {
 } from '@/components/ui/form';
 import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
 import {
   Select,
   SelectContent,
@@ -71,6 +72,7 @@ import {
   Plus,
   Star,
   Trash2,
+  Upload,
   Users,
   XCircle,
 } from 'lucide-react';
@@ -85,6 +87,7 @@ import {
   useState,
 } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
+import { toast } from 'sonner';
 import { z } from 'zod';
 import type {
   Account,
@@ -222,6 +225,13 @@ function getPersonInitials(name: string) {
     .join('');
 }
 
+function getPersonAvatarUrl(avatarId?: number | null) {
+  if (typeof avatarId === 'number' && avatarId > 0) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`;
+  }
+  return undefined;
+}
+
 function SectionHeader({
   title,
   description,
@@ -246,6 +256,9 @@ function SectionHeader({
 
 const ACCOUNT_FORM_DRAFT_STORAGE_KEY = 'contact-account-form-draft';
 
+type UploadedFilePayload = { id?: number; filename?: string };
+type OpenFilePayload = { url?: string };
+
 type AccountDraftPayload = {
   mode: 'create' | 'edit';
   savedAccountId: number | null;
@@ -255,6 +268,8 @@ type AccountDraftPayload = {
   documents: EditableAccountDocument[];
   localCollaborators: Person[];
   removedCollaboratorIds: number[];
+  avatarId: number | null;
+  avatarPreviewUrl: string;
 };
 
 export function AccountFormSheet({
@@ -296,6 +311,13 @@ export function AccountFormSheet({
   const contactValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
   const addressLine1Refs = useRef<Record<string, HTMLInputElement | null>>({});
   const documentValueRefs = useRef<Record<string, HTMLInputElement | null>>({});
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const persistedAvatarIdRef = useRef<number | null>(null);
+
+  const [avatarId, setAvatarId] = useState<number | null>(null);
+  const [avatarPreviewUrl, setAvatarPreviewUrl] = useState('');
+  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
+  const [avatarUploadProgress, setAvatarUploadProgress] = useState(0);
 
   const emptyCollaboratorPage = useMemo<PaginatedResult<Person>>(
     () => ({
@@ -516,7 +538,8 @@ export function AccountFormSheet({
         addresses.length > 0 ||
         documents.length > 0 ||
         localCollaborators.length > 0 ||
-        removedCollaboratorIds.length > 0
+        removedCollaboratorIds.length > 0 ||
+        avatarId != null
       ),
     [
       watchedFormValues,
@@ -525,6 +548,7 @@ export function AccountFormSheet({
       documents,
       localCollaborators,
       removedCollaboratorIds,
+      avatarId,
     ]
   );
 
@@ -548,9 +572,13 @@ export function AccountFormSheet({
       documents,
       localCollaborators,
       removedCollaboratorIds,
+      avatarId,
+      avatarPreviewUrl,
     }),
     [
       addresses,
+      avatarId,
+      avatarPreviewUrl,
       contacts,
       currentAccountId,
       documents,
@@ -700,6 +728,127 @@ export function AccountFormSheet({
     [getDocumentTypeCode]
   );
 
+  const resolveApiUrl = (url: string) =>
+    /^https?:\/\//i.test(url)
+      ? url
+      : `${String(process.env.NEXT_PUBLIC_API_BASE_URL ?? '')}${url}`;
+
+  const getAccountAvatarUrl = useCallback((fileId: number) => {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${fileId}`;
+  }, []);
+
+  const deleteFileById = useCallback(
+    async (fileId: number) => {
+      try {
+        await request({
+          method: 'DELETE',
+          url: '/file',
+          data: { ids: [fileId] },
+        });
+      } catch {
+        // silent cleanup failure
+      }
+    },
+    [request]
+  );
+
+  const cleanupUnsavedAvatar = useCallback(async () => {
+    if (avatarId !== null && avatarId !== persistedAvatarIdRef.current) {
+      await deleteFileById(avatarId);
+    }
+  }, [avatarId, deleteFileById]);
+
+  const handleAvatarUpload = useCallback(
+    async (file: File) => {
+      const MAX_SIZE = 5 * 1024 * 1024;
+      const ALLOWED = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
+
+      if (!ALLOWED.includes(file.type)) {
+        toast.error(personT('avatarInvalidType'));
+        return;
+      }
+
+      if (file.size > MAX_SIZE) {
+        toast.error(personT('avatarTooLarge'));
+        return;
+      }
+
+      const previousAvatarId = avatarId;
+
+      setIsUploadingAvatar(true);
+      setAvatarUploadProgress(0);
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const { data: uploaded } = await request<UploadedFilePayload>({
+          method: 'POST',
+          url: '/file',
+          data: formData,
+          headers: { 'Content-Type': 'multipart/form-data' },
+          onUploadProgress: (event: { loaded: number; total?: number }) => {
+            const total = event.total ?? 0;
+            if (total > 0) {
+              setAvatarUploadProgress(Math.round((event.loaded / total) * 100));
+            }
+          },
+        });
+
+        const newFileId = Number(uploaded?.id);
+        if (!newFileId) {
+          toast.error(personT('avatarUploadError'));
+          return;
+        }
+
+        const { data: opened } = await request<OpenFilePayload>({
+          method: 'PUT',
+          url: `/file/open/${newFileId}`,
+        });
+
+        const tempUrl = String(opened?.url || '').trim();
+
+        if (
+          previousAvatarId !== null &&
+          previousAvatarId !== persistedAvatarIdRef.current
+        ) {
+          await deleteFileById(previousAvatarId);
+        }
+
+        setAvatarId(newFileId);
+        setAvatarPreviewUrl(
+          tempUrl.length > 0
+            ? resolveApiUrl(tempUrl)
+            : getAccountAvatarUrl(newFileId)
+        );
+        setAvatarUploadProgress(100);
+        toast.success(personT('avatarUploadSuccess'));
+      } catch {
+        toast.error(personT('avatarUploadError'));
+        setAvatarUploadProgress(0);
+      } finally {
+        setIsUploadingAvatar(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    },
+    [avatarId, deleteFileById, getAccountAvatarUrl, personT, request]
+  );
+
+  const handleSelectAvatar = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleRemoveAvatar = useCallback(async () => {
+    if (avatarId !== null && avatarId !== persistedAvatarIdRef.current) {
+      await deleteFileById(avatarId);
+    }
+    setAvatarId(null);
+    setAvatarPreviewUrl('');
+    toast.success(personT('avatarRemoveSuccess'));
+  }, [avatarId, deleteFileById, personT]);
+
   const getPersonPrimaryContact = (
     person: Person,
     codes: string[]
@@ -852,12 +1001,21 @@ export function AccountFormSheet({
       setCollaboratorPickerKey(0);
       setCollaboratorSheetOpen(false);
       setCollaboratorToEdit(null);
+      const initAvatarId =
+        storedDraft?.payload.avatarId ?? account?.avatar_id ?? null;
+      setAvatarId(initAvatarId);
+      persistedAvatarIdRef.current = account?.avatar_id ?? null;
+      setAvatarPreviewUrl(
+        storedDraft?.payload.avatarPreviewUrl ??
+          (initAvatarId ? getAccountAvatarUrl(initAvatarId) : '')
+      );
     });
 
     return () => window.cancelAnimationFrame(frame);
   }, [
     account,
     form,
+    getAccountAvatarUrl,
     loadDraft,
     maskContactValueByType,
     maskDocumentValueByType,
@@ -1114,6 +1272,7 @@ export function AccountFormSheet({
         contacts: normalizedContacts,
         addresses: normalizedAddresses,
         documents: normalizedDocuments,
+        avatar_id: avatarId,
       },
       currentAccountId
     );
@@ -1122,10 +1281,12 @@ export function AccountFormSheet({
     if (!currentAccountId) {
       if (nextAccountId) {
         setSavedAccountId(nextAccountId);
+        persistedAvatarIdRef.current = avatarId;
       }
       return;
     }
 
+    persistedAvatarIdRef.current = avatarId;
     clearDraft();
     onOpenChange(false);
   };
@@ -1140,6 +1301,10 @@ export function AccountFormSheet({
       setLocalCollaborators([]);
       setRemovedCollaboratorIds([]);
       setCollaboratorPickerKey(0);
+      void cleanupUnsavedAvatar();
+      setAvatarId(null);
+      persistedAvatarIdRef.current = null;
+      setAvatarPreviewUrl('');
     }
 
     onOpenChange(nextOpen);
@@ -1233,6 +1398,79 @@ export function AccountFormSheet({
                         )}
                       />
                     </div>
+
+                    <div className="flex items-start gap-3">
+                      <Avatar className="h-16 w-16 rounded-md border">
+                        <AvatarImage
+                          src={avatarPreviewUrl || undefined}
+                          alt={watchedName || t('form.companyName')}
+                          className="rounded-md object-cover"
+                        />
+                        <AvatarFallback className="text-sm font-semibold uppercase">
+                          {companyPreviewName.slice(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <div className="min-w-0 flex-1 space-y-2">
+                        <input
+                          ref={fileInputRef}
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={(event) => {
+                            const file = event.target.files?.[0];
+                            if (!file) return;
+                            void handleAvatarUpload(file);
+                          }}
+                        />
+                        <div className="flex flex-wrap gap-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={handleSelectAvatar}
+                            disabled={isUploadingAvatar}
+                          >
+                            {isUploadingAvatar ? (
+                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            ) : (
+                              <Upload className="mr-2 h-4 w-4" />
+                            )}
+                            {avatarId
+                              ? personT('avatarReplace')
+                              : personT('avatarUpload')}
+                          </Button>
+                          {avatarId || isUploadingAvatar ? (
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              className="text-red-600 hover:text-red-700"
+                              onClick={() => void handleRemoveAvatar()}
+                              disabled={!avatarId || isUploadingAvatar}
+                            >
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              {personT('avatarRemove')}
+                            </Button>
+                          ) : null}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {personT('avatarGuidelines')}
+                        </p>
+                        {isUploadingAvatar ? (
+                          <div className="space-y-1">
+                            <Progress
+                              value={avatarUploadProgress}
+                              className="h-2"
+                            />
+                            <p className="text-xs text-muted-foreground">
+                              {personT('avatarUploadingProgress', {
+                                progress: avatarUploadProgress,
+                              })}
+                            </p>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
                   </section>
 
                   <section className="space-y-3">
@@ -2083,6 +2321,33 @@ export function AccountFormSheet({
                           loadOptions={loadCollaboratorOptions}
                           getOptionValue={(person) => person.id}
                           getOptionLabel={(person) => person.name}
+                          renderOption={({ option }) => (
+                            <div className="flex min-w-0 items-center gap-2">
+                              <Avatar className="h-7 w-7 shrink-0">
+                                <AvatarImage
+                                  src={getPersonAvatarUrl(option.avatar_id)}
+                                  alt={option.name}
+                                />
+                                <AvatarFallback className="text-xs font-semibold uppercase">
+                                  {getPersonInitials(option.name) || '?'}
+                                </AvatarFallback>
+                              </Avatar>
+                              <div className="min-w-0">
+                                <div className="truncate text-sm">
+                                  {option.name}
+                                </div>
+                                {option.job_title ? (
+                                  <div className="truncate text-xs text-muted-foreground">
+                                    {option.job_title} · #{option.id}
+                                  </div>
+                                ) : (
+                                  <div className="text-xs text-muted-foreground">
+                                    #{option.id}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          )}
                           getOptionDescription={(person) =>
                             [
                               person.job_title,

package/hedhog/frontend/app/accounts/_components/account-types.ts.ejs

@@ -80,6 +80,7 @@ export type Account = {
   state?: string | null;
   created_at: string;
   last_interaction_at?: string | null;
+  avatar_id?: number | null;
   contact?: AccountContact[];
   address?: AccountAddress[];
   document?: AccountDocument[];
@@ -113,4 +114,5 @@ export type AccountFormValues = {
   contacts?: AccountContact[];
   addresses?: AccountAddress[];
   documents?: AccountDocument[];
+  avatar_id?: number | null;
 };

package/hedhog/frontend/app/accounts/page.tsx.ejs

@@ -17,7 +17,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -434,6 +434,10 @@ export default function AccountsPage() {
                 contact: data.contacts ?? previous.contact ?? [],
                 address: data.addresses ?? previous.address ?? [],
                 document: data.documents ?? previous.document ?? [],
+                avatar_id:
+                  data.avatar_id !== undefined
+                    ? data.avatar_id
+                    : (previous.avatar_id ?? null),
               }
             : previous
         );
@@ -475,6 +479,7 @@ export default function AccountsPage() {
           contact: data.contacts ?? [],
           address: data.addresses ?? [],
           document: data.documents ?? [],
+          avatar_id: data.avatar_id ?? null,
         });
       }
 
@@ -555,6 +560,13 @@ export default function AccountsPage() {
           return (
             <div className="flex items-center gap-3">
               <Avatar className="h-9 w-9 rounded-lg">
+                {account.avatar_id ? (
+                  <AvatarImage
+                    src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${account.avatar_id}`}
+                    alt={account.name}
+                    className="rounded-lg object-cover"
+                  />
+                ) : null}
                 <AvatarFallback className="rounded-lg bg-slate-100 text-xs font-semibold uppercase text-slate-700">
                   {getAccountInitials(account.name)}
                 </AvatarFallback>
@@ -947,6 +959,13 @@ export default function AccountsPage() {
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex min-w-0 items-start gap-2.5">
                         <Avatar className="h-10 w-10 shrink-0 rounded-lg border border-slate-500/20">
+                          {account.avatar_id ? (
+                            <AvatarImage
+                              src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${account.avatar_id}`}
+                              alt={account.name}
+                              className="rounded-lg object-cover"
+                            />
+                          ) : null}
                           <AvatarFallback className="rounded-lg bg-slate-500/8 text-sm font-semibold uppercase text-slate-700 dark:text-slate-200">
                             {getAccountInitials(account.name)}
                           </AvatarFallback>

package/hedhog/frontend/app/person/_components/person-field-with-create.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { EntityPicker } from '@/components/ui/entity-picker';
 import {
@@ -36,8 +37,25 @@ import { z } from 'zod';
 type PersonOption = {
   id: number | string;
   name: string;
+  avatar_id?: number | null;
 };
 
+function getPersonInitialsLocal(name: string) {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() || '')
+    .join('');
+}
+
+function getPersonAvatarUrlLocal(avatarId?: number | null) {
+  if (typeof avatarId === 'number' && avatarId > 0) {
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`;
+  }
+  return undefined;
+}
+
 type CreatePersonValues = {
   name: string;
   type: 'individual' | 'company';
@@ -666,6 +684,25 @@ export function PersonFieldWithCreate<TFieldValues extends FieldValues>({
             }}
             getOptionValue={(person) => person.id}
             getOptionLabel={(person) => person.name}
+            renderOption={({ option }) => (
+              <div className="flex min-w-0 items-center gap-2">
+                <Avatar className="h-7 w-7 shrink-0">
+                  <AvatarImage
+                    src={getPersonAvatarUrlLocal(option.avatar_id)}
+                    alt={option.name}
+                  />
+                  <AvatarFallback className="text-xs font-semibold uppercase">
+                    {getPersonInitialsLocal(option.name) || '?'}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0">
+                  <div className="truncate text-sm">{option.name}</div>
+                  <div className="text-xs text-muted-foreground">
+                    #{option.id}
+                  </div>
+                </div>
+              </div>
+            )}
             onChange={(value, option) => {
               void value;
               setSelectedPersonLabel(option?.name ?? '');

package/hedhog/frontend/app/person/_components/person-form-sheet.tsx.ejs

@@ -1985,7 +1985,7 @@ export function PersonFormSheet({
       <Sheet open={open} onOpenChange={handleSheetOpenChange}>
         <SheetContent
           side="right"
-          className="flex w-full flex-col sm:max-w-lg overflow-y-auto"
+          className="flex w-full flex-col sm:max-w-xl md:max-w-2xl overflow-y-auto"
         >
           <SheetHeader className="shrink-0 border-b p-4">
             <div className="flex items-center gap-3">

package/hedhog/frontend/app/person/_components/person-types.ts.ejs

@@ -91,6 +91,7 @@ export type PersonInteractionType =
 export type UserOption = {
   id: number;
   name: string;
+  photo_id?: number | null;
 };
 
 export type PersonStats = {

package/hedhog/frontend/app/pipeline/_components/lead-detail-sheet.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -309,13 +310,22 @@ export function LeadDetailSheet({
       <SheetContent className="flex h-full w-full max-w-[95vw] flex-col overflow-hidden p-0 sm:max-w-4xl xl:max-w-5xl">
         <SheetHeader className="shrink-0 border-b px-5 py-4 text-left">
           <div className="flex items-start gap-3 pr-6">
-            <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
-              {lead.type === 'company' ? (
-                <Building2 className="size-5" />
-              ) : (
-                <User className="size-5" />
-              )}
-            </div>
+            <Avatar className="size-11 shrink-0 rounded-2xl">
+              {lead.avatar_id ? (
+                <AvatarImage
+                  src={`${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${lead.avatar_id}`}
+                  alt={lead.name}
+                  className="object-cover"
+                />
+              ) : null}
+              <AvatarFallback className="rounded-2xl bg-muted text-muted-foreground">
+                {lead.type === 'company' ? (
+                  <Building2 className="size-5" />
+                ) : (
+                  <User className="size-5" />
+                )}
+              </AvatarFallback>
+            </Avatar>
 
             <div className="min-w-0 flex-1 space-y-2">
               <div className="space-y-1">

package/hedhog/frontend/app/pipeline/page.tsx.ejs

@@ -6,6 +6,7 @@ import {
   SearchBar,
   type SearchBarControl,
 } from '@/components/entity-list';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import {
   Card,
@@ -27,6 +28,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
+import { getPhotoUrl } from '@/lib/get-photo-url';
 import { cn } from '@/lib/utils';
 import {
   closestCenter,
@@ -231,6 +233,7 @@ function mapPersonToCrmLead(person: Person): CrmLead {
         ? person.trade_name || null
         : person.employer_company?.name || null,
     tags: Array.isArray(person.tags) ? person.tags.filter(Boolean) : [],
+    avatar_id: person.avatar_id ?? null,
   };
 }
 
@@ -808,7 +811,23 @@ export default function CrmPipelinePage() {
                                             <Tooltip>
                                               <TooltipTrigger asChild>
                                                 <div className="flex min-w-0 cursor-default items-center gap-1 rounded-md bg-muted/60 px-1.5 py-0.5">
-                                                  <CircleUser className="size-3 shrink-0 text-muted-foreground" />
+                                                  <Avatar className="size-3 shrink-0">
+                                                    {lead.owner_user
+                                                      ?.photo_id && (
+                                                      <AvatarImage
+                                                        src={getPhotoUrl(
+                                                          lead.owner_user
+                                                            .photo_id
+                                                        )}
+                                                        alt={
+                                                          lead.owner_user.name
+                                                        }
+                                                      />
+                                                    )}
+                                                    <AvatarFallback className="rounded-full bg-transparent p-0">
+                                                      <CircleUser className="size-3 text-muted-foreground" />
+                                                    </AvatarFallback>
+                                                  </Avatar>
                                                   <span className="truncate text-[11px] text-muted-foreground">
                                                     {lead.owner_user?.name ||
                                                       dashboardT(
@@ -1031,7 +1050,7 @@ export default function CrmPipelinePage() {
 
           <DragOverlay>
             {activeDragLead ? (
-              <div className="w-[210px] rounded-xl border border-primary/30 bg-card p-3 shadow-lg">
+              <div className="w-52.5 rounded-xl border border-primary/30 bg-card p-3 shadow-lg">
                 <p className="line-clamp-2 text-xs font-semibold leading-4">
                   {activeDragLead.name}
                 </p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/contact",
-  "version": "0.0.305",
+  "version": "0.0.309",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,11 +9,11 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/core": "0.0.305",
-    "@hed-hog/address": "0.0.305",
+    "@hed-hog/core": "0.0.309",
     "@hed-hog/api-mail": "0.0.9",
+    "@hed-hog/address": "0.0.309",
     "@hed-hog/api": "0.0.6",
+    "@hed-hog/api-prisma": "0.0.6",
     "@hed-hog/api-pagination": "0.0.7",
     "@hed-hog/api-locale": "0.0.14"
   },