Enum for user role - somehow user page is currently unresponsive. Probably because of previous layout changes

frontend/src/components/basics/SelectField.tsx

@@ -1,18 +1,40 @@
-type SelectFieldProps = {
-    value: string;
-    onChange: (value: string) => void;
-    options: { value: string; label: string }[];
+type SelectFieldProps<T extends string> = {
+    value: T;
+    onChange: (value: T) => void;
+    options: { value: T; label: string }[];
     className?: string;
 };
 
 /**
  * SelectField - A dropdown styled consistently with input fields
+ * Generic component that works with any string-based type (including string literals and enums)
+ *
+ * @example
+ * // With UserRole type
+ * <SelectField<UserRole>
+ *   value={user.role}
+ *   onChange={(role) => setUser({...user, role})}
+ *   options={UserRoleHelper.getRoleOptions()}
+ * />
+ *
+ * @example
+ * // With plain strings
+ * <SelectField<string>
+ *   value={status}
+ *   onChange={setStatus}
+ *   options={[{value: "active", label: "Active"}, {value: "inactive", label: "Inactive"}]}
+ * />
  */
-export default function SelectField({value, onChange, options, className = ''}: SelectFieldProps) {
+export default function SelectField<T extends string>({
+                                                          value,
+                                                          onChange,
+                                                          options,
+                                                          className = ''
+                                                      }: SelectFieldProps<T>) {
     return (
         <select
             value={value}
-            onChange={(e) => onChange(e.target.value)}
+            onChange={(e) => onChange(e.target.value as T)}
             className={`p-2 w-full border rounded-md bg-white border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900 cursor-pointer ${className}`}
         >
             {options.map((option) => (