feat(web): allow sim-selection when sending sms from dashboard

web/app/(app)/dashboard/(components)/bulk-sms-send.tsx

@@ -111,6 +111,9 @@ export default function BulkSMSSend() {
         return row[key.trim()] || ''
       }),
       recipients: [row[selectedColumn]],
+      ...(selectedSimSubscriptionId !== undefined && {
+        simSubscriptionId: selectedSimSubscriptionId,
+      }),
     }))
     const payload = {
       messageTemplate,
@@ -123,6 +126,9 @@ export default function BulkSMSSend() {
   }
 
   const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null)
+  const [selectedSimSubscriptionId, setSelectedSimSubscriptionId] = useState<
+    number | undefined
+  >(undefined)
 
   const { data: devices } = useQuery({
     queryKey: ['devices'],
@@ -142,6 +148,17 @@ export default function BulkSMSSend() {
     mutationFn: handleSendBulkSMS,
   })
 
+  const selectedDevice = devices?.data?.find(
+    (device) => device._id === selectedDeviceId
+  )
+
+  const availableSims =
+    selectedDevice?.simInfo?.sims &&
+    Array.isArray(selectedDevice.simInfo.sims) &&
+    selectedDevice.simInfo.sims.length > 0
+      ? selectedDevice.simInfo.sims
+      : []
+
   const isStep2Disabled = csvData.length === 0
   const isStep3Disabled = isStep2Disabled || !selectedColumn || !messageTemplate
 
@@ -206,7 +223,10 @@ export default function BulkSMSSend() {
             <div>
               <Label htmlFor='device-select'>Select Device</Label>
               <Select
-                onValueChange={setSelectedDeviceId}
+                onValueChange={(value) => {
+                  setSelectedDeviceId(value)
+                  setSelectedSimSubscriptionId(undefined)
+                }}
                 value={selectedDeviceId}
               >
                 <SelectTrigger id='device-select'>
@@ -227,6 +247,35 @@ export default function BulkSMSSend() {
               </Select>
             </div>
 
+            {availableSims.length > 1 && (
+              <div>
+                <Label htmlFor='sim-select'>Select SIM (optional)</Label>
+                <Select
+                  onValueChange={(value) =>
+                    setSelectedSimSubscriptionId(
+                      value ? Number(value) : undefined
+                    )
+                  }
+                  value={selectedSimSubscriptionId?.toString()}
+                >
+                  <SelectTrigger id='sim-select'>
+                    <SelectValue placeholder='Select SIM (optional)' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value=''>None (use default)</SelectItem>
+                    {availableSims.map((sim) => (
+                      <SelectItem
+                        key={sim.subscriptionId}
+                        value={sim.subscriptionId.toString()}
+                      >
+                        {sim.displayName || 'SIM'} ({sim.subscriptionId})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
             <div className='space-y-4'>
               <div>
                 <Label htmlFor='recipient-column'>

web/app/(app)/dashboard/(components)/send-sms.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect } from 'react'
 import {
   Card,
   CardContent,
@@ -17,7 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { useForm, useFieldArray, Controller } from 'react-hook-form'
+import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { sendSmsSchema } from '@/lib/schemas'
 import type { SendSmsFormData } from '@/lib/schemas'
@@ -56,6 +57,7 @@ export default function SendSms() {
     register,
     control,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = useForm<SendSmsFormData>({
     resolver: zodResolver(sendSmsSchema),
@@ -73,6 +75,28 @@ export default function SendSms() {
     name: 'recipients',
   })
 
+  const selectedDeviceId = useWatch({
+    control,
+    name: 'deviceId',
+  })
+
+  const selectedDevice = devices?.data?.find(
+    (device) => device._id === selectedDeviceId
+  )
+
+  const availableSims =
+    selectedDevice?.simInfo?.sims &&
+    Array.isArray(selectedDevice.simInfo.sims) &&
+    selectedDevice.simInfo.sims.length > 0
+      ? selectedDevice.simInfo.sims
+      : []
+
+  useEffect(() => {
+    if (selectedDeviceId) {
+      setValue('simSubscriptionId', undefined)
+    }
+  }, [selectedDeviceId, setValue])
+
   return (
     <div>
       <Card>
@@ -120,6 +144,43 @@ export default function SendSms() {
                 )}
               </div>
 
+              {availableSims.length > 1 && (
+                <div>
+                  <Controller
+                    name='simSubscriptionId'
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        onValueChange={(value) =>
+                          field.onChange(value ? Number(value) : undefined)
+                        }
+                        value={field.value?.toString()}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder='Select SIM (optional)' />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value=''>None (use default)</SelectItem>
+                          {availableSims.map((sim) => (
+                            <SelectItem
+                              key={sim.subscriptionId}
+                              value={sim.subscriptionId.toString()}
+                            >
+                              {sim.displayName || 'SIM'} ({sim.subscriptionId})
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  />
+                  {errors.simSubscriptionId && (
+                    <p className='text-sm text-destructive mt-1'>
+                      {errors.simSubscriptionId.message}
+                    </p>
+                  )}
+                </div>
+              )}
+
               <div className='space-y-2'>
                 {fields.map((field, index) => (
                   <div key={field.id}>

web/lib/schemas.ts

@@ -21,6 +21,7 @@ export const sendSmsSchema = z.object({
     .max(1600, {
       message: 'Message cannot exceed 1600 characters',
     }),
+  simSubscriptionId: z.number().optional(),
 })
 
 export type SendSmsFormData = z.infer<typeof sendSmsSchema>