feat: enhance type safety with JSDoc annotations and improve form handling in leads and profile components

Author: ashwin31

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

@@ -51,11 +51,17 @@
   let showConfirmModal = false;
 
   // Function to get the full name of a lead
+  /**
+   * @param {any} lead
+   */
   function getFullName(lead) {
     return `${lead.firstName} ${lead.lastName}`.trim();
   }
 
   // Function to format date
+  /**
+   * @param {string | Date | null | undefined} dateString
+   */
   function formatDate(dateString) {
     if (!dateString) return 'N/A';
     return new Date(dateString).toLocaleDateString('en-US', {
@@ -68,6 +74,9 @@
   }
 
   // Function to format date (short)
+  /**
+   * @param {string | Date | null | undefined} dateString
+   */
   function formatDateShort(dateString) {
     if (!dateString) return 'N/A';
     return new Date(dateString).toLocaleDateString('en-US', {
@@ -78,6 +87,9 @@
   }
 
   // Function to map lead status to colors
+  /**
+   * @param {string} status
+   */
   function getStatusColor(status) {
     switch (status) {
       case 'NEW':
@@ -98,12 +110,18 @@
   }
 
   // Function to get lead source display name
+  /**
+   * @param {string | null | undefined} source
+   */
   function getLeadSourceDisplay(source) {
     if (!source) return 'Unknown';
-    return source.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase());
+    return source.replace('_', ' ').toLowerCase().replace(/\b\w/g, (/** @type {string} */ l) => l.toUpperCase());
   }
 
   // Function to get initials for avatar
+  /**
+   * @param {any} lead
+   */
   function getInitials(lead) {
     const first = lead.firstName?.[0] || '';
     const last = lead.lastName?.[0] || '';
@@ -144,12 +162,17 @@
   function confirmConversion() {
     showConfirmModal = false;
     // Submit the form programmatically
-    document.getElementById('convertForm').requestSubmit();
+    const form = document.getElementById('convertForm');
+    if (form) {
+      // Use dispatchEvent as a cross-browser solution
+      const event = new Event('submit', { cancelable: true, bubbles: true });
+      form.dispatchEvent(event);
+    }
   }
   
   const enhanceConvertForm = () => {
     isConverting = true;
-    return async ({ update }) => {
+    return async (/** @type {{ update: any }} */ { update }) => {
       await update({ reset: false });
       // Note: If conversion is successful, the server will redirect automatically
       // This will only execute if there's an error
@@ -159,7 +182,7 @@
 
   const enhanceCommentForm = () => {
     isSubmittingComment = true;
-    return async ({ update }) => {
+    return async (/** @type {{ update: any }} */ { update }) => {
       await update({ reset: false });
       // Reset the loading state after update
       isSubmittingComment = false;
@@ -455,19 +478,6 @@
                 </div>
               {/if}
 
-              <!-- Annual Revenue -->
-              {#if lead.annualRevenue}
-                <div class="space-y-2">
-                  <div class="flex items-center gap-2">
-                    <DollarSign class="w-4 h-4 text-gray-400 dark:text-gray-500" />
-                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Annual Revenue</span>
-                  </div>
-                  <p class="text-sm text-gray-900 dark:text-gray-100 font-medium bg-gray-50 dark:bg-gray-700 px-3 py-2 rounded-lg">
-                    ${lead.annualRevenue.toLocaleString()}
-                  </p>
-                </div>
-              {/if}
-
               <!-- Lead Owner -->
               <div class="space-y-2">
                 <div class="flex items-center gap-2">
@@ -491,19 +501,6 @@
               </div>
             </div>
 
-            <!-- Address -->
-            {#if lead.address}
-              <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
-                <div class="flex items-center gap-2 mb-3">
-                  <Location class="w-5 h-5 text-gray-400 dark:text-gray-500" />
-                  <span class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Address</span>
-                </div>
-                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-xl">
-                  <p class="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-line leading-relaxed">{lead.address}</p>
-                </div>
-              </div>
-            {/if}
-
             <!-- Description -->
             {#if lead.description}
               <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
@@ -684,14 +681,14 @@
             <div class="flex justify-between items-center">
               <span class="text-sm text-gray-600 dark:text-gray-300">Days Since Created</span>
               <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                {Math.floor((new Date() - new Date(lead.createdAt)) / (1000 * 60 * 60 * 24))}
+                {Math.floor((new Date().getTime() - new Date(lead.createdAt).getTime()) / (1000 * 60 * 60 * 24))}
               </span>
             </div>
             {#if lead.convertedAt}
               <div class="flex justify-between items-center">
                 <span class="text-sm text-gray-600 dark:text-gray-300">Days to Convert</span>
                 <span class="text-sm font-semibold text-green-600 dark:text-green-400">
-                  {Math.floor((new Date(lead.convertedAt) - new Date(lead.createdAt)) / (1000 * 60 * 60 * 24))}
+                  {Math.floor((new Date(lead.convertedAt).getTime() - new Date(lead.createdAt).getTime()) / (1000 * 60 * 60 * 24))}
                 </span>
               </div>
             {/if}

src/routes/(app)/app/leads/new/+page.svelte

@@ -35,6 +35,7 @@
 
     /**
      * Object holding the form fields.
+     * @type {Record<string, string>}
      */
     let formData = {
       lead_title: '',
@@ -73,18 +74,25 @@
   
     /**
      * Object to store field errors.
+     * @type {Record<string, string>}
      */
     let errors = {};
     
     /**
      * Handles changes to form inputs
+     * @param {Event} event
      */
     function handleChange(event) {
-      const { name, value } = event.target;
-      formData[name] = value;
-      // Clear error when user starts typing
-      if (errors[name]) {
-        errors[name] = '';
+      const target = event.target;
+      if (!target || !('name' in target && 'value' in target)) return;
+      const name = target.name;
+      const value = target.value;
+      if (typeof name === 'string' && typeof value === 'string') {
+        formData[name] = value;
+        // Clear error when user starts typing
+        if (errors[name]) {
+          errors[name] = '';
+        }
       }
     }
     
@@ -139,7 +147,7 @@
       }
       
       // Validate probability range
-      if (formData.probability && (formData.probability < 0 || formData.probability > 100)) {
+      if (formData.probability && (Number(formData.probability) < 0 || Number(formData.probability) > 100)) {
         errors.probability = 'Probability must be between 0 and 100';
         isValid = false;
       }
@@ -190,6 +198,10 @@
       errors = {};
     }
 
+    /**
+     * @param {string} message
+     * @param {'success' | 'error'} type
+     */
     function showNotification(message, type = 'success') {
       toastMessage = message;
       toastType = type;
@@ -284,7 +296,10 @@
           resetForm();
           setTimeout(() => goto('/app/leads/open'), 1500);
         } else if (result.type === 'failure') {
-          showNotification(result.data?.error || 'Failed to create lead', 'error');
+          const errorMessage = result.data && typeof result.data === 'object' && 'error' in result.data 
+            ? String(result.data.error) 
+            : 'Failed to create lead';
+          showNotification(errorMessage, 'error');
         }
       };
     }} class="space-y-6">

src/routes/(app)/app/leads/open/+page.svelte

@@ -77,11 +77,17 @@
   ];
   
   // Function to get the full name of a lead
+  /**
+   * @param {any} lead
+   */
   function getFullName(lead) {
     return `${lead.firstName} ${lead.lastName}`.trim();
   }
   
   // Function to map lead status to colors and icons
+  /**
+   * @param {string} status
+   */
   function getStatusConfig(status) {
     switch (status) {
       case 'NEW':
@@ -102,6 +108,9 @@
   }
 
   // Function to get rating config
+  /**
+   * @param {string} rating
+   */
   function getRatingConfig(rating) {
     switch (rating) {
       case 'Hot':
@@ -116,6 +125,9 @@
   }
   
   // Replace fixed date formatting with relative time
+  /**
+   * @param {string | Date | null | undefined} dateString
+   */
   function formatDate(dateString) {
     if (!dateString) return '-';
     return formatDistanceToNow(new Date(dateString), { addSuffix: true });
@@ -134,8 +146,12 @@
     
     return matchesSearch && matchesStatus && matchesSource && matchesRating;
   }).sort((a, b) => {
-    const aValue = a[sortBy];
-    const bValue = b[sortBy];
+    const getFieldValue = (/** @type {any} */ obj, /** @type {string} */ field) => {
+      return obj[field];
+    };
+    
+    const aValue = getFieldValue(a, sortBy);
+    const bValue = getFieldValue(b, sortBy);
     
     if (sortOrder === 'asc') {
       return aValue > bValue ? 1 : -1;
@@ -145,6 +161,9 @@
   });
   
   // Function to toggle sort order
+  /**
+   * @param {string} field
+   */
   function toggleSort(field) {
     if (sortBy === field) {
       sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
@@ -320,7 +339,7 @@
               <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                 {#each filteredLeads as lead, i}
                   {@const statusConfig = getStatusConfig(lead.status)}
-                  {@const ratingConfig = getRatingConfig(lead.rating)}
+                  {@const ratingConfig = getRatingConfig(lead.rating || '')}
                   <tr 
                     class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150"
                     in:fly={{y: 20, duration: 300, delay: i * 50}}
@@ -392,7 +411,7 @@
                     </td>
                     <td class="px-4 py-4">
                       <div class="flex items-center gap-2">
-                        {#snippet statusIcon(config)}
+                        {#snippet statusIcon(/** @type {any} */ config)}
                           {@const StatusIcon = config.icon}
                           <StatusIcon class="w-4 h-4 {config.color.split(' ')[1]} flex-shrink-0" />
                         {/snippet}
@@ -440,7 +459,7 @@
         <div class="xl:hidden divide-y divide-gray-200 dark:divide-gray-700">
           {#each filteredLeads as lead, i}
             {@const statusConfig = getStatusConfig(lead.status)}
-            {@const ratingConfig = getRatingConfig(lead.rating)}
+            {@const ratingConfig = getRatingConfig(lead.rating || '')}
             <div 
               class="p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150" 
               in:fly={{y: 20, duration: 300, delay: i * 50}}
@@ -461,7 +480,7 @@
                   </div>
                 </div>
                 <div class="flex items-center gap-2">
-                  {#snippet statusIcon(config)}
+                  {#snippet statusIcon(/** @type {any} */ config)}
                     {@const StatusIcon = config.icon}
                     <StatusIcon class="w-4 h-4 {config.color.split(' ')[1]}" />
                   {/snippet}

src/routes/(app)/app/profile/+page.svelte

@@ -251,7 +251,7 @@
                                 </button>
                                 <button
                                     type="submit"
-                                    disabled={isSubmitting || phoneError}
+                                    disabled={isSubmitting || !!phoneError}
                                     class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition-colors disabled:opacity-50"
                                 >
                                     {#if isSubmitting}