From aad78601c5fe1c6d597a498805e017522822c137 Mon Sep 17 00:00:00 2001
From: Avram Walden <aviemet@gmail.com>
Date: Tue, 2 Apr 2024 13:20:30 -0700
Subject: [PATCH] feat: fixes input typings

---
 app/frontend/Components/Flash/Flash.tsx       |  4 +-
 app/frontend/Components/Form/Form.tsx         | 13 +--
 .../Components/Form/Inputs/Checkbox.tsx       | 21 +++--
 .../Components/Form/Inputs/CurrencyInput.tsx  | 15 ++-
 .../Components/Form/Inputs/DateTime.tsx       | 26 ++++--
 .../Components/Form/Inputs/HiddenInput.tsx    | 13 +--
 .../Components/Form/Inputs/MultiSelect.tsx    | 38 ++++----
 .../Components/Form/Inputs/NumberInput.tsx    | 32 +++----
 .../Components/Form/Inputs/PasswordInput.tsx  | 17 ++--
 .../Components/Form/Inputs/RadioButtons.tsx   | 22 +++--
 .../Components/Form/Inputs/RichText.tsx       | 24 +++--
 .../Form/Inputs/SearchableDropdown.tsx        | 93 -------------------
 .../Components/Form/Inputs/Select.tsx         | 55 ++++++-----
 .../Components/Form/Inputs/Switch.tsx         | 61 +++++++-----
 .../Components/Form/Inputs/TextInput.tsx      | 23 +++--
 .../Components/Form/Inputs/Textarea.tsx       | 72 +++++++-------
 app/frontend/Components/Form/Inputs/index.ts  | 28 ++++++
 app/frontend/Components/Form/index.ts         | 15 +--
 app/frontend/Components/Inputs/Checkbox.tsx   |  6 +-
 .../Components/Inputs/CurrencyInput.tsx       |  4 +-
 app/frontend/Components/Inputs/DateTime.tsx   |  6 +-
 .../Components/Inputs/MultiSelect.tsx         |  6 +-
 .../Components/Inputs/NumberInput.tsx         |  6 +-
 .../Components/Inputs/PasswordInput.tsx       |  6 +-
 .../Components/Inputs/RadioButtons.tsx        |  6 +-
 app/frontend/Components/Inputs/RichText.tsx   |  9 +-
 .../Components/Inputs/SearchableDropdown.tsx  | 69 --------------
 app/frontend/Components/Inputs/Switch.tsx     | 14 ++-
 app/frontend/Components/Inputs/TextInput.tsx  |  6 +-
 app/frontend/Components/Inputs/Textarea.tsx   | 14 ++-
 app/frontend/Components/Inputs/index.ts       |  1 -
 .../Components/RichTextEditor/index.tsx       |  6 +-
 .../Table/Cell/HeadCellWithContext.tsx        |  4 +-
 .../Components/Table/ColumnPicker.tsx         |  5 +-
 app/frontend/Components/Table/Row/BodyRow.tsx |  4 +-
 app/frontend/Pages/Controls/Form.tsx          |  5 +-
 app/frontend/lib/hooks/usePageProps.ts        |  1 -
 app/frontend/types/inertia.d.ts               | 48 ----------
 .../types/serializers/Users/Share.d.ts        |  4 +-
 app/serializers/users/share_serializer.rb     |  1 +
 config/credentials.yml.enc                    |  1 -
 41 files changed, 329 insertions(+), 475 deletions(-)
 delete mode 100644 app/frontend/Components/Form/Inputs/SearchableDropdown.tsx
 create mode 100644 app/frontend/Components/Form/Inputs/index.ts
 delete mode 100644 app/frontend/Components/Inputs/SearchableDropdown.tsx
 delete mode 100644 app/frontend/types/inertia.d.ts
 delete mode 100644 config/credentials.yml.enc

diff --git a/app/frontend/Components/Flash/Flash.tsx b/app/frontend/Components/Flash/Flash.tsx
index d94be66..58a612f 100644
--- a/app/frontend/Components/Flash/Flash.tsx
+++ b/app/frontend/Components/Flash/Flash.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
-import { usePage } from '@inertiajs/react'
 import { showNotification } from '@mantine/notifications'
+import { usePageProps } from '@/lib/hooks'
 
 const Flash = () => {
-	const { flash } = usePage<SharedInertiaProps>().props
+	const { flash } = usePageProps()
 
 	useEffect(() => {
 		let key: keyof FlashMessage
diff --git a/app/frontend/Components/Form/Form.tsx b/app/frontend/Components/Form/Form.tsx
index bf096a8..6af5be9 100644
--- a/app/frontend/Components/Form/Form.tsx
+++ b/app/frontend/Components/Form/Form.tsx
@@ -1,24 +1,17 @@
 import React from 'react'
 import { Box } from '@mantine/core'
 import cx from 'clsx'
-import { Form as InertiaForm, type FormProps, type NestedObject } from 'use-inertia-form'
+import { Form as InertiaForm, type FormProps as FormProps, type NestedObject } from 'use-inertia-form'
 import * as classes from './Form.css'
 
-
-interface IFormProps<TForm> extends FormProps<TForm> {
-	grid?: boolean
-}
-
-export interface ExtendableFormProps<TForm> extends Omit<IFormProps<TForm>, 'data'> {}
-
 const Form = <TForm extends NestedObject>(
-	{ children, data, grid = true, className, railsAttributes = true, ...props }: IFormProps<TForm>,
+	{ children, data, className, railsAttributes = true, ...props }: FormProps<TForm>,
 ) => {
 	return (
 		<Box className={ cx('form') }>
 			<InertiaForm
 				data={ data }
-				className={ cx({ 'format-grid': grid }, classes.form, className) }
+				className={ cx(classes.form, className) }
 				railsAttributes={ railsAttributes }
 				{ ...props }
 			>
diff --git a/app/frontend/Components/Form/Inputs/Checkbox.tsx b/app/frontend/Components/Form/Inputs/Checkbox.tsx
index 3194049..a9e4a14 100644
--- a/app/frontend/Components/Form/Inputs/Checkbox.tsx
+++ b/app/frontend/Components/Form/Inputs/Checkbox.tsx
@@ -1,14 +1,16 @@
 import React, { forwardRef } from 'react'
 import Field from '../Field'
-import CheckboxInput, { type ICheckboxProps } from '@/Components/Inputs/Checkbox'
+import CheckboxInput, { type CheckboxProps } from '@/Components/Inputs/Checkbox'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IFormCheckboxProps extends Omit<ICheckboxProps, 'name'|'onBlur'|'onChange'|'defaultChecked'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormCheckboxProps
+	extends
+	Omit<CheckboxProps, InputConflicts>,
+	Omit<BaseFormInputProps<boolean>, 'onFocus'> {}
 
-const FormCheckboxComponent = forwardRef<HTMLInputElement, IFormCheckboxProps>((
+const FormCheckboxComponent = forwardRef<HTMLInputElement, FormCheckboxProps>((
 	{
 		name,
 		onChange,
@@ -18,19 +20,20 @@ const FormCheckboxComponent = forwardRef<HTMLInputElement, IFormCheckboxProps>((
 		className,
 		model,
 		field = true,
-		 ...props
+		...props
 	},
 	ref,
 ) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<boolean>({ name, model })
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setValue(e.target.checked)
-		if(onChange) onChange(e, form)
+		const checked = e.target.checked
+		setValue(checked)
+		onChange?.(checked, form)
 	}
 
 	const handleBlur = () => {
-		if(onBlur) onBlur(value, form)
+		onBlur?.(value, form)
 	}
 
 	return (
diff --git a/app/frontend/Components/Form/Inputs/CurrencyInput.tsx b/app/frontend/Components/Form/Inputs/CurrencyInput.tsx
index 517c448..4075e6d 100644
--- a/app/frontend/Components/Form/Inputs/CurrencyInput.tsx
+++ b/app/frontend/Components/Form/Inputs/CurrencyInput.tsx
@@ -1,13 +1,11 @@
 import React, { forwardRef } from 'react'
-import CurrencyInput, { type ICurrencyInputProps } from '@/Components/Inputs/CurrencyInput'
+import CurrencyInput, { type CurrencyInputProps } from '@/Components/Inputs/CurrencyInput'
 import Field from '../Field'
-import cx from 'clsx'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface INumberInputProps extends Omit<ICurrencyInputProps, 'name'|'onChange'|'onBlur'>, IInertiaInputProps {
-	field?: boolean
-}
+interface INumberInputProps extends Omit<CurrencyInputProps, InputConflicts>, BaseFormInputProps {}
 
 const FormInput = forwardRef<HTMLInputElement, INumberInputProps>((
 	{
@@ -15,9 +13,9 @@ const FormInput = forwardRef<HTMLInputElement, INumberInputProps>((
 		model,
 		onChange,
 		onBlur,
+		onFocus,
 		id,
 		required,
-		compact = false,
 		field = true,
 		...props
 	},
@@ -41,25 +39,24 @@ const FormInput = forwardRef<HTMLInputElement, INumberInputProps>((
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="text"
 					required={ required }
-					className={ cx({ compact }) }
 					errors={ !!error }
 				>
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<CurrencyInput
 				id={ id || inputId }
-				className={ cx({ compact }) }
 				name={ inputName }
 				value={ value }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ e => onFocus?.(e.target.value, form) }
 				error={ error }
 				ref={ ref }
 				{ ...props }
diff --git a/app/frontend/Components/Form/Inputs/DateTime.tsx b/app/frontend/Components/Form/Inputs/DateTime.tsx
index a76a1bf..811a3dc 100644
--- a/app/frontend/Components/Form/Inputs/DateTime.tsx
+++ b/app/frontend/Components/Form/Inputs/DateTime.tsx
@@ -1,11 +1,19 @@
 import React from 'react'
 import Field from '../Field'
-import DateTimeInput, { type IDateTimeProps } from '@/Components/Inputs/DateTime'
-import { useInertiaInput } from 'use-inertia-form'
+import DateTimeInput, { type DateTimeInputProps } from '@/Components/Inputs/DateTime'
+import { UseFormProps, useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IDateTimeFormProps extends Omit<IDateTimeProps, 'name'|'onChange'|'onBlur'>, IInertiaInputProps {
-	field?: boolean
+interface IDateTimeFormProps
+	extends
+	Omit<DateTimeInputProps, InputConflicts>,
+	Omit<BaseFormInputProps, InputConflicts> {
+
+	name: string
+	onChange: (date: Date, form: UseFormProps) => void
+	onBlur: (date: Date, form: UseFormProps) => void
+	onFocus: (date: Date, form: UseFormProps) => void
 }
 
 const DateTime = ({
@@ -13,6 +21,7 @@ const DateTime = ({
 	required,
 	onChange,
 	onBlur,
+	onFocus,
 	id,
 	model,
 	field = true,
@@ -23,11 +32,15 @@ const DateTime = ({
 	const handleChange = (date: Date) => {
 		setValue(date)
 
-		if(onChange) onChange(date, form)
+		onChange?.(date, form)
 	}
 
 	const handleBlur = () => {
-		if(onBlur) onBlur(value, form)
+		onBlur?.(value, form)
+	}
+
+	const handleFocus = () => {
+		onFocus?.(value, form)
 	}
 
 	return (
@@ -49,6 +62,7 @@ const DateTime = ({
 				value={ value }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ handleFocus }
 				required={ required }
 				error={ error }
 				{ ...props }
diff --git a/app/frontend/Components/Form/Inputs/HiddenInput.tsx b/app/frontend/Components/Form/Inputs/HiddenInput.tsx
index 1006ce8..db47b6d 100644
--- a/app/frontend/Components/Form/Inputs/HiddenInput.tsx
+++ b/app/frontend/Components/Form/Inputs/HiddenInput.tsx
@@ -2,14 +2,15 @@ import React, { forwardRef } from 'react'
 import { HiddenInput } from '@/Components/Inputs'
 import { useInertiaInput } from 'use-inertia-form'
 import { InputProps } from 'react-html-props'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface ITextInputProps extends Omit<InputProps, 'name'|'ref'|'onBlur'|'onChange'>, IInertiaInputProps {
-	name: string
-	model?: string
-}
+interface FormHiddenInputProps
+	extends
+	Omit<InputProps, InputConflicts>,
+	Omit<BaseFormInputProps, 'onFocus'|'onBlur'> {}
 
-const FormInput = forwardRef<HTMLInputElement, ITextInputProps>((
-	{ name, model, onChange, onBlur, id, ...props },
+const FormInput = forwardRef<HTMLInputElement, FormHiddenInputProps>((
+	{ name, model, onChange, id, ...props },
 	ref,
 ) => {
 	const { form, inputName, inputId, value, setValue } = useInertiaInput({ name, model })
diff --git a/app/frontend/Components/Form/Inputs/MultiSelect.tsx b/app/frontend/Components/Form/Inputs/MultiSelect.tsx
index 5e1b7d1..9b4404c 100644
--- a/app/frontend/Components/Form/Inputs/MultiSelect.tsx
+++ b/app/frontend/Components/Form/Inputs/MultiSelect.tsx
@@ -1,25 +1,32 @@
 import React from 'react'
 import { NestedObject, UseFormProps, useInertiaInput } from 'use-inertia-form'
-import { IFormInputProps } from '.'
 import { ConditionalWrapper } from '@/Components'
 import Field from '../Field'
-import MultiSelect, { type IMultiSelectProps } from '@/Components/Inputs/MultiSelect'
+import MultiSelect, { type MultiSelectProps } from '@/Components/Inputs/MultiSelect'
+import { type ComboboxData } from '@mantine/core'
+import { type BaseFormInputProps } from '.'
 
-type OmittedDropdownTypes = 'name'|'onBlur'|'onChange'|'onDropdownOpen'|'onDropdownClose'
-export interface IFormDropdownProps<TForm extends NestedObject = NestedObject>
-	extends Omit<IMultiSelectProps, OmittedDropdownTypes>,
-	IFormInputProps<string[], TForm> {
-	onDropdownOpen?: (form: UseFormProps<any>) => void
-	onDropdownClose?: (form: UseFormProps<any>) => void
+type OmittedOverwrittenTypes = 'onFocus'|'onBlur'|'onChange'|'onClear'|'onDropdownOpen'|'onDropdownClose'|'onOptionSubmit'
+export interface FormMultiSelectProps<TForm extends NestedObject = NestedObject>
+	extends Omit<MultiSelectProps, OmittedOverwrittenTypes|'name'>,
+	Omit<BaseFormInputProps, OmittedOverwrittenTypes> {
+
+	onChange?: (values: string[], options: ComboboxData, form: UseFormProps<TForm>) => void
+	onBlur?: (values: string[], options: ComboboxData, form: UseFormProps<TForm>) => void
+	onFocus?: (values: string[], options: ComboboxData, form: UseFormProps<TForm>) => void
+	onClear?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onDropdownOpen?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onDropdownClose?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onOptionSubmit?: (values: string[], options: ComboboxData, form: UseFormProps<TForm>) => void
 }
 
 const MultiSelectComponent = <TForm extends NestedObject = NestedObject>(
 	{
+		name,
 		options = [],
 		label,
 		required,
 		id,
-		name,
 		errorKey,
 		model,
 		field = true,
@@ -28,30 +35,31 @@ const MultiSelectComponent = <TForm extends NestedObject = NestedObject>(
 		onDropdownOpen,
 		onDropdownClose,
 		...props
-	}: IFormDropdownProps<TForm>,
+	}: FormMultiSelectProps<TForm>,
 ) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<string[], TForm>({ name, model, errorKey })
 
 	const handleBlur = () => {
-		if(onBlur) onBlur(value, form)
+		onBlur?.(value, options || [],  form)
 	}
 
 	const handleChange = (values: string[]) => {
 		setValue(values)
 
-		onChange?.(values, form)
+		onChange?.(values, options || [], form)
 	}
 
 	const handleDropdownOpen = () => {
-		if(onDropdownOpen) onDropdownOpen(form)
+		onDropdownOpen?.(options || [],form)
 	}
 
 	const handleDropdownClose = () => {
-		if(onDropdownClose) onDropdownClose(form)
+		onDropdownClose?.(options || [],form)
 	}
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="select"
@@ -61,7 +69,6 @@ const MultiSelectComponent = <TForm extends NestedObject = NestedObject>(
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<MultiSelect
 				// Add "search" suffix to prevent password managers trying to autofill dropdowns
@@ -76,7 +83,6 @@ const MultiSelectComponent = <TForm extends NestedObject = NestedObject>(
 				onChange={ handleChange }
 				onDropdownClose={ handleDropdownClose }
 				onDropdownOpen={ handleDropdownOpen }
-				wrapper={ false }
 				{ ...props }
 			/>
 		</ConditionalWrapper>
diff --git a/app/frontend/Components/Form/Inputs/NumberInput.tsx b/app/frontend/Components/Form/Inputs/NumberInput.tsx
index 9726174..24907bb 100644
--- a/app/frontend/Components/Form/Inputs/NumberInput.tsx
+++ b/app/frontend/Components/Form/Inputs/NumberInput.tsx
@@ -1,62 +1,54 @@
 import React, { forwardRef } from 'react'
-import NumberInput, { type INumberInputProps } from '@/Components/Inputs/NumberInput'
+import NumberInput, { type NumberInputProps } from '@/Components/Inputs/NumberInput'
 import Field from '../Field'
-import cx from 'clsx'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface INumberFormInputProps extends Omit<INumberInputProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormNumberInputProps extends Omit<NumberInputProps, InputConflicts>, BaseFormInputProps<number> {}
 
-const FormInput = forwardRef<HTMLInputElement, INumberFormInputProps>((
+const FormInput = forwardRef<HTMLInputElement, FormNumberInputProps>((
 	{
 		name,
 		model,
 		onChange,
 		onBlur,
+		onFocus,
 		id,
 		required,
-		compact = false,
 		field = true,
 		...props
 	},
 	ref,
 ) => {
-	const { form, inputName, inputId, value, setValue, error } = useInertiaInput({ name, model })
+	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<number>({ name, model })
 
-	const handleChange = (e: number) => {
-		const v = e
-		setValue(v)
+	const handleChange = (val: string|number) => {
+		setValue(Number(val))
 
-		if(onChange) onChange(v, form)
-	}
-
-	const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
-		if(onBlur) onBlur(value as number, form)
+		onChange?.(Number(val), form)
 	}
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="number"
 					required={ required }
-					className={ cx({ compact }) }
 					errors={ !!error }
 				>
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<NumberInput
 				id={ id || inputId }
-				className={ cx({ compact }) }
 				name={ inputName }
 				value={ value as number }
 				onChange={ handleChange }
-				onBlur={ handleBlur }
+				onBlur={ () => onBlur?.(value, form) }
+				onFocus={ () => onFocus?.(value, form) }
 				error={ error }
 				ref={ ref }
 				{ ...props }
diff --git a/app/frontend/Components/Form/Inputs/PasswordInput.tsx b/app/frontend/Components/Form/Inputs/PasswordInput.tsx
index 2a40b25..75982b8 100644
--- a/app/frontend/Components/Form/Inputs/PasswordInput.tsx
+++ b/app/frontend/Components/Form/Inputs/PasswordInput.tsx
@@ -1,23 +1,21 @@
 import React, { forwardRef } from 'react'
-import PasswordInput, { type IPasswordInputProps } from '@/Components/Inputs/PasswordInput'
+import PasswordInput, { type PasswordInputProps } from '@/Components/Inputs/PasswordInput'
 import Field from '../Field'
-import cx from 'clsx'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IPasswordFormInputProps extends Omit<IPasswordInputProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormPasswordInputProps extends Omit<PasswordInputProps, InputConflicts>, BaseFormInputProps {}
 
-const FormInput = forwardRef<HTMLInputElement, IPasswordFormInputProps>((
+const FormInput = forwardRef<HTMLInputElement, FormPasswordInputProps>((
 	{
 		name,
 		model,
 		onChange,
 		onBlur,
+		onFocus,
 		id,
 		required,
-		compact = false,
 		field = true,
 		...props
 	},
@@ -41,25 +39,24 @@ const FormInput = forwardRef<HTMLInputElement, IPasswordFormInputProps>((
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="password"
 					required={ required }
-					className={ cx({ compact }) }
 					errors={ !!error }
 				>
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<PasswordInput
 				id={ id || inputId }
-				className={ cx({ compact }) }
 				name={ inputName }
 				value={ value }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ e => onFocus?.(e.target.value, form) }
 				error={ error }
 				ref={ ref }
 				{ ...props }
diff --git a/app/frontend/Components/Form/Inputs/RadioButtons.tsx b/app/frontend/Components/Form/Inputs/RadioButtons.tsx
index 183c74f..f19079f 100644
--- a/app/frontend/Components/Form/Inputs/RadioButtons.tsx
+++ b/app/frontend/Components/Form/Inputs/RadioButtons.tsx
@@ -1,12 +1,11 @@
 import React from 'react'
-import RadioButtons, { type IRadioButtonsProps } from '@/Components/Inputs/RadioButtons'
+import RadioButtons, { type RadioButtonsProps } from '@/Components/Inputs/RadioButtons'
 import Field from '../Field'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IFormRadioButtonsProps extends Omit<IRadioButtonsProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormRadioButtonsProps extends Omit<RadioButtonsProps, InputConflicts>, BaseFormInputProps {}
 
 const FormRadioButtons = ({
 	options,
@@ -15,24 +14,29 @@ const FormRadioButtons = ({
 	model,
 	onChange,
 	onBlur,
+	onFocus,
 	required,
 	field = true,
 	...props
-}: IFormRadioButtonsProps) => {
+}: FormRadioButtonsProps) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<string>({ name, model })
 
 	const handleChange = (v: string) => {
 		setValue(v)
-
-		if(onChange) onChange(v, form)
+		onChange?.(v, form)
 	}
 
 	const handleBlur = (e: React.FocusEvent<HTMLDivElement, Element>) => {
-		if(onBlur) onBlur(value, form)
+		onBlur?.(value, form)
+	}
+
+	const handleFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => {
+		onFocus?.(value, form)
 	}
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="radio"
@@ -42,7 +46,6 @@ const FormRadioButtons = ({
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<RadioButtons
 				options={ options }
@@ -51,6 +54,7 @@ const FormRadioButtons = ({
 				value={ value }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ handleFocus }
 				{ ...props }
 			/>
 		</ConditionalWrapper>
diff --git a/app/frontend/Components/Form/Inputs/RichText.tsx b/app/frontend/Components/Form/Inputs/RichText.tsx
index dfe9ffc..fc9bf6e 100644
--- a/app/frontend/Components/Form/Inputs/RichText.tsx
+++ b/app/frontend/Components/Form/Inputs/RichText.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import Field from '../Field'
-import RichTextInput, { type IRichTextProps } from '@/Components/Inputs/RichText'
+import RichTextInput, { type RichTextInputProps } from '@/Components/Inputs/RichText'
 import cx from 'clsx'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IRichTextFormProps extends Omit<IRichTextProps, 'name'|'onBlur'|'onChange'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormRichTextInputProps extends Omit<RichTextInputProps, InputConflicts>, BaseFormInputProps {}
 
 const RichText = ({
 	label,
@@ -16,22 +15,29 @@ const RichText = ({
 	id,
 	onChange,
 	onBlur,
+	onFocus,
 	model,
 	field = true,
 	...props
-}: IRichTextFormProps) => {
+}: FormRichTextInputProps) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<string>({ name, model })
 
-	const handleChange = (v, delta, sources, editor) => {
+	const handleChange = (v: string) => {
 		setValue(v)
-		if(onChange) onChange(v, form)
+		onChange?.(v, form)
 	}
+
 	const handleBlur = () => {
-		if(onBlur) onBlur(value, form )
+		onBlur?.(value, form )
+	}
+
+	const handleFocus = () => {
+		onFocus?.(value, form )
 	}
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="textarea"
@@ -41,7 +47,6 @@ const RichText = ({
 					{ children }
 				</Field>
 			) }
-			condition={ field }
 		>
 			<>
 				{ label && <label className={ cx({ required }) } htmlFor={ id || inputId }>
@@ -52,6 +57,7 @@ const RichText = ({
 					name={ inputName }
 					onChange={ handleChange }
 					onBlur={ handleBlur }
+					onFocus={ handleFocus }
 					value={ value }
 					{ ...props }
 				/>
diff --git a/app/frontend/Components/Form/Inputs/SearchableDropdown.tsx b/app/frontend/Components/Form/Inputs/SearchableDropdown.tsx
deleted file mode 100644
index 025106f..0000000
--- a/app/frontend/Components/Form/Inputs/SearchableDropdown.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { forwardRef } from 'react'
-import Field from '../Field'
-import SearchableDropdownInput, { type ISearchableDropdownProps } from '@/Components/Inputs/SearchableDropdown'
-import { ConditionalWrapper, Group } from '@/Components'
-import { router } from '@inertiajs/react'
-import { useInertiaInput, type UseFormProps } from 'use-inertia-form'
-
-type OmittedDropdownTypes = 'name'|'defaultValue'|'onBlur'|'onChange'|'onDropdownOpen'|'onDropdownClose'
-interface IInputProps extends Omit<ISearchableDropdownProps, OmittedDropdownTypes>, IInertiaInputProps {
-	defaultValue?: string
-	onDropdownOpen?: (form: UseFormProps<any>) => void
-	onDropdownClose?: (form: UseFormProps<any>) => void
-	fetchOnOpen?: string
-	newForm?: React.ReactElement
-	field?: boolean
-}
-
-const SearchableDropdown = forwardRef<HTMLInputElement, IInputProps>((
-	{
-		name,
-		label,
-		model,
-		required,
-		defaultValue,
-		onChange,
-		onBlur,
-		onDropdownOpen,
-		onDropdownClose,
-		fetchOnOpen,
-		newForm,
-		field = true,
-		id,
-		errorKey,
-		...props
-	},
-	ref,
-) => {
-	const { form, inputName, inputId, value, setValue, error } = useInertiaInput({ name, model, errorKey })
-
-	const handleChange = (option: string|null) => {
-		setValue(option ? option : '')
-		if(onChange) onChange(option, form)
-	}
-
-	const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
-		if(onChange) onChange(value, form)
-	}
-
-	const handleDropdownOpen = () => {
-		if(fetchOnOpen) router.reload({ only: [fetchOnOpen] })
-		if(onDropdownOpen) onDropdownOpen(form)
-	}
-
-	const handleDropdownClose = () => {
-		if(onDropdownClose) onDropdownClose(form)
-	}
-
-	return (
-		<Group noWrap align="baseline" position="apart">
-			<>
-				<ConditionalWrapper
-					wrapper={ children => (
-						<Field
-							type="select"
-							required={ required }
-							errors={ !!error }
-						>
-							{ children }
-						</Field>
-					) }
-					condition={ field }
-				>
-					<SearchableDropdownInput
-						ref={ ref }
-						id={ id || inputId }
-						name={ inputName }
-						label={ label }
-						value={ String(value) }
-						onChange={ handleChange }
-						onBlur={ handleBlur }
-						onDropdownOpen={ handleDropdownOpen }
-						onDropdownClose={ handleDropdownClose }
-						defaultValue={ defaultValue ?? String(value) }
-						error={ error }
-						{ ...props }
-					/>
-				</ConditionalWrapper>
-			</>
-		</Group>
-	)
-})
-
-export default SearchableDropdown
diff --git a/app/frontend/Components/Form/Inputs/Select.tsx b/app/frontend/Components/Form/Inputs/Select.tsx
index 47cb7a7..9c072b2 100644
--- a/app/frontend/Components/Form/Inputs/Select.tsx
+++ b/app/frontend/Components/Form/Inputs/Select.tsx
@@ -4,21 +4,25 @@ import SelectInput, { type SelectProps } from '@/Components/Inputs/Select'
 import { ConditionalWrapper, Group } from '@/Components'
 import { ModalFormButton } from '@/Components/Button'
 import { useInertiaInput, type UseFormProps, NestedObject } from 'use-inertia-form'
-import { ComboboxData } from '@mantine/core'
+import { type ComboboxData, type ComboboxItem, type ComboboxItemGroup } from '@mantine/core'
+import { type BaseFormInputProps } from '.'
 
-type OmittedDropdownTypes = 'name'|'defaultValue'|'onBlur'|'onChange'|'onDropdownOpen'|'onDropdownClose'|'onSelect'
-export interface ISelectFormProps<TForm extends NestedObject = NestedObject>
+type SelectOption = string | ComboboxItem | ComboboxItemGroup<string | ComboboxItem>
+
+type OmittedOverwrittenTypes = 'onFocus'|'onBlur'|'onChange'|'onClear'|'onDropdownOpen'|'onDropdownClose'|'onOptionSubmit'
+export interface FormSelectProps<TForm extends NestedObject = NestedObject>
 	extends
-	Omit<SelectProps, OmittedDropdownTypes>,
-	IInertiaInputProps {
+	Omit<SelectProps, OmittedOverwrittenTypes|'name'|'defaultValue'>,
+	Omit<BaseFormInputProps, OmittedOverwrittenTypes> {
+
 	defaultValue?: string
-	onChange?: (option: ComboboxData|null, form: UseFormProps<TForm>) => void
-	onClear?: (form: UseFormProps<TForm>) => void
-	onDropdownOpen?: (form: UseFormProps<TForm>) => void
-	onDropdownClose?: (form: UseFormProps<TForm>) => void
-	onSelect?: (form: UseFormProps<TForm>) => void
-	onOptionSubmit?: (option: ComboboxData|null, form: UseFormProps<TForm>) => void
-	onSearchChange?: (value: string, form: UseFormProps<TForm>) => void
+	onChange?: (option: SelectOption|null, options: ComboboxData, form: UseFormProps<TForm>) => void
+	onBlur?: (option: SelectOption|null, options: ComboboxData, form: UseFormProps<TForm>) => void
+	onFocus?: (option: SelectOption|null, options: ComboboxData, form: UseFormProps<TForm>) => void
+	onClear?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onDropdownOpen?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onDropdownClose?: (options: ComboboxData, form: UseFormProps<TForm>) => void
+	onOptionSubmit?: (option: SelectOption|null, options: ComboboxData, form: UseFormProps<TForm>) => void
 	endpoint?: string
 	newForm?: React.ReactElement
 	field?: boolean
@@ -34,9 +38,11 @@ const Select = <TForm extends NestedObject = NestedObject>(
 		onSearchChange,
 		onChange,
 		onBlur,
+		onFocus,
+		onClear,
 		onDropdownOpen,
 		onDropdownClose,
-		onSelect,
+		onOptionSubmit,
 		fetchOnOpen,
 		endpoint,
 		newForm,
@@ -45,34 +51,38 @@ const Select = <TForm extends NestedObject = NestedObject>(
 		errorKey,
 		options,
 		...props
-	}: ISelectFormProps<TForm>,
+	}: FormSelectProps<TForm>,
 ) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<string, TForm>({ name, model, errorKey })
 
 	const handleChange = (option: string|null) => {
 		setValue(option ? option : '')
 
-		onChange?.(option, form)
+		onChange?.(option, options || [], form)
 	}
 
 	const handleBlur = () => {
-		onBlur?.(String(value), form)
+		onBlur?.(String(value), options || [],  form)
+	}
+
+	const handleFocus = () => {
+		onFocus?.(String(value), options || [], form)
 	}
 
 	const handleDropdownOpen = () => {
-		onDropdownOpen?.(form)
+		onDropdownOpen?.(options || [], form)
 	}
 
 	const handleDropdownClose = () => {
-		onDropdownClose?.(form)
+		onDropdownClose?.(options || [], form)
 	}
 
 	const handleNewFormSuccess = (data: { id: string|number }) => {
 		setValue(String(data.id))
 	}
 
-	const handleSelect = () => {
-		onSelect?.(form)
+	const handleClear = () => {
+		onClear?.(options || [], form)
 	}
 
 	return (
@@ -91,7 +101,7 @@ const Select = <TForm extends NestedObject = NestedObject>(
 		>
 			<>
 				<ConditionalWrapper
-					condition={ field }
+					condition={ props.hidden !== true && field }
 					wrapper={ children => (
 						<Field
 							type="select"
@@ -111,9 +121,10 @@ const Select = <TForm extends NestedObject = NestedObject>(
 						value={ String(value) }
 						onChange={ handleChange }
 						onBlur={ handleBlur }
+						onFocus={ handleFocus }
 						onDropdownClose={ handleDropdownClose }
 						onDropdownOpen={ handleDropdownOpen }
-						onSelect={ handleSelect }
+						onClear={ handleClear }
 						defaultValue={ defaultValue ?? String(value) }
 						error={ error }
 						options={ options }
diff --git a/app/frontend/Components/Form/Inputs/Switch.tsx b/app/frontend/Components/Form/Inputs/Switch.tsx
index ce8c3f8..da2b905 100644
--- a/app/frontend/Components/Form/Inputs/Switch.tsx
+++ b/app/frontend/Components/Form/Inputs/Switch.tsx
@@ -1,43 +1,58 @@
 import React, { forwardRef } from 'react'
 import Field from '../Field'
-import SwitchInput, { type ISwitchProps } from '@/Components/Inputs/Switch'
+import SwitchInput, { type SwitchProps } from '@/Components/Inputs/Switch'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IFormSwitchProps extends Omit<ISwitchProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormSwitchProps extends Omit<SwitchProps, InputConflicts>, BaseFormInputProps<boolean> {}
 
-const FormSwitchComponent = forwardRef<HTMLInputElement, IFormSwitchProps>((
-	{ name, onChange, onBlur, id, required, model, field = true, ...props },
+const FormSwitchComponent = forwardRef<HTMLInputElement, FormSwitchProps>((
+	{
+		name,
+		onChange,
+		onBlur,
+		onFocus,
+		id,
+		required,
+		model,
+		field = true,
+		...props
+	},
 	ref,
 ) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<boolean>({ name, model })
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setValue(e.target.checked)
-		if(onChange) onChange(e, form)
+		const value = e.target.checked
+		setValue(value)
+
+		onChange?.(value, form)
 	}
 
-	const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setValue(e.target.checked)
-		if(onBlur) onBlur(e, form)
+	const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
+		const value = e.target.checked
+		setValue(value)
+
+		onBlur?.(value, form)
 	}
 
 	return (
-		<ConditionalWrapper wrapper={ children => (
-			<Field
-				type="checkbox"
-				required={ required }
-				errors={ !!error }
-				grid={ false }
-			>
-				{ children }
-			</Field>
-		) }
-		condition={ field }
+		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
+			wrapper={ children => (
+				<Field
+					type="checkbox"
+					required={ required }
+					errors={ !!error }
+					grid={ false }
+				>
+					{ children }
+				</Field>
+			) }
 		>
 			<SwitchInput
+				ref={ ref }
 				id={ id || inputId }
 				name={ inputName }
 				defaultChecked={ Boolean(value) }
@@ -45,8 +60,8 @@ const FormSwitchComponent = forwardRef<HTMLInputElement, IFormSwitchProps>((
 				value={ name }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ e => onFocus?.(e.target.checked, form) }
 				error={ error }
-				ref={ ref }
 				{ ...props }
 			/>
 		</ConditionalWrapper>
diff --git a/app/frontend/Components/Form/Inputs/TextInput.tsx b/app/frontend/Components/Form/Inputs/TextInput.tsx
index b263251..d4893ae 100644
--- a/app/frontend/Components/Form/Inputs/TextInput.tsx
+++ b/app/frontend/Components/Form/Inputs/TextInput.tsx
@@ -1,25 +1,24 @@
 import React, { forwardRef } from 'react'
-import TextInput, { type ITextInputProps } from '@/Components/Inputs/TextInput'
-import cx from 'clsx'
+import TextInput, { type TextInputProps } from '@/Components/Inputs/TextInput'
 import Field from '../Field'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface ITextFormInputProps extends Omit<ITextInputProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormTextInputProps extends Omit<TextInputProps, InputConflicts>, BaseFormInputProps {}
 
-const FormInput = forwardRef<HTMLInputElement, ITextFormInputProps>((
+const FormInput = forwardRef<HTMLInputElement, FormTextInputProps>((
 	{
 		name,
 		model,
 		onChange,
 		onBlur,
+		onFocus,
 		id,
 		required,
-		compact = false,
 		errorKey,
 		field = true,
+		wrapperProps,
 		...props
 	},
 	ref,
@@ -30,37 +29,37 @@ const FormInput = forwardRef<HTMLInputElement, ITextFormInputProps>((
 		const value = e.target.value
 		setValue(value)
 
-		if(onChange) onChange(value, form)
+		onChange?.(value, form)
 	}
 
 	const handleBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
 		const value = e.target.value
 		setValue(value)
 
-		if(onBlur) onBlur(value, form)
+		onBlur?.(value, form)
 	}
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="text"
 					required={ required }
-					className={ cx({ compact }) }
 					errors={ !!error }
+					{ ...wrapperProps }
 				>
 					{ children }
 				</Field>
 			) }
-			condition={ props.hidden !== true && field }
 		>
 			<TextInput
 				id={ id || inputId }
-				className={ cx({ compact }) }
 				name={ inputName }
 				value={ value }
 				onChange={ handleChange }
 				onBlur={ handleBlur }
+				onFocus={ e => onFocus?.(e.target.value, form) }
 				error={ errorKey ? form.getError(errorKey) : error }
 				ref={ ref }
 				{ ...props }
diff --git a/app/frontend/Components/Form/Inputs/Textarea.tsx b/app/frontend/Components/Form/Inputs/Textarea.tsx
index c146db6..5bfebe5 100644
--- a/app/frontend/Components/Form/Inputs/Textarea.tsx
+++ b/app/frontend/Components/Form/Inputs/Textarea.tsx
@@ -1,26 +1,28 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Field from '../Field'
-import TextareaInput, { type ITextareaProps } from '@/Components/Inputs/Textarea'
-import cx from 'clsx'
+import TextareaInput, { type TextareaProps } from '@/Components/Inputs/Textarea'
 import { useInertiaInput } from 'use-inertia-form'
 import ConditionalWrapper from '@/Components/ConditionalWrapper'
+import { type BaseFormInputProps, type InputConflicts } from '.'
 
-interface IFormTextareaProps extends Omit<ITextareaProps, 'onBlur'|'onChange'|'name'>, IInertiaInputProps {
-	field?: boolean
-}
+interface FormTextareaProps extends Omit<TextareaProps, InputConflicts>, BaseFormInputProps {}
 
-const Textarea = ({
-	label,
-	name,
-	required,
-	onChange,
-	onBlur,
-	id,
-	model,
-	errorKey,
-	field = true,
-	...props
-}: IFormTextareaProps) => {
+const Textarea = forwardRef<HTMLTextAreaElement,FormTextareaProps>((
+	{
+		name,
+		required,
+		onChange,
+		onBlur,
+		onFocus,
+		id,
+		model,
+		errorKey,
+		field = true,
+		wrapperProps,
+		...props
+	},
+	ref,
+) => {
 	const { form, inputName, inputId, value, setValue, error } = useInertiaInput<string>({ name, model })
 
 	const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -33,35 +35,33 @@ const Textarea = ({
 
 	return (
 		<ConditionalWrapper
+			condition={ props.hidden !== true && field }
 			wrapper={ children => (
 				<Field
 					type="textarea"
 					required={ required }
 					errors={ !!error }
+					{ ...wrapperProps }
 				>
 					{ children }
 				</Field>
 			) }
-			condition={ props.hidden !== true && field }
 		>
-			<>
-				{ label && <label className={ cx({ required }) } htmlFor={ id || inputId }>
-					{ label }
-				</label> }
-				<TextareaInput
-					id={ id || inputId }
-					name={ inputName }
-					onChange={ handleChange }
-					onBlur={ handleBlur }
-					value={ value }
-					required={ required }
-					error={ errorKey ? form.getError(errorKey) : error }
-					{ ...props }
-				>
-				</TextareaInput>
-			</>
+			<TextareaInput
+				ref={ ref }
+				id={ id || inputId }
+				name={ inputName }
+				onChange={ handleChange }
+				onBlur={ handleBlur }
+				onFocus={ e => onFocus?.(e.target.value, form) }
+				value={ value }
+				required={ required }
+				error={ errorKey ? form.getError(errorKey) : error }
+				{ ...props }
+			>
+			</TextareaInput>
 		</ConditionalWrapper>
 	)
-}
+})
 
 export default Textarea
diff --git a/app/frontend/Components/Form/Inputs/index.ts b/app/frontend/Components/Form/Inputs/index.ts
new file mode 100644
index 0000000..f647dcb
--- /dev/null
+++ b/app/frontend/Components/Form/Inputs/index.ts
@@ -0,0 +1,28 @@
+import { type UseFormProps } from 'use-inertia-form'
+
+export { default as TextInput } from './TextInput'
+export { default as NumberInput } from './NumberInput'
+export { default as PasswordInput } from './PasswordInput'
+export { default as CurrencyInput } from './CurrencyInput'
+export { default as HiddenInput } from './HiddenInput'
+export { default as DateTime } from './DateTime'
+export { default as Textarea } from './Textarea'
+export { default as RichText } from './RichText'
+export { default as Checkbox } from './Checkbox'
+export { default as Select } from './Select'
+export { default as Switch } from './Switch'
+export { default as RadioButtons } from './RadioButtons'
+
+export type InputConflicts = 'name'|'onChange'|'onBlur'|'onFocus'
+export interface BaseFormInputProps<T = string> {
+	name: string
+	model?: string
+	errorKey?: string
+	field?: boolean
+	required?: boolean
+	hidden?: boolean
+	onChange?: (value: T, form: UseFormProps) => void
+	onBlur?: (value: T, form: UseFormProps) => void
+	onFocus?: (value: T, form: UseFormProps) => void
+	wrapperProps?: Record<string, any>
+}
diff --git a/app/frontend/Components/Form/index.ts b/app/frontend/Components/Form/index.ts
index 4aa804e..bf1826a 100644
--- a/app/frontend/Components/Form/index.ts
+++ b/app/frontend/Components/Form/index.ts
@@ -1,17 +1,4 @@
 export { default as Form } from './Form'
-export { default as TextInput } from './Inputs/TextInput'
-export { default as NumberInput } from './Inputs/NumberInput'
-export { default as PasswordInput } from './Inputs/PasswordInput'
-export { default as CurrencyInput } from './Inputs/CurrencyInput'
-export { default as HiddenInput } from './Inputs/HiddenInput'
-export { default as DateTime } from './Inputs/DateTime'
-export { default as Textarea } from './Inputs/Textarea'
-export { default as RichText } from './Inputs/RichText'
-export { default as Checkbox } from './Inputs/Checkbox'
-export { default as Select } from './Inputs/Select'
-export { default as Switch } from './Inputs/Switch'
-export { default as RadioButtons } from './Inputs/RadioButtons'
-export { default as SearchableDropdown } from './Inputs/SearchableDropdown'
 export { default as Submit } from './Submit'
 export { default as FormGroup } from './FormGroup'
 export { default as Field } from './Field'
@@ -19,4 +6,4 @@ export { default as FieldsFor } from './FieldsFor'
 export { default as DynamicInputs } from './DynamicInputs'
 export { default as FormConsumer } from './Components/FormConsumer'
 
-export { type ExtendableFormProps } from './Form'
+export * from './Inputs'
diff --git a/app/frontend/Components/Inputs/Checkbox.tsx b/app/frontend/Components/Inputs/Checkbox.tsx
index 6a935d6..90452ea 100644
--- a/app/frontend/Components/Inputs/Checkbox.tsx
+++ b/app/frontend/Components/Inputs/Checkbox.tsx
@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react'
-import { Checkbox, type CheckboxProps } from '@mantine/core'
+import { Checkbox, type CheckboxProps as MantineCheckboxProps } from '@mantine/core'
 
-export interface ICheckboxProps extends CheckboxProps {}
+export interface CheckboxProps  extends MantineCheckboxProps {}
 
-const CheckboxComponent = forwardRef<HTMLInputElement, ICheckboxProps>((
+const CheckboxComponent = forwardRef<HTMLInputElement, CheckboxProps>((
 	{ id, name, ...props },
 	ref,
 ) => {
diff --git a/app/frontend/Components/Inputs/CurrencyInput.tsx b/app/frontend/Components/Inputs/CurrencyInput.tsx
index d69441b..d0a9556 100644
--- a/app/frontend/Components/Inputs/CurrencyInput.tsx
+++ b/app/frontend/Components/Inputs/CurrencyInput.tsx
@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react'
 import { TextInput, type TextInputProps } from '@mantine/core'
 import Label from '../Label'
 
-export interface ICurrencyInputProps extends TextInputProps {}
+export interface CurrencyInputProps extends TextInputProps {}
 
-const TextInputComponent = forwardRef<HTMLInputElement, ICurrencyInputProps>((
+const TextInputComponent = forwardRef<HTMLInputElement, CurrencyInputProps>((
 	{ label, name, value, required = false, id, pattern, size = 'md', ...props },
 	ref,
 ) => {
diff --git a/app/frontend/Components/Inputs/DateTime.tsx b/app/frontend/Components/Inputs/DateTime.tsx
index d2c5735..96acbdc 100644
--- a/app/frontend/Components/Inputs/DateTime.tsx
+++ b/app/frontend/Components/Inputs/DateTime.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import Label from '../Label'
-import { DateTimePicker, DateTimePickerProps } from '@mantine/dates'
+import { DateTimePicker, type DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates'
 import { isEmpty } from 'lodash'
 
-export interface IDateTimeProps extends DateTimePickerProps {
+export interface DateTimeInputProps extends MantineDateTimePickerProps {
 	name?: string
 	id?: string
 	value?: Date
@@ -21,7 +21,7 @@ const DateTime = ({
 	radius = 'xs',
 	valueFormat = 'L LT',
 	...props
-}: IDateTimeProps) => {
+}: DateTimeInputProps) => {
 	const inputId = id || name
 
 	return (
diff --git a/app/frontend/Components/Inputs/MultiSelect.tsx b/app/frontend/Components/Inputs/MultiSelect.tsx
index 3b52ead..d69e99b 100644
--- a/app/frontend/Components/Inputs/MultiSelect.tsx
+++ b/app/frontend/Components/Inputs/MultiSelect.tsx
@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react'
-import { MultiSelect, type ComboboxData, type MultiSelectProps } from '@mantine/core'
+import { MultiSelect, type ComboboxData, type MultiSelectProps as MantineMultiSelectProps } from '@mantine/core'
 import Label from '../Label'
 import { router } from '@inertiajs/react'
 import { coerceArray } from '@/lib'
 
-export interface IMultiSelectProps extends Omit<MultiSelectProps, 'data'> {
+export interface MultiSelectProps extends Omit<MantineMultiSelectProps, 'data'> {
 	options?: ComboboxData
 	fetchOnOpen?: string
 }
 
-const MultiSelectComponent = forwardRef<HTMLInputElement, IMultiSelectProps>((
+const MultiSelectComponent = forwardRef<HTMLInputElement, MultiSelectProps>((
 	{
 		options = [],
 		label,
diff --git a/app/frontend/Components/Inputs/NumberInput.tsx b/app/frontend/Components/Inputs/NumberInput.tsx
index e6dc4c1..6862ab1 100644
--- a/app/frontend/Components/Inputs/NumberInput.tsx
+++ b/app/frontend/Components/Inputs/NumberInput.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
-import { NumberInput, type NumberInputProps } from '@mantine/core'
+import { NumberInput, type NumberInputProps as MantineNumberInputProps } from '@mantine/core'
 import Label from '../Label'
 
-export interface INumberInputProps extends NumberInputProps {}
+export interface NumberInputProps extends MantineNumberInputProps {}
 
-const NumberInputComponent = forwardRef<HTMLInputElement, INumberInputProps>((
+const NumberInputComponent = forwardRef<HTMLInputElement, NumberInputProps>((
 	{ label, name, required = false, value, id, size = 'md', ...props },
 	ref,
 ) => {
diff --git a/app/frontend/Components/Inputs/PasswordInput.tsx b/app/frontend/Components/Inputs/PasswordInput.tsx
index 2e412c7..ff199cb 100644
--- a/app/frontend/Components/Inputs/PasswordInput.tsx
+++ b/app/frontend/Components/Inputs/PasswordInput.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
-import { PasswordInput, type PasswordInputProps } from '@mantine/core'
+import { PasswordInput, type PasswordInputProps as MantineMantineRichTextEditorProps } from '@mantine/core'
 import Label from '../Label'
 
-export interface IPasswordInputProps extends PasswordInputProps {}
+export interface PasswordInputProps extends MantineMantineRichTextEditorProps {}
 
-const PasswordInputComponent = forwardRef<HTMLInputElement, IPasswordInputProps>((
+const PasswordInputComponent = forwardRef<HTMLInputElement, PasswordInputProps>((
 	{ label, name, required = false, id, size = 'md', ...props },
 	ref,
 ) => {
diff --git a/app/frontend/Components/Inputs/RadioButtons.tsx b/app/frontend/Components/Inputs/RadioButtons.tsx
index 5caf072..0f8593d 100644
--- a/app/frontend/Components/Inputs/RadioButtons.tsx
+++ b/app/frontend/Components/Inputs/RadioButtons.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { SegmentedControl, SegmentedControlProps } from '@mantine/core'
+import { SegmentedControl, type SegmentedControlProps } from '@mantine/core'
 import Label from '../Label'
 
 export type TOption = {
@@ -7,7 +7,7 @@ export type TOption = {
 	value: string
 }
 
-export interface IRadioButtonsProps extends Omit<SegmentedControlProps, 'data'> {
+export interface RadioButtonsProps extends Omit<SegmentedControlProps, 'data'> {
 	label?: string
 	labelPosition?: 'start'|'end'
 	name: string
@@ -16,7 +16,7 @@ export interface IRadioButtonsProps extends Omit<SegmentedControlProps, 'data'>
 	required?: boolean
 }
 
-const RadioButtons = ({ label, labelPosition = 'start', options, name, id, value, required, onChange }: IRadioButtonsProps) => {
+const RadioButtons = ({ label, labelPosition = 'start', options, name, id, value, required, onChange }: RadioButtonsProps) => {
 	const LabelComponent = () => <Label required={ required } htmlFor={ id }>{ label }</Label>
 
 	return (
diff --git a/app/frontend/Components/Inputs/RichText.tsx b/app/frontend/Components/Inputs/RichText.tsx
index b409916..0782470 100644
--- a/app/frontend/Components/Inputs/RichText.tsx
+++ b/app/frontend/Components/Inputs/RichText.tsx
@@ -1,15 +1,16 @@
 import React from 'react'
-import RichTextEditor, { type IRichTextEditorProps } from '../RichTextEditor'
+import RichTextEditor, { type RichTextEditorProps } from '../RichTextEditor'
 import Label from '../Label'
 
-export interface IRichTextProps extends IRichTextEditorProps {
+export interface RichTextInputProps extends RichTextEditorProps {
 	label?: React.ReactNode
 	required?: boolean
 	id?: string
 	name?: string
+	value?: string
 }
 
-const RichText = ( { label, name, required = false, id, ...props }: IRichTextProps) => {
+const RichText = ( { label, name, required = false, id, value = '', ...props }: RichTextInputProps) => {
 	const inputId = id || name
 
 	return (
@@ -17,7 +18,7 @@ const RichText = ( { label, name, required = false, id, ...props }: IRichTextPro
 			{ label && <Label required={ required } htmlFor={ inputId }>
 				{ label }
 			</Label> }
-			<RichTextEditor id={ inputId } { ...props } />
+			<RichTextEditor id={ inputId } { ...props }>{ value }</RichTextEditor>
 		</>
 	)
 }
diff --git a/app/frontend/Components/Inputs/SearchableDropdown.tsx b/app/frontend/Components/Inputs/SearchableDropdown.tsx
deleted file mode 100644
index 90324ab..0000000
--- a/app/frontend/Components/Inputs/SearchableDropdown.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { forwardRef, useMemo } from 'react'
-import { Select, type SelectProps } from '@mantine/core'
-import Label from '../Label'
-
-export interface ISearchableDropdownProps extends Omit<SelectProps, 'data'> {
-	options: Array<Record<string, any>>
-	getLabel?: (option: Record<string, any>) => any
-	getValue?: (option: Record<string, any>) => string
-	disabledOptions?: (label: string, value: string | number) => boolean
-	onOpen?: () => void
-	filterMatchKeys?: string[]
-}
-
-const SearchableDropdownComponent = forwardRef<HTMLInputElement, ISearchableDropdownProps>((
-	{
-		options = [],
-		getLabel = option => option.name,
-		getValue = option => String(option.id),
-		disabledOptions,
-		filterMatchKeys,
-		label,
-		required,
-		id,
-		name,
-		searchable = true,
-		clearable = true,
-		...props
-	},
-	ref,
-) => {
-	const inputId = id || name
-
-	const data = useMemo(() => options.map(option => {
-		const optionPart = {
-			label: getLabel(option),
-			value: getValue(option),
-			disabled: false,
-		}
-
-		if(disabledOptions) {
-			optionPart.disabled = disabledOptions(optionPart.label, optionPart.value)
-		}
-
-		return optionPart
-	}), [options])
-
-	return (
-		<>
-			{ label && <Label required={ required } htmlFor={ inputId }>
-				{ label }
-			</Label> }
-			<Select
-				ref={ ref }
-				id={ inputId }
-				name={ name }
-				searchable={ searchable }
-				clearable={ clearable }
-				size="md"
-				data={ data }
-				required={ required }
-				maxDropdownHeight={ 400 }
-				nothingFound="No Results"
-				{ ...props }
-			/>
-		</>
-	)
-})
-
-export default React.memo(SearchableDropdownComponent)
diff --git a/app/frontend/Components/Inputs/Switch.tsx b/app/frontend/Components/Inputs/Switch.tsx
index 62778fb..3bd1017 100644
--- a/app/frontend/Components/Inputs/Switch.tsx
+++ b/app/frontend/Components/Inputs/Switch.tsx
@@ -1,14 +1,18 @@
-import React from 'react'
-import { Switch, type SwitchProps } from '@mantine/core'
+import React, { forwardRef } from 'react'
+import { Switch, type SwitchProps as MantineSwitchProps } from '@mantine/core'
 
-export interface ISwitchProps extends SwitchProps {}
+export interface SwitchProps extends MantineSwitchProps {}
 
-const SwitchComponent = ({ id, name, style, ...props }: ISwitchProps) => {
+const SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>((
+	{ id, name, style, ...props },
+	ref,
+) => {
 	const inputId = id ?? name
 
 	return (
 		<>
 			<Switch
+				ref={ ref }
 				id={ inputId }
 				name={ name }
 				required={ props.required }
@@ -17,6 +21,6 @@ const SwitchComponent = ({ id, name, style, ...props }: ISwitchProps) => {
 			/>
 		</>
 	)
-}
+})
 
 export default SwitchComponent
diff --git a/app/frontend/Components/Inputs/TextInput.tsx b/app/frontend/Components/Inputs/TextInput.tsx
index 920b327..794c3dd 100644
--- a/app/frontend/Components/Inputs/TextInput.tsx
+++ b/app/frontend/Components/Inputs/TextInput.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
-import { TextInput, type TextInputProps } from '@mantine/core'
+import { TextInput, type TextInputProps as MantineTextInputProps } from '@mantine/core'
 import Label from '../Label'
 
-export interface ITextInputProps extends TextInputProps {}
+export interface TextInputProps extends MantineTextInputProps {}
 
-const TextInputComponent = forwardRef<HTMLInputElement, ITextInputProps>((
+const TextInputComponent = forwardRef<HTMLInputElement, TextInputProps>((
 	{ name, label, required = false, id, size = 'md', radius = 'xs', ...props },
 	ref,
 ) => {
diff --git a/app/frontend/Components/Inputs/Textarea.tsx b/app/frontend/Components/Inputs/Textarea.tsx
index 3176a6e..25d058c 100644
--- a/app/frontend/Components/Inputs/Textarea.tsx
+++ b/app/frontend/Components/Inputs/Textarea.tsx
@@ -1,10 +1,13 @@
-import React from 'react'
-import { Textarea, type TextareaProps } from '@mantine/core'
+import React, { forwardRef } from 'react'
+import { Textarea, type TextareaProps as MantineTextareaProps } from '@mantine/core'
 import Label from '../Label'
 
-export interface ITextareaProps extends TextareaProps { }
+export interface TextareaProps extends MantineTextareaProps { }
 
-const TextareaComponent = ({ label, name, required = false, value, id, radius = 'xs', ...props }: ITextareaProps) => {
+const TextareaComponent = forwardRef<HTMLTextAreaElement, TextareaProps>((
+	{ label, name, required = false, value, id, radius = 'xs', ...props },
+	ref,
+) => {
 	const inputId = id || name
 
 	return (
@@ -13,6 +16,7 @@ const TextareaComponent = ({ label, name, required = false, value, id, radius =
 				{ label }
 			</Label> }
 			<Textarea
+				ref={ ref }
 				id={ inputId }
 				name={ name }
 				value={ value ? String(value) : '' }
@@ -23,6 +27,6 @@ const TextareaComponent = ({ label, name, required = false, value, id, radius =
 			</Textarea>
 		</>
 	)
-}
+})
 
 export default TextareaComponent
diff --git a/app/frontend/Components/Inputs/index.ts b/app/frontend/Components/Inputs/index.ts
index f6e8d03..d1c0645 100644
--- a/app/frontend/Components/Inputs/index.ts
+++ b/app/frontend/Components/Inputs/index.ts
@@ -6,6 +6,5 @@ export { default as PasswordInput } from './PasswordInput'
 export { default as CurrencyInput } from './CurrencyInput'
 export { default as HiddenInput } from './HiddenInput'
 export { default as Checkbox } from './Checkbox'
-export { default as SearchableDropdown } from './SearchableDropdown'
 export { default as RadioButtons } from './RadioButtons'
 export { default as DateTime } from './DateTime'
diff --git a/app/frontend/Components/RichTextEditor/index.tsx b/app/frontend/Components/RichTextEditor/index.tsx
index ce2cb97..ba10439 100644
--- a/app/frontend/Components/RichTextEditor/index.tsx
+++ b/app/frontend/Components/RichTextEditor/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor, Link, type RichTextEditorProps } from '@mantine/tiptap'
+import { RichTextEditor, Link, type RichTextEditorProps as MantineRichTextEditorProps } from '@mantine/tiptap'
 import { useEditor } from '@tiptap/react'
 import Highlight from '@tiptap/extension-highlight'
 import StarterKit from '@tiptap/starter-kit'
@@ -9,12 +9,12 @@ import Superscript from '@tiptap/extension-superscript'
 import SubScript from '@tiptap/extension-subscript'
 import { DEFAULT_LABELS } from './tiptapLabels'
 
-export interface IRichTextEditorProps extends Omit<RichTextEditorProps, 'children'|'editor'|'onChange'> {
+export interface RichTextEditorProps extends Omit<MantineRichTextEditorProps, 'children'|'editor'|'onChange'> {
 	children?: string
 	onChange?: (value: string) => void
 }
 
-const RichTextEditorComponent = ({ children, onChange }: IRichTextEditorProps) => {
+const RichTextEditorComponent = ({ children, onChange }: RichTextEditorProps) => {
 	const editor = useEditor({
 		extensions: [
 			StarterKit,
diff --git a/app/frontend/Components/Table/Cell/HeadCellWithContext.tsx b/app/frontend/Components/Table/Cell/HeadCellWithContext.tsx
index 55c7f14..13af580 100644
--- a/app/frontend/Components/Table/Cell/HeadCellWithContext.tsx
+++ b/app/frontend/Components/Table/Cell/HeadCellWithContext.tsx
@@ -1,10 +1,10 @@
 import React, { useRef } from 'react'
-import { usePage } from '@inertiajs/react'
 import { Link } from '@/Components'
 import cx from 'clsx'
 import { type ICellProps } from './index'
 import { useTableContext } from '../TableContext'
 import { Box } from '@mantine/core'
+import { usePageProps } from '@/lib/hooks'
 
 interface IHeadCellWithContextProps extends ICellProps {
 	rows?: Record<string, any>[]
@@ -19,7 +19,7 @@ const HeadCellWithContext = ({
 	hideable,
 	...props
 }: IHeadCellWithContextProps) => {
-	const { auth: { user: { table_preferences } } } = usePage<SharedInertiaProps>().props
+	const { auth: { user: { table_preferences } } } = usePageProps()
 	const { tableState: { model } } = useTableContext()
 
 	const thRef = useRef<HTMLTableCellElement>(null)
diff --git a/app/frontend/Components/Table/ColumnPicker.tsx b/app/frontend/Components/Table/ColumnPicker.tsx
index 4d26bad..2e94efb 100644
--- a/app/frontend/Components/Table/ColumnPicker.tsx
+++ b/app/frontend/Components/Table/ColumnPicker.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { router, usePage } from '@inertiajs/react'
+import { router } from '@inertiajs/react'
 import { Routes } from '@/lib'
 import axios from 'axios'
 import { Menu } from '@/Components'
@@ -7,9 +7,10 @@ import { ColumnsIcon } from '@/Components/Icons'
 import { Checkbox } from '@/Components/Inputs'
 import { useTableContext } from './TableContext'
 import { Button } from '@mantine/core'
+import { usePageProps } from '@/lib/hooks'
 
 const ColumnPicker = () => {
-	const { auth: { user } } = usePage<SharedInertiaProps>().props
+	const { auth: { user } } = usePageProps()
 	const { tableState: { hideable, columns, model } } = useTableContext()
 
 	if(!hideable || !model) return <></>
diff --git a/app/frontend/Components/Table/Row/BodyRow.tsx b/app/frontend/Components/Table/Row/BodyRow.tsx
index 8f55a3f..aa9bdc9 100644
--- a/app/frontend/Components/Table/Row/BodyRow.tsx
+++ b/app/frontend/Components/Table/Row/BodyRow.tsx
@@ -2,8 +2,8 @@ import React, { forwardRef } from 'react'
 import { type ITableRow } from './index'
 import { Box } from '@mantine/core'
 import RowCheckbox from './RowCheckbox'
-import { usePage } from '@inertiajs/react'
 import { useTableContext } from '../TableContext'
+import { usePageProps } from '@/lib/hooks'
 
 interface IRowInContextProps extends ITableRow {
 	name?: string
@@ -16,7 +16,7 @@ const RowInContext = forwardRef<HTMLTableRowElement, IRowInContextProps>((
 	{ children, name, rows, selectable, selected, ...props },
 	ref,
 ) => {
-	const { auth: { user: { table_preferences } } } = usePage<SharedInertiaProps>().props
+	const { auth: { user: { table_preferences } } } = usePageProps()
 	const { tableState: { model, columns } } = useTableContext()
 
 	return (
diff --git a/app/frontend/Pages/Controls/Form.tsx b/app/frontend/Pages/Controls/Form.tsx
index a82e779..d492487 100644
--- a/app/frontend/Pages/Controls/Form.tsx
+++ b/app/frontend/Pages/Controls/Form.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
 import { Code, Paper, ScrollArea, Text } from '@/Components'
-import { Form, TextInput, Submit, type ExtendableFormProps } from '@/Components/Form'
+import { Form, TextInput, Submit } from '@/Components/Form'
 import { ProtocolDropdown } from '@/Components/Dropdowns'
 import { protocolQuery } from '@/queries'
+import { FormProps } from 'use-inertia-form'
 
 type TControlFormData = {
 	control: Partial<Schema.ControlsFormData>
 }
 
-export interface ControlFormProps extends ExtendableFormProps<TControlFormData> {
+export interface ControlFormProps extends Omit<FormProps<TControlFormData>, 'data'> {
 	control?: Schema.ControlsFormData
 }
 
diff --git a/app/frontend/lib/hooks/usePageProps.ts b/app/frontend/lib/hooks/usePageProps.ts
index 535529d..948a245 100644
--- a/app/frontend/lib/hooks/usePageProps.ts
+++ b/app/frontend/lib/hooks/usePageProps.ts
@@ -6,7 +6,6 @@ export interface SharedInertiaProps extends PageProps {
 		form_authenticity_token: string
 		user: Schema.UsersShare
 	}
-	circle: Schema.Circle
 	flash: FlashMessage
 	errors: Errors & ErrorBag
 }
diff --git a/app/frontend/types/inertia.d.ts b/app/frontend/types/inertia.d.ts
deleted file mode 100644
index e3d4d4b..0000000
--- a/app/frontend/types/inertia.d.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { type InertiaFormProps as DefaultInertiaFormProps, InertiaHeadProps } from '@inertiajs/core-react';
-import { Page, PageProps, Errors, ErrorBag } from '@inertiajs/core'
-
-declare global {
-
-	interface SharedInertiaProps extends PageProps {
-		auth: {
-			form_authenticty_token: string
-			user: Schema.UsersShare
-		}
-		flash: FlashMessage,
-		errors: Errors & ErrorBag
-	}
-
-	interface IndexedInertiaFormProps extends DefaultInertiaFormProps{
-		[key: string]: any
-	}
-
-	interface InertiaFormProps<TForm = Record<string, any>> extends Omit<DefaultInertiaFormProps, 'errors'> {
-		errors: Record<keyof TForm, string|string[]>
-		getData: (key: string) => any
-		unsetData: (key: string) => void
-		getError: (data: string) => string
-	}
-
-	interface IInertiaInputProps {
-		name: string
-		model?: string
-		errorKey?: string
-		compact?: boolean
-		onChange?: (value: T, form: UseFormProps) => void
-		onBlur?: (value: T, form: UseFormProps) => void
-	}
-	
-	declare namespace Inertia {
-		type Errors = Record<string|number|symbol, string|string[]>
-		
-		interface FormProps<TForm = Record<string, any>> extends InertiaFormProps {
-			model?: string
-			method: HTTPVerb
-			to?: string
-			getData: (key: string) => any
-			getError: (data: string) => string
-			unsetData: (key: string) => void
-			submit: () => Promise
-		}
-	}
-}
diff --git a/app/frontend/types/serializers/Users/Share.d.ts b/app/frontend/types/serializers/Users/Share.d.ts
index 2048fe6..0c4520d 100644
--- a/app/frontend/types/serializers/Users/Share.d.ts
+++ b/app/frontend/types/serializers/Users/Share.d.ts
@@ -1,6 +1,7 @@
-// TypesFromSerializers CacheKey bdad1f99c5e6e5a670de4af97ef239b0
+// TypesFromSerializers CacheKey beb90ca33db2a1d1d6ade5aa68790cc3
 //
 // DO NOT MODIFY: This file was automatically generated by TypesFromSerializers.
+import type ITablePreferences from '../../ITablePreferences'
 import type IUserPreferences from '../../IUserPreferences'
 import type Role from '../Role'
 
@@ -10,6 +11,7 @@ declare global {
       id: unknown
       created_at: unknown
       roles: Role[]
+      table_preferences: ITablePreferences
       updated_at: unknown
       user_preferences: IUserPreferences
     }
diff --git a/app/serializers/users/share_serializer.rb b/app/serializers/users/share_serializer.rb
index 695826d..d8d539d 100644
--- a/app/serializers/users/share_serializer.rb
+++ b/app/serializers/users/share_serializer.rb
@@ -4,6 +4,7 @@ class Users::ShareSerializer < ApplicationSerializer
     :created_at,
     :updated_at,
     user_preferences: { type: "IUserPreferences" },
+    table_preferences: { type: "ITablePreferences" },
   )
 
   has_many :roles, serializer: RoleSerializer
diff --git a/config/credentials.yml.enc b/config/credentials.yml.enc
deleted file mode 100644
index 1546b77..0000000
--- a/config/credentials.yml.enc
+++ /dev/null
@@ -1 +0,0 @@
-xHhAOBZLKEaTJ/9qV9XhMqoBGlI7ImpGAEQhUTc1VJ9kgcp8K3H50oFMew3XPO4WNp30MMAy3xRQ4d2/xLG8PDUZ9dINxOae+lCro/vbJPNe3eYkVHAB/2O0iSeFSrr+Cg2D/NsM0cWy4X0H/E7+b0xNah/NvBokM51/OUOGa2q6c7621WzOHz7ODElpVeNkF3UrUHnbFfKCstATj4sjkV9HYx3iDoMmANITpvG/Z+To75zBacVqGJ59+G3bsdsnW61FuTdIsLMElgzgZY1FKzJMnDG8VA6QeBG2YzPnzgV+07RzwTFZ3PbsFi7m134SOZzoX6DlQX+zVtUM8d6qO465uLM3VPllTLgb8sy4/vdElolna2rgMsiXsd/P47UJMAwbdfPgVG9sWJ+uiUhHEXdswPd3LchffncH--7YUaJqXSCfgaa9GR--iy2s+hie4ej5vbzXddVObw==
\ No newline at end of file