feat: enhance type safety and improve error handling in account-related routes and forms

ashwin31 · ashwin31 · commit 0307ef8d0392 · 2025-08-01T20:27:22.000+05:30
diff --git a/src/routes/(app)/app/accounts/+page.server.js b/src/routes/(app)/app/accounts/+page.server.js
@@ -1,7 +1,7 @@
 import { error } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
 
-export async function load({ locals, url, params }) {
+export async function load({ locals, url }) {
     const org = locals.org;
 
     const page = parseInt(url.searchParams.get('page') || '1');
@@ -13,15 +13,15 @@ export async function load({ locals, url, params }) {
 
     try {
         // Build the where clause for filtering
+        /** @type {import('@prisma/client').Prisma.AccountWhereInput} */
         const where = {organizationId: org.id};
 
         // Add status filter
         const status = url.searchParams.get('status');
         if (status === 'open') {
-            where.closedAt = null;
-            where.active = true;
+            where.isActive = true;
         } else if (status === 'closed') {
-            where.closedAt = { not: null };
+            where.isActive = false;
         }
 
         // Fetch accounts with pagination
diff --git a/src/routes/(app)/app/accounts/+page.svelte b/src/routes/(app)/app/accounts/+page.svelte
@@ -1,8 +1,7 @@
 <script>
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { onMount } from 'svelte';
-  import { Search, Plus, Eye, Edit, Trash2, ExternalLink, Phone, Mail, MapPin, Calendar, Users, TrendingUp, Building2, Globe, DollarSign, ChevronUp, ChevronDown, Filter } from '@lucide/svelte';
+  import { Search, Plus, Eye, Edit, Phone, MapPin, Calendar, Users, TrendingUp, Building2, Globe, DollarSign, ChevronUp, ChevronDown, Filter } from '@lucide/svelte';
   
   export let data;
   
@@ -12,11 +11,16 @@
   let isLoading = false;
   let statusFilter = $page.url.searchParams.get('status') || 'all';
   let searchQuery = $page.url.searchParams.get('q') || '';
+  /** @type {NodeJS.Timeout | undefined} */
   let searchTimeout;
   
+  /**
+   * @param {string} value
+   */
   function debounceSearch(value) {
     clearTimeout(searchTimeout);
     searchTimeout = setTimeout(() => {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
       const params = new URLSearchParams($page.url.searchParams);
       if (value.trim()) {
         params.set('q', value.trim());
@@ -30,6 +34,7 @@
   
   function updateQueryParams() {
     isLoading = true;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const params = new URLSearchParams($page.url.searchParams);
     params.set('sort', sortField);
     params.set('order', sortOrder);
@@ -39,14 +44,21 @@
     goto(`?${params.toString()}`, { keepFocus: true });
   }
   
+  /**
+   * @param {number} newPage
+   */
   function changePage(newPage) {
     if (newPage < 1 || newPage > pagination.totalPages) return;
     
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const params = new URLSearchParams($page.url.searchParams);
     params.set('page', newPage.toString());
     goto(`?${params.toString()}`, { keepFocus: true });
   }
   
+  /**
+   * @param {string} field
+   */
   function toggleSort(field) {
     if (sortField === field) {
       sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
@@ -57,6 +69,9 @@
     updateQueryParams();
   }
   
+  /**
+   * @param {number | null | undefined} amount
+   */
   function formatCurrency(amount) {
     if (!amount) return '-';
     return new Intl.NumberFormat('en-US', {
@@ -67,6 +82,9 @@
     }).format(amount);
   }
   
+  /**
+   * @param {string | Date | null | undefined} date
+   */
   function formatDate(date) {
     if (!date) return '-';
     return new Intl.DateTimeFormat('en-US', {
@@ -107,7 +125,7 @@
             placeholder="Search accounts..."
             class="pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent min-w-[250px]"
             bind:value={searchQuery}
-            oninput={(e) => debounceSearch(e.target.value)}
+            oninput={(e) => debounceSearch(/** @type {HTMLInputElement} */ (e.target).value)}
           />
         </div>
         
@@ -242,7 +260,7 @@
               </td>
             </tr>
           {:else}
-            {#each accounts as account}
+            {#each accounts as account (account.id)}
               <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {account.closedAt ? 'opacity-60' : ''}">
                 <td class="px-6 py-4">
                   <div class="flex items-center gap-3">
diff --git a/src/routes/(app)/app/accounts/[accountId]/+page.server.js b/src/routes/(app)/app/accounts/[accountId]/+page.server.js
@@ -3,7 +3,6 @@ import prisma from '$lib/prisma';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params, url, locals }) {
-  const user = locals.user;
   const org = locals.org;
   try {
     const accountId = params.accountId;
@@ -121,7 +120,10 @@ export async function load({ params, url, locals }) {
     };
   } catch (err) {
     console.error('Error loading account data:', err);
-    throw error(err.status || 500, err.message || 'Error loading account data');
+    const errorMessage = err instanceof Error ? err.message : 'Error loading account data';
+    const statusCode = err && typeof err === 'object' && 'status' in err ? 
+      (typeof err.status === 'number' ? err.status : 500) : 500;
+    throw error(statusCode, errorMessage);
   }
 }
 
@@ -207,7 +209,7 @@ export const actions = {
     }
   },
 
-  reopenAccount: async ({ locals, params }) => {
+  reopenAccount: async ({ request, locals, params }) => {
     try {
       const user = locals.user;
       const org = locals.org;
@@ -257,7 +259,7 @@ export const actions = {
       };
 
       // Update the account to mark it as reopened
-      const updatedAccount = await prisma.account.update({
+      await prisma.account.update({
         where: { id: accountId },
         data: {
           closedAt: null,
@@ -289,7 +291,6 @@ export const actions = {
   },
 
   comment: async ({ request, locals, params }) => {
-    const user = locals.user;
     const org = locals.org;
     // Fallback: fetch account to get organizationId
     const account = await prisma.account.findUnique({
diff --git a/src/routes/(app)/app/accounts/[accountId]/+page.svelte b/src/routes/(app)/app/accounts/[accountId]/+page.svelte
@@ -1,14 +1,9 @@
 <script>
-  import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
-  import { onMount } from 'svelte';
-  import { invalidateAll } from '$app/navigation';
   import { 
     ArrowLeft, 
     Edit, 
     Lock, 
     Unlock, 
-    Trash2, 
     Users, 
     Target, 
     DollarSign, 
@@ -18,9 +13,7 @@
     Phone,
     Mail,
     Globe,
-    Building,
     MapPin,
-    Calendar,
     MessageSquare,
     CheckSquare,
     FolderOpen,
@@ -31,16 +24,14 @@
   export let data;
   /** @type {any} */
   export let form;
-  let users = Array.isArray(data.users) ? data.users : [];
 
-  const { account, contacts, opportunities = [], quotes, tasks, cases } = data;
+  const { account, contacts, opportunities = [], tasks, cases } = data;
   let comments = data.comments;
 
   // Form state
   let showCloseModal = false;
   let closureReason = '';
   let closeError = '';
-  let isClosing = false;
 
   // Comment functionality
   let newComment = '';
@@ -74,14 +65,17 @@
         const data = await res.json().catch(() => ({}));
         commentError = data?.error || data?.message || 'Failed to add comment.';
       }
-    } catch (err) {
+    } catch {
       commentError = 'Failed to add comment.';
     } finally {
       isSubmittingComment = false;
     }
   }
 
-  // Format date string
+  /**
+   * Format date string
+   * @param {string | Date | null | undefined} dateStr
+   */
   function formatDate(dateStr) {
     if (!dateStr) return 'N/A';
     return new Date(dateStr).toLocaleDateString('en-US', {
@@ -91,7 +85,10 @@
     });
   }
 
-  // Format currency
+  /**
+   * Format currency
+   * @param {number | null | undefined} value
+   */
   function formatCurrency(value) {
     if (!value) return '$0';
     return new Intl.NumberFormat('en-US', {
@@ -101,7 +98,10 @@
     }).format(value);
   }
 
-  // Badge color functions
+  /**
+   * Badge color functions
+   * @param {string | null | undefined} stage
+   */
   function getStageBadgeColor(stage) {
     switch (stage?.toLowerCase()) {
       case 'prospecting': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
@@ -114,6 +114,9 @@
     }
   }
 
+  /**
+   * @param {string | null | undefined} status
+   */
   function getCaseStatusBadgeColor(status) {
     switch (status?.toLowerCase()) {
       case 'open': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
@@ -123,19 +126,6 @@
     }
   }
 
-  function getQuoteStatusBadgeColor(status) {
-    switch (status?.toLowerCase()) {
-      case 'draft': return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
-      case 'needs_review': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
-      case 'in_review': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400';
-      case 'approved': return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
-      case 'rejected': return 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400';
-      case 'presented': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400';
-      case 'accepted': return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/20 dark:text-indigo-400';
-      default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
-    }
-  }
-
   // Handle form submission errors
   $: {
     if (form?.success === false) {
@@ -431,7 +421,7 @@
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                      {#each contacts as contact}
+                      {#each contacts as contact (contact.id)}
                         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                           <td class="py-4 font-medium text-gray-900 dark:text-white">
                             <a href="/app/contacts/{contact.id}" class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline">
@@ -501,7 +491,7 @@
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                      {#each opportunities as opportunity}
+                      {#each opportunities as opportunity (opportunity.id)}
                         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                           <td class="py-4 font-medium text-gray-900 dark:text-white">
                             <a href="/app/opportunities/{opportunity.id}" class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline">
@@ -554,7 +544,7 @@
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                      {#each tasks as task}
+                      {#each tasks as task (task.id)}
                         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                           <td class="py-4 font-medium text-gray-900 dark:text-white">
                             <a href="/app/tasks/{task.id}" class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline">
@@ -619,7 +609,7 @@
                       </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                      {#each cases as caseItem}
+                      {#each cases as caseItem (caseItem.id)}
                         <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                           <td class="py-4 font-medium text-gray-900 dark:text-white">
                             <a href="/app/cases/{caseItem.id}" class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline">
@@ -688,7 +678,7 @@
                   </div>
                 {:else}
                   <div class="space-y-4">
-                    {#each comments as comment}
+                    {#each comments as comment (comment.id)}
                       <div class="bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-4">
                         <div class="flex justify-between items-start mb-2">
                           <div class="flex items-center space-x-2">
@@ -742,7 +732,7 @@
               <div>
                 <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pipeline Value</p>
                 <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                  {formatCurrency(opportunities.reduce((sum, opp) => sum + (opp.amount || 0), 0))}
+                  {formatCurrency(opportunities.reduce(/** @param {number} sum @param {any} opp */ (sum, opp) => sum + (opp.amount || 0), 0))}
                 </p>
               </div>
               <DollarSign class="w-8 h-8 text-yellow-500" />
@@ -752,7 +742,7 @@
               <div>
                 <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Open Cases</p>
                 <p class="text-2xl font-bold text-gray-900 dark:text-white">
-                  {cases.filter(c => c.status !== 'CLOSED').length}
+                  {cases.filter(/** @param {any} c */ (c) => c.status !== 'CLOSED').length}
                 </p>
               </div>
               <AlertTriangle class="w-8 h-8 text-red-500" />
diff --git a/src/routes/(app)/app/accounts/[accountId]/edit/+page.server.js b/src/routes/(app)/app/accounts/[accountId]/edit/+page.server.js
@@ -15,11 +15,11 @@ export const actions = {
   default: async ({ request, params, locals }) => {
     const org = locals.org;
     const form = await request.formData();
-    const name = form.get('name');
-    const industry = form.get('industry');
-    const type = form.get('type');
-    const website = form.get('website');
-    const phone = form.get('phone');
+    const name = form.get('name')?.toString();
+    const industry = form.get('industry')?.toString() || null;
+    const type = form.get('type')?.toString() || null;
+    const website = form.get('website')?.toString() || null;
+    const phone = form.get('phone')?.toString() || null;
 
     if (!name) {
       return fail(400, { name, missing: true });
diff --git a/src/routes/(app)/app/accounts/new/+page.server.js b/src/routes/(app)/app/accounts/new/+page.server.js
@@ -1,7 +1,5 @@
-import { env } from '$env/dynamic/private';
-import { redirect } from '@sveltejs/kit';
-import prisma from '$lib/prisma';
 import { fail } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
 import { validatePhoneNumber, formatPhoneForStorage } from '$lib/utils/phone.js';
 import { 
   industries, 
@@ -12,9 +10,7 @@ import {
 } from '$lib/data/index.js';
 
 /** @type {import('./$types').PageServerLoad} */
-export async function load({ locals }) {
-  const user = locals.user;
-  const org = locals.org;
+export async function load() {
 
   // Get data for dropdowns
   return {
diff --git a/src/routes/(app)/app/accounts/new/+page.svelte b/src/routes/(app)/app/accounts/new/+page.svelte
