table and query work

frontend/src/lib/formSutff/Input.Field.tsx

@@ -6,7 +6,7 @@ import { FieldErrors } from "./Errors.Field";
 type InputFieldProps = {
 	label: string;
 	inputType: string;
-	required: boolean;
+	required?: boolean;
 };
 
 const autoCompleteMap: Record<string, string> = {
@@ -16,7 +16,11 @@ const autoCompleteMap: Record<string, string> = {
 	username: "username",
 };
 
-export const InputField = ({ label, inputType, required }: InputFieldProps) => {
+export const InputField = ({
+	label,
+	inputType,
+	required = false,
+}: InputFieldProps) => {
 	const field = useFieldContext<any>();
 
 	return (

frontend/src/lib/formSutff/SubmitButton.tsx

@@ -1,13 +1,19 @@
 import { useStore } from "@tanstack/react-form";
 import { Button } from "@/components/ui/button";
-import { useFormContext } from ".";
 import { Spinner } from "@/components/ui/spinner";
+import { useFormContext } from ".";
 
 type SubmitButtonProps = {
 	children: React.ReactNode;
+	variant?: "default" | "secondary" | "destructive";
+	className?: string;
 };
 
-export const SubmitButton = ({ children }: SubmitButtonProps) => {
+export const SubmitButton = ({
+	children,
+	variant = "default",
+	className,
+}: SubmitButtonProps) => {
 	const form = useFormContext();
 
 	const [isSubmitting] = useStore(form.store, (state) => [
@@ -17,10 +23,19 @@ export const SubmitButton = ({ children }: SubmitButtonProps) => {
 
 	return (
 		<div className="">
-			<Button type="submit" disabled={isSubmitting}>
-				{isSubmitting ? <><Spinner data-icon="inline-start" /> Submitting </> : <>{children}</>
-        }
-				
+			<Button
+				type="submit"
+				disabled={isSubmitting}
+				variant={variant}
+				className={className}
+			>
+				{isSubmitting ? (
+					<>
+						<Spinner data-icon="inline-start" /> Submitting{" "}
+					</>
+				) : (
+					<>{children}</>
+				)}
 			</Button>
 		</div>
 	);

frontend/src/lib/formSutff/Switch.Field.tsx

@@ -0,0 +1,29 @@
+import { Label } from "../../components/ui/label";
+import { Switch } from "../../components/ui/switch";
+import { useFieldContext } from ".";
+
+type SwitchField = {
+	trueLabel: string;
+	falseLabel: string;
+};
+
+export const SwitchField = ({
+	trueLabel = "True",
+	falseLabel = "False",
+}: SwitchField) => {
+	const field = useFieldContext<boolean>();
+
+	const checked = field.state.value ?? false;
+
+	return (
+		<div className="flex items-center space-x-2">
+			<Switch
+				id={field.name}
+				checked={checked}
+				onCheckedChange={field.handleChange}
+				onBlur={field.handleBlur}
+			/>
+			<Label htmlFor={field.name}>{checked ? trueLabel : falseLabel}</Label>
+		</div>
+	);
+};

frontend/src/lib/formSutff/index.tsx

@@ -3,6 +3,7 @@ import { CheckboxField } from "./CheckBox.Field";
 import { InputField } from "./Input.Field";
 import { InputPasswordField } from "./InputPassword.Field";
 import { SubmitButton } from "./SubmitButton";
+import { SwitchField } from "./Switch.Field";
 
 export const { fieldContext, useFieldContext, formContext, useFormContext } =
 	createFormHookContexts();
@@ -16,6 +17,7 @@ export const { useAppForm } = createFormHook({
 		//DateField,
 		//TextArea,
 		//Searchable,
+		SwitchField,
 	},
 	formComponents: { SubmitButton },
 	fieldContext,