Added Account Dublicate fucntion, improved default sorts

apps/hub/app/_components/PaginatedTable.tsx

@@ -20,7 +20,7 @@ interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "da
 	leftOfSearch?: React.ReactNode;
 	rightOfSearch?: React.ReactNode;
 	leftOfPagination?: React.ReactNode;
-	hide?: boolean;
+	supressQuery?: boolean;
 	ref?: Ref<PaginatedTableRef>;
 }
 
@@ -36,7 +36,7 @@ export function PaginatedTable<TData>({
 	leftOfSearch,
 	rightOfSearch,
 	leftOfPagination,
-	hide,
+	supressQuery,
 	...restProps
 }: PaginatedTableProps<TData>) {
 	const [data, setData] = useState<TData[]>([]);
@@ -58,6 +58,10 @@ export function PaginatedTable<TData>({
 	const [loading, setLoading] = useState(false);
 
 	const refreshTableData = useCallback(async () => {
+		if (supressQuery) {
+			setLoading(false);
+			return;
+		}
 		setLoading(true);
 		getData(
 			prismaModel,
@@ -91,6 +95,7 @@ export function PaginatedTable<TData>({
 				setLoading(false);
 			});
 	}, [
+		supressQuery,
 		prismaModel,
 		rowsPerPage,
 		page,
@@ -111,8 +116,10 @@ export function PaginatedTable<TData>({
 
 	// useEffect to show loading spinner
 	useEffect(() => {
+		if (supressQuery) return;
+
 		setLoading(true);
-	}, [searchTerm, page, rowsPerPage, orderBy, filter, setLoading]);
+	}, [searchTerm, page, rowsPerPage, orderBy, filter, setLoading, supressQuery]);
 
 	useDebounce(
 		() => {
@@ -123,15 +130,15 @@ export function PaginatedTable<TData>({
 	);
 
 	return (
-		<div className="space-y-4 m-4">
+		<div className="m-4 space-y-4">
 			{(rightOfSearch || leftOfSearch || searchFields.length > 0) && (
 				<div
 					className={cn(
-						"flex items-center gap-2 sticky py-2 z-20",
-						stickyHeaders && "sticky top-0 bg-base-100/80 backdrop-blur border-b",
+						"sticky z-20 flex items-center gap-2 py-2",
+						stickyHeaders && "bg-base-100/80 sticky top-0 border-b backdrop-blur",
 					)}
 				>
-					<div className="flex-1 flex gap-2">
+					<div className="flex flex-1 gap-2">
 						<div>{leftOfSearch}</div>
 						<div>{loading && <span className="loading loading-dots loading-md" />}</div>
 					</div>
@@ -150,22 +157,14 @@ export function PaginatedTable<TData>({
 					<div className="flex justify-center">{rightOfSearch}</div>
 				</div>
 			)}
-			{!hide && (
-				<SortableTable
-					data={data}
-					prismaModel={prismaModel}
-					setOrderBy={setOrderBy}
-					{...restProps}
-				/>
-			)}
-			<div className="flex items-between">
+
+			<SortableTable data={data} prismaModel={prismaModel} setOrderBy={setOrderBy} {...restProps} />
+			<div className="items-between flex">
 				{leftOfPagination}
-				{!hide && (
-					<>
-						<RowsPerPage rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} />
-						<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
-					</>
-				)}
+				<>
+					<RowsPerPage rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} />
+					<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
+				</>
 			</div>
 		</div>
 	);

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

@@ -31,6 +31,7 @@ const customStyles: StylesConfig<OptionType, false> = {
 		backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
 		color: "var(--color-primary-content)",
 		"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
+		cursor: "pointer",
 	}),
 	multiValueLabel: (provided) => ({
 		...provided,
@@ -49,6 +50,11 @@ const customStyles: StylesConfig<OptionType, false> = {
 		backgroundColor: "var(--color-base-100)",
 		borderRadius: "0.5rem",
 	}),
+	input: (provided) => ({
+		...provided,
+		color: "var(--color-primary-content)",
+		cursor: "text",
+	}),
 };
 
 const SelectCom = <T extends FieldValues>({
@@ -61,7 +67,7 @@ const SelectCom = <T extends FieldValues>({
 }: SelectProps<T>) => {
 	return (
 		<div>
-			<span className="label-text text-lg flex items-center gap-2">{label}</span>
+			<span className="label-text flex items-center gap-2 text-lg">{label}</span>
 			<SelectTemplate
 				onChange={(newValue: any) => {
 					if (Array.isArray(newValue)) {