units,lesson as standalone

src/modules/admin/pages/library/units/AddLibraryUnit.jsx

@@ -1,5 +1,6 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useForm } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowLeft } from "lucide-react";
@@ -7,15 +8,20 @@ import { ArrowLeft } from "lucide-react";
 import { useLibrary } from "@/contexts/AdminLibraryContext";
 import { useAuth } from "@/contexts/AuthContext";
 import { PageMeta } from "@/contexts/MetadataContext";
+import api from "@/utils/api.util";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+} from "@/components/ui/select";
 
 const schema = z.object({
   title: z.string().min(1, "Title is required."),
   description: z.string().optional(),
+  subscription: z.string().optional(),
 });
 
 function FieldError({ message }) {
@@ -28,13 +34,22 @@ export default function AddLibraryUnit() {
   const { createUnit, loading } = useLibrary();
   const { user } = useAuth();
 
-  const { register, handleSubmit, formState: { errors } } = useForm({
+  const [tierCategories, setTierCategories] = useState([]);
+  useEffect(() => {
+    api.get("/admin/tiers/categories")
+      .then(({ data }) => setTierCategories((data.data ?? []).filter((c) => c.is_active)))
+      .catch(() => {});
+  }, []);
+
+  const { register, handleSubmit, control, setValue, formState: { errors } } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: { title: "", description: "" },
+    defaultValues: { title: "", description: "", subscription: "" },
   });
 
+  const watchedSubscr = useWatch({ control, name: "subscription" });
+
   const onSubmit = async (data) => {
-    const result = await createUnit({ ...data, createdBy: user?.user_id });
+    const result = await createUnit({ ...data, subscription: data.subscription || null, createdBy: user?.user_id });
     if (!result) return;
     navigate("/admin/units");
   };
@@ -71,6 +86,29 @@ export default function AddLibraryUnit() {
                 <Textarea id="description" placeholder="Optional description" rows={3} {...register("description")} />
               </div>
 
+              <div className="space-y-1.5">
+                <Label>Subscription</Label>
+                <Select
+                  value={watchedSubscr || "__open"}
+                  onValueChange={(val) => setValue("subscription", val === "__open" ? "" : val, { shouldDirty: true })}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="No tier gate" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__open">No tier gate (open)</SelectItem>
+                    {tierCategories.map((c) => (
+                      <SelectItem key={c.slug} value={c.slug}>
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Gates this unit directly, independent of any course it may later be attached to.
+                </p>
+              </div>
+
             </div>
 
             <div className="flex justify-end gap-3">