Fix phone validation and company delete error messaging

Issue #3: Add phone number validation (regex: +?digits/spaces/dashes,
7-20 chars) to both contact and company forms with inline error display.
Validation runs client-side and server-side via Zod schema.

Issue #4: Check for linked contacts before deleting a company. Returns
a 409 with a descriptive error message shown as a toast instead of
silently failing.

Closes McGill-NLP/webarena-pro#3
Closes McGill-NLP/webarena-pro#4

Co-Authored-By: Claude <noreply@anthropic.com>

Dockerfile

@@ -40,6 +40,8 @@ RUN npm run build
 # ============================================
 FROM node:20-slim AS runner
 
+LABEL org.opencontainers.image.source=https://github.com/McGill-NLP/webarena-pro
+
 WORKDIR /app
 
 ENV NODE_ENV=production

src/app/(app)/companies/page.tsx

@@ -36,6 +36,7 @@ export default function CompaniesPage() {
   const [editing, setEditing] = useState<Company | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<Company | null>(null);
   const [loading, setLoading] = useState(false);
+  const [formError, setFormError] = useState("");
 
   const load = useCallback(async () => {
     const res = await fetch(`/api/companies?search=${encodeURIComponent(search)}&limit=100`);
@@ -50,11 +51,20 @@ export default function CompaniesPage() {
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
+    setFormError("");
     const form = new FormData(e.currentTarget);
+    const phone = (form.get("phone") as string) || null;
+
+    if (phone && !/^\+?[\d\s\-().]{7,20}$/.test(phone)) {
+      setFormError("Invalid phone number");
+      setLoading(false);
+      return;
+    }
+
     const data = {
       name: form.get("name") as string,
       domain: (form.get("domain") as string) || null,
-      phone: (form.get("phone") as string) || null,
+      phone,
       address: (form.get("address") as string) || null,
       notes: (form.get("notes") as string) || null,
     };
@@ -73,6 +83,9 @@ export default function CompaniesPage() {
       setShowForm(false);
       setEditing(null);
       load();
+    } else {
+      const err = await res.json().catch(() => null);
+      toast.error(err?.error?.fieldErrors?.phone?.[0] || "Failed to save company");
     }
   }
 
@@ -82,6 +95,9 @@ export default function CompaniesPage() {
     if (res.ok) {
       toast.success("Company deleted");
       load();
+    } else {
+      const err = await res.json().catch(() => null);
+      toast.error(err?.error || "Failed to delete company");
     }
     setDeleteTarget(null);
   }
@@ -119,7 +135,7 @@ export default function CompaniesPage() {
     <div>
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Companies</h1>
-        <Button onClick={() => { setEditing(null); setShowForm(true); }}>
+        <Button onClick={() => { setEditing(null); setFormError(""); setShowForm(true); }}>
           <Plus className="h-4 w-4 mr-2" />
           Add Company
         </Button>
@@ -157,7 +173,8 @@ export default function CompaniesPage() {
             </div>
             <div className="space-y-2">
               <Label htmlFor="phone">Phone</Label>
-              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} />
+              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} placeholder="+1-555-0100" />
+              {formError && <p className="text-sm text-destructive">{formError}</p>}
             </div>
             <div className="space-y-2">
               <Label htmlFor="address">Address</Label>

src/app/(app)/contacts/page.tsx

@@ -45,6 +45,7 @@ export default function ContactsPage() {
   const [editing, setEditing] = useState<Contact | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<Contact | null>(null);
   const [loading, setLoading] = useState(false);
+  const [formError, setFormError] = useState("");
 
   const load = useCallback(async () => {
     const res = await fetch(`/api/contacts?search=${encodeURIComponent(search)}&limit=100`);
@@ -63,13 +64,22 @@ export default function ContactsPage() {
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setLoading(true);
+    setFormError("");
     const form = new FormData(e.currentTarget);
     const companyIdVal = form.get("companyId") as string;
+    const phone = (form.get("phone") as string) || null;
+
+    if (phone && !/^\+?[\d\s\-().]{7,20}$/.test(phone)) {
+      setFormError("Invalid phone number");
+      setLoading(false);
+      return;
+    }
+
     const data = {
       firstName: form.get("firstName") as string,
       lastName: form.get("lastName") as string,
       email: (form.get("email") as string) || null,
-      phone: (form.get("phone") as string) || null,
+      phone,
       jobTitle: (form.get("jobTitle") as string) || null,
       companyId: companyIdVal && companyIdVal !== "none" ? parseInt(companyIdVal) : null,
     };
@@ -88,6 +98,9 @@ export default function ContactsPage() {
       setShowForm(false);
       setEditing(null);
       load();
+    } else {
+      const err = await res.json().catch(() => null);
+      toast.error(err?.error?.fieldErrors?.phone?.[0] || "Failed to save contact");
     }
   }
 
@@ -138,7 +151,7 @@ export default function ContactsPage() {
     <div>
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-2xl font-bold">Contacts</h1>
-        <Button onClick={() => { setEditing(null); setShowForm(true); }}>
+        <Button onClick={() => { setEditing(null); setFormError(""); setShowForm(true); }}>
           <Plus className="h-4 w-4 mr-2" />
           Add Contact
         </Button>
@@ -182,7 +195,8 @@ export default function ContactsPage() {
             </div>
             <div className="space-y-2">
               <Label htmlFor="phone">Phone</Label>
-              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} />
+              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} placeholder="+1-555-0100" />
+              {formError && <p className="text-sm text-destructive">{formError}</p>}
             </div>
             <div className="space-y-2">
               <Label htmlFor="jobTitle">Job Title</Label>

src/app/api/companies/[id]/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { db } from "@/lib/db";
-import { companies } from "@/lib/db/schema";
+import { companies, contacts } from "@/lib/db/schema";
 import { companySchema } from "@/lib/validators";
 import { auth } from "@/lib/auth";
 import { eq, and } from "drizzle-orm";
@@ -45,9 +45,24 @@ export async function DELETE(req: NextRequest, { params }: { params: Promise<{ i
   if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
 
   const { id } = await params;
+  const companyId = parseInt(id);
+
+  const linkedContacts = db
+    .select({ id: contacts.id })
+    .from(contacts)
+    .where(eq(contacts.companyId, companyId))
+    .all();
+
+  if (linkedContacts.length > 0) {
+    return NextResponse.json(
+      { error: `Cannot delete this company because ${linkedContacts.length} contact${linkedContacts.length > 1 ? "s are" : " is"} still linked to it. Remove or reassign them first.` },
+      { status: 409 }
+    );
+  }
+
   const deleted = db
     .delete(companies)
-    .where(and(eq(companies.id, parseInt(id)), eq(companies.userId, parseInt(session.user.id))))
+    .where(and(eq(companies.id, companyId), eq(companies.userId, parseInt(session.user.id))))
     .returning()
     .all();
 

src/lib/validators.ts

@@ -1,9 +1,19 @@
 import { z } from "zod";
 
+const phoneRegex = /^\+?[\d\s\-().]{7,20}$/;
+
+const phoneField = z
+  .string()
+  .refine((val) => !val || phoneRegex.test(val), {
+    message: "Invalid phone number",
+  })
+  .optional()
+  .nullable();
+
 export const companySchema = z.object({
   name: z.string().min(1, "Name is required"),
   domain: z.string().optional().nullable(),
-  phone: z.string().optional().nullable(),
+  phone: phoneField,
   address: z.string().optional().nullable(),
   notes: z.string().optional().nullable(),
 });
@@ -12,7 +22,7 @@ export const contactSchema = z.object({
   firstName: z.string().min(1, "First name is required"),
   lastName: z.string().min(1, "Last name is required"),
   email: z.string().email().optional().nullable().or(z.literal("")),
-  phone: z.string().optional().nullable(),
+  phone: phoneField,
   jobTitle: z.string().optional().nullable(),
   companyId: z.number().optional().nullable(),
 });