Fix mapping issue with animalTag and MultiSelect

Author: nathanaela2002

backend/typescript/models/user.model.ts

@@ -29,10 +29,10 @@ export default class User extends Model {
   color_level!: number;
 
   @Column({
-    type: DataType.ENUM("Bird", "Bunny", "Cat", "Dog", "Small Animal"),
+    type: DataType.ARRAY(DataType.ENUM("Bird", "Bunny", "Cat", "Dog", "Small Animal")),
     allowNull: false,
   })
-  animal_tags!: [AnimalTag];
+  animal_tags!: AnimalTag[];
 
   @Column({ type: DataType.BOOLEAN })
   can_see_all_logs?: boolean | null;

frontend/src/components/common/MultiSelect.tsx

@@ -15,7 +15,7 @@ import { ReactComponent as ExpandIcon } from "../../assets/icons/expand.svg";
 interface MultiSelectProps<T> {
   values: T[];
   onSelect: (values: T[]) => void;
-  selected: T[];
+  selected?: T[];
   placeholder?: string;
   label?: string;
   error?: boolean;
@@ -27,7 +27,7 @@ interface MultiSelectProps<T> {
 const MultiSelect = <T extends string | number>({
   values,
   onSelect,
-  selected,
+  selected = [],
   placeholder = "Click for options",
   label,
   error = false,