Added Guacamole Client type

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

@@ -1,10 +1,25 @@
-import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import {
+	ActionIcon,
+	Card,
+	Group,
+	Select,
+	Stack,
+	Text,
+	TextInput,
+	Tooltip,
+} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
+import {
+	cardClasses,
+	selectClasses,
+	textClasses,
+	textInputClasses,
+	toolTipClasses,
+} from 'styles';
 import type { GuacamoleClient } from 'types';
 
 function DebouncedGuacamoleClient({
@@ -17,7 +32,7 @@ function DebouncedGuacamoleClient({
 	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
-
+	const types: string[] = ['SSH', 'RDP', 'VNC'];
 	const [client, setClient] = useState<GuacamoleClient>(guacamoleClient);
 	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
@@ -114,6 +129,48 @@ function DebouncedGuacamoleClient({
 							: undefined
 					}
 				/>
+				<Select
+					label={'Category'}
+					className={selectClasses.settingsItem}
+					classNames={{
+						wrapper: selectClasses.menuSelectWrapper,
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+						dropdown: selectClasses.dropdown,
+					}}
+					mt={'.75rem'}
+					limit={100}
+					defaultSearchValue={guacamoleClient?.type}
+					data={types.map((type) => {
+						return {
+							label: type,
+							value: type,
+						};
+					})}
+					defaultValue={guacamoleClient?.type}
+					comboboxProps={{
+						zIndex: 3000,
+					}}
+					styles={
+						theme.textShadowsEnabled
+							? {
+									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+								}
+							: undefined
+					}
+					onChange={(value: string | null) => {
+						setUpdate({
+							...guacamoleClient,
+							type: value,
+						});
+					}}
+					searchable
+					maxDropdownHeight={175}
+					onDropdownOpen={() => setIsOpen(true)}
+					onDropdownClose={() => setIsOpen(false)}
+				/>
 			</Group>
 		</Card>
 	);

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