feat: Add type annotations and improve data handling across various components

- Added type annotations for `data` and `form` in multiple Svelte components to enhance type safety.
- Improved handling of optional chaining and default values for various properties in forms and data structures.
- Refactored date formatting functions to ensure consistent handling of date inputs.
- Enhanced validation logic for form submissions, ensuring required fields are checked and valid enum values are enforced.
- Updated opportunity closing logic to handle potential null values and ensure correct data types are used.
- Improved user role management in the users page, simplifying role handling and ensuring only relevant roles are displayed.
- General code cleanup and organization for better readability and maintainability.

Author: ashwin31

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

@@ -13,6 +13,7 @@
         Plus
     } from '@lucide/svelte';
     
+    /** @type {any} */
     export let data;
     
     $: metrics = data.metrics || {};

src/routes/(app)/app/accounts/[accountId]/+page.svelte

@@ -27,11 +27,13 @@
     Send
   } from '@lucide/svelte';
 
+  /** @type {any} */
   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 = [], quotes, tasks, cases } = data;
   let comments = data.comments;
 
   // Form state

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

@@ -34,6 +34,7 @@
     let sortDirection = $state('desc');
     let showFilters = $state(false);
     let showDeleteModal = $state(false);
+    /** @type {any} */
     let opportunityToDelete = $state(null);
     let deleteLoading = $state(false);
 
@@ -81,6 +82,10 @@
     const filteredOpportunities = $derived(getFilteredOpportunities());
 
 
+    /**
+     * @param {number | null} amount
+     * @returns {string}
+     */
     function formatCurrency(amount) {
         if (!amount) return '-';
         return new Intl.NumberFormat('en-US', {
@@ -91,6 +96,10 @@
         }).format(amount);
     }
 
+    /**
+     * @param {string | Date | null} date
+     * @returns {string}
+     */
     function formatDate(date) {
         if (!date) return '-';
         return new Date(date).toLocaleDateString('en-US', {
@@ -100,6 +109,9 @@
         });
     }
 
+    /**
+     * @param {string} field
+     */
     function toggleSort(field) {
         if (sortField === field) {
             sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
@@ -109,6 +121,9 @@
         }
     }
 
+    /**
+     * @param {any} opportunity
+     */
     function openDeleteModal(opportunity) {
         opportunityToDelete = opportunity;
         showDeleteModal = true;

src/routes/(app)/app/opportunities/[opportunityId]/+page.svelte

@@ -32,20 +32,40 @@
     'CLOSED_LOST': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
   };
 
-  const getStageColor = (stage) => stageColors[stage] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+  /**
+   * @param {string} stage
+   * @returns {string}
+   */
+  const getStageColor = (stage) => stageColors[/** @type {keyof typeof stageColors} */ (stage)] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
   
+  /**
+   * @param {number | null} amount
+   * @returns {string}
+   */
   const formatCurrency = (amount) => {
     return amount ? `$${amount.toLocaleString()}` : 'N/A';
   };
 
+  /**
+   * @param {string | Date | null} date
+   * @returns {string}
+   */
   const formatDate = (date) => {
     return date ? new Date(date).toLocaleDateString() : 'N/A';
   };
 
+  /**
+   * @param {string | Date | null} date
+   * @returns {string}
+   */
   const formatDateTime = (date) => {
     return date ? new Date(date).toLocaleString() : 'N/A';
   };
 
+  /**
+   * @param {string} stage
+   * @returns {number}
+   */
   const getStageProgress = (stage) => {
     const stages = ['PROSPECTING', 'QUALIFICATION', 'PROPOSAL', 'NEGOTIATION', 'CLOSED_WON'];
     const index = stages.indexOf(stage);
@@ -212,7 +232,7 @@
             <div class="flex items-center justify-between">
               <span class="text-sm text-gray-500 dark:text-gray-400">Days to Close</span>
               <span class="font-semibold text-gray-900 dark:text-white">
-                {opportunity.closeDate ? Math.ceil((new Date(opportunity.closeDate) - new Date()) / (1000 * 60 * 60 * 24)) : 'N/A'}
+                {opportunity.closeDate ? Math.ceil((new Date(opportunity.closeDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)) : 'N/A'}
               </span>
             </div>
           </div>

src/routes/(app)/app/opportunities/[opportunityId]/close/+page.server.js

@@ -1,6 +1,11 @@
 import { error, fail, redirect } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
 
+/**
+ * @param {Object} options
+ * @param {Record<string, string>} options.params
+ * @param {App.Locals} options.locals
+ */
 export async function load({ params, locals }) {
   if (!locals.org?.id) {
     throw error(403, 'Organization access required');
@@ -26,23 +31,30 @@ export async function load({ params, locals }) {
 }
 
 export const actions = {
+  /**
+   * @param {Object} options
+   * @param {Request} options.request
+   * @param {Record<string, string>} options.params
+   * @param {App.Locals} options.locals
+   */
   default: async ({ request, params, locals }) => {
     if (!locals.org?.id) {
       return fail(403, { error: 'Organization access required' });
     }
 
     const formData = await request.formData();
-    const status = formData.get('status');
-    const closeDate = formData.get('closeDate');
-    const closeReason = formData.get('closeReason');
+    const status = formData.get('status')?.toString();
+    const closeDate = formData.get('closeDate')?.toString();
+    const closeReason = formData.get('closeReason')?.toString();
 
     // Validate required fields
     if (!status || !closeDate) {
       return fail(400, { error: 'Status and close date are required' });
     }
 
     // Validate status
-    if (!['CLOSED_WON', 'CLOSED_LOST'].includes(status)) {
+    const validCloseStatuses = ['CLOSED_WON', 'CLOSED_LOST'];
+    if (!status || !validCloseStatuses.includes(status)) {
       return fail(400, { error: 'Invalid status selected' });
     }
 
@@ -63,12 +75,14 @@ export const actions = {
       }
 
       // Update the opportunity with closing details
-      const updatedOpportunity = await prisma.opportunity.update({
+      const opportunityStage = /** @type {import('@prisma/client').OpportunityStage} */ (status);
+      
+      await prisma.opportunity.update({
         where: { id: params.opportunityId },
         data: {
-          stage: status, // CLOSED_WON or CLOSED_LOST
+          stage: opportunityStage, // CLOSED_WON or CLOSED_LOST
           status: status === 'CLOSED_WON' ? 'SUCCESS' : 'FAILED',
-          closeDate: new Date(closeDate),
+          closeDate: closeDate ? new Date(closeDate) : null,
           description: closeReason ? 
             (opportunity.description ? `${opportunity.description}\n\nClose Reason: ${closeReason}` : `Close Reason: ${closeReason}`) 
             : opportunity.description,
@@ -97,7 +111,7 @@ export const actions = {
       throw redirect(303, `/app/opportunities/${opportunity.id}`);
     } catch (err) {
       console.error('Error closing opportunity:', err);
-      if (err.status === 303) {
+      if (err && typeof err === 'object' && 'status' in err && err.status === 303) {
         throw err; // Re-throw redirect
       }
       return fail(500, { error: 'Failed to close opportunity. Please try again.' });

src/routes/(app)/app/opportunities/[opportunityId]/close/+page.svelte

@@ -16,13 +16,6 @@
     { value: 'CLOSED_LOST', label: 'Closed Lost', color: 'text-red-600' }
   ];
 
-  function handleSubmit() {
-    return async ({ update }) => {
-      isSubmitting = true;
-      await update();
-      isSubmitting = false;
-    };
-  }
 </script>
 
 <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
@@ -77,7 +70,13 @@
         <h2 class="text-lg font-medium text-gray-900 dark:text-white">Close Opportunity</h2>
       </div>
 
-      <form method="POST" use:enhance={handleSubmit} class="p-6 space-y-6">
+      <form method="POST" use:enhance={() => {
+        return async ({ update }) => {
+          isSubmitting = true;
+          await update();
+          isSubmitting = false;
+        };
+      }} class="p-6 space-y-6">
         {#if form?.error}
           <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
             <div class="flex items-center gap-2">

src/routes/(app)/app/opportunities/[opportunityId]/edit/+page.server.js

@@ -1,9 +1,21 @@
 import { error, fail, redirect } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
 
-export async function load({ params }) {
-  const opportunity = await prisma.opportunity.findUnique({
-    where: { id: params.opportunityId },
+/**
+ * @param {Object} options
+ * @param {Record<string, string>} options.params
+ * @param {App.Locals} options.locals
+ */
+export async function load({ params, locals }) {
+  if (!locals.org?.id) {
+    throw error(403, 'Organization access required');
+  }
+
+  const opportunity = await prisma.opportunity.findFirst({
+    where: { 
+      id: params.opportunityId,
+      organizationId: locals.org.id
+    },
     include: {
       account: {
         select: {
@@ -28,15 +40,26 @@ export async function load({ params }) {
 }
 
 export const actions = {
-  default: async ({ request, params }) => {
+  /**
+   * @param {Object} options
+   * @param {Request} options.request
+   * @param {Record<string, string>} options.params
+   * @param {App.Locals} options.locals
+   */
+  default: async ({ request, params, locals }) => {
+    if (!locals.org?.id) {
+      return fail(403, { error: 'Organization access required' });
+    }
+
     const form = await request.formData();
 
     const name = form.get('name')?.toString().trim();
-    const amount = form.get('amount') ? parseFloat(form.get('amount')) : null;
-    const expectedRevenue = form.get('expectedRevenue') ? parseFloat(form.get('expectedRevenue')) : null;
+    const amount = form.get('amount') ? parseFloat(form.get('amount')?.toString() || '') : null;
+    const expectedRevenue = form.get('expectedRevenue') ? parseFloat(form.get('expectedRevenue')?.toString() || '') : null;
     const stage = form.get('stage')?.toString();
-    const probability = form.get('probability') ? parseFloat(form.get('probability')) : null;
-    const closeDate = form.get('closeDate') ? new Date(form.get('closeDate')) : null;
+    const probability = form.get('probability') ? parseFloat(form.get('probability')?.toString() || '') : null;
+    const closeDateValue = form.get('closeDate')?.toString();
+    const closeDate = closeDateValue ? new Date(closeDateValue) : null;
     const leadSource = form.get('leadSource')?.toString() || null;
     const forecastCategory = form.get('forecastCategory')?.toString() || null;
     const type = form.get('type')?.toString() || null;
@@ -51,6 +74,12 @@ export const actions = {
       return fail(400, { message: 'Stage is required.' });
     }
 
+    // Validate stage is a valid enum value
+    const validStages = ['PROSPECTING', 'QUALIFICATION', 'PROPOSAL', 'NEGOTIATION', 'CLOSED_WON', 'CLOSED_LOST'];
+    if (!validStages.includes(stage)) {
+      return fail(400, { message: 'Invalid stage selected.' });
+    }
+
     // Validate probability range
     if (probability !== null && (probability < 0 || probability > 100)) {
       return fail(400, { message: 'Probability must be between 0 and 100.' });
@@ -66,13 +95,27 @@ export const actions = {
     }
 
     try {
+      // Verify the opportunity exists and belongs to the organization
+      const existingOpportunity = await prisma.opportunity.findFirst({
+        where: { 
+          id: params.opportunityId,
+          organizationId: locals.org.id
+        }
+      });
+
+      if (!existingOpportunity) {
+        return fail(404, { message: 'Opportunity not found' });
+      }
+
+      const opportunityStage = /** @type {import('@prisma/client').OpportunityStage} */ (stage);
+      
       await prisma.opportunity.update({
         where: { id: params.opportunityId },
         data: { 
           name, 
           amount, 
           expectedRevenue,
-          stage, 
+          stage: opportunityStage, 
           probability, 
           closeDate, 
           leadSource,

src/routes/(app)/app/opportunities/[opportunityId]/edit/+page.svelte

@@ -10,14 +10,24 @@
     ? new Date(opportunity.closeDate).toISOString().slice(0, 10)
     : '';
   
-  $: opportunity.closeDate = closeDateStr;
+  $: {
+    if (closeDateStr) {
+      opportunity.closeDate = new Date(closeDateStr);
+    } else {
+      opportunity.closeDate = null;
+    }
+  }
 
+  /**
+   * @param {SubmitEvent} e
+   */
   async function handleSubmit(e) {
     e.preventDefault();
     isSubmitting = true;
     error = '';
     
-    const formData = new FormData(e.target);
+    const target = /** @type {HTMLFormElement} */ (e.target);
+    const formData = new FormData(target);
     const res = await fetch('', { method: 'POST', body: formData });
     
     if (res.ok) {
@@ -307,8 +317,3 @@
   </div>
 </div>
 
-<style>
-  @media (max-width: 640px) {
-    .max-w-xl { max-width: 100%; padding: 0.5rem; }
-  }
-</style>