added new requirements and fix UI bugs

src/modules/admin/pages/courses/lessons/EditLesson.jsx

@@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
 import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
+import CompletionRequirementBuilder from "@/modules/admin/components/courses/CompletionRequirementBuilder";
 
 const schema = z.object({
   title: z.string().min(1, "Title is required."),
@@ -33,7 +34,7 @@ function FieldError({ message }) {
 export default function EditLesson() {
   const navigate = useNavigate();
   const { courseId, unitId, lessonId } = useParams();
-  const { fetchLesson, updateLesson, course, unit, loading } = useCourses();
+  const { fetchLesson, updateLesson, course, unit, loading, fetchLessonRequirements, syncLessonRequirements } = useCourses();
   const { user } = useAuth();
   const [lessonTitle, setLessonTitle] = useState("");
 
@@ -172,6 +173,19 @@ export default function EditLesson() {
               </Button>
             </div>
           </form>
+
+          <div className="rounded-lg border bg-card p-6 space-y-4 mt-6">
+            <div>
+              <h2 className="text-sm font-semibold">Completion Requirements</h2>
+              <p className="text-xs text-muted-foreground">What a learner must do for this lesson to count as complete.</p>
+            </div>
+            <CompletionRequirementBuilder
+              entityType="lesson"
+              fetchFn={fetchLessonRequirements}
+              syncFn={syncLessonRequirements}
+              args={[courseId, unitId, lessonId]}
+            />
+          </div>
         </div>
       </div>