@thanh01.pmt/interactive-quiz-kit 1.0.82 → 1.0.83

package/dist/react-ui.mjs

@@ -138959,7 +138959,7 @@ function TopicManager({
     setCurrentItem(topic);
     setItemName(topic.name);
     setItemCode(topic.code);
-    setSelectedSubjectCode(topic.subjectCode);
+    setSelectedSubjectCode(topic.subjectCode ?? "");
     setIsDialogOpen(true);
   };
   const handleDeleteItem = (topic) => {
@@ -139037,7 +139037,7 @@ function TopicManager({
   const getSubjectName = (subjectCode) => {
     return subjects.find((s4) => s4.code === subjectCode)?.name || "N/A";
   };
-  return /* @__PURE__ */ React169__default.createElement(Card, null, /* @__PURE__ */ React169__default.createElement(CardHeader, null, /* @__PURE__ */ React169__default.createElement(CardTitle, { className: "flex justify-between items-center" }, /* @__PURE__ */ React169__default.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React169__default.createElement(Tag, { className: "mr-2 h-5 w-5 text-primary" }), " Manage Topics"), /* @__PURE__ */ React169__default.createElement("div", { className: "flex items-center gap-2" }, onBulkAdd && /* @__PURE__ */ React169__default.createElement(MetadataImportControls, { metadataName: "Topics", onImport: handleImport }), /* @__PURE__ */ React169__default.createElement(Button, { onClick: handleAddItem, size: "sm", disabled: subjects.length === 0 }, /* @__PURE__ */ React169__default.createElement(CirclePlus, { className: "mr-2 h-4 w-4" }), " Add Topic"))), subjects.length === 0 && !isLoading && /* @__PURE__ */ React169__default.createElement("p", { className: "text-sm text-destructive" }, "Please add subjects before adding topics.")), /* @__PURE__ */ React169__default.createElement(CardContent, null, isLoading ? /* @__PURE__ */ React169__default.createElement("div", { className: "flex justify-center items-center h-32" }, /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "h-8 w-8 animate-spin text-primary" })) : topics.length === 0 ? /* @__PURE__ */ React169__default.createElement("p", { className: "text-center text-muted-foreground py-4" }, "No topics found. Add one to get started!") : /* @__PURE__ */ React169__default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React169__default.createElement(Table3, null, /* @__PURE__ */ React169__default.createElement(TableHeader, null, /* @__PURE__ */ React169__default.createElement(TableRow, null, /* @__PURE__ */ React169__default.createElement(TableHead, null, "Code"), /* @__PURE__ */ React169__default.createElement(TableHead, null, "Name"), /* @__PURE__ */ React169__default.createElement(TableHead, null, "Subject"), /* @__PURE__ */ React169__default.createElement(TableHead, { className: "text-right w-[120px]" }, "Actions"))), /* @__PURE__ */ React169__default.createElement(TableBody, null, topics.map((topic) => /* @__PURE__ */ React169__default.createElement(TableRow, { key: topic.id }, /* @__PURE__ */ React169__default.createElement(TableCell, { className: "font-mono text-xs" }, topic.code), /* @__PURE__ */ React169__default.createElement(TableCell, { className: "font-Medium" }, topic.name), /* @__PURE__ */ React169__default.createElement(TableCell, null, getSubjectName(topic.subjectCode), " (", topic.subjectCode, ")"), /* @__PURE__ */ React169__default.createElement(TableCell, { className: "text-right" }, /* @__PURE__ */ React169__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => handleEditItem(topic), className: "mr-2" }, /* @__PURE__ */ React169__default.createElement(PenLine, { className: "h-4 w-4" })), /* @__PURE__ */ React169__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => handleDeleteItem(topic), className: "text-destructive hover:text-destructive" }, /* @__PURE__ */ React169__default.createElement(Trash2, { className: "h-4 w-4" })))))))), /* @__PURE__ */ React169__default.createElement(Dialog2, { open: isDialogOpen, onOpenChange: setIsDialogOpen }, /* @__PURE__ */ React169__default.createElement(DialogContent2, { className: "sm:max-w-md" }, /* @__PURE__ */ React169__default.createElement(DialogHeader, null, /* @__PURE__ */ React169__default.createElement(DialogTitle2, null, currentItem ? "Edit Topic" : "Add New Topic")), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-4 py-4" }, /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "itemCode" }, "Topic Code"), /* @__PURE__ */ React169__default.createElement(Input, { id: "itemCode", value: itemCode, onChange: (e3) => setItemCode(e3.target.value.toUpperCase()), placeholder: "e.g., ALG-BASICS", disabled: !!currentItem })), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "itemName" }, "Topic Name"), /* @__PURE__ */ React169__default.createElement(Input, { id: "itemName", value: itemName, onChange: (e3) => setItemName(e3.target.value), placeholder: "e.g., Algebra Basics" })), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "subjectCode" }, "Subject"), /* @__PURE__ */ React169__default.createElement(Select2, { value: selectedSubjectCode, onValueChange: setSelectedSubjectCode, disabled: subjects.length === 0 }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, { id: "subjectCode" }, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a subject" })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, subjects.map((subject) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: subject.code, value: subject.code }, subject.name, " (", subject.code, ")")))))), /* @__PURE__ */ React169__default.createElement(DialogFooter, null, /* @__PURE__ */ React169__default.createElement(Button, { type: "button", variant: "outline", onClick: () => setIsDialogOpen(false), disabled: isPending }, "Cancel"), /* @__PURE__ */ React169__default.createElement(Button, { type: "submit", onClick: handleSubmit, disabled: isPending || !itemName.trim() || !itemCode.trim() || !selectedSubjectCode }, isPending && /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), " Save")))), /* @__PURE__ */ React169__default.createElement(AlertDialog2, { open: isAlertOpen, onOpenChange: setIsAlertOpen }, /* @__PURE__ */ React169__default.createElement(AlertDialogContent2, null, /* @__PURE__ */ React169__default.createElement(AlertDialogHeader, null, /* @__PURE__ */ React169__default.createElement(AlertDialogTitle2, null, "Are you sure?"), /* @__PURE__ */ React169__default.createElement(AlertDialogDescription2, null, 'This will permanently delete topic "', itemToDelete?.name, '".')), /* @__PURE__ */ React169__default.createElement(AlertDialogFooter, null, /* @__PURE__ */ React169__default.createElement(AlertDialogCancel2, { disabled: isPending }, "Cancel"), /* @__PURE__ */ React169__default.createElement(AlertDialogAction2, { onClick: confirmDelete, disabled: isPending, className: "bg-destructive hover:bg-destructive/90" }, isPending && /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), " Delete"))))));
+  return /* @__PURE__ */ React169__default.createElement(Card, null, /* @__PURE__ */ React169__default.createElement(CardHeader, null, /* @__PURE__ */ React169__default.createElement(CardTitle, { className: "flex justify-between items-center" }, /* @__PURE__ */ React169__default.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React169__default.createElement(Tag, { className: "mr-2 h-5 w-5 text-primary" }), " Manage Topics"), /* @__PURE__ */ React169__default.createElement("div", { className: "flex items-center gap-2" }, onBulkAdd && /* @__PURE__ */ React169__default.createElement(MetadataImportControls, { metadataName: "Topics", onImport: handleImport }), /* @__PURE__ */ React169__default.createElement(Button, { onClick: handleAddItem, size: "sm", disabled: subjects.length === 0 }, /* @__PURE__ */ React169__default.createElement(CirclePlus, { className: "mr-2 h-4 w-4" }), " Add Topic"))), subjects.length === 0 && !isLoading && /* @__PURE__ */ React169__default.createElement("p", { className: "text-sm text-destructive" }, "Please add subjects before adding topics.")), /* @__PURE__ */ React169__default.createElement(CardContent, null, isLoading ? /* @__PURE__ */ React169__default.createElement("div", { className: "flex justify-center items-center h-32" }, /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "h-8 w-8 animate-spin text-primary" })) : topics.length === 0 ? /* @__PURE__ */ React169__default.createElement("p", { className: "text-center text-muted-foreground py-4" }, "No topics found. Add one to get started!") : /* @__PURE__ */ React169__default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React169__default.createElement(Table3, null, /* @__PURE__ */ React169__default.createElement(TableHeader, null, /* @__PURE__ */ React169__default.createElement(TableRow, null, /* @__PURE__ */ React169__default.createElement(TableHead, null, "Code"), /* @__PURE__ */ React169__default.createElement(TableHead, null, "Name"), /* @__PURE__ */ React169__default.createElement(TableHead, null, "Subject"), /* @__PURE__ */ React169__default.createElement(TableHead, { className: "text-right w-[120px]" }, "Actions"))), /* @__PURE__ */ React169__default.createElement(TableBody, null, topics.map((topic) => /* @__PURE__ */ React169__default.createElement(TableRow, { key: topic.id }, /* @__PURE__ */ React169__default.createElement(TableCell, { className: "font-mono text-xs" }, topic.code), /* @__PURE__ */ React169__default.createElement(TableCell, { className: "font-Medium" }, topic.name), /* @__PURE__ */ React169__default.createElement(TableCell, null, getSubjectName(topic.subjectCode ?? ""), " (", topic.subjectCode, ")"), /* @__PURE__ */ React169__default.createElement(TableCell, { className: "text-right" }, /* @__PURE__ */ React169__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => handleEditItem(topic), className: "mr-2" }, /* @__PURE__ */ React169__default.createElement(PenLine, { className: "h-4 w-4" })), /* @__PURE__ */ React169__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => handleDeleteItem(topic), className: "text-destructive hover:text-destructive" }, /* @__PURE__ */ React169__default.createElement(Trash2, { className: "h-4 w-4" })))))))), /* @__PURE__ */ React169__default.createElement(Dialog2, { open: isDialogOpen, onOpenChange: setIsDialogOpen }, /* @__PURE__ */ React169__default.createElement(DialogContent2, { className: "sm:max-w-md" }, /* @__PURE__ */ React169__default.createElement(DialogHeader, null, /* @__PURE__ */ React169__default.createElement(DialogTitle2, null, currentItem ? "Edit Topic" : "Add New Topic")), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-4 py-4" }, /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "itemCode" }, "Topic Code"), /* @__PURE__ */ React169__default.createElement(Input, { id: "itemCode", value: itemCode, onChange: (e3) => setItemCode(e3.target.value.toUpperCase()), placeholder: "e.g., ALG-BASICS", disabled: !!currentItem })), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "itemName" }, "Topic Name"), /* @__PURE__ */ React169__default.createElement(Input, { id: "itemName", value: itemName, onChange: (e3) => setItemName(e3.target.value), placeholder: "e.g., Algebra Basics" })), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "subjectCode" }, "Subject"), /* @__PURE__ */ React169__default.createElement(Select2, { value: selectedSubjectCode, onValueChange: setSelectedSubjectCode, disabled: subjects.length === 0 }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, { id: "subjectCode" }, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a subject" })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, subjects.map((subject) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: subject.code, value: subject.code }, subject.name, " (", subject.code, ")")))))), /* @__PURE__ */ React169__default.createElement(DialogFooter, null, /* @__PURE__ */ React169__default.createElement(Button, { type: "button", variant: "outline", onClick: () => setIsDialogOpen(false), disabled: isPending }, "Cancel"), /* @__PURE__ */ React169__default.createElement(Button, { type: "submit", onClick: handleSubmit, disabled: isPending || !itemName.trim() || !itemCode.trim() || !selectedSubjectCode }, isPending && /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), " Save")))), /* @__PURE__ */ React169__default.createElement(AlertDialog2, { open: isAlertOpen, onOpenChange: setIsAlertOpen }, /* @__PURE__ */ React169__default.createElement(AlertDialogContent2, null, /* @__PURE__ */ React169__default.createElement(AlertDialogHeader, null, /* @__PURE__ */ React169__default.createElement(AlertDialogTitle2, null, "Are you sure?"), /* @__PURE__ */ React169__default.createElement(AlertDialogDescription2, null, 'This will permanently delete topic "', itemToDelete?.name, '".')), /* @__PURE__ */ React169__default.createElement(AlertDialogFooter, null, /* @__PURE__ */ React169__default.createElement(AlertDialogCancel2, { disabled: isPending }, "Cancel"), /* @__PURE__ */ React169__default.createElement(AlertDialogAction2, { onClick: confirmDelete, disabled: isPending, className: "bg-destructive hover:bg-destructive/90" }, isPending && /* @__PURE__ */ React169__default.createElement(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }), " Delete"))))));
 }
 
 // src/react-ui/components/metadata/CategoryManager.tsx
@@ -139435,6 +139435,9 @@ init_react_shim();
 function LearningObjectiveManager({
   initialData,
   subjects: subjectsProp,
+  categories: categoriesProp,
+  topics: topicsProp,
+  gradeLevels: gradeLevelsProp,
   isLoading: isLoadingProp,
   onAdd,
   onUpdate,
@@ -139443,6 +139446,9 @@ function LearningObjectiveManager({
 }) {
   const [items, setItems] = useState([]);
   const [subjects, setSubjects] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [topics, setTopics] = useState([]);
+  const [gradeLevels, setGradeLevels] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isAlertOpen, setIsAlertOpen] = useState(false);
@@ -139477,13 +139483,34 @@ function LearningObjectiveManager({
     if (isControlled) {
       setItems(initialData || []);
       setSubjects(subjectsProp || []);
+      setCategories(categoriesProp || []);
+      setTopics(topicsProp || []);
+      setGradeLevels(gradeLevelsProp || []);
       setIsLoading(isLoadingProp || false);
     } else {
       refreshData();
     }
-  }, [isControlled, initialData, subjectsProp, isLoadingProp]);
+  }, [isControlled, initialData, subjectsProp, categoriesProp, topicsProp, gradeLevelsProp, isLoadingProp]);
+  const filteredCategories = useMemo(() => {
+    if (!formState.subjectCode) return [];
+    return categories.filter((c4) => c4.subjectCode === formState.subjectCode);
+  }, [formState.subjectCode, categories]);
+  const filteredTopics = useMemo(() => {
+    if (!formState.categoryCode) return [];
+    return topics.filter((t4) => t4.categoryCode === formState.categoryCode);
+  }, [formState.categoryCode, topics]);
   const handleFormChange = (field, value) => {
-    setFormState((prev) => ({ ...prev, [field]: value }));
+    setFormState((prev) => {
+      const newState = { ...prev, [field]: value };
+      if (field === "subjectCode") {
+        newState.categoryCode = "";
+        newState.topicCode = "";
+      }
+      if (field === "categoryCode") {
+        newState.topicCode = "";
+      }
+      return newState;
+    });
   };
   const handleAddItem = () => {
     setCurrentItem(null);
@@ -139494,11 +139521,7 @@ function LearningObjectiveManager({
   };
   const handleEditItem = (item) => {
     setCurrentItem(item);
-    const subject = subjects.find((s4) => s4.code === item.subjectCode);
-    setFormState({
-      ...item,
-      subject: subject ? subject.name : item.subject || ""
-    });
+    setFormState({ ...item });
     setIsDialogOpen(true);
   };
   const handleDeleteItem = (item) => {
@@ -139600,7 +139623,6 @@ function LearningObjectiveManager({
           acc.valid.push({
             code: rec["LO ID"],
             name: rec["LO Name"] || rec["LO Description"],
-            // Use description if name is missing
             description: rec["LO Description"],
             subject: rec["Subject"] || "",
             subjectCode: rec["Subject Code"] || rec["Subject"],
@@ -139668,141 +139690,43 @@ function LearningObjectiveManager({
       className: "text-destructive hover:text-destructive"
     },
     /* @__PURE__ */ React169__default.createElement(Trash2, { className: "h-4 w-4" })
-  ))))))))), /* @__PURE__ */ React169__default.createElement(Dialog2, { open: isDialogOpen, onOpenChange: setIsDialogOpen }, /* @__PURE__ */ React169__default.createElement(DialogContent2, { className: "sm:max-w-2xl" }, /* @__PURE__ */ React169__default.createElement(ScrollArea2, { className: "max-h-[85vh]" }, /* @__PURE__ */ React169__default.createElement("div", { className: "p-6" }, /* @__PURE__ */ React169__default.createElement(DialogHeader, null, /* @__PURE__ */ React169__default.createElement(DialogTitle2, null, currentItem ? "Edit Learning Objective" : "Add New Learning Objective")), /* @__PURE__ */ React169__default.createElement("div", { className: "grid gap-4 py-4" }, /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "code" }, "Code"), /* @__PURE__ */ React169__default.createElement(
+  ))))))))), /* @__PURE__ */ React169__default.createElement(Dialog2, { open: isDialogOpen, onOpenChange: setIsDialogOpen }, /* @__PURE__ */ React169__default.createElement(DialogContent2, { className: "sm:max-w-2xl max-h-[90vh] flex flex-col" }, /* @__PURE__ */ React169__default.createElement(DialogHeader, { className: "p-6 pb-0" }, /* @__PURE__ */ React169__default.createElement(DialogTitle2, null, currentItem ? "Edit Learning Objective" : "Add New Learning Objective")), /* @__PURE__ */ React169__default.createElement(ScrollArea2, { className: "flex-1 pr-1" }, /* @__PURE__ */ React169__default.createElement("div", { className: "px-6 py-4 grid gap-4" }, /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "code" }, "LO Code"), /* @__PURE__ */ React169__default.createElement(
     Input,
     {
       id: "code",
       value: formState.code || "",
-      onChange: (e3) => handleFormChange(
-        "code",
-        e3.target.value.toUpperCase()
-      ),
+      onChange: (e3) => handleFormChange("code", e3.target.value.toUpperCase()),
       disabled: !!currentItem
     }
-  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "name" }, "Name (Description)"), /* @__PURE__ */ React169__default.createElement(
+  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "name" }, "LO Name (Description)"), /* @__PURE__ */ React169__default.createElement(
     Input,
     {
       id: "name",
       value: formState.name || "",
-      onChange: (e3) => handleFormChange(
-        "name",
-        e3.target.value
-      )
-    }
-  ))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "subject" }, "Subject Name"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "subject",
-      value: formState.subject || "",
-      onChange: (e3) => handleFormChange(
-        "subject",
-        e3.target.value
-      )
-    }
-  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "subjectCode" }, "Subject Code"), /* @__PURE__ */ React169__default.createElement(
-    EditableCombobox,
-    {
-      options: subjects.map((s4) => ({
-        value: s4.code,
-        label: s4.name
-      })),
-      value: formState.subjectCode || "",
-      onChange: (val) => handleFormChange("subjectCode", val),
-      placeholder: "Select a subject..."
-    }
-  ))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "category" }, "Category Name"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "category",
-      value: formState.category || "",
-      onChange: (e3) => handleFormChange(
-        "category",
-        e3.target.value
-      )
-    }
-  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "categoryCode" }, "Category Code"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "categoryCode",
-      value: formState.categoryCode || "",
-      onChange: (e3) => handleFormChange(
-        "categoryCode",
-        e3.target.value
-      )
-    }
-  ))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "topic" }, "Topic Name"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "topic",
-      value: formState.topic || "",
-      onChange: (e3) => handleFormChange(
-        "topic",
-        e3.target.value
-      )
-    }
-  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "topicCode" }, "Topic Code"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "topicCode",
-      value: formState.topicCode || "",
-      onChange: (e3) => handleFormChange(
-        "topicCode",
-        e3.target.value
-      )
+      onChange: (e3) => handleFormChange("name", e3.target.value)
     }
-  ))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "grade" }, "Grade Name"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "grade",
-      value: formState.grade || "",
-      onChange: (e3) => handleFormChange(
-        "grade",
-        e3.target.value
-      )
-    }
-  )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "gradeCode" }, "Grade Code"), /* @__PURE__ */ React169__default.createElement(
-    Input,
-    {
-      id: "gradeCode",
-      value: formState.gradeCode || "",
-      onChange: (e3) => handleFormChange(
-        "gradeCode",
-        e3.target.value
-      )
-    }
-  ))), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "keywords" }, "Keywords (comma-separated)"), /* @__PURE__ */ React169__default.createElement(
+  ))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "subjectCode" }, "Subject"), /* @__PURE__ */ React169__default.createElement(Select2, { value: formState.subjectCode || "", onValueChange: (val) => handleFormChange("subjectCode", val) }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, null, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a subject..." })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, subjects.map((s4) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: s4.code, value: s4.code }, s4.name))))), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "categoryCode" }, "Category"), /* @__PURE__ */ React169__default.createElement(Select2, { value: formState.categoryCode || "", onValueChange: (val) => handleFormChange("categoryCode", val), disabled: !formState.subjectCode }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, null, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a category..." })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, filteredCategories.map((c4) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: c4.code, value: c4.code }, c4.name)))))), /* @__PURE__ */ React169__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "topicCode" }, "Topic"), /* @__PURE__ */ React169__default.createElement(Select2, { value: formState.topicCode || "", onValueChange: (val) => handleFormChange("topicCode", val), disabled: !formState.categoryCode }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, null, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a topic..." })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, filteredTopics.map((t4) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: t4.code, value: t4.code }, t4.name))))), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "gradeCode" }, "Grade Level"), /* @__PURE__ */ React169__default.createElement(Select2, { value: formState.gradeCode || "", onValueChange: (val) => handleFormChange("gradeCode", val) }, /* @__PURE__ */ React169__default.createElement(SelectTrigger2, null, /* @__PURE__ */ React169__default.createElement(SelectValue2, { placeholder: "Select a grade level..." })), /* @__PURE__ */ React169__default.createElement(SelectContent2, null, gradeLevels.map((g) => /* @__PURE__ */ React169__default.createElement(SelectItem2, { key: g.code, value: g.code }, g.name)))))), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "keywords" }, "Keywords (comma-separated)"), /* @__PURE__ */ React169__default.createElement(
     Textarea,
     {
       id: "keywords",
-      value: formState.keywords?.join(", ") || "",
-      onChange: (e3) => handleFormChange(
-        "keywords",
-        e3.target.value.split(",").map((s4) => s4.trim())
-      )
+      value: Array.isArray(formState.keywords) ? formState.keywords.join(", ") : "",
+      onChange: (e3) => handleFormChange("keywords", e3.target.value.split(",").map((s4) => s4.trim()))
     }
   )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "stemElements" }, "STEM Elements (comma-separated)"), /* @__PURE__ */ React169__default.createElement(
     Textarea,
     {
       id: "stemElements",
-      value: formState.stemElements?.join(", ") || "",
-      onChange: (e3) => handleFormChange(
-        "stemElements",
-        e3.target.value.split(",").map((s4) => s4.trim())
-      )
+      value: Array.isArray(formState.stemElements) ? formState.stemElements.join(", ") : "",
+      onChange: (e3) => handleFormChange("stemElements", e3.target.value.split(",").map((s4) => s4.trim()))
     }
   )), /* @__PURE__ */ React169__default.createElement("div", null, /* @__PURE__ */ React169__default.createElement(Label2, { htmlFor: "bloomLevelsGuideline" }, "Bloom's Guideline (comma-separated)"), /* @__PURE__ */ React169__default.createElement(
     Textarea,
     {
       id: "bloomLevelsGuideline",
-      value: formState.bloomLevelsGuideline?.join(
-        ", "
-      ) || "",
-      onChange: (e3) => handleFormChange(
-        "bloomLevelsGuideline",
-        e3.target.value.split(",").map((s4) => s4.trim())
-      )
+      value: Array.isArray(formState.bloomLevelsGuideline) ? formState.bloomLevelsGuideline.join(", ") : "",
+      onChange: (e3) => handleFormChange("bloomLevelsGuideline", e3.target.value.split(",").map((s4) => s4.trim()))
     }
-  ))))), /* @__PURE__ */ React169__default.createElement(DialogFooter, { className: "p-6 pt-0" }, /* @__PURE__ */ React169__default.createElement(
+  )))), /* @__PURE__ */ React169__default.createElement(DialogFooter, { className: "p-6 pt-4 border-t" }, /* @__PURE__ */ React169__default.createElement(
     Button,
     {
       type: "button",

package/dist/{toaster-Bj78wmSz.d.ts → toaster-DZskgIbn.d.ts}

@@ -267,13 +267,16 @@ declare function QuestionTypeManager({ initialData, isLoading: isLoadingProp, on
 interface LearningObjectiveManagerProps {
     initialData?: LearningObjective[];
     subjects?: Subject[];
+    categories?: Category[];
+    topics?: Topic[];
+    gradeLevels?: GradeLevel[];
     isLoading?: boolean;
     onAdd?: (item: Omit<LearningObjective, "id">) => Promise<void>;
     onUpdate?: (item: LearningObjective) => Promise<void>;
     onDelete?: (item: LearningObjective) => Promise<void>;
     onBulkAdd?: (items: Omit<LearningObjective, "id">[]) => Promise<void>;
 }
-declare function LearningObjectiveManager({ initialData, subjects: subjectsProp, isLoading: isLoadingProp, onAdd, onUpdate, onDelete, onBulkAdd, }: LearningObjectiveManagerProps): React__default.JSX.Element;
+declare function LearningObjectiveManager({ initialData, subjects: subjectsProp, categories: categoriesProp, topics: topicsProp, gradeLevels: gradeLevelsProp, isLoading: isLoadingProp, onAdd, onUpdate, onDelete, onBulkAdd, }: LearningObjectiveManagerProps): React__default.JSX.Element;
 
 interface ContextManagerProps {
     initialData?: Context[];

package/dist/{toaster-CexT11VU.d.cts → toaster-DrUkr-h7.d.cts}

@@ -267,13 +267,16 @@ declare function QuestionTypeManager({ initialData, isLoading: isLoadingProp, on
 interface LearningObjectiveManagerProps {
     initialData?: LearningObjective[];
     subjects?: Subject[];
+    categories?: Category[];
+    topics?: Topic[];
+    gradeLevels?: GradeLevel[];
     isLoading?: boolean;
     onAdd?: (item: Omit<LearningObjective, "id">) => Promise<void>;
     onUpdate?: (item: LearningObjective) => Promise<void>;
     onDelete?: (item: LearningObjective) => Promise<void>;
     onBulkAdd?: (items: Omit<LearningObjective, "id">[]) => Promise<void>;
 }
-declare function LearningObjectiveManager({ initialData, subjects: subjectsProp, isLoading: isLoadingProp, onAdd, onUpdate, onDelete, onBulkAdd, }: LearningObjectiveManagerProps): React__default.JSX.Element;
+declare function LearningObjectiveManager({ initialData, subjects: subjectsProp, categories: categoriesProp, topics: topicsProp, gradeLevels: gradeLevelsProp, isLoading: isLoadingProp, onAdd, onUpdate, onDelete, onBulkAdd, }: LearningObjectiveManagerProps): React__default.JSX.Element;
 
 interface ContextManagerProps {
     initialData?: Context[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thanh01.pmt/interactive-quiz-kit",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "description": "A comprehensive library for creating, managing, and playing interactive quizzes, with AI generation and SCORM support.",
   "keywords": [
     "react",