completed user admin page

apps/hub/app/_components/ui/Button.tsx

@@ -1,25 +1,43 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
-import { cn } from '../../../helper/cn';
+import {
+	ButtonHTMLAttributes,
+	DetailedHTMLProps,
+	useEffect,
+	useState,
+} from "react";
+import { cn } from "../../../helper/cn";
 
 export const Button = ({
-  isLoading,
-  ...props
+	isLoading,
+	...props
 }: DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
+	ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
 > & {
-  isLoading?: boolean;
+	isLoading?: boolean;
 }) => {
-  return (
-    <button
-      {...(props as any)}
-      className={cn('btn', props.className)}
-      disabled={isLoading || props.disabled}
-    >
-      {isLoading && (
-        <span className="loading loading-spinner loading-sm"></span>
-      )}
-      {props.children as any}
-    </button>
-  );
+	const [isLoadingState, setIsLoadingState] = useState(isLoading);
+
+	useEffect(() => {
+		setIsLoadingState(isLoading);
+	}, [isLoading]);
+
+	return (
+		<button
+			{...(props as any)}
+			className={cn("btn", props.className)}
+			disabled={isLoadingState || props.disabled}
+			onClick={async (e) => {
+				if (props.onClick) {
+					setIsLoadingState(true);
+					await props.onClick(e);
+					setIsLoadingState(false);
+				}
+			}}
+		>
+			{isLoadingState && (
+				<span className="loading loading-spinner loading-sm"></span>
+			)}
+			{props.children as any}
+		</button>
+	);
 };

apps/hub/app/_components/ui/Select.tsx

@@ -76,11 +76,16 @@ const SelectCom = <T extends FieldValues>({
 			<SelectTemplate
 				onChange={(newValue: any) => {
 					if (Array.isArray(newValue)) {
-						form.setValue(name, newValue.map((v: any) => v.value) as any);
+						form.setValue(name, newValue.map((v: any) => v.value) as any, {
+							shouldDirty: true,
+						});
 					} else {
-						form.setValue(name, newValue.value);
+						form.setValue(name, newValue.value, {
+							shouldDirty: true,
+						});
 					}
 					form.trigger(name);
+					form.Dirty;
 				}}
 				value={
 					(inputProps as any)?.isMulti