Added Guacamole Client type

src/pages/settings/components/GuacamoleClients/GuacamoleClients.tsx

@@ -1,10 +1,13 @@
 import {
 	Button,
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
 	Grid,
 	GridCol,
 	Group,
 	LoadingOverlay,
 	Popover,
+	Select,
 	Stack,
 	TextInput,
 } from '@mantine/core';
@@ -13,7 +16,9 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { popoverClasses, textInputClasses } from 'styles';
+import { FaTerminal } from 'react-icons/fa';
+import { FaComputer, FaDesktop } from 'react-icons/fa6';
+import { popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { GuacamoleClient } from 'types';
 import DebouncedGuacamoleClient from './DebouncedGuacamoleClient';
 import GuacamoleClientSettingsItem from './GuacamoleClientSettingsItem';
@@ -24,6 +29,7 @@ const GuacamoleClients = () => {
 		clientName: '',
 		clientIdentifier: '',
 		enabled: 1,
+		type: 'SSH',
 	};
 	const form = useForm({
 		initialValues: defaultGuacamoleClient,
@@ -32,6 +38,7 @@ const GuacamoleClients = () => {
 			clientIdentifier: isNotEmpty('Client Identifier is required'),
 		},
 	});
+	const types: string[] = ['SSH', 'RDP', 'VNC'];
 	const endpoint = 'api/guacamoleClients';
 	const {
 		data: guacamoleClientsData,
@@ -119,6 +126,57 @@ const GuacamoleClients = () => {
 									}
 								/>
 							</Group>
+							<Group w={'100%'} justify='center' pos={'relative'}>
+								<Select
+									key={form.key('icon')}
+									{...form.getInputProps('icon')}
+									label={'Icon'}
+									className={selectClasses.settingsItem}
+									classNames={{
+										wrapper: selectClasses.menuSelectWrapper,
+										input: selectClasses.menuSelectInput,
+										label: selectClasses.menuSelectLabel,
+										options: selectClasses.menuSelectOptions,
+										option: selectClasses.menuSelectOption,
+										dropdown: selectClasses.dropdown,
+									}}
+									w={'45%'}
+									mt={'.75rem'}
+									limit={100}
+									placeholder='Search for an icon...'
+									data={types.map((type) => {
+										return {
+											label: type,
+											value: type,
+										};
+									})}
+									comboboxProps={{
+										zIndex: 3000,
+									}}
+									styles={
+										theme.textShadowsEnabled
+											? {
+													label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+												}
+											: undefined
+									}
+									renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+										return (
+											<Group>
+												{item.option.value}
+												{item.option.value === 'SSH' && <FaTerminal />}
+												{item.option.value === 'RDP' && <FaComputer />}
+												{item.option.value === 'VNC' && <FaDesktop />}
+											</Group>
+										);
+									}}
+									searchable
+									maxDropdownHeight={175}
+									onDropdownOpen={() => setIsOpen(true)}
+									onDropdownClose={() => setIsOpen(false)}
+									withAsterisk
+								/>
+							</Group>
 							<Group mt={'1rem'}>
 								<Button type='submit' color={'green'}>
 									Save