feat(web): send sms from the dashboard

web/components/dashboard/SendSMS.tsx

@@ -0,0 +1,112 @@
+import {
+  Box,
+  Button,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from '@chakra-ui/react'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { sendSMSRequest } from '../../services'
+import { selectDeviceList } from '../../store/deviceListReducer'
+
+export default function SendSMS() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const deviceList = useSelector(selectDeviceList)
+  const toast = useToast()
+
+  const [formData, setFormData] = useState({
+    device: '',
+    receivers: '',
+    smsBody: '',
+  })
+
+  const handSend = (e) => {
+    e.preventDefault()
+    sendSMSRequest(formData.device, {
+      receivers: formData.receivers.replace(' ', '').split(','),
+      smsBody: formData.smsBody,
+    })
+
+    toast({
+      title: 'Sending SMS...',
+    })
+    onClose()
+  }
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen}>Start Sending</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Send SMS</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Box>
+              <FormLabel htmlFor='device'>Select Device</FormLabel>
+              <Select
+                id='device'
+                name='device'
+                placeholder='Select Device'
+                onChange={handleChange}
+                value={formData.smsBody}
+              >
+                {deviceList.data.map((device) => (
+                  <option key={device._id} value={device._id}>
+                    {device.model}
+                  </option>
+                ))}
+              </Select>
+            </Box>
+            <Box>
+              <FormLabel htmlFor='receivers'>Receiver</FormLabel>
+              <Input
+                placeholder='receiver'
+                name='receivers'
+                onChange={handleChange}
+                value={formData.receivers}
+                type='tel'
+              />
+            </Box>
+            <Box>
+              <FormLabel htmlFor='smsBody'>SMS Body</FormLabel>
+              <Textarea
+                id='smsBody'
+                name='smsBody'
+                onChange={handleChange}
+                value={formData.smsBody}
+              />
+            </Box>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='ghost' mr={3} onClick={onClose}>
+              Close
+            </Button>
+            <Button variant='outline' colorScheme='blue' onClick={handSend}>
+              Send
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

web/pages/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import { Box, SimpleGrid, useToast } from '@chakra-ui/react'
+import { Box, Flex, SimpleGrid, useToast } from '@chakra-ui/react'
 
 import ApiKeyList from '../../components/dashboard/ApiKeyList'
 import UserStats from '../../components/dashboard/UserStats'
@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
 import { selectAuth } from '../../store/authReducer'
 import Router from 'next/router'
 import { useEffect } from 'react'
+import SendSMS from '../../components/dashboard/SendSMS'
 
 export default function Dashboard() {
   const { user: currentUser } = useSelector(selectAuth)
@@ -26,7 +27,11 @@ export default function Dashboard() {
     <>
       <UserStats />
       <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <GenerateApiKey />
+        <Flex justifyContent='space-evenly' >
+          <GenerateApiKey />
+          <SendSMS />
+        </Flex>
+
         <br />
         <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
           <Box backdropBlur='2xl' borderWidth='1px' borderRadius='lg'>