feat: enhance lead editing with validation for required fields and owner ID, and update form data handling

Author: ashwin31

src/routes/(app)/app/leads/[lead_id]/edit/+page.server.js

@@ -1,5 +1,5 @@
 import { error, redirect } from '@sveltejs/kit';
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient, LeadStatus, LeadSource } from '@prisma/client';
 
 const prisma = new PrismaClient();
 
@@ -20,7 +20,10 @@ export async function load({ params, locals }) {
     }
 
     const users = await prisma.userOrganization.findMany({
-      where: {  organizationId: org.id }
+      where: { organizationId: org.id },
+      include: {
+        user: true
+      }
     });
 
     return {
@@ -37,6 +40,49 @@ export const actions = {
     const org = locals.org;
 
     const leadEmail = formData.get('email');
+    const ownerId = formData.get('ownerId');
+    const firstName = formData.get('firstName');
+    const lastName = formData.get('lastName');
+
+    // Validate required fields
+    if (!firstName || typeof firstName !== 'string' || firstName.trim() === '') {
+      return {
+        success: false,
+        error: 'First name is required.'
+      };
+    }
+
+    if (!lastName || typeof lastName !== 'string' || lastName.trim() === '') {
+      return {
+        success: false,
+        error: 'Last name is required.'
+      };
+    }
+
+    if (!ownerId || typeof ownerId !== 'string') {
+      return {
+        success: false,
+        error: 'Owner ID is required.'
+      };
+    }
+
+    // Validate owner ID - ensure the user belongs to the organization
+    const ownerValidation = await prisma.userOrganization.findUnique({
+      where: {
+        userId_organizationId: {
+          userId: ownerId,
+          organizationId: org.id,
+        },
+      },
+      select: { id: true }
+    });
+
+    if (!ownerValidation) {
+      return {
+        success: false,
+        error: 'Invalid owner selected. User is not part of this organization.'
+      };
+    }
 
     // Check if leadEmail is a non-empty string before proceeding
     if (typeof leadEmail === 'string' && leadEmail.trim() !== '') {
@@ -73,26 +119,49 @@ export const actions = {
       }
     }
 
-    const updatedLead = {
-      firstName: formData.get('firstName'),
-      lastName: formData.get('lastName'),
-      email: formData.get('email'),
-      phone: formData.get('phone'),
-      company: formData.get('company'),
-      title: formData.get('title'),
-      status: formData.get('status'),
-      leadSource: formData.get('leadSource') || null,
-      industry: formData.get('industry') || null,
-      rating: formData.get('rating') || null,
-      description: formData.get('description') || null,
-      ownerId: formData.get('ownerId'),
-      organizationId: org.id // Always set from session
-    };
+    // Get and validate form data
+    const statusValue = formData.get('status')?.toString() || 'NEW';
+    const leadSourceValue = formData.get('leadSource')?.toString();
+
+    // Simple string validation - Prisma will validate the enum at runtime
+    const validStatuses = ['NEW', 'PENDING', 'CONTACTED', 'QUALIFIED', 'UNQUALIFIED', 'CONVERTED'];
+    const validSources = ['WEB', 'PHONE_INQUIRY', 'PARTNER_REFERRAL', 'COLD_CALL', 'TRADE_SHOW', 'EMPLOYEE_REFERRAL', 'ADVERTISEMENT', 'OTHER'];
 
+    if (!validStatuses.includes(statusValue)) {
+      return {
+        success: false,
+        error: 'Invalid lead status provided.'
+      };
+    }
+
+    if (leadSourceValue && !validSources.includes(leadSourceValue)) {
+      return {
+        success: false,
+        error: 'Invalid lead source provided.'
+      };
+    }
+
     try {
+      // Use the correct Prisma update method with proper typing
       await prisma.lead.update({
         where: { id: lead_id },
-        data: updatedLead
+        data: {
+          firstName: firstName.trim(),
+          lastName: lastName.trim(),
+          email: formData.get('email')?.toString() || null,
+          phone: formData.get('phone')?.toString() || null,
+          company: formData.get('company')?.toString() || null,
+          title: formData.get('title')?.toString() || null,
+          industry: formData.get('industry')?.toString() || null,
+          rating: formData.get('rating')?.toString() || null,
+          description: formData.get('description')?.toString() || null,
+          ownerId: ownerId,
+          organizationId: org.id,
+          // @ts-ignore - Bypassing TypeScript enum checking for validated enum values
+          status: statusValue,
+          // @ts-ignore - Bypassing TypeScript enum checking for validated enum values
+          leadSource: leadSourceValue || null
+        }
       });
 
       return { success: true };

src/routes/(app)/app/leads/[lead_id]/edit/+page.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import { enhance } from '$app/forms';
   import { goto } from '$app/navigation';
   import { fly } from 'svelte/transition';
-  import { ArrowLeft, Save, X, User, Building, Mail, Phone, Calendar, Star, Target, DollarSign, AlertCircle } from '@lucide/svelte';
+  import { ArrowLeft, Save, X, User, Building, Mail, Phone, Calendar, Star, Target, AlertCircle } from '@lucide/svelte';
 
   export let data;
   
@@ -12,28 +12,28 @@
   let errorMessage = '';
 
   // Form validation
-  let errors = {};
+  let errors: Record<string, string> = {};
   
-  function validateForm(formData) {
+  function validateForm(formData: FormData) {
     errors = {};
     
-    if (!formData.get('firstName')?.trim()) {
+    if (!formData.get('firstName')?.toString()?.trim()) {
       errors.firstName = 'First name is required';
     }
     
-    if (!formData.get('lastName')?.trim()) {
+    if (!formData.get('lastName')?.toString()?.trim()) {
       errors.lastName = 'Last name is required';
     }
     
-    const email = formData.get('email')?.trim();
+    const email = formData.get('email')?.toString()?.trim();
     if (email && !isValidEmail(email)) {
       errors.email = 'Please enter a valid email address';
     }
     
     return Object.keys(errors).length === 0;
   }
   
-  function isValidEmail(email) {
+  function isValidEmail(email: string) {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
   }
   
@@ -159,7 +159,7 @@
                 goto(`/app/leads/${lead.id}`);
               }, 1500);
             } else if (result.data?.error) {
-              errorMessage = result.data.error;
+              errorMessage = result.data.error as string;
             }
           } else {
             errorMessage = 'An unexpected error occurred';
@@ -356,35 +356,19 @@
             </div>
           </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          <div class="mb-6">
             <div>
               <label for="ownerId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Lead Owner</label>
               <select
                 id="ownerId"
                 name="ownerId"
                 class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all"
               >
-                {#each users as user}
-                  <option value={user.id} selected={lead.ownerId === user.id}>{user.name}</option>
+                {#each users as userOrg}
+                  <option value={userOrg.user.id} selected={lead.ownerId === userOrg.user.id}>{userOrg.user.name}</option>
                 {/each}
               </select>
             </div>
-            
-            <div>
-              <label for="annualRevenue" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                <DollarSign class="w-4 h-4 inline mr-1" />
-                Annual Revenue (Optional)
-              </label>
-              <input
-                id="annualRevenue"
-                name="annualRevenue"
-                type="number"
-                step="0.01"
-                value={lead.annualRevenue || ''}
-                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all"
-                placeholder="Enter annual revenue"
-              />
-            </div>
           </div>
 
           <div>